Bootstrap 表格

Bootstrap 供给了一个明晰的创建表格的布局。下表列出了 Bootstrap 支撑的一些表格元素:

标签描绘
<table>为表格增加根底款式。
<thead>表格标题行的容器元素(<tr>),用来标识表格列。
<tbody>表格主体中的表格行的容器元素(<tr>)。
<tr>一组呈现在单行上的表格单元格的容器元素(<td> 或 <th>)。
<td>默许的表格单元格。
<th>特别的表格单元格,用来标识列或行(取决于规模和方位)。必须在 <thead> 内运用。
<caption>关于表格存储内容的描绘或总结。

表格类

下表款式可用于表格中:

描绘 实例
.table 为恣意 <table> 增加根本款式 (只要横向分隔线) 测验一下
.table-striped 在 <tbody> 内增加斑马线方式的条纹 ( IE8 不支撑) 测验一下
.table-bordered 为一切表格的单元格增加边框 测验一下
.table-hover 在 <tbody> 内的任一行启用鼠标悬停状况 测验一下
.table-condensed 让表格愈加紧凑 测验一下
联合运用一切表格类 测验一下

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

下表的类可用于表格的行或许单元格:

描绘 实例
.active 将悬停的色彩使用内行或许单元格上 测验一下
.success 表明成功的操作 测验一下
.info 表明信息改动的操作 测验一下
.warning 表明一个正告的操作 测验一下
.danger 表明一个风险的操作 测验一下

根本的表格

如果您想要一个只带有内边距(padding)和水平切割的根本表,请增加 class .table,如下面实例所示:

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 根本的表格</title>
   <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table">
   <caption>根本的表格布局</caption>
   <thead>
      <tr>
         <th>称号</th>
         <th>城市</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
      </tr>
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
      </tr>
   </tbody>
</table>

</body>
</html>

成果如下所示:

根本的表格

可选的表格类

除了根本的表格符号和 .table class,还有一些能够用来为符号界说款式的类。下面将向您介绍这些类。

条纹表格

经过增加 .table-striped class,您将在 <tbody> 内的行上看到条纹,如下面的实例所示:

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 条纹表格</title>
   <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table table-striped">
   <caption>条纹表格布局</caption>
   <thead>
      <tr>
         <th>称号</th>
         <th>城市</th>
         <th>暗码</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
</table>

</body>
</html>

成果如下所示:

条纹表格

边框表格

经过增加 .table-bordered class,您将看到每个元素周围都有边框,且占整个表格是圆角的,如下面的实例所示:

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 边框表格</title>
   <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table table-bordered">
   <caption>边框表格布局</caption>
   <thead>
      <tr>
         <th>称号</th>
         <th>城市</th>
         <th>暗码</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
</table>

</body>
</html>

成果如下所示:

边框表格

悬停表格

经过增加 .table-hover class,当指针悬停内行上时会呈现浅灰色布景,如下面的实例所示:

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 悬停表格</title>
   <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table table-hover">
   <caption>悬停表格布局</caption>
   <thead>
      <tr>
         <th>称号</th>
         <th>城市</th>
         <th>暗码</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
</table>

</body>
</html>

成果如下所示:

悬停表格

精简表格

经过增加 .table-condensed class,行内边距(padding)被切为两半,以便让表看起来更紧凑,如下面的实例所示。这在想让信息看起来更紧凑时十分有用。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 精简表格</title>
   <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table table-condensed">
   <caption>精简表格布局</caption>
   <thead>
      <tr>
         <th>称号</th>
         <th>城市</th>
         <th>暗码</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
</table>

</body>
</html>

成果如下所示:

精简表格

上下文类

下表中所列出的上下文类答应您改动表格行或单个单元格的布景色彩。

描绘
.active对某一特定的行或单元格使用悬停色彩
.success表明一个成功的或活跃的动作
.warning表明一个需求留意的正告
.danger表明一个风险的或潜在的负面动作

这些类可被使用到 <tr>、<td> 或 <th>。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 上下文类</title>
   <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<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>

</body>
</html>

成果如下所示:

上下文类

呼应式表格

经过把恣意的 .table 包在 .table-responsive class 内,您能够让表格水平翻滚以习惯小型设备(小于 768px)。当在大于 768px 宽的大型设备上检查时,您将看不到任何的不同。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 呼应式表格</title>
   <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<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>
         <tr>
            <td>产品4</td>
            <td>20/10/2013</td>
            <td>已退货</td>
         </tr>
      </tbody>
   </table>
</div>  	

</body>
</html> 	

成果如下所示:

呼应式表格