Bootstrap——组件

1.字体图标

<span class="glyphicon glyphicon-star" aria-hidden="true"></span> 

• glyphicon：图标的通用类
• glyphicon-star：图标类型（样式）
• aria-hidden="true"：通用，避免屏幕识读设备抓取非故意的和可能产生混淆的输出内容

实例：

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

效果：

2.下拉菜单

• dropup：向上弹出
• dropdown：向下弹出
• dropdown-menu：下拉菜单的通用类
• dropdown-menu-right：向右对齐
• dropdown-menu-left：向左对齐（默认情况）
• role="separator" class="divider"：为下拉菜单添加一条分割线
• disabled：禁用菜单的选项
• dropdown-toggle：下拉菜单通用类

3.按钮组

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
</div>

btn-group：按钮容器通用类

role=“group”：按钮，为了正确传达按钮分组

role=“toolbar”：工具栏，就是里面再包裹多个role=“group”

btn-group-lg/sm/xs：按钮组的尺寸（大/略小/很小）

btn-group-vertical：让按钮垂直排列

btn-group-justified：两段对齐排列按钮组（居于屏幕中间）

btn-lg/sm/xs：按钮时下拉菜单的所有尺寸

4.输入框组

input-group：输入框组

input-group-addon：input框两边添加字符

input-group-btn：input框两边添加按钮

input-group-lg/sm：input框的大小

5.导航

role="navigation"：如果想在导航组件上实现导航功能，必须添加

nav：导航的基类

nav-tabs：基本标签页

nav-pills：胶囊式标签页

nav-stacked：垂直方向（只适合胶囊）

nav-justified：两端对齐的（置于屏幕中间，自动调整尺寸）

disabled：禁用的链接（任何导航组件都可以添加）

6.导航条

navbar：导航条通用类

navbar-default：默认样式（颜色、高度等）

role="navigation"：增加访问性

navbar-header：导航标题

navbar-brand：让字体变粗，一般包含在标题之内

navbar-form：将表单放在里面可以垂直对齐

navbar-left/right：让导航链接、表单、按钮或文本对齐

navbar-btn：不包含在form中的元素，使用此属性可以在导航条中居中

navbar-text：导航条中的文本

navbar-link：让链接有正确的默认颜色和反色设置

navbar-fixed-top：让导航条固定在顶部，可以包含容器，让导航条居中。

　　导航条可能会遮住页面其它内容，需要设置一个padding-top。

navbar-fixed-bottom：让导航条固定到底部，需设置padding-bottom，不然也会遮住其它内容

navbar-static-top：创建夜歌与页面等宽度的导航条，但是往下拉会消失。

navbar-inverse：反色，改变导航条的外观。

7.路径导航

pagination：路径导航通用类

8.分页

Page navigation：分页

pagination-lg/sm：尺寸

pager：翻页

previous/next：对齐链接

disabled：禁用状态

9.标签

label-default/primary/success/info/warning/danger：标签的外观

<h1>~<h6>：尺寸

10.徽章

badge：徽章

11.巨幕

jumbotron：巨幕

12.页头

page-header：页头组件能够为h1标签增加适当的空间，与其他页面也有一些分隔。

13.警告框

alert-dismissible：可关闭的警告框

alert-success/info/warning/danger：为弹出框设置颜色

14.进度条

progress：进度条通用类

progress-bar：进度条本身设置

progress-bar-success/info/warning/danger：设置颜色

progress-bar-striped：进度条条纹

active：动画效果

15.媒体对象

media： 允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边。

media-right/left：浮动到左边或右边

media-body/heading：媒体对象主体或头部

media-list：媒体对象中的列表

16.列表组

list-group ：用于以列表形式呈现复杂的和自定义的内容

list-group-item：列表中的项

17.面板

panel：面板基本类

panel-default：默认属性

panel-heading：面板头部

panel-body：面板标题会和表格连接起来，没有空隙

panel-title：面板标题

<h1>-<h6>：字体大小

panel-footer：带脚注的面板

18.well

well：嵌入简单的效果

well-sm/lg：尺寸