bootstrap 学习

栅栏

<div class=“container”>
<div class=“row”>
<div class=“col-md-1”>.col-md-1</div>
<!—由于这12个div都一样,所以这里省略了其他10个—>
<div class=“col-md-1”>.col-md-1</div>
</div>
<div class=“row”>
<div class=“col-md-8”>.col-md-8</div>
<div class=“col-md-4”>.col-md-4</div>
</div>
<div class=“row”>
<div class=“col-md-4”>.col-md-4</div>
<div class=“col-md-4”>.col-md-4</div>
<div class=“col-md-4”>.col-md-4</div>
</div>
<div class=“row”>
<div class=“col-md-6”>.col-md-6</div>
<div class=“col-md-6”>.col-md-6</div>
</div>
</div>

列偏移

<div class=“row”>
<div class=“col-md-4”>.col-md-4</div>
<div class=“col-md-4 col-md-offset-4”>.col-md-4 .col-md-offset4</div>
</div>
<div class=“row”>
<div class=“col-md-3 col-md-offset-3”>.col-md-3 .col-md-offset3</div>
<div class=“col-md-3 col-md-offset-3”>.col-md-3 .col-md-offset3</div>
</div>
<div class=“row”>
<div class=“col-md-6 col-md-offset-3”>.col-md-6 .col-md-offset3</div>
</div>

列排序

3.列嵌套
同样，栅格系统也支持列嵌套，即在一个列里再声明一个或者多个
行（row）。但是注意，内部所嵌套的row的宽度为100%时，就是当前外
部列的宽度。示例代码如下：
<div class=“row”>
<div class=“col-md-9”>
Level 1: .col-md-9
<div class=“row”>
<div class=“col-md-6”>Level 2: .col-md-6</div>
<div class=“col-md-6”>Level 2: .col-md-6 </div>
</div>
</div>
<div class=“col-md-3”></div>
</div>

列排序

4.列排序
列排序其实就是改变列的方向，也就是改变左右浮动，并且设置浮
动的距离。在栅格系统里，可以通过.col-md-push-*和.col-md-pull-*来实
现这一目的。先来看看效果示意图，如图2-6所示

表格

表格
源码文件：table.less
CSS文件：bootstrap.css 1401行开始
在表格组件里，Bootstrap提供了1种基础.table样式、4种附加样式
（.table-striped、.table-bordered、.table-hover、.table-condensed）以及一
个支持响应式布局的.table-responsive容器样式。

背景条纹表格，就是在现有.table样式的基础上再应用一个.tablestriped样式，其添加了隔行加背景色的设置。使用方式如下：

<table class=“table table-striped”>
</table>
带边框的表格

在该特效下，Bootstrap为表格所有的单元格提供了1条1像素宽的边
框。使用方式如下：

<table class=“table table-bordered”>
…
</table>
高亮
<table class=“table table-hover”>
…
</table>

响应式表格
随着响应式设计的大量需求，Bootstrap为表格也提供了一个响应式
设计的容器（.table-responsive样式），将.table-responsive样式包装
在.table样式外部即可创建响应式表格，其会在小屏幕设备上（小于768
像素）水平滚动。而当屏幕大于768像素宽度时，水平滚动条消失。示例
如下：

…

 基础表单 == Bootstrap对基础表单未做太多的定制化效果设计，默认都使用全局 设置，只是对表单内的fieldset、legend、label标签进行了设定，将这些元 素的margin、padding、border等进行了细化设置。详细请参考源码1854 行以后的代码。 如果在select、input、textarea元素上应用了.form-control样式，显示的 宽度会变成100%，并且placeholder的颜色都设置成了#999999。主要源码 如下： // 源码1689行

