二：Bootstrap-css组件

Glyphicons 图标:

span.glyphicon glyphicon-align-center

下拉菜单:

div.dropdown/div.btn-group
button[data-toggle=dropdown/.dropdown-toggle]
ul.dropdown-menu
li.dropdown-header
li.disabled
li.divider

---

按钮工具栏:

div.btn-toolbar

按钮组:

div.btn-group

按钮尺寸:

a.btn-lg
a.btn-sm
div.btn-group-lg
div.btn-group-sm
div.btn-group-xs

垂直排列:

div.btn-group-vertical

按钮组中的下拉菜单:

div.btn-group
	button
	button
	div.btn-group

两端对齐的链接排列:

div.btn-group btn-group-justified

按钮式下拉菜单:

div.btn-group
	button.btn btn-primary
	button.btn btn-primary
	div.btn-group
		button.btn btn-pirmary dropdown-toggle[data-toggle=dropdown]
		ul.dropdown-menu

向上的下拉菜单:

div.btn-group dropup
	button.btn btn-primary
	button.btn btn-primary
	div.btn-group
		button.btn btn-pirmary dropdown-toggle[data-toggle=dropdown]
		ul.dropdown-menu

---

输入框组:

div.input-group
	span.input-group-addon
	input.form-control[placeholder=username]

输入框组尺寸:lg|sm

div.input-group input-group-lg
	span.input-group-addon
	input:form-control[placeholder=username]

复选框与单选框:

div.input-group input-group-lg
	span.input-group-addon
		input:checkbox
	input.form-control

附加按钮:

div.input-group input-group-lg
	span.input-group-btn
		button.btn btn-default
	input:form-control

带下拉菜单的按钮:

下拉菜单组这一块不用写.btn-group 类

分段按钮:

下拉菜单按钮组这一块不用写.btn-group 类

---

标签页:

ul.nav nav-tabs
li.active>a

胶囊式标签页:

ul.nav nav-pills
li.active

堆叠胶囊式标签页:

ul.nav nav-pills nav-stacked
li.active

标签页两端对齐:

ul.nav nav-tabs nav-justified
li.active

禁用的链接:

li.disabled

带下拉菜单的导航:

li.dropdown
	a.dropdown-toggle
	ul.dropdown-menu

---

导航条:

.navbar navbar-default

导航条固定顶部:

.navbar-fixed-top

导航条固定顶部:

.navbar-fixed-bottom

导航条反色:

.navbar-inverse

条导航条 ul 元素:

ul.nav navbar-nav

条导航条 form 元素:

form.navbar-form

导航条文本元素:

p.navbar-text

导航条链接元素:

a.navbar-link

导航条按钮元素:

button.navbar-btn

面包屑导航:

ul.breadcrumb

---

默认分页

ul.pagination
li

分页禁用和激活:

li.active
li.disabled

分页尺寸:

ul.pagination pagination-lg
ul.pagination pagination-sm

上下翻页:

ul.pager

---

实体总结:

x times
>> raquo
<< laquo
<- larr
-> rarr

上下页两端对齐:

li.previous
li.next

---

标签:

span.label

标签颜色:

span.label label-default
span.label label-primary
span.label label-success
span.label label-info
span.label label-warning
span.label label-danger

---

徽章:

span.badge

大屏幕介绍:

div.jumbotron

页面标题:

h1.page-header

缩略图:

a.thumbnail

如果放到图片身上，点击会有放大动画

定制内容:

div.thumbnail

---

警告框:

div.alert

警告框颜色:

div.alert alert-success
div.alert alert-info
div.alert alert-warning
div.alert alert-danger

可关闭的警告框:

<button class='close' data-dismiss='alert'>x</button>

警告框中的链接:

a.alert-link

---

进度条:

div.progress
div.progress-bar[style='width:60%']

进度条颜色:

div.progress-bar-success
div.progress-bar-info
div.progress-bar-warning
div.progress-bar-danger

条纹进度条:

div.progress progress-striped

激活进度条:

div.progress progress-striped active

---

媒体列表:

div.media
div.media-body
h1.media-heading
p

嵌套一份

div.media
div.media-body
h1.media-heading
p

列表组:

ul.list-group
li.list-group-item

链接列表:

div.list-group
a.list-group-item active

---

面版:

div.panel panel-default
div.panel-heading
div.panel-body
div.panel-footer

面版主题:

div.panel panel-default
div.panel panel-primary
div.panel panel-success
div.panel panel-info
div.panel panel-warning
div.panel panel-danger

---

well 墙:

div.well

well 尺寸:

div.well well-lg
div.well well-sm