BootStrap一些常用Css标签

网格选项：

row :行

col-*-*: 列 (第一个*可以为xs[超小]/sm[小型]/md[中型]/lg[大型]第二个*必须为12以内的[列数])

col-*-offset-* :列偏移(第一个*和上面一样,第二个*范围是1到11,表示把该列的左外边距(margin)增加*列)

col-*-*-*:列排序(第一个*和上面一样,第二个*可以为push[向右]/pull[向左],第三个*范围是1到11[列数])

表格：

table-*:表格样式(*可以为striped[添加条纹]/bordered[添加边框]/hover[启用悬停]/condensed[更加紧凑])

tr/th/td 有active/success/info/warning/danger来改变背景颜色

将任意的table放在table-responsive内,实现响应式表格

bootstrap里active/success/info/warning/danger对应的背景颜色
active/success/info/warning/danger对应颜色

表单：

创建基本表单(垂直表单)的步骤 
1.向父 <form> 元素添加 role="form"。 
2. 把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。 
3. 向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。


创建水平表单的步骤 
1.向父 <form> 元素添加 class .form-horizontal。 
2.把标签和控件放在一个带有 class .form-group 的 <div> 中。 
3.向标签添加 class .control-label。


常见的表单控件主要是 input、textarea、checkbox、radio 和 select。 
input: 声明type有text、password、datetime、datetime-local、date、month、time、week、 
number、email、url、search、tel 和 color。

textarea: row决定高度

checkbox: 复选框

radio:单选框

checkbox-inline:内联的复选框和单选框

select:选择框

对父元素添加验证状态has-*:验证样式(*可以为warning/error/success)

按钮：

btn:基本样式

btn-*:其他样式(*可以为default/primary/success/info/warning/danger 
/link[让按钮看起来像个链接] 
/lg/sm/xs/ 
block[块级按钮,拉伸至父元素100%的宽度]/active/disabled)
btn-group:里面放置一系列btn
btn-toolbar:里面放置几组btn-group
btn-group-*:调整按钮组的样式(*可以为xs/sm/lg/vertical)
.btn-group 容器添加 .dropup实现按钮上拉菜单

图片：

img-*:图片样式(*可以为rounded[圆角6px] 
/circle[圆形] 
/thumbnail[添加内边距和一个灰色的边框]/responsive)

常用的一些其它：

pull-left/right 元素浮动到左边/右边 
center-block 设置元素为 display:block 并居中显示 
clearfix 清除浮动 
show/hidden 强制显示/隐藏
close 显示关闭按钮 
caret 显示下拉式功能 
divider 分隔线

下拉菜单：

dropdown:下拉菜单
dropdown-menu: 下拉菜单
dropdown-header:下拉菜单区域标题

 

转载于:https://www.cnblogs.com/lgqtecng/p/6471977.html