.form-control {
display: block;
width: 100%; /* 设置宽度是100% */
/* 省略部分设置 */
border: 1px solid #ccc; /* 边框设置 */
border-radius: 4px; /* 圆角设置*/
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, box-shadow easein-out .15s;
transition: border-color ease-in-out .15s, box-shadow easein-out .15s;
}
.form-control:focus {
border-color: #66afe9; /* 作用域得到焦点时的边框颜
色*/
outline: 0;
-webkit-boxshadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175,
233, .6);
boxshadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175,
233, .6);
}
.form-control:-moz-placeholder { color: #999;
/* placeholder的文本颜
色:moz浏览器*/}
.form-control::-moz-placeholder { color: #999;
/* placeholder的文本颜色:moz浏览器
*/ opacity: 1;}
.form-control:-ms-input-placeholder { color: #999;
/* placeholder的文本颜
色:IE浏览器*/}
.form-control::-webkit-input-placeholder { color: #999;
/* placeholder的文本颜
色:webkit浏览器*/}
使用方式如下：
<form>
<fieldset>
<legend>用户登录</legend>
<div class=“form-group”>
<label>登录账户</label>
<input type=“email” class=“form-control” placeholder=”请输
入你
的用户名或Email”>
</div>
<div class=“form-group”>
<label>密码</label>
<input type=“text” class=“form-control” placeholder=”请输入
你的密码”>
</div>
<div class=“checkbox”>
<label><input type=“checkbox”>记住密码</label>
</div>
<button type=“submit” class=“btn btn-default”>登录</button>
</fieldset>
</form>

运行效果如图3-20所示。
图3-20 普通表单运行效果
注意
在上例中，提示语label和input元素放在一个样式为.form-group的div
里了。.form-group样式提供了一个margin-bottom:15px的底部外边距，所
以可以很清晰地看到每一组控件。

form-group提供一个下部外边距，form-control提供整个元素沾满一行

内联表单

只需要在普通的form元素上
应用一个.form-inline样式

水平表单

要实现横向表单，不仅要应用上述样式，还要使用Bootstrap
预置的栅格类，以便将label和控件水平并排布局。由于.form-horizontal样
式改变了.form-group的行为，将其表现得像栅格系统中的行（row）一
样，因此就无需再使用.row样式了。示例如下：
<form class=“form-horizontal” role=“form”>
<div class=“form-group”>
<label for=“account” class=“col-sm-2 control-label”>用户名
</label>
<div class=“col-sm-10”>
<input type=“email” class=“form-control” id=” account ”
placeholder=”请输入你的用户名”>
</div>
</div>
<div class=“form-group”>
<label for=” password ” class=“col-sm-2 control-label”>密码
</label>
<div class=“col-sm-10”>
<input type=“password” class=“form-control” id=“password”
placeholder=”请输入你的密码”>
</div>
</div>
<div class=“form-group”>
<div class=“col-sm-offset-2 col-sm-10”>
<div class=“checkbox”><label><input type=“checkbox”>记住密码</
label></div>
</div>
</div>
<div class=“form-group”>
<div class=“col-sm-offset-2 col-sm-10”>
<button type=“submit” class=“btn btn-default”>登录</button>
</div>
</div>
</form>

小图标

小图标肯定是固定在输入框的右边的。要实
现这种效果，通常要解决两个问题：首先设置输入框父元素的定位方式
为相对定位，然后设置这种小图标的定位方式为绝对定位（并设置right
值）。
Bootstrap针对该功能提供了特殊的feedback样式，用于实现该效果。
其用法如下：
<div class=“form-group has-success has-feedback”>
<label class=“controllabel” for=“inputSuccess2”>Input with success</label>
<input type=“text” class=“form-control” id=“inputSuccess2” />
<span class=“glyphicon glyphicon-ok form-control-feedback”></span>
</div>

按钮

<!— 标准button —>
<button type=“button” class=“btn btn-default”>Default</button>
<!— 提供视觉加重，表示在一组button中，该按钮是最主要的button —>
<button type=“button” class=“btn btn-primary”>Primary</button>
<!— 表示成功或正使用的button —>
<button type=“button” class=“btn btn-success”>Success</button>
<!— 表示提示信息的button —>
<button type=“button” class=“btn btn-info”>Info</button>
<!— 表示需要进行某种行为的button —>
<button type=“button” class=“btn btn-warning”>Warning</button>
<!— 表示危险或错误行为的button —>
<button type=“button” class=“btn btn-danger”>Danger</button>
<!— 让button的行为看起来像链接一样 —>
<button type=“button” class=“btn btn-link”>Link</button>

btn相关元素的强大之处在于，它不仅能够支持普通的button元素，也
能够支持a元素和input元素，这些元素应用btn样式也能够产生同样的显
示效果。用法如下：
与活动状态一样，Bootstrap也提供了禁用状态按钮的设置，主要实
现将按钮的背景色做65%的透明处理。有两种方式可以禁用按钮，一种
是使用原始的disabled属性，一种是利用.disabled样式。两者的区别
是.disabled样式不禁止按钮的默认行为

