关于bootstrap的css样式总结

页面大块布局:

div.container
栅格系统:
一行分成 12 列

div.row
div.col-md-12
div.col-xs-12

图片自动生成:

---

文本对齐:

p.text-left;
p.text-center;
p.text-right;
块标签对齐:

div.pull-left;
div.pull-right;
div.center-block;
排版样式:

h1.page-header
p.lead
small
strong
em
文字的颜色(带有样式划动效果):

p.text-muted 柔和色
p.text-primary 浅蓝色
p.text-success 深绿色
p.text-info 深蓝色
p.text-warning 棕色
p.text-danger 红色
列表：

.list-unstyled 去掉项目符号和默认的padding值
.list-inline 将列表内容排列成同一行并增加少量padding值
.dl-horizontal 将dt标记与dd描述内容排列在同一行

---

表格样式:

table.table 表格
table.table-hover 鼠标悬浮
table.table-bordered 表格边框
table.table-striped 隔行换色
table.table-condensed 紧凑性表格
状态类:

tr.active 灰
tr.danger 红
tr.warning 黄
tr.success 绿
响应式表格( 水平滚动条):

div.table-responsive

---

表单样式:

div.form-group

name:

表单元素:

input.form-control
input.input-lg
表单尺寸:

.input-lg
.input-sm
表单颜色:

div.has-success
div.has-error
div.has-warning
多选框:

Check me out

单选框：

Check me out

水平多选框:

Check me out

下拉选：

显示和隐藏:

.show
.hidden
.sr-only

---

按钮:

1.button
2.input type=button
3.input type=submit
4.input type=reset
5.a 标签
七种样式:

.btn btn-default
.btn btn-primary
.btn btn-success
.btn btn-info
.btn btn-warning
.btn btn-danger
.btn btn-link
按钮尺寸:

.btn-lg
.btn-sm
.btn-xs
按钮变成块元素:

.btn-block
按钮的活动状态:

.active
按钮的禁用状态:

.disabled

img 图片:

.img-rounded 圆角矩形
.img-circle 圆形
.img-thumbnail 圆角边框
img 响应式图片:

.img-responsive

关闭按钮:

span.close
向下箭头:

span.caret