Bootstrap之表格，按钮，表单和图片的样式

本文中，都是结合本人的学习Bootstrap时所做的练习，来理解通过内置的 CSS 定义，Bootstrap的表格，按钮，表单和图片是如何来显示各种丰富效果的。

一. 表格

基本格式

<table class="table">
条纹状表格： 让<tbody>里的行产生一行隔一行加单色背景效果

<table class="table table-striped">

注：表格效果需要基于基本格式.table
带边框的表格：给表格增加边框

<table class="table table-bordered">
悬停鼠标： 让下的表格悬停鼠标实现背景效果

<table class="table table-hover">

状态类： 可以单独设置每一行的背景样式

注：一共五种不同的样式可供选择。

active   鼠标悬停在行或单元格上success  标识成功或积极的动作info     标识普通的提示信息或动作warning  标识警告或需要用户注意danger   表示危险或潜在的带来负面影响的动作

隐藏某一行

<tr class="sr-only">
响应式表格：表格父元素设置响应式，小于 768px 出现边框

使用示例：

    <body class="table-responsive"><!-- 表格样式 --><table class='table table-striped table-bordered table-hover'><thead><tr><th>编号</th><th>姓名</th><th>性别</th><th>年龄</th></tr></thead><tbody><tr> <td>1</td><td>one</td><td>男</td><td>20</td> </tr><tr><td>2</td><td>two</td><td>女</td><td>21</td></tr><tr><td>3</td><td>three</td><td>男</td><td>22</td></tr><tr><td>4</td><td>four</td><td>女</td><td>23</td></tr></tbody></table><body>

二. 按钮

可作为按钮使用的标签或元素

转化成普通按钮

<a href="#" class="btn btn-default">Link</a>
<button class="btn btn-default">Button</button>
<input type="button" class="btn btn-default" value="input">

注意：

1). 针对组件，虽然按钮类可以应用到 <a> 和 <button> 元素上，但是，导航和导航条组件只支持<button>元素。

2). 链接被作为按钮使用时，如果<a> 元素被作为按钮使用 – 并用于在当前页面触发某些功能，而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置role="button" 属性。

3). 跨浏览器展现，最佳实践是：用强烈建议尽可能使用 <button> 元素来获得在各个浏览器上获得相匹配的绘制效果。

预定义样式

<button class="btn btn-info">Button</button>

其他样式

btn-default   默认样式
btn-success   成功样式
btn-info      一般信息样式
btn-warning   警告样式
btn-danger    危险样式
btn-primary   首选项样式
btn-link      链接样式

尺寸大小

    //从大到小的尺寸<button class="btn btn-lg">Button</button><button class="btn">Button</button><button class="btn btn-sm">Button</button><button class="btn btn-xs">Button</button>

块级按钮

    //块级换行<button class="btn btn-block">Button</button><button class="btn btn-block">Button</button>

激活状态

    //激活按钮<button class="btn active">Button</button>

禁用状态

//禁用按钮
<button class="btn active disabled">Button</button>

三. 表单

基本格式

         <form><div class="form-group"><label>用户名：</label><input type="input" class="form-control" placeholider="用户名"></div><div class="form-group"><label>密码：</label><input type="class" class="form-control" placeholider="密码"></div></form>

注：只有正确设置了输入框的 type 类型，才能被赋予正确的样式。支持的输入框控件
包括： text、password、datetime、datetime-local、date、month、time、week、
number、email、url、search、tel 和 color。

内联表单

//让表单左对齐浮动，并表现为inline-block 内联块结构 <form class="form-inline">
注：当小于 768px，会恢复独占样式

    <form class="form-inline"><div class="form-group"><label>用户名：</label><input type="input" class="form-control" placeholider="用户名"></div><div class="form-group"><label>密码：</label><input type="class" class="form-control" placeholider="密码"></div><div class="input-group"><div class="input-group-addon">$</div><input type="text" class="form-control" placeholider="请输入价格"><div class="input-group-addon">.00</div></div></form>

表单合组

//前后增加片段

    <div class="input-group"><div class="input-group-addon">$</div><input type="text" class="form-control" placeholider="请输入价格"><div class="input-group-addon">.00</div></div>

水平排列

//让表单内的元素保持水平排列

     <form class="form-horizontal"><div class="form-group"><label class="col-sm-2 control-label" >用户名：</label><div class="col-sm-10"><input type="input" class="form-control" placeholider="用户名"></div></div><div class="form-group"><label class="col-sm-2 control-label">密码：</label><div class="col-sm-10"><input type="class" class="form-control" placeholider="密码"></div></div></form>

注：这里用到了 col-sm 栅格系统， control-label 表示和父元素样式同步。

复选框和单选框

<!-- 复选框 --><div class="checkbox"><label><input type="checkbox">羽毛球</label></div><div class="checkbox"><label><input type="checkbox">篮球</label></div><div class="checkbox disabled"><label><input type="checkbox" disabled>乒乓球</label></div><!-- 内联样式的复选框 --><div class="checkbox checkbox-inline"><label><input type="checkbox">羽毛球</label></div><div class="checkbox checkbox-inline"><label><input type="checkbox">篮球</label></div><div class="checkbox checkbox-inline disabled"><label><input type="checkbox" disabled>乒乓球</label></div><!-- 单选框和复选框一样，只要把checkbox换成radio即可 -->

下拉列表

<select class="form-control"><option >1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option>
</select>

校验状态

<div class="form-group has-error">

注：还有其他状态如下

has-error 错误状态has-success 成功状态has-warning 警告状态 //label 标签同步相应状态
<label class="control-label">Input with success</label>

添加额外的图标

//文本框右侧内置文本图标

    <form class="form-inline"><div class="form-group has-success has-feedback"><label class="control-label">用户名：</label><input type="input" class="form-control" placeholider="用户名"><span class="glyphicon glyphicon-ok form-control-feedback"></span></div><div class="form-group has-warning has-feedback"><label class="control-label">邮箱：</label><input type="input" class="form-control" placeholider="邮箱"><span class="glyphicon glyphicon-warning-sign form-control-feedback"></span></div><div class="form-group has-error has-feedback"><label class="control-label">密码：</label><input type="class" class="form-control" placeholider="密码"><span class="glyphicon glyphicon-remove form-control-feedback"></span></div></form>

含义：

glyphicon-ok  成功状态
glyphicon-warning-sign 警告状态
glyphicon-remove 错误状态

控制尺寸

//从大到小

<input type="password" class="form-control input-lg">
<input type="password" class="form-control">
<input type="password" class="form-control input-sm">

注：也可以设置父元素 form-group-lg、form-group-sm，来调整。

四. 图片

图片形状
```
//三种形状
```

    <img src="../images/1.jpg" class="img-rounded">  <!-- 边框加圆角 --><img src="../images/1.jpg" class="img-circle"> <!-- 如果原图是正方形就变圆形，原来是长方形的就变椭圆 --><img src="../images/1.jpg" class="img-thumbnail"> <!-- 缩略图 -->

响应式图片

`<img src="../images/1.jpg" class="img-thumbnail img-responsive"> <!-- 响应式 -->`

PS:本文比较完整的代码地址为：
https://github.com/Xganying/Bootstrap/blob/master/test2/test2.html