Bootstrap 表格

Bootstrap 提供了一个清晰的创建表格的布局

Bootstrap 表格

下表列出了 Bootstrap 支持的一些表格元素

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

<table> 类

Bootstrap 3 提供了以下 CSS 类用于创建表格 下表样式可用于表格中:

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

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

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

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

基本的表格

如果只想要一个只带有内边距( padding ) 和水平分割的基本表,可以使用 .table

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

运行范例 »

运行以上范例,输出结果如下

基本的表格

条纹表格

.table-striped 用来显示一个条纹表格

<table class="table table-striped">
  <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>

运行范例 »

运行以上范例,输出结果如下

条纹表格

边框表格

.table-bordered 用于给表格每个元素周围添加边框,且占整个表格是圆角的

<table class="table table-bordered">
  <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>

运行范例 »

运行以上范例,输出结果如下

边框表格

悬停表格

通过添加 .table-hover class,当指针悬停在行上时会出现浅灰色背景

<table class="table table-hover">
  <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>

运行范例 »

运行以上范例,输出结果如下

悬停表格

精简表格

通过添加 .table-condensed ,可以让表格行内边距( padding ) 被切为两半,以便让表看起来更紧凑

<table class="table table-condensed">
  <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>

运行范例 »

运行以上范例,输出结果如下

精简表格

不同状态下的表格

下表列出了 CSS 类用于改变表格行或单个单元格的背景颜色

同时这些类还可以用在 <tr> 、 <td> 、 <th>

描述
.active 对某一特定的行或单元格应用悬停颜色
.success 表示一个成功的或积极的动作
.warning 表示一个需要注意的警告
.danger 表示一个危险的或潜在的负面动作

下面的范例演示了这些类的使用

<table class="table">
  <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>

运行范例 »

运行以上范例,输出结果如下

上下文类

响应式表格

通过把任意的 .table 包在 .table-responsive 内,可以让表格水平滚动以适应小型设备( 小于 768px )

不过当在大于 768px 宽的大型设备上查看时,将看不到任何的差别

<div class="table-responsive">
  <table class="table">
    <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>

运行范例 »

运行以上范例,输出结果如下

响应式表格

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.