文本样式

<p class=“text-muted”>JavaScript编程精解</p>
<p class=“text-primary”>JavaScript设计模式</p>
<p class=“text-success”>JavaScript启示录</p>
<p class=“text-info”>Backbone应用开发实战</p>
<p class=“text-warning”>深入理解Bootstrap3</p>
<p class=“text-danger”>编写可测试的JavaScript</p>

内容浮动

    内容浮动
    在平时制作页面的过程中，对于内容浮动，一般会有3种需求（左浮
    动、右浮动、居中对齐），另外还有一种清除浮动需求。
    对于左右浮动，分别定义了pull-left和pull-right样式。其源码如下：
    /* 源码 5650 行*/
    .pull-right { float: right !important; /*向右浮动*/ }
    .pull-left { float: left !important; /*向左浮动*/}
    而对于居中对齐，使用center-block样式即可，其定义原理是让左右
    外边距均为auto即可。源码定义如下：
    /* 源码 5645 行*/
    .center-block {
    display: block; /*将页面元素设置为
    块级元素*/
    margin-right: auto; /*左右居中显示*/
    margin-left: auto;
    }
    一般某一个元素在浮动以后，在紧接着的元素使用之前可以清除浮
    动，以避免布局错乱。清除浮动一般是设置元素的before伪类display为
    table（且content为空），并设置after伪类的clear为both。Bootstrap提供了
    一个clearfix样式用于清除浮动，其定义如下：
    /* 源码 5598 行*/
    .clearfix:before,
    .clearfix:after { display: table; content: ” ”;}
    .clearfix:after { clear: both;}
    查看CSS文件的5598行以后的代码可发现，清除浮动的代码有关有50
    行左右，主要是对其他一些组件所使用的样式也定义了清除浮动代码
    （而不用再次应用clearfix），比如为nav样式和modal-footer样式清除浮
    动，就可以避免后续元素的布局错乱。

响应式样式

响应式样式
源码文件：responsive-utilities.less
CSS文件：bootstrap.css 5679行开始
响应式设计可以适应不同尺寸的设备，它会根据不同尺寸的设备对
特定的元素进行显示和隐藏设置，同时响应式设计也可以区别打印模式
和普通浏览模式。
根据第2章介绍的响应式设计的思想，Bootstrap提供了8个样式，以
适配不同尺寸的屏幕。如图3-36所示是每个样式在不同尺寸下的显示和
隐藏情况。
上述样式的主要原理就是利用媒体查询的特性，对特定尺寸的屏幕
进行隐藏或显示的设置。比如，.visible-开头的样式表示仅在某尺寸时显
示，其他都隐藏；而.hidden样式则表示仅在某尺寸时隐藏，其他都显
示。
图3-36 响应式设计在不同尺寸下的隐藏和显示情况
关于具体的代码实现，请查看CSS文件5688行以后的源码。其主要就
是利用了如下媒体查询语法，对上述8个样式进行分别设置。
// 源码5688行
@media (max-width: 767px) {
/*在小于768像素的设备上的显示情况*/
}
@media (min-width: 768px) and (max-width: 991px) {
/*在768像素和992像素之间的设备上的显示情况*/
}
@media (min-width: 992px) and (max-width: 1199px) {
/*在992像素和1200像素之间的设备上的显示情况*/
}
@media (min-width: 1200px) {
/*在大于1200像素的设备上的显示情况*/
}
另外，Bootstrap利用了@media print语法，提供了分别对浏览器和打
印机进行隐藏和显示的设置，样式分别为：.visible-print和.hidden-print。
其作用如图3-37所示。
图3-37 对浏览器和打印机的隐藏和显示情况
具体实现源代码非常简单，读者可以自行阅读5804行后的源码。
注意
测试响应式的CSS样式可以在普通浏览器下进行（通过拖放浏览器改
变浏览器可视大小，即可得到相应的效果）。

组件

小图标

基本用法非常简单，在任何内联元素上应用所对应的样式
即可。示例如下：
<!— 第一种方式 —><i class=“glyphicon glyphicon-search”>
<!— 第二种方式 —><span class=“glyphicon glyphicon-search”>

