bootstrap表格


Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素:
标签 描述
<table> 为表格添加基础样式。
<thead> 表格标题行的容器元素(<tr>),用来标识表格列。
<tbody> 表格主体中的表格行的容器元素(<tr>)。
<tr> 一组出现在单行上的表格单元格的容器元素(<td> 或 <th>)。
<td> 默认的表格单元格。
<th> 特殊的表格单元格,用来标识列或行(取决于范围和位置)。必须在 <thead> 内使用。
<caption> 关于表格存储内容的描述或总结。


1.表格类:


下表样式可用于表格中:
类 描述 实例
.table 为任意 <table> 添加基本样式 (只有横向分隔线)
.table-striped 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered 为所有表格的单元格添加边框
.table-hover 在 <tbody> 内的任一行启用鼠标悬停状态
.table-condensed 让表格更加紧凑
联合使用所有表格类


2.tr,th,td类


下表的类可用于表格的行或者单元格:
类 描述 实例
.active 将悬停的颜色应用在行或者单元格上
.success 表示成功的操作
.info 表示信息变化的操作
.warning 表示一个警告的操作
.danger 表示一个危险的操作


3.代码示例:


<div class="table-responsive"> 
<table class="table table-bordered">
<caption>基本表的布局</caption>
<thead>
<tr class="active">
<th>姓名</th>
<th>年龄</th>
<th>qq</th>
<th>telphone</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>向明</td>
<td>21</td>
<td>23456754353425<br/>3425324532458</td>
<td>12345678</td>
</tr>

<tr class="warning">
<td>向明</td>
<td>21</td>
<td>2345678</td>
<td>1234567854756756<br/>76654367546</td>
</tr>

<tr class="danger">
<td>向明</td>
<td>21</td>
<td>2345678</td>
<td>12345678</td>
</tr>

<tr>
<td>向明</td>
<td>21</td>
<td>2345678</td>
<td>12345678</td>
</tr>
</tbody>
</table>
</div>


4.几点说明:

a.<div class="table-responsive"> ...</div>,是修饰响应式布局。

b.<table class="table">...</table>,是基本表,<table class="table table-striped"><table class="table table-bordered">

<table class="table table-hover"><table class="table table-condensed"><tr class="active"><tr class="success">等等。

c.效果参看:​​http://www.shouce.ren/api/view/a/778​



起点在哪,或许选择不了。重要的是,你追求的终点在哪!