Bootstrap的组件

1 字体图标

结构采用span来写

注意：为避免屏幕识读设备抓取非故意的和可能产生混淆的输出内容，设置了 aria-hidden=“true”

2 下拉菜单

需要和js配合才能实现功能
dropdown类表示该容器会形成一个下拉菜单组件

第一步：设置按钮类为dropdown-toggle
第二步：data-toggle设置为dropdown
第三步：下拉菜单中ul设置类为dropdown-menu

实现分割效果：设置class=divider

标题设置：在对应的li中添加类dropdown-header

禁用菜单项：disabled

3 按钮组

设置类为btn-group

（1）按钮工具栏：btn-toolbar

（2）按钮式下拉菜单：将按钮放入btn-group中

（3）分裂式按钮下拉菜单：分为两个button

4 输入框组

（1）input-group：使下面元素形成输入框组

（2）input-group-addon：在输入框前面或者后面添加修饰的符号或说明的文字

（3）form-control：给输入框添加样式

（4）为输入框组添加按钮需要添加一层嵌套：即按钮包含在input-group-btn元素中

5 导航

依赖于JS

（1）nav：导航基础类

（2）nav-tabs：标签页的类

（3）active：选中被激活

（4）胶囊式标签页：nav-pills（背景带颜色）

（5）nav-justified：使导航栏对齐两边

6 导航条

（1）navbar：告诉浏览器下面所有元素形成一个导航条

（2）navbar-header：导航条的第一个构成元素，里面放的是网页的logo和移动端下面将导航条内容折叠一起的折叠按钮

（3）navbar-nav：导航条中的小导航

（4）navbar-form：导航条中的输入框

（5）navbar-left/right：导航条中元素左/右浮

（6）navbar-inverse：设置导航条背景为黑色

（7）navbar-fixed-top/bottom：将导航条固定在顶部/底部

（8）navbar-static-top：静止在顶部导航条

7 路径导航

（1）分页：pagination

（2）翻页：pager、previous、next

8 标签

标签外观更改：与btn一样

9 徽章

badge类

10 巨幕

jumbotron类

11 页头

page-header类

12 缩略图

thumbnail类

13 警告框

alert类，与btn类似

可关闭：alert-dismissible（要引用js）
button中加入close类

警告框中的链接：alert-link

14 进度条

progress类：进度条容器

progress-bar：当前进度

15 媒体对象

（1）media：媒体对象容器

（2）media-left

（3）media-body：存放媒体对象的主题内容

（4）media-object：存放图像

（5）media-heading：标题

16 列表组

list-group：列表组，该类可以清楚ul左内边距

list-group-item：列表项

17 面板

panel类，与btn相似

panel-heading面板头部

panel-body面板主体

panel-footer脚注

为panel-body添加table实现表格面板

18 well

实现嵌入效果