bootsrtap学习2

bootstrap表格

Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素

<table>

为表格添加基础样式。

<thead>

表格标题行的容器元素（<tr>），用来标识表格列。

<tbody>

表格主体中的表格行的容器元素（<tr>）。

<tr>

一组出现在单行上的表格单元格的容器元素（<td> 或 <th>）。

<td>

默认的表格单元格。

<th>

特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 <thead> 内使用。

<caption>

关于表格存储内容的描述或总结。

表格类

下表样式可用于表格中：

.table         为任意 <table> 添加基本样式 (只有横向分隔线)

.table-striped   在 <tbody> 内添加斑马线形式的条纹

.table-bordered     为所有表格的单元格添加边框

.table-hover   鼠标悬停时候颜色加深

.table-condensed     让表格更加紧凑

<tr>, <th> 和 <td> 类

下表的类可用于表格的行或者单元格：

.active  将悬停的颜色应用在行或者单元格上

.success  表示成功的操作

.info  表示信息变化的操作

.warning   表示一个警告的操作

.danger   表示一个危险的操作

下面看看官方给出的一个案例：

<table class="table">
   <caption>上下文表格布局</caption>
   <thead>
      <tr>
         <th>产品</th>
         <th>付款日期</th>
         <th>状态</th>
      </tr>
   </thead>
   <tbody>
      <tr class="active">
         <td>产品1</td>
         <td>23/11/2013</td>
         <td>待发货</td>
      </tr>
      <tr class="success">
         <td>产品2</td>
         <td>10/11/2013</td>
         <td>发货中</td>
      </tr>
      <tr  class="warning">
         <td>产品3</td>
         <td>20/10/2013</td>
         <td>待确认</td>
      </tr>
      <tr  class="danger">
         <td>产品4</td>
         <td>20/10/2013</td>
         <td>已退货</td>
      </tr>
   </tbody>
</table>