关于bootstrap的css样式总结

页面大块布局:

div.container

栅格系统:
一行分成 12 列

div.row
div.col-md-12
div.col-xs-12
	<div class="row">
		<div class="col-md-4"></div>
		<div class="col-md-4"></div>
		<div class="col-md-4"></div>
		<div class="col-md-4"></div>
		<div class="col-md-4"></div>
		<div class="col-md-4"></div>
	</div>

图片自动生成:

<img src="holder.js/100%x300">

---

文本对齐:

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
	<div class="form-group">
		<label for="nameid">name: </label>
		<input type="text" id="nameid" class="form-control input-lg">
	</div>

表单元素:

input.form-control
input.input-lg

表单尺寸:

.input-lg
.input-sm

表单颜色:

div.has-success
div.has-error
div.has-warning

多选框:

<div class="checkbox">
	<label>
		<input type="checkbox"> Check me out
	</label>
</div>

单选框：

<div class="radio">
	<label>
		<input type="radio"> Check me out
	</label>
</div>

水平多选框:

<div class="radio-inline">
	<label>
		<input type="radio" name='rname'> Check me out
	</label>
</div>

下拉选：

显示和隐藏:

.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