Bootstrap常用组件（二）
一、字体图标
1、如何使用字体图标
出于性能的考虑，所有图标都需要一个基类和对应每个图标的类。把下面的代码放在任何地方都可以正常使用。注意，为了设置正确的内补（padding），务必在图标和文本之间添加一个空格
2、不要和其他组件混合使用
图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。
应该创建一个嵌套的 <span> 标签，并将图标类应用到这个 <span> 标签上
(1)在css文件的同级目录中包含字体文件目录–fonts
(2)使用标签加入字体图标
<span class="glyphicon glyphicon-ok"></span>
3、只对内容为空的元素起作用
图标类只能应用在不包含任何文本内容或子元素的元素上
二、下拉菜单
1、描述
- 用于显示链接列表的可切换、有上下文的菜单
- 将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里
- 通过为下拉菜单的父元素设置 .dropup 类，可以让菜单向上弹出（默认是向下弹出的）
2、对齐 - 默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。
- 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐。
- 为 .dropdown-menu 添加 .dropdown-menu-left 类可以让菜单左对齐。
- 举例：
<ul class= “dropdown-menu dropdown-menu-right”></ul>
3、分割线 - 为下拉菜单添加一条分割线，用于将多个链接分组
- 举例：
<li role="separator" class="divider"></li>
4、禁用的菜单项 - 为下拉菜单中的
- 元素添加 .disabled 类，从而禁用相应的菜单项
- 实例：
<li class=“disabled”><a href=“#”></a></li>
三、按钮组
1、描述：通过按钮组容器 .btn-group 把一组按钮放在同一行里。按钮组中，除第一个和最后一个按钮外，中间按钮没有圆角
2、按钮工具栏
把一组 <div class="btn-group"> 组合进一个 <div class="btn-toolbar"> 中就可以做成更复杂的组件
3、尺寸
- 只要给 .btn-group 加上 .btn-group-* 类，就省去为按钮组中的每个按钮都赋予尺寸类了，如果包含了多个按钮组时也适用
- .btn-group-lg：应用于大型按钮组
- .btn-group：应用于一般按钮组
- .btn-group-sm：应用于小型按钮组
- .btn-group-xs：应用于超小型按钮组
4、嵌套
想要把下拉菜单混合到一系列按钮中，只须把 .btn-group 放入另一个 .btn-group 中
5、垂直排列：让一组按钮垂直堆叠排列显示而不是水平排列。分列式按钮下拉菜单不支持
6、按钮式下拉菜单
（1）描述：把任意一个按钮放入 .btn-group 中，然后加入适当的菜单标签，就可以让按钮作为菜单的触发器了。按钮式下拉菜单依赖下拉菜单插件 ，因此需要将此插件包含在你所使用的 Bootstrap 版本中
（2）单按钮下拉菜单:只要改变一些基本的标记，就能把按钮变成下拉菜单的开关
(3)分裂式按钮下拉菜单
分裂式按钮下拉菜单也需要同样的改变一些标记，但只是多一个分开的按钮
（4）按钮尺寸 - 按钮式下拉菜单适用所有尺寸的按钮
- .btn-lg：应用于大型按钮
- .btn-sm：应用于小型按钮
- .btn-xs：应用于超小型按钮
（5）向上弹出式菜单：给父元素添加 .dropup 类就能使触发的下拉菜单朝上方打开
四、输入框组
1、描述
通过在文本输入框 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。为 .input-group 赋予 .input-group-addon 类，可以给 .form-control 的前面或后面添加额外的元素。
只支持文本输入框 ，不能用于和元素
2、尺寸
为 .input-group 添加相应的尺寸类，其内部包含的元素将自动调整自身的尺寸。尺寸类包括：.input-group-lg和.input-group-sm
3、作为额外元素的按钮
为输入框组添加按钮需要额外添加一层嵌套，不是 .input-group-addon，而是添加 .input-group-btn 来包裹按钮元素。由于不同浏览器的默认样式无法被统一的重新赋值，所以才需要这样做
五、导航
1、描述
Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式
2、普通标签页(选项卡)
注意 .nav-tabs 类依赖 .nav 基类
3、胶囊式标签页
- HTML 标记相同，但使用 .nav-pills 类
- 胶囊是标签页也是可以垂直方向堆叠排列的。只需添加 .nav-stacked 类
4、两端对齐
在大于 768px 的屏幕上，通过 .nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上，导航链接呈现堆叠样式
5、禁用的链接 - 对任何导航组件（标签页、胶囊式标签页），都可以添加 .disabled 类，从而实现链接为灰色且没有鼠标悬停效果
- 链接功能不受到影响。这个类只改变
<a> 的外观，不改变功能。可以自己写 JavaScript 禁用这里的链接
6、带下拉菜单的标签页
7、默认导航条
导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式
8、品牌图标
将导航条内放置品牌标志的地方替换为 <img> 元素即可展示自己的品牌图标。由于 .navbar-brand 已经被设置了内补（padding）和高度（height），你需要根据自己的情况添加一些 CSS 代码从而覆盖默认设置
9、表单 - 将表单放置于 .navbar-form 之内可以呈现很好的垂直对齐，并在较窄的视口（viewport）中呈现折叠状态， 使用对齐选项可以规定其在导航条上出现的位置
- 使用 .navbar-left 或 .navbar-right 可以实现表单左对齐或右对齐
10、按钮
对于不包含在 <form> 中的 <button> 元素，加上 .navbar-btn 后，可以让它在导航条里垂直居中
11、文本
把文本包裹在 .navbar-text中时，为了有正确的行距和颜色，通常使用 <p> 标签
12、导航条定位 - 添加 .navbar-fixed-top 类可以让导航条固定在顶部
- 添加 .navbar-fixed-bottom 类可以让导航条固定在底部
- 还可包含一个 .container 或 .container-fluid 容器，从而让导航条居中，并在两侧添加内补（padding）
- 添加 .navbar-inverse 可以实现反色导航条
13、路径导航 - 在一个带有层次的导航结构中标明当前页面的位置
- 各路径间的分隔符已经自动通过 CSS 的 :before 和 content 属性添加了
- 给
<ol>或<ul>添加 .breakcrumb 可以实现“面包屑”效果
六、分页
1、默认分页
- 将分页类 .pagination 添加到
- 添加 .disabled 类可以实现禁用状态
- 添加 .active 类可以实现激活状态
2、翻页效果
给<ul>添加 .pager 类，可以实现“上一页”和“下一页”效果
给<li>添加 .previous 和 .next 可以实现两端对齐
七、BootStrap其他组件
1、标签：通过类样式 .label 和 .label-primary 可以实现标签的效果和样式
2、徽章：给链接、导航等元素嵌套 <span class="badge"> 元素，可以很醒目的展示新的或未读的信息条目
3、缩略图
通过缩略图组件扩展 Bootstrap 的 栅格系统，可以很容易地展示栅格样式的图像、视频、文本等内容。使用 .thumbnail 可以实现缩略图效果
4、警告框
（1）描述
警告框组件通过提供一些灵活的预定义消息，为常见的用户动作提供反馈消息。
将任意文本和一个可选的关闭按钮组合在一起就能组成一个警告框，.alert 类是必须要设置的，另外我们还提供了有特殊意义的4个类（例如，.alert-success、.alert-info、.alert-warning、.alert-danger），代表不同的警告信息
（2）可关闭的警告框
为警告框添加一个可选的 .alert-dismissible 类和一个关闭按钮
（3）警告框中的链接
用 .alert-link 工具类，可以为链接设置与当前警告框相符的颜色
|