应用场景
icon样式可以用在各种元素容器内，比如button元素、nav列表元素
等。例如，可以通过如下代码实现：
<div class=“btn-group”>
<a class=“btn btn-default btn-primary” href=”#”>
<span class=“glyphicon
glyphicon-user”></span>User</a>
<a class=“btn btn-default btn-primary dropdown-toggle” datatoggle=” href=”#”>
<span class=“caret”></span></a>
<ul class=“dropdown-menu”>
<li><a href=”#”><span class=“glyphicon glyphicon-pencil”>
</span>Edit</a></li>
<li><a href=”#”><span class=“glyphicon glyphicon-trash”>
</span>Delete</a></li>
<li><a href=”#”><span class=“glyphicon glyphicon-ban-circle”>
</span>Ban</a></li>
<li class=“divider”></li>
<li><a href=”#”>Make admin</a></li>
</ul>
</div>

下拉菜单

<div class=“dropdown”>
<ul class=“dropdown-menu” role=“menu” aria-labelledby=“dropdownMenu”>
<li><a tabindex=”-1” href=”#”>Action</a></li>
<li><a tabindex=”-1” href=”#”>Another action</a></li>
<li><a tabindex=”-1” href=”#”>Something else here</a></li>
<li class=“divider”></li>
<li><a tabindex=”-1” href=”#”>Separated link</a></li>
</ul>
</div>
上述代码的运行效果如图4-6所示。
图4-6 下拉菜单运行效果
从示例可以看出，.dropdown样式是大容器，.dropdown-menu是菜单li
元素的容器，而.divider样式在li元素上的显示效果是分隔符。

菜单标题

<div class=“dropdown open clearfix”>
<ul aria-labelledby=“dropdownMenu2” role=“menu” class=“dropdownmenu”>
<li class=“dropdown-header” role=“presentation”>翻译图书</li>
<li role=“presentation”>
<a href=”#” tabindex=”-1” role=“menuitem”>JavaScript
编程精解</a></li>
<li role=“presentation”>
<a href=”#” tabindex=”-1” role=“menuitem”>JavaScript
设计模式</a></li>
<li role=“presentation”>
<a href=”#” tabindex=”-1” role=“menuitem”>JavaScript
启示录</a></li>
<li role=“presentation”>
<a href=”#” tabindex=”-1” role=“menuitem”>Backbone
应用开发指南</a></li>
<li role=“presentation” class=“divider”></li>
<li role=“presentation” class=“dropdown-header”>原创图书</li>
<li role=“presentation”>
<a href=”#” tabindex=”-1” role=“menuitem”>深入理解
Bootstrap</a></li>
</ul>
</div>

按钮组

<!— 第一种方式 —>
<div class=“btn-group”>
<button type=“button” class=“btn btn-default”>Left</button>
<button type=“button” class=“btn btn-default”>Middle</button>
<button type=“button” class=“btn btn-default”>Right</button>
</div>
<!— 第二种方式 —>
<div class=“btn-group”>
<a class=“btn btn-default”>Left</a>
<a class=“btn btn-default”>Middle</a>
<a class=“btn btn-default”>Right</a>
</div>

按钮工具栏

<div class=“btn-toolbar”>
<div class=“btn-group”>…</div>
<div class=“btn-group”>…</div>
<div class=“btn-group”>…</div>
</div>

嵌套分组

使用的时候，只需要将dropdown下拉菜单外部包装一个div容器元
素，并在div元素上重新应用.btn-group样式，并且和普通的1、2、3按钮
放在同一级即可。示例如下：
<div class=“btn-group”>
<button class=“btn btn-default” type=“button”>首页</button>
<button class=“btn btn-default” type=“button”>个人简介</button>
<button class=“btn btn-default” type=“button”>作品</button>
<div class=“btn-group”>
<button data-toggle=“dropdown” class=“btn btn-default dropdowntoggle”
type=“button”> 图书<span class=“caret”></span>
</button>
<ul class=“dropdown-menu”>
<li><a href=”#”>JavaScript编程精解</a></li>
<li><a href=”#”>JavaScript设计模式</a></li>
<li><a href=”#”>JavaScript启示录</a></li>
</ul>
</div>
</div>
通过上述HTML代码可以发现，并没有在dropdown-menu父容器的div
上设置dropdown样式（因为该样式有position: relative;设置），这是因为
btn-group里也设置了该相对定位，所以可以省略dropdown样式。

