表格
1、基本类 .table {width/margin-bottom/} {padding/border-top}
e.g.:<table> <tr><th>表头</th></tr> <tr><td>内容</td></tr> </table>
2、条纹表格 .table-striped {nth-of-type(odd):background-color}
e.g.:<table> <tr><th>表头</th></tr> <tr><td>内容</td></tr> </table>
3、边框表格 .table-border {border}
e.g.:<table> <tr><th>表头</th></tr> <tr><td>内容</td></tr> </table>
4、鼠标悬停 .table-hover {background-color}
e.g.:<table> <tr><th>表头</th></tr> <tr><td>内容</td></tr> </table>
5、紧缩的表格 .table-condesed
e.g.:<table> <tr><th>表头</th></tr> <tr><td>内容</td></tr> </table>
6、状态类 .active .success .warning .danger .info
e.g.:
行状态<table> <tr><th>表头</th></tr> <tr tr><td>内容</td></tr> </table>||<table> <tr><th>表头</th></tr> <tr tr><td>内容</td></tr> </table>||<table> <tr><th>表头</th></tr> <tr tr><td>内容</td></tr> </table>||<table> <tr><th>表头</th></tr> <tr tr><td>内容</td></tr> </table>||<table> <tr><th>表头</th></tr> <tr tr><td>内容</td></tr> </table>
列数据状态<table> <tr><th>表头</th></tr> <tr><td>内容</td></tr> </table>||<table> <tr><th>表头</th></tr> <tr><td class="success">内容</td></tr> </table>||<table> <tr><th>表头</th></tr> <tr><td class="warning">内容</td></tr> </table>||<table> <tr><th>表头</th></tr> <tr><td class="danger">内容</td></tr> </table>||<table> <tr><th>表头</th></tr> <tr><td class="info">内容</td></tr> </table>
7、响应式表格 .table-responsive
e.g.:<div><table>表格数据</table></div>
表单
1、使用label和控件组合使用，包裹在.from-group里面获得最好的排列 {margin-bottom}
e.g.:<div><label for="exampleInput">描述内容</label><input type="text" /></div>
2、<input>、<select>、<textarea>加类.form-control {width/padding/border-radius/border}
e.g.:<div><label for="exampleInput">描述内容</label><input type="text" /></div>
3、内联表单 .form-inline
e.g.:<form><div><label><label><input /></div></form> .form-group类表现为inline-block
4、水平排列 .form-horizontal+栅格类+.control-label
e.g.:<form><div><label></label><div><input /></div></div></form>
5、输入框 input:text 几乎浏览器自带样式
e.g.:<input type="text" />
6、文本域 input:textarea 几乎浏览器自带样式
e.g.:<input type="textarea" />
7、单选和多选 div+.radio/.checkkbox+属性disabled/.disabled
e.g.:
<div><label><input type="radio" />描述内容</label></div>
<div><label><input type="checkbox" />描述内容</label></div>
<div><label><input type="radio" disabled />描述内容</label></div> 禁止点击
<div><label><input type="checkbox" disabled />描述内容</label></div> 禁止点击
8、内联单选和多选 .radio-inline／.checkbox-inline
e.g.:
<label><input type="radio" />1</label>
<label><input type="checkbox" />1</label>
9、下拉列表 几乎浏览器自带样式
e.g.:<selection><option>选项</option></selection> 根据需要添加类.form-control
10、静态控件 .form-control-static+p
e.g.:<div><label>label内容</label><div><p></p></div></div>
11、禁用状态 disable属性 {cursor/background-color}
e.g.:<input type="..." disabled />
12、<filedset> disable属性 禁用包含的所有控件
e.g:<form><filedset disabled><div><label></label><input type="..."></div></fieldset></form>
13、只读状态 readonly属性 {background-color}
e.g.:<input type="..." readonly>
14、校验状态 .has-success/.has-warning/.has-error + .control-label/.form-control
e.g.:
<div><label></label><input type="text" /></div>
<div><div><label><input type="radio" /></label></div></div>
15、校验状态＋图标 .has-feedback+feedback icon
e.g.:<div><label></label><input type="text" /><span></span></div>
16、 水平排列／内联＋校验＋图标 .form-horizontal/.form-inline+校验类+.has-feedback+feedback icon
e.g.:
<form><div><label></label><input type="text" /><span></span></div></form>
<form><div><label></label><input type="text" /><span></span></div></form>
17、控件尺寸 .input-lg/.input-sm {height/padding/border-radius/font-size}
e.g.:<input type="" />||<input type="" />
18、水平排列控件尺寸 .form-group-lg/.form-group-sm
e.g.:
<form><div><label></label><div><input /></div></div></form>
<form><div><label></label><div><input/></div></div></form>
19、列尺寸 栅格类.row+.col-**-*控制尺寸
相关文章
精彩导读
热门资讯
关注我们
