一、Glyphicons字体图标
1、使用
（1）图标和文本之间要加
空格
（2）不
要和其他组件混合使用，要创建一个嵌套的标签，将图标类用到它上面
（3）只对
内容为空的元素起作用
（3）改变图标
字体文件的位置： . . /fonts/
如果修改位置，应在Less源码文件中修改@icon-font-path和/或@icon-font-name变量
利用Less编译器提供的相对URL地址选项
修改预编译CSS文件中的url()地址
2、例子
Star
二、下拉菜单
1、例子：将下拉菜单触发器和下拉菜单都包在.dropdown里
2、对齐
右对齐：为.dropdown-menu添加.dropdown-menu-right。不建议用.pull-right类。
导航条中需要，用.pull-right的mixin版本。
3、标题：dropdown-header"> 标明一组动作
4、分割线：divider">
5、禁用的菜单项：disabled">
三、按钮组
为.btn-group中的元素
应用工具提示或弹出框时，须指定container:'body'选项
1、基本实例
btn-group">
2、按钮工具栏
btn-toolbar" role="toolbar">
btn-group">...
...
3、尺寸：
btn-group-lg/md/sm/xs">…
4、嵌套：把.btn-group放入另一个.btn-group中
5、垂直排列：包在
btn-group-vertical">
中
6、两端对齐排列的按钮组
（1）元素：将
.btn元素包在
btn-group
btn-group-justified">
中
（2）：将每个按钮包进一个按钮组中
四、按钮式下拉菜单
将任意一个按钮放在.btn-group中，然后加入适当的菜单标签
1、单按钮下拉菜单
2、分裂式按钮下拉菜单
3、尺寸
4、向上弹出式菜单：给
父元素加
.dropup类
dropup">
五、输入框组
在
前/后加文字或按钮实现扩展，为.input-group赋予
.input-group-addon类即可添加额外元素
工具提示和弹出卡U那个需要特别设置：container:'body' 参数
不要和其他组件混用
1、基本实例
input-group-addon">@
input-group-addon">.00
2、尺寸：为 .input-group添加相应尺寸类，内部元素自动调整尺寸
input-group-lg">
3、作为额外元素的多选框和单选框
4、作为额外元素的按钮
为输入框组添加按钮需要额外添加一层嵌套，不是
.input-group-addon，
而是添加
.input-group-btn，
包裹按钮元素
input-group-btn">
5、作为额外元素的按钮式下拉菜单
6、作为额外元素的分裂式按钮下拉菜单
Toggle Dropdown
- dropdown-menu"
role="menu">
六、导航 .nav
1、标签页
（1）.nav-tabs依赖 .nav类
（2）
- nav nav-tabs"
role="tablist">
（3）需要用标签页的javaScript插件
2、胶囊式标签页
（1）其他同上，但是使用.nav-pills类
（2）也可以垂直方向：
添加 .nav-stacked类-------
3、两端对齐的标签页
4、禁用的链接----链接功能不受影响----
5、添加下拉菜单
用一点额外html代码并加入下拉菜单插件的JavaScript插件
带下拉菜单的胶囊式标签页：
- dropdown-menu"
role="menu">
七、导航条
1、默认样式的导航条
内容折行怎么办？
（1）减少元素宽度、在某些尺寸的屏幕上隐藏一些元素
（2）JavaScript
（3）修改视口的阈值：@grid-float-breakpoint 比它大时水平排列，比它小时折叠排列
2、Brand image
3、表单
将表单放置在
.nav-form中
form-group">
4、按钮
在
5、文本
把文本包裹在.navbar-text中时，常用
标签
navbar-text">
6、非导航的链接
使用
.navbar-link类：
7、组件排列
通过添加.navbar-left和.navbar-right类让导航链接、表单、按钮或文本对齐。
导航条不支持多个.navbar-right类
8、固定在顶部
-------
.navbar-fixed-top
还可包含一个.container或.container-fluid容器，从而让导航条居中，并在两侧添加padding
需要为body元素设置padding
9、固定在底部------ .navbar-fixed-bottom
10、静止在顶部----- .navbar-static-top
添加.navbar-static-top类，即可创建一个与页面等宽的导航条，随页面向下滚动而消失。
11、反色的导航条----- .navbar-inverse
八、路径导航
在一个带有层次的导航结构中标明当前页面的位置。各路径间的分隔符已经自动通过css的:before和content属性添加了。
九、分页
1、默认分页
- pagination pagination-lg/sm">
2、翻页
- pager">
十、标签
label-default/primary/success/info/warning/danger" />
如果标签数量多，就要为每个标签设置为display:
inline-block;
十一、徽章
给链接、导航等元素
嵌套元素。如果没有未读信息，徽章组件自动隐藏（IE8除外）
十二、巨幕
如果要让巨幕组件和浏览器同宽且无圆角，请把此组件放在所有.container外，且在组件里添加一个.container元素。
十三、页头----page-header
为h1标签增加适当空间，并支持h1标签内嵌small元素的默认效果和大部分其他组件
page-header">
标题 小标题
十四、缩略图
1、默认样式
2、自定义内容------添加额外标签，可加入任何类型的html内容
十五、警告框
1、例子
.alert类是必须设置的，另外还有
.alert-success/info/warnimg/danger四个类，没有默认类
role="alert">…
2、可关闭的警告框------- .alert-dismissible
如果提供该功能，要用jQuery警告框插件
务必给
添加
data-dismiss="alert"属性
关闭
Warning!
Better check yourself, you're not looking too good.
3、警告框中的链接------.alert-link
十六、进度条
IE9及以下不支持
1、基本实例
2、带提示标签的
3、进度值较低的情况----min-width:20px;
2%
4、根据情景变化效果--
--
-progress-bar-success/info/warning/danger
20% complete
5、条纹效果（IE8不支持）
---
--
progress-bar-striped
40% complete
6、动画效果---- .active
40%
7、堆叠效果
35 complete
20 complete
10 complete
十七、媒体对象
1、默认
允许在一个内容块的左边或右边展示一个多媒体内容（图像、视频、音频）
2、媒体对象列表
- media-list">
Media heading
...
.media-right应在.media-body后面
用一点额外标记，就能在列表内使用媒体对象组件（对评论或文章列表很有用）。
十八、列表组
1、基本实例
- list-group">
2、徽章
badge">14
Cras justo odio
3、链接
分别用div代替ul，用a代替li
<
div class="list-group">
<
a href="#" class="list-group-item
active">内容
4、被禁用的条目
5、情境类
6、定制内容
十九、面板
1、基本实例
默认的.panel组件只是设置border和padding
内容
2、带标题的面板---
panel-heading
标题
如果
为链接设置颜色，一定要把链接放在带.panel-title类的标题标签里
3、带脚注的面板----按钮或次要文本放入.
panel-footer容器内
3、情境效果
panel-primary/success/info/warning/danger">...
4、带表格的面板
不需要边框的表格添加
.table类，如果有.panel-body的面板，为上方添加边框会有分隔效果
5、带列表组的面板
panel panel-default">
- list-group">
二十、具有响应式特性的嵌入内容
embed-responsive-item类：让最终样式与其他属性相匹配。
二一、Well
...
-----能有嵌入的简单效果
如果添加well-sm/lg等，可以控制其padding和圆角设置
well well-sm/lg">...