# 网格选项
row :行
col-*-*: 列
- 第一个
*可以为xs[超小]/sm[小型]/md[中型]/lg[大型] - 第二个
*必须为12以内的[列数]
col-*-offset-* :列偏移
- 第一个
*和上面一样,第二个*范围是1到11,表示把该列的左外边距(margin)增加*列
col-*-*-*:列排序
- 第一个
*和上面一样 - 第二个
*可以为push[向右]/pull[向左] - 第三个
*范围是1到11[列数]
# 排版
small:内联子标题lead:引导主体副本
text-*:文本样式
-
*号可以为left[左对齐]/center[居中对齐]/right[右对齐]/muted[减弱文本]/primary/success/info/warning/danger/justify[自动换行]/nowrap[不换行] /lowercase[小写]/uppercase[大写]/capitalize[首字母大写] -
list-inline:列表置于同一行
# 表格
-
table:基本样式(只有横向分隔线)
-
table-*:表格样式*可以为striped[添加条纹]/bordered[添加边框]/hover[启用悬停]/condensed[更加紧凑]
-
tr/th/td 有
active/success/info/warning/danger来改变背景颜色
-
将任意的table放在table-responsive内,实现响应式表格
bootstrap里active/success/info/warning/danger对应的背景颜色
# 表单
创建基本表单(垂直表单)的步骤
- 向父
<form>元素添加role="form" - 把标签和控件放在一个带有
.form-group的<div>中。这是获取最佳间距所必需的 - 向所有的文本元素
<input>、<textarea>和<select>添加.form-control
创建水平表单的步骤
- 向父
<form>元素添加.form-horizontal - 把标签和控件放在一个带有
.form-group的<div>中 - 向标签添加
.control-label
常见的表单控件主要是
input、textarea、checkbox、radio和selectinput: 声明type有text、password、datetime、datetime-local、date、month、time、week、number、url、search、tel和color
- 对父元素添加验证状态
has-*:验证样式(*可以为warning/error/success)
# 按钮
-
btn:基本样式
-
btn-*:其他样式*可以为default/primary/success/info/warning/danger/link[让按钮看起来像个链接]/lg/sm/xs/block[块级按钮,拉伸至父元素100%的宽度]/active/disabled
# 图片
img-*:图片样式(*可以为rounded[圆角6px]/circle[圆形]/thumbnail[添加内边距和一个灰色的边框]/responsive)
# 辅助类
Bootstrap里的一些辅助类,除了上面的active/success/info/warning/danger还有
-
pull-left/right元素浮动到左边/右边 -
center-block设置元素为display:block并居中显示 -
clearfix清除浮动 -
show/hidden强制显示/隐藏 -
close显示关闭按钮 -
caret显示下拉式功能 -
divider分隔线
