《bootstrap用户手册》读书笔记（1）

《bootstrap用户手册》读书笔记（1）

作者：jake spurlock

译者：李松峰

部分参考慕课网@waynejiang

常用模板：

1.1标题：.<div>添加h1~h6

副标题修改small标签

1.2强调内容：<p>标签添加.lead类

也修改了<small><strong><em><cite

1.3粗体<b><strong>标签

1.4斜体<em><i>标签

1.5通过颜色强调

.text-muted提示（浅灰色）

.text-primary主要（蓝色）

.text-success成功（浅绿色）

.text-warning警告（黄色）

.text-danger危险（褐色）

1.6对齐

.text-left

.text-right

.text-center

.text-justify(两端对齐)

1.7列表

无序，有序<ul><ol>标签在margin上调整

去点列表.list-unstyled

内联列表.list-inline

定义列表 修改行边距，外边距，字体加粗

水平定义列表 <dl>加.dl-horizontal

1.8表格

.table基础表格

.table-striped斑马线

.table-bordered带边框

.table-hover鼠标悬停高亮

.table-condensed紧凑型

.table-responsive响应式

表格行的类

<tr>加

.active当前活动

.success成功或者正确

.info中立的信息或行为

.warning警告，需特别注意

.danger危险或者可能错误的行为

2.1表单

水平表单.form-horizontal

内联表单.form-inline

(<div>加.form-group容器)

表单控件（需添加form-control）

复选框和单选择按钮

（1）checkbox,radio使用label包围

（2）checkbox连同label放在一个.checkbox的容器

（3）radio连同label放在一个.radio的容器

复选框和单选择按钮（水平排列）

label上添加.checkboxin-line

label上添加.radio-line

按钮

基本按钮.btn

（以下不能缺少btn）

默认.btn-default

主要.btn-primary

成功.btn-success

信息.btn-info

警告.btn-warning

危险.btn-danger

链接.btn-link

按钮大小

.btn-sm小

.btn-lg大

.btn-xs最小

块状按钮btn-block

按钮状态

悬浮（:hover）

焦点(:focus)

点击(:active)

禁用disabled

表单控件大小

.input-sm(比正常小)

.input-lg（比正常大）

表单控件状态

焦点：focus

禁用.disabled

验证.has-warning警告

    .has-error错误

    .has-success成功

表单提示信息

<span>加.help-block

2.2图像

.img-responsive响应式图片

.img-rounded圆角图片

.img-circle圆形图片

.img-thumbnail缩略图片

设置图片大小（如改变容器。但不可修改img图片）

2.3图标

glyphicon-前缀