Bootstrap网页基础

最新推荐文章于 2024-10-19 16:42:36 发布

Vic·Tory

最新推荐文章于 2024-10-19 16:42:36 发布

阅读量653

点赞数

CC 4.0 BY-SA版权

分类专栏： WEB 文章标签： Bootstrap

本文链接：https://blog.youkuaiyun.com/theVicTory/article/details/61912346

WEB 专栏收录该内容

43 篇文章

订阅专栏

本文详细介绍了Bootstrap框架的各种组件和样式设置方法，包括标题、文本、列表、表格、表单、按钮、图片、图标、网格系统、导航条、下拉菜单、进度条等元素的使用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Bootstrap框架

标题	<h1>或者使用类.h1
副标题	<h1>标题<small>副标题</small></h1>
强调文本	class="lead"
文本颜色	使用不同类：.text-danger(危险褐色).text-info(信息浅蓝).text-primary(主要蓝色).text-success(成功绿色)
文本对齐	类名.text-left左对齐， .text-center：居中对齐，text-justify两段对齐
无装饰列表	Class=”list-unstyled”
水平列表	Class=”list-inline”
代码	<code>单行代码</code><pre>多行代码</pre> <kbd>模仿键盘风格</kbd> <pre class=”pre-scrollable”>固定代码区域大小</pre>
表格<table>	class=”table-hover”	鼠标悬浮高亮
	class=”table”	基础表格样式
	class=”table-striped”	斑马线表格
	class=”table-bordered”	带外围边框表格
	class=”table-hover”	悬浮高亮
	class=”table-condensed”	紧凑型的表格
	class=”table-responsive”	响应式表格
表单<form>	Class=”form-horizontal”	水平排列
	Class=”form-inline”	内联表单，在一行显示
	class=”form-control”	表单的元素都要添加这个类来保证控制正确
	class=”input-lg/sm”	控制input(表单元素)比原来更大/小
	<div class=”clo-xs-n”>	n为数字，控制宽度
	<formtag disabled>	禁用元素
	<div class=”has-success/warning/error”>	表单显示成功、警告、错误状态，加class=”has-feedback”后会有图标
	<span class=”help-block”>	添加提示信息，随不同div状态显示不同效果
按钮<button>	<button class=”btn”>	基本按钮，不仅适用于button，还支持其他标签
	Class=”btn btn-default”	默认按钮
	Class=”btn btn-success/primary/info/warning/danger/link”>	定制按钮绿色/蓝色/浅蓝/黄色/红色/链接按钮
	Class=”btn btn-lg/sm”	控制按钮大/小
	Class=”btn btn-block”	按钮充满容器
	Class=”disabled”	元素禁用的样式
	<div class=”btn-group”>	把按钮放到一个组容器里
	<div class="btn-group-vertical">	按钮组垂直显示
	<div class=”btn-group-justified”>	按钮等分显示
图像<img>	Class=”img-rounded/circle/responsive/thumbnail”	圆角、圆形、响应式、缩略图
缩略图	Class=”thumbnail”	缩略图容器
缩略图	Class=”caption”	缩略图相关文本
图标	<span class="glyphicon glyphicon-search/plus"></span>	glyphicons.com网站提供的图标库，搜索/加号图标
网格系统	<div class="container"> <div class="row"> <div class="col-md-4">.col-md-4</div><div class="col-md-8">.col-md-8</div> </div>	行row包含在container中，子对象为列col-md-n，控制列宽度，一行所有列和为12
下拉菜单	Class=”divider”	分割线
	Class=”dropdown-header”	菜单标题
	Class=”pull-left/right”	菜单与父元素左/右对齐
导航	Class=”nav nav-tab”	标签型导航可以附加”active”,”disabled”类
	Class=”nab nav-pills”	圆角导航
	Class=”breadcrumbs”	面包屑导肮
导航条	Class=”navbar”	导航条外部容器
	Class=”navbar-fixed-top”	导航条固定在页面上方
	Class=”navbar-header”	导航条标题
	Class=”navbar-navr”	导航条内容
	Class=”navbar-form”	导航条表单
	Class=”navbar-inverse”	黑色导航条
