[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>

相关文章