本文中，都是结合本人的学习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>注：只有正确设置了输入框的 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
