[Bootstrap]全局样式（三）

表格

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>