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