一：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

巴特西

一：Bootstrap-css样式

最新文章

热门文章