表格类
(1).table:为任意 <table>
添加基本样式 (只有横向分隔线)
(2).table-striped:在 <tbody>
内添加斑马线形式的条纹 ( IE8 不支持)
(3).table-bordered:为所有表格的单元格添加边框
(4).table-hover:在 <tbody>
内的任一行启用鼠标悬停状态
(5).table-condensed:行内边距(padding)被切为两半,让表格更加紧凑
<div class="container">
<h2>表格</h2>
<p>联合使用所有表格类</p>
<table class="table table-striped table-bordered table-hover table-condensed">
<thead>
<tr>
<th>#</th>
<th>First name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>A</td>
</tr>
<tr>
<td>2</td>
<td>B</td>
</tr>
<tr>
<td>3</td>
<td>C</td>
</tr>
</tbody>
</table>
</div>
tr,th,td类
(1).active :将悬停的颜色应用在行或者单元格上
(2).success:表示成功的操作
(3).info:表示信息变化的操作
(4).warning:表示一个警告的操作
(5).danger:表示一个危险的操作
<div class="container">
<h2>表格</h2>
<table class="table table-striped table-bordered table-hover table-condensed">
<thead>
<tr>
<th>#</th>
<th>tr,th,td类</th>
</tr>
</thead>
<tbody>
<tr class="avtive">
<td>.active</td>
<td>将悬停的颜色应用在行或单元格上</td>
</tr>
<tr class="success">
<td>.success</td>
<td>表示成功的操作</td>
</tr>
<tr class="info">
<td>.info</td>
<td>表示信息变化的操作</td>
</tr>
<tr class="warning">
<td>.warning</td>
<td>表示一个警告的操作</td>
</tr>
<tr class="danger">
<td>.danger</td>
<td>表示一个危险的操作</td>
</tr>
</tbody>
</table>
</div>
响应式表格
把任意的 .table 包在 .table-responsive class 内,您可以让表格水平滚动以适应小型设备(小于 768px)。当在大于 768px 宽的大型设备上查看时,您将看不到任何的差别。
<div class="table-responsive">
<table class="table">
<caption>响应式表格布局</caption>
<thead>
<tr>
<th>产品</th>
<th>付款日期</th>
<th>状态</th></tr>
</thead>
<tbody>
<tr>
<td>产品1</td>
<td>23/11/2013</td>
<td>待发货</td>
</tr>
<tr>
<td>产品2</td>
<td>10/11/2013</td>
<td>发货中</td></tr>
<tr>
<td>产品3</td>
<td>20/10/2013</td>
<td>待确认</td>
</tr>
</tbody>
</table>
</div>