分页导航	Class=”pagination”	分页导航
	Class=”pager”	翻页导航
标签	Class=”label label-danger”	错误标签
徽章	Class=”bage”	小图标徽章
警示框	Class=”alert alert-success/info/danger/warning	绿色/蓝色/红色/黄色警示框
警示框	Class=”dismissable”并且添加按钮<button class=”close” data-dismiss=”alert”>×</button>	可关闭的警示框
进度条	<div class=”progress”><div class=”progress-bar”>条上显示内容</div></div>
	外层class=”progress”内层class=”progress-bar”	基本进度条，通过设置内层width属性来表示进度
	Class=”progress-bar-success/info/warning/danger”	内层，绿色/蓝色/黄色/红色进度条，可以设置多个内层叠放显示
	Class=”progress-striped”	外层，条纹进度条
	Class=”progress-striped active”	外层，动态进度条
媒体对象	Class=”media”
媒体对象	Class=”media-list”内层class=”media”	媒体对象列表
列表组	Class=”list-group”内层class=”list-group-item”
列表组	class="list-group-item list-group-item-success/ifo/warning/danger"	绿色/蓝色/黄色/红色列表
面板	外层Class=”panel panel-default”	默认面板
	内层clas=”panel-heading/body/footer”	内层面板的头、主体、底部
	外层Class=”panel panel-primary/success/info/warning/danger”	蓝色/绿色/浅蓝/黄色/红色面板

下面记录一些例子:

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Bootstrap实例</title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<!--下拉菜单-->
<div class="dropdown"><!--使用一个名为“dropdown”的容器包裹了整个下拉菜单元素，向上为dropup-->
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
        下拉菜单
        <span class="caret"></span><!--三角-->
    </button><!--使用了一个<button>按钮做为父菜单，并且定义类名“dropdown-toggle”和
                自定义“data-toggle”属性-->
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <!--下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu”-->
        <li><a href="#">下拉菜单项</a></li>
        <li><a href="#">下拉菜单项</a></li>
        <li><a href="#">下拉菜单项</a></li>
        <li><a href="#">下拉菜单项</a></li>
    </ul>
</div>

<!--导航条-->
<div class="navbar navbar-default">
    <div class="navbar-header"><!--导航条标题-->
        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
            <span class="sr-only">Toggle Navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="##" class="navbar-brand">网站名</a>
    </div>
    <ul class="nav navbar-nav"><!--导航条内容-->
        <li class="active"><a href="##">网站首页</a></li>
        <li class="dropdown"><!--二级菜单-->
            <a href="##" data-toggle="dropdown" class="dropdown-toggle">导航1
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a href="##">导航1选项1</a></li>
                <li><a href="##">导航1选项2</a></li>
                <li class="disabled"><a href="##">导航1选项3</a></li>
            </ul>
        </li>
        <li><a href="##">导航2</a></li>
        <li><a href="##">导航3</a></li>
        <li><a href="##">导航4</a></li>
    </ul>
    <form action="##" class="navbar-form navbar-left"><!--导航条搜索框-->
        <div class="form-group">
            <input type="text" class="form-control" placeholder="请输入关键词" />
        </div>
        <button type="submit" class="btn btn-default">搜索</button>
    </form>
</div>

<!--响应式导航条-->
<div class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
            <!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
            <span class="sr-only">Toggle Navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 -->
        <a href="##" class="navbar-brand">网站标题</a>
    </div>
    <div class="collapse navbar-collapse navbar-responsive-collapse">
        <!-- 屏幕宽度小于768px时，容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，展开。 -->
        <ul class="nav navbar-nav">
            <li class="active"><a href="##">网站首页</a></li>
            <li><a href="##">导航1</a></li>
            <li><a href="##">导航2</a></li>
            <li><a href="##">导航3</a></li>
            <li><a href="##">导航4</a></li>
        </ul>
    </div>
</div>

<!--表单提示信息-->
    <div class="form-group has-success has-feedback">
        <label class="control-label" for="inputSuccess1">成功状态</label>
        <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
        <span class="help-block">你输入的信息是正确的</span>
    </div>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>