字体图标
Bootstrap 提供了免费的 263 个小图标，部分图标如下：
图标类不能和其它组件直接联合使用。应该创建一个嵌套的 span 标签，并将图标类应用到这个 span 标签上。
具体使用如下：
<span class="glyphicon glyphicon-yen"></span>
可以把它们应用到按钮、工具条中的按钮组、导航或输入框等地方。
代码：
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-trash"></span> Delete
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-send"></span> Send
</button>
下拉菜单
下拉菜单，就是点击一个元素或按钮，触发隐藏的列表显示出来。
下拉菜单的基本格式将通过以下实例讲解。
<div class="dropdown">
<button class="btn btn-default" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">首页</a>
</li>
...
</ul>
</div>
按钮和菜单需要包裹在 .dropdown 的容器里;
作为被点击的元素按钮需要设置 data-toggle="dropdown" ;
菜单部分设置 class="dropdown-menu" 才能自动隐藏并添加固定样式;
设置 class="caret"表示箭头，可上可下。
其他设置：
<!--设置向上触发-->
<div class="dropup">
<!--菜单项居右对齐(默认值是 dropdown-menu-left)-->
<ul class="dropdown-menu dropdown-menu-right">
<!--设置菜单的标题-->
<li class="dropdown-header">网站导航</li>
<!-- 设置菜单的分割线-->
<li class="divider"></li>
<!--设置菜单的禁用项-->
<li class="disabled"><a href="#">产品</a></li>
<!--菜单默认显示-->
<div class="dropdown open">
通过为下拉菜单的父元素设置 .dropup 类，可以让菜单向上弹出,请补充下面的代码以实现菜单的向上弹出。
<div class="dropup">
<button class="btn btn-default" data-toggle="dropdown">
Dropup
<span class="caret"></span>
</button>
<ul class="dropdown-menu" >
<li><a href="#">首页</a></li>
<li><a href="#">资讯</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">关于</a></li>
</ul>
</div>
按钮
单个按钮的运用有时候并不能满足我们的需求，常常会看到将多个按钮组合在一起使用，比如富文本编辑器里的一组小图标按钮等。
下面的表格总结了 Bootstrap 提供的使用按钮组的一些重要的类：
基本格式
下面的实例演示了上表中讨论到的 .btn-group 类的使用：
<div class="btn-group">
<button type="button" class="btn btn-default"> 左 </button>
<button type="button" class="btn btn-default"> 中 </button>
<button type="button" class="btn btn-default"> 右 </button>
</div>
按钮工具栏
将按钮组分组排列在一起 以下实例演示了 btn-toolbar 类并设置了按钮组大小:
<div class="btn-toolbar">
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-default">按钮1</button>
...
</div>
<div class="btn-group btn-group-sm">
...
</div>
</div>
嵌套
嵌套一个分组，须把 .btn-group 放入另一个 .btn-group 中。 具体实例如下:
<div class="btn-group">
<div class="btn-group">
...
</div>
</div>
垂直排列
设置按钮组垂直排列只需把水平分组的btn-group类名换成btn-group-vertical即可。如下所示：
<div class="btn-group-vertical">
两端对齐
使用 a 标签,设置两端对齐按钮组。
代码：
<div class="btn-group-justified">
<a type="button" class="btn btn-default">左</a>
<a type="button" class="btn btn-default">右</a>
</div>
如果使用的是button标签，则需要对每个按钮进行群组:
<div class="btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-default"> 左 </button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default"> 右 </button>
</div>
</div>
运行结果同上。
按钮组里面的每个按钮平分整个容器宽度。例如，如果你按钮组里面有五个按钮，那么每个按钮是20%的宽度。
按钮式下拉菜单
如需向按钮添加下拉菜单，只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可。
下拉菜单按钮
代码：
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">首页</a>
</li>
...
</ul>
</div>
分裂式按钮下拉菜单
分裂式按钮下拉菜单使用与下拉菜单按钮大致相同的样式，但是对下拉菜单添加了原始的功能。
分裂式按钮的左边是原始的功能，右边是显示下拉菜单的切换。
代码:
<div class="btn-group">
<button type="button" class="btn btn-danger"> 下拉菜单 </button>
<button type="button" class="btn btn-danger dropdown-toggle"data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">首页</a>
</li>
...
</ul>
</div>
向上弹出式
如果你的菜单在页面最底部，而这个菜单正好有一个下拉菜单，为了让用户有更好的体验，我们需要让下拉菜单向上弹出。
<div class="btn-group dropup">
使用方法如上所示，只需要在btn-group上添加dropup类名。
如果是普通向上弹出下拉菜单，只需在 dropdown 类名基础上追加 dropup 类名即可。
输入框
输入框组扩展自表单控件。
使用输入框组，我们可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。
向.form-control添加前缀或后缀元素的步骤如下：
把前缀或后缀元素放在一个带有.input-group类的 div 中；
在相同的 div 内，在.input-group-addon类的 span 内放置额外的内容；
把该 span 放置在 input 元素的前面或者后面。
下面是输入框组的一些具体实例:
在两侧添加文字
<div class="input-group input-group-lg">
#可以通过向 .input-group 添加相对表单大小的类（比如 .input-group-lg、input-group-sm）来改变输入框组的大小。
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
运行结果：
2. 左侧使用单选框
<div class="input-group">
<span class="input-group-addon">
<input type="radio">
</span>
<input type="text" class="form-control">
</div>
复选框同理,将 input 元素的 type 值由 radio 改为 checkbox 即可
3. 右侧使用按钮
当我们为输入框组添加按钮时,我们就不是添加 .input-group-addon 类，而需要使用.input-group-btn 来包裹按钮元素,如下面的实例所示：
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button type="button" class="btn btn-default"> 按钮 </button>
</span>
</div>
- 左侧使用按钮式下拉菜单或分裂式按钮下拉菜单
在输入框组中添加带有下拉菜单的按钮，只需要在一个 .input-group-btn类中包裹按钮和下拉菜单即可，如下所示：
<div class="input-group">
<div class="input-group-btn">
<!--Button and dropdown menu-->
</div>
<input type="text" class="form-control">
</div>
导航元素
Bootstrap 提供了一组导航组件，用于实现 Web 页面的栏目操作。
本节我们将讲解 Bootstrap 提供的用于定义导航元素的一些选项。
Bootstrap 中的导航组件都依赖同一个.nav类。
.nav样式不提供默认的导航样式，必须附加另外一个样式才会有效，比如nav-tabs、nav-pills之类。
下面是基本导航标签页的实例:
<ul class="nav nav-tabs">
<li class="active">
<a href="#">首页</a>
</li>
<li>
<a href="#">资讯</a>
</li>
<li>
<a href="#">产品</a>
</li>
</ul>
胶囊式（pills）导航
胶囊式（pills）导航其实现方法和nav-tabs类似，同样的结构，只需要把类名nav-tabs换成nav-pills即可：
<ul class="nav nav-pills">
运行结果：
垂直胶囊式导航
在实际运用当中，除了水平导航之外，还有垂直导航。制作垂直堆叠导航只需要在nav-pills的基础上添加一个nav-stacked类名即可：
<ul class="nav nav-pills nav-stacked">
运行结果如下：
带下拉菜单的导航
制作带下拉菜单的导航只需
将 li 当作父容器；
使用类名dropdown；
在 li 中嵌套另一个列表 ul。
具体实例如下：
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </a>
<ul class="dropdown-menu">
<li class="disabled">
<a href="#">菜单一</a>
</li>
<li>
<a href="#">菜单二</a>
</li>
</ul>
</li>
nav-justified：屏幕宽度大于 768px 时，设置导航两端对齐。
在 li 元素内添加 .disabled 类可实现禁用导航中的项目。效果为链接为灰色且没有鼠标悬停。
面包屑导航
面包屑导航（Breadcrumbs）是一种基于网站层次信息的显示方式。
以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置。
Bootstrap 中的面包屑导航（Breadcrumbs）是一个简单的带有 .breadcrumb 类的无序列表。
代码：
<ul class="breadcrumb">
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">课程列表</a>
</li>
<li class="active"> Bootstrap 3 </li>
</ul>
导航条
导航条（navbar）和上一节的导航（nav）有什么不同之处呢？
导航条和导航从外观上差别不是太多，但在实际使用中导航条要比导航复杂得多。
导航条(navbar)中有一个背景色、而且导航条可以是纯链接（类似导航）、表单以及表单和导航一起结合等多种形式。
在制作一个基础导航条时，主要分以下几步：
首先在制作导航的列表ul class='nav'上添加类名 navbar-nav；
在列表外部添加一个容器（nav），并且使用类名 navbar 和 navbar-default。
如下所示：
<nav class="navbar navbar-default">
<ul class="nav navbar-nav">
<li><a href="#">首页</a></li>
...
</ul>
</nav>
为了创建一个带有黑色背景白色文本的反色调导航条，只需要简单地向 .navbar 类添加 .navbar-inverse 类即可，如下所示：
<nav class="navbar navbar-inverse"> ... </nav>
带表单的导航条
导航条中使用表单只要在 navbar 容器中放置一个带有 navbar-form 类名的表单,如下：
<nav class="navbar navbar-inverse">
<!-- navbar-left 类让表单左浮动，更好实现对齐 -->
<form class="navbar-form navbar-left">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button type="submit" class="btn btn-default"> 提交 </button>
</span>
</div>
</form>
</nav>
通过添加 .navbar-left 和 .navbar-righ 工具类可以让导航链接、表单、按钮或文本对齐。
导航条中的按钮、文本和链接
框架提供了三种其他样式：
导航条中的按钮navbar-btn
导航条中的文本navbar-text
导航条中的普通链接navbar-link
导航中使用按钮：
<button class="btn btn-default navbar-btn">按钮</button>
对于不包含在 form>中的 button>元素，加上 .navbar-btn 后，可以让它在导航条里垂直居中。 .navbar-btn 可被使用在 a 和 input 元素上。但是，导航和导航条组件只支持 button 元素。
导航中使用一段文本：
<p class="navbar-text">我是一段文本</p>
非导航链接，一般需要置入文本区域内：
<a href="#" class="navbar-link">非导航链接</a>
固定导航条
如果我们希望将导航条固定在浏览器顶部或底部，Bootstrap 框架提供了两种固定导航条的方式：
将导航固定在顶部，下面的内容会自动上移
<nav class="navbar navbar-default navbar-fixed-top">
将导航固定在底部
<nav class="navbar navbar-default navbar-fixed-bottom">