垂直分组

<div class=“btn-group-vertical”>
<button class=“btn btn-default” type=“button”>首页</button>
<button class=“btn btn-default” type=“button”>个人简介</button>
<button class=“btn btn-default” type=“button”>作品</button>
</div>

自适应分组

自适应分组
.btn-group-justified样式提供了一个特殊的功能，就是在一个.btngroup容器上，如果使用了该样式，则所有的按钮都会100%充满容器元
素，即容器元素宽高有多少，按钮的宽高就会变成多少，效果如图4-18
所示。
图4-18 图4-18 自适应分组运行效果
<div class=“btn-group btn-group-justified”><!—这回，又回到了附加样式的设计思
想了—>
<a role=“button” class=“btn btn-default”>左</a>
<a role=“button” class=“btn btn-default”>中</a>
<a role=“button” class=“btn btn-default”>右</a>
</div>
自适应分组的原理主要是利用了CSS的display: table和display: tablecell特性，这两个特性正如第一章CSS基础语法里讲的，主要是模拟实现
table的功能，能够解决所有在使用绝对定位和浮动定位进行多列布局时
所遇到的问题

组合式下拉菜单

组合式下拉菜单其实就是普通的下拉菜单，只不过将触发元素从a元
素换成了button元素（其实也可以在a元素上应用.btn样式实现）。唯一不
同的是外部容器的样式从.dropdown换成了.btn-group。
通过下拉菜单章节的内容可以知道，下拉菜单需要满足一个特殊的
需求，那就是必须有position: relative;样式的定义（如.dropdown样式）。
而通过源码可以看出，新的.btn-group正好也满足该需求，所以简单替换
成.btn-group样式即可实现的需要的效果。
示例源码如下：
<div class=“btn-group”>
<button type=“button” class=“btn btn-success dropdown-toggle” datatoggle=
“dropdown”>
Success <span class=“caret”></span>
</button>
<ul class=“dropdown-menu”>
<li><a href=”#”>Action</a></li>
<li><a href=”#”>Another action</a></li>
<li><a href=”#”>Something else here</a></li>
<li class=“divider”></li>
<li><a href=”#”>Separated link</a></li>
</ul>
</div>

分离式下拉菜单

分离式下拉菜单
大家在阅读上一小节讲解的组合式下拉菜单的时候，可能会发现，
箭头是包含在按钮内部的，即：不管是单击按钮还是箭头，都会触发弹
出事件。但是，往往有时候开发人员可能需要按钮和箭头分离的功能，
即单击箭头的时候弹出菜单，而单击按钮的时候可以做其他的事情。这
就要求我们实现如图4-20所示效果的菜单。
图4-20 分离式下拉菜单运行效果
通过前面学到的知识，我们可以猜想，既然单击事件是通过设置
data-toggle=“dropdown”和data-target=””来触发执行的，所以完全可以让
箭头单独成为一个按钮，而原来的按钮继续保持，这样两个按钮排放在
一起，只需要处理按钮间的圆角即可。而在上一节讲解按钮组的时候就
已经知道多个按钮间是没有圆角的了。
所以HTML代码就自然产生了。
<div class=“btn-group”>
<button type=“button” class=“btn btn-danger”>保持原来的按钮
</button>
<button type=“button” class=“btn btn-danger dropdowntoggle” datatoggle=“dropdown”>
<span class=“caret”></span>
</button>
<ul class=“dropdown-menu”>
<li><a href=”#”>…</a></li>
<li class=“divider”></li>
<li><a href=”#”>…</a></li>
</ul>
</div>

向上弹起列表

