Bootstrap3实用教程
2.5.6 表格的情景类
阅读(

Bootstrap基础

Bootstrap全局样式

概述

栅格系统

排版

源代码

表格

紧凑型表格

带悬停效果的表格

带边框的表格

带条纹的表格

基本的表格

表格的情景类

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

表 2‑2 表格行的情景类

含义
.active 为表格的行或单元格上应用鼠标悬停时的颜色
.success 表示成功或积极的行为
.info 作为默认样式的替代样式
.warning 表示可能需要引起注意的警告
.danger 表示危险或存在潜在负面影响的行为

可以给表格的 <tr>、<th>、<td> 应用指定的情景类,来为特定行、标题单元格、数据单元格添加特殊的背景颜色。如:

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Column heading</th>
      <th>Column heading</th>
      <th>Column heading</th>
    </tr>
  </thead>
  <tbody>
    <tr class="active">
      <th scope="row">1</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="success">
      <th scope="row">3</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="info">
      <th scope="row">5</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr>
      <th scope="row">6</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="warning">
      <th scope="row">7</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr>
      <th scope="row">8</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="danger">
      <th scope="row">9</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
  </tbody>
</table>

效果如图 2‑45所示:

为表格应用情景类
图2-45 为表格应用情景类

通过为表格中的一行或一个单元格添加颜色而赋予不同的意义,只是提供了一种视觉上的表现,并不能为使用辅助技术(如,屏幕阅读器)浏览网页的用户提供更多信息。因此,请确保通过颜色而赋予的意义,能够通过相应行或单元格中的可见文本内容本身表达出来,或者通过包含额外的方式来表达出来。

关于作者

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

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

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

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验