Bootstrap2用户指南
3.3.4 表格行的样式
阅读(

Bootstrap基础

Bootstrap框架

Bootstrap基本样式

排版

源代码

表格

表格的可选样式

表格的默认样式

支持的表格标签

表格行的样式

除了可以为表格添加样式外,Bootstrap还专门表格的行提供了 4 个可选的情景类,来为表格的行添加特殊的背景颜色。这些情景类及含义见表 3‑2:

表 3‑2 表格行的情景类
含义
.success 表示成功或积极的行为
.error 表示危险或存在潜在危险的行为
.warning 表示可能需要引起注意的警告
.info 作为默认样式的替代样式

可以给表格的行添加指定的情景类,来改变特定行的背景颜色。如:

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Product</th>
      <th>Payment Taken</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr class="success">
      <td>1</td>
      <td>TB - Monthly</td>
      <td>01/04/2012</td>
      <td>Approved</td>
    </tr>
    <tr class="error">
      <td>2</td>
      <td>TB - Monthly</td>
      <td>02/04/2012</td>
      <td>Declined</td>
    </tr>
    <tr class="warning">
      <td>3</td>
      <td>TB - Monthly</td>
      <td>03/04/2012</td>
      <td>Pending</td>
    </tr>
    <tr class="info">
      <td>4</td>
      <td>TB - Monthly</td>
      <td>04/04/2012</td>
      <td>Call in to confirm</td>
    </tr>
  </tbody>
</table>

效果如图 3‑27所示:

Bootstrap表格行的样式
图3-27 Bootstrap表格行的样式

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验