在有些特殊情况下，网页上的下拉菜单需要设置向上弹出的方法
（暂且称为上弹项），使用的时候和普通的下拉菜单相比只要多附加一
个.dropup样式即可。示例代码如下：
<div class=“btn-group dropup”>
<button type=“button” class=“btn btn-success”>Dropup</button>
<button type=“button” class=“btn btn-success dropdowntoggle” data-toggle=
“dropdown”>
<span class=“caret”></span>
</button>
<ul class=“dropdown-menu”>
<!— 具体菜单项 —>
</ul>
</div>
上述代码的运行效果如图4-22所示。
图4-22 向上弹起的下拉菜单运行效果
CSS实现方式主要是设置.dropdown-menu样式容器的bottom为100%
（即靠着上边框，向上方向弹出）。
// 源码3106行
.dropup .dropdown-menu,
.navbar-fixed-bottom .dropdown .dropdown-menu {
top: auto; /* 高度自适应 */
bottom: 100%; /* 距离dropup样式的元素底部100%的高度，即靠着上边框，向上方向弹
出 */
margin-bottom: 1px;
}

输入框组

<div class=“input-group”>
<span class=“input-group-addon”>$</span>
<input type=“text” class=“form-control”><!— 这里的input，必须使用formcontrol
样式才行 —>
<span class=“input-group-addon”>.00</span>
</div>
按钮输入框
<div class=“row”>
<div class=“col-lg-6”>
<div class=“input-group”>
<span class=“input-group-btn”><button class=“btn btndefault” type=
“button”>Go!</button></span>
<input type=“text” class=“form-control”>
</div>
</div>
<div class=“col-lg-6”>
<div class=“input-group”>
<input type=“text” class=“form-control”>
<span class=“input-group-btn”><button class=“btn btndefault” type=
“button”>Go!</button></span>
</div>
</div>
</div>

导航

选项卡导航

选项卡导航是最常用的一种导航方式，尤其是在多内容编辑的时
候，需要通过选项卡进行分组显示，其效果如图4-29所示。
图4-29 选项卡运行效果
上述效果的第一个菜单“主页”是当前高亮菜单项（.active样
式），“作品”菜单项是禁用状态（.disabled样式）。实现方式如下：
<ul class=“nav nav-tabs ”>
<li class=“active”><a href=”#”>主页</a></li>
<li><a href=”#”>个人信息</a></li>
<li class=“disabled”><a href=”#”>作品</a></li>
<li><a href=”#”>图书</a></li>
</ul>

胶囊式选项卡导航

同样是上述示例代码，将.nav-tabs样式替换为.nav-pills样式，即可变
换成完全不同的效果，当前.active的菜单会进行背景色高亮显示。示例
代码如下：
<ul class=“nav nav-pills ”>
<li class=“active”><a href=”#”>主页</a></li>
<li><a href=”#”>个人信息</a></li>
<li class=“disabled”><a href=”#”>作品</a></li>
<li><a href=”#”>图书</a></li>
</ul>

堆叠式导航

所谓堆叠式导航，是将普通的导航菜单垂直堆放而已。比如，高亮
导航的堆叠效果如图4-31所示。
图4-31 堆叠式导航运行效果
应用该功能的时候，只需要在nav-pills的基础上再附加一个.navstacked样式即可。示例如下：
<ul class=“nav nav-pills nav-stacked”>
<li class=“active”><a href=”#”>主页</a></li>
<li><a href=”#”>个人信息</a></li>
<li><a href=”#”>作品</a></li>
<li><a href=”#”>图书</a></li>
</ul>
堆叠式导航的原理主要是，去除.nav-pills样式的浮动显示（即默认不
设置浮动，让其垂直摆放），然后设置上下两个li元素的间距即可实现图
4-31的效果。

二级导航实现

一般网站可能都会有二级导航菜单，而前面小节讲解的都是一级菜
单。那如何实现二级导航菜单呢？
可能会有部分读者会发现，将普通导航里的li元素作为父元素容器，
内部包含Dropdown下拉菜单的内容是否就可以实现类似的功能？我们来
试试在nav-tabs上是否可以实现。示例如下：
<ul class=“nav nav-tabs”>
<li class=“active”><a href=”#”>Home</a></li>
<li><a href=”#”>Profile</a></li>
<li><a href=”#”>Messages</a></li>
<li class=“dropdown”>
<a class=“dropdown-toggle” datatoggle=“dropdown” href=”#”>Dropdown <span
class=“caret”></span></a>
<ul class=“dropdown-menu”>
<li><a tabindex=”-1” href=”#”>二级菜单1</a></li>
<li><a tabindex=”-1” href=”#”>二级菜单2</a></li>
</ul>
</li>
</ul>

基础导航条

基础导航条是在普通导航的基础上进行改进实现的，但实现原理复
杂得多。我们先来看一个普通的例子，首先在普通导航的ul元素上应
用.navbar-nav样式，然后在外部父元素容器上应用.navbar样式以
及.navbar-default样式即可实现。示例代码如下：
<nav class=“navbar navbar-default” role=“navigation”>
<div class=“navbar-header”>
<a class=“navbar-brand” href=”#”>Brand</a>
</div>
<ul class=“nav navbar-nav”>
<li class=“active”><a href=”#”>active</a></li>
<li><a href=”#”>Link</a></li>
<li class=“disabled”><a href=”#”>disabled</a></li>
<li><a href=”#”>Link</a></li>
</ul>
</nav>

.navbar-form

使用方式是，在.navbar容器内放置form元素，然后在form元素上应
用.navbar-form样式即可。同时左右浮动的样式（.navbar-left和.navbarright）也可以使用，以便控制左右对齐。示例如下：
<nav class=“navbar navbar-default” role=“navigation”>
<div class=“navbar-header”><a class=“navbarbrand” href=”#”>Brand</a></div>
<form class=“navbar-form navbar-left” role=“search”>
<div class=“form-group”><input type=“text” class=“formcontrol”
placeholder=“Search”></div>
<button type=“submit” class=“btn btn-default”>左按钮</button>
</form>
<form class=“navbar-form navbar-right” role=“search”>
<div class=“form-group”><input type=“text” class=“formcontrol”
placeholder=“Search”></div>
<button type=“submit” class=“btn btn-default”>右按钮</button>
</form>
</nav>

导航条中的项进行左右浮动

在导航条的各种菜单项容器（如ul、p等元素）上设置.navbar-left样
式或navbar-right样式，即可让该容器元素左右浮动。这些样式是.pull-left
和.pull-right的mixin版本，但是它们被限定在了媒体查询中，这样可以更
容易地在各种尺寸的屏幕上处理导航条组件。示例代码如下：
<nav class=“navbar navbar-default” role=“navigation”>
<div class=“navbar-header”>
<a class=“navbar-brand” href=”#”>Brand</a>
</div>
<p class=“navbar-text navbar-left”>左浮动</p>
<p class=“navbar-text navbar-right”>右浮动</p>
</nav>

顶部固定或底部固定

很多情况下，设计师都想让导航条固定在某个位置上。比如最顶部
或者最底部。Bootstrap提供了两个强有力的样式支持这一特性，分别
是：.navbar-fixed-top支持最顶部固定，.navbar-fixed-bottom支持最底部固
定。示例用法如下：
<!— 顶部固定 —>
<div class=“navbar navbar-default navbar-fixed-top”>
…
</div>
<!— 底部固定 —>
<div class=“navbar navbar-default navbar-fixed-bottom”>
…
</div>
功能虽然强大，但实现原理却非常简单，主要是利用了position属性
为fixed（绝对定位）的特性，然后设置元素容器的top或者bottom值为0
即可。具体源码如下：
// 源码3724行
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed; /* 固定定位 */
right: 0; /* 左右不留空隙 */
left: 0;
z-index: 1030; /* 加大z-inedx，确保导航条在最上
边，但小于modal弹窗
的1040/1050 */
}
@media (min-width: 768px) { /*普通宽屏浏览器下才取消圆角*/
.navbar-fixed-top,
.navbar-fixed-bottom {
border-radius: 0; ; /* 无圆角 */
}
}
.navbar-fixed-top {
top: 0; /* 固定在最顶部显示 */
border-width: 0 0 1px; /* 左右1像素边框 */
}
.navbar-fixed-bottom {
bottom: 0; /* 固定在最底部显示 */
margin-bottom: 0; /* 底部不留空隙 */
border-width: 1px 0 0; /* 上下1像素边框 */
}
运行之后，读者可能会发现，导航条位置虽然固定了，但却带来一
个问题，就是在顶部固定的情况下，页面最顶部的其他内容被遮盖住了
（或者底部固定的情况下，网页最底部的内容也被遮盖住了）。原因很
简单，就是fixed定位，网页最开头的元素（不管是否在导航条后面）在
显示的时候都会从最顶部开始（0，0），然后导航条通过z-index覆盖在
上面。要解决这个问题，需要在body上设置padding值。由于默认的
navbar高度是50px，所以一般padding值设置为70px即可。示例如下：
<!— 顶部固定的时候设置如下 —>
body { padding-top: 70px; }
<!— 底部固定的时候设置如下 —>
body { padding-bottom: 70px; }

