bootstrap3.0教程之多种表格效果(条纹状表格、条纹状表格、鼠标悬停等)-前端开发

标题：Bootstrap3.0教程之多种表格效果

标题：Bootstrap3.0教程之多种表格效果

前言

在网站制作中，表格是常用的页面元素之一。Bootstrap3.0为我们提供了多种表格效果，可以让我们在设计网站时更加灵活多样化。本篇教程将详细讲解如何利用Bootstrap3.0实现多种表格效果。

条纹状表格

概述

条纹状表格在Bootstrap3.0中是非常常见的一种表格风格，其配色简洁明快，同时也能增加页面美观度。

代码

以下代码演示如何创建一个条纹状表格：

<table class="table table-striped">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>地址</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>男</td>
      <td>北京市</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>男</td>
      <td>上海市</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>28</td>
      <td>女</td>
      <td>广州市</td>
    </tr>
  </tbody>
</table>

示例

以下是一个使用条纹状表格的示例：

鼠标悬停表格

概述

鼠标悬停表格是一种用户体验比较好的表格，当鼠标移到表格某一行上时，该行会变色，增强了用户对表格的感知度。

代码

以下代码演示如何创建一个鼠标悬停表格：

<table class="table table-hover">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>地址</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>男</td>
      <td>北京市</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>男</td>
      <td>上海市</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>28</td>
      <td>女</td>
      <td>广州市</td>
    </tr>
  </tbody>
</table>

示例

以下是一个使用鼠标悬停表格的示例：

表格样式

除了条纹状表格和鼠标悬停表格，Bootstrap3.0还提供了其他的表格样式，可以根据自己的需求进行选择。

代码

以下代码演示如何创建一个不同颜色的表格：

<table class="table table-bordered table-primary">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>地址</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>男</td>
      <td>北京市</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>男</td>
      <td>上海市</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>28</td>
      <td>女</td>
      <td>广州市</td>
    </tr>
  </tbody>
</table>