响应式导航条

<div class=“navbar navbar-default”>
<div class=“navbar-header”>
<!— .navbar-toggle样式用于toggle收缩的内容,即：navcollapse collapse
样式所在的元素 —>
<button type=“button” class=“navbar-toggle” datatoggle=“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>
<!— 确保无论是宽屏还是窄屏，navbar-brand都会显示 —>
<a class=“navbar-brand” href=”#”>Brand</a>
</div>
<!— 屏幕宽度小于768像素时，该div内的内容默认都会隐藏（通过单击icon-bar所在的
图标，
可以再展开）；大于768像素时默认显示 —>
<div class=“collapse navbar-collapse navbar-responsive-collapse ”>
<ul class=“nav navbar-nav”>
<li class=“active”><a href=”#”>主页</a></li>
<li><a href=”#”>作品</a></li>
<li><a href=”#”>图书</a></li>
<li class=“dropdown”>
<a data-toggle=“dropdown” class=“dropdown-toggle” href=”#”>
下拉菜单 <b class=“caret”></b></a>
<ul class=“dropdown-menu”>
<li><a href=”#”>子菜单1</a></li>
<li><a href=”#”>子菜单2</a></li>
<!—省略菜单 —>
</ul>
</li>
</ul>
</div>
</div>

面包屑导航条

<ul class=“breadcrumb”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Library</a></li>
<li class=“active”>Data</li>
</ul>

分页导航

页码分页

<ul class=“pagination”>
<li><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>
<li><a href=”#”>5</a></li>
<li><a href=”#”>»</a></li> <!— 下一页 —>
</ul>

翻页

<ul class=“pager”>
<li><a href=”#”>上一页</a></li>
<li><a href=”#”>下一页</a></li>
</ul>

label标签

<h1>10个最好的JavaScript动画库和开发框架<span class=“label”>New</span></h1>
<h2>10个最好的JavaScript动画库和开发框架<span class=“label”>New</span></h2>
<h3>10个最好的JavaScript动画库和开发框架<span class=“label”>New</span></h3>
<h4>10个最好的JavaScript动画库和开发框架<span class=“label”>New</span></h4>
<h5>10个最好的JavaScript动画库和开发框架<span class=“label”>New</span></h5>
<h6>10个最好的JavaScript动画库和开发框架<span class=“label”>New</span></h6>

徽章

Inbox 42

大屏幕展播

<div class=“jumbotron”>
<h1>Hello, world!</h1>
<p>…</p>
<p><a class=“btn btn-primary btn-large”>Learn more</a></p>
</div>

警告框

默认警告框
默认的警告框是用带有alert样式的div元素容器包含的（p元素也可
以），内部可选地添加一个关闭按钮button元素，只不过关闭按钮要确保
设置button元素的属性值data-dismiss=“alert”，原因是警告框的关闭功能
是通过JavaScript检测该属性实现的（具体原理在5.8节会讲到）。示例如
下：
<div class=“alert”>
<button type=“button” class=“close” data-dismiss=“alert”>×</button>
<strong>Warning!
</strong> Best check yo self, you’re not looking too good.
</div>

面板

带有头和尾的面板

基础面板看着稍微有点寒酸，所以Bootstrap作者又为其定义了面板
头（panel-heading）和面板尾（panel-footer）样式，其功能是高亮显示相
对应的面板头和面板尾。示例代码下：
<div class=“panel panel-default”>
<div class=“panel-heading”>面板header</div>
<div class=“panel-body”>
这里是面板内容
</div>
<div class=“panel-footer”>面板footer</div>
</div>

面板与表格进行嵌套

一般在使用面板的时候，往往可能会在主区域（panel-body）内放很
多内容，比如图片、表格等。来看一下放表格的效果，示例代码如下：
<div class=“panel panel-default”>
<div class=“panel-heading”>Panel heading</div>
<div class=“panel-body”>
<p>…</p>
<table class=“table table-bordered”>
…
</table>
</div>
</div>