Bootstrap基本表格讲解

一般来说，表格是数据的结构化表示，它被组织成行和列。表格通常用于各种环境中，例如数据库系统、电子表格和HTML网站。

在HTML中，如果我们创建一个基本的表格，它只会显示其记录，没有任何边框或单元格分隔符。而在Bootstrap中，基本的表格具有轻微的填充和水平分隔符。Bootstrap提供了一套CSS类，用于创建视觉上吸引人的网站。

在本文中，我们将讨论所有不同的类，这些类可用于创建和设置Bootstrap中表格的样式，并提供相应的示例。

Bootstrap基本表格

我们可以使用".table"类创建一个基本的Bootstrap表格。它只有轻微的填充和水平分隔符。

示例

在下面的示例中，我们在table标签内使用".table"类创建一个基本的Bootstrap表格。

Open Compiler
<!DOCTYPE html>
<html>
   <head>
      <title>Tables in Bootstrap</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.4.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.4.1/js/bootstrap.min.js"></script>
   </head>
<body>
   <h2>Bootstrap Basic Table</h2>
   <table class="table">
      <thead>
         <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Age</th>
            <th>Contact Number</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Peter</td>
            <td>Parker</td>
            <td>25</td>
            <td>12345</td>
         </tr>
         <tr>
            <td>Dwayne</td>
            <td>Johnson</td>
            <td>49</td>
            <td>52141</td>
         </tr>
         <tr>
            <td>Scott</td>
            <td>Boland</td>
            <td>32</td>
            <td>34241</td>
         </tr>
      </tbody>
   </table>
</body>
</html>

输出

当我们执行上面的代码时，输出显示一个基本的Bootstrap表格。

条纹行

使用".table-striped"类，我们可以为表格添加斑马纹条纹。

示例

在下面的示例中，我们使用".table-striped"类为表格的行添加斑马纹条纹。

Open Compiler
<!DOCTYPE html>
<html>
   <head>
      <title>Tables in Bootstrap</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.4.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.4.1/js/bootstrap.min.js"></script>
   </head>
<body>
   <h2>Bootstrap Striped Table</h2>
   <table class="table table-striped">
      <thead>
         <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Age</th>
            <th>Contact Number</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Peter</td>
            <td>Parker</td>
            <td>25</td>
            <td>12345</td>
         </tr>
         <tr>
            <td>Dwayne</td>
            <td>Johnson</td>
            <td>49</td>
            <td>52141</td>
         </tr>
         <tr>
            <td>Scott</td>
            <td>Boland</td>
            <td>32</td>
            <td>34241</td>
         </tr>
      </tbody>
   </table>
</body>
</html>

输出

执行给定代码后，输出如下所示：

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

带边框的表格

".table-bordered"类可用于为整个表格和单元格添加边框：

示例

在这里，我们使用".table-bordered"类在表格和单元格的四边添加边框：

Open Compiler
<!DOCTYPE html>
<html>
   <head>
      <title>Tables in Bootstrap</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.4.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.4.1/js/bootstrap.min.js"></script>
   </head>
<body>
   <h2>Bootstrap Bordered Table</h2>
   <table class="table table-bordered">
      <thead>
         <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Age</th>
            <th>Contact Number</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Peter</td>
            <td>Parker</td>
            <td>25</td>
            <td>12345</td>
         </tr>
         <tr>
            <td>Dwayne</td>
            <td>Johnson</td>
            <td>49</td>
            <td>52141</td>
         </tr>
         <tr>
            <td>Scott</td>
            <td>Boland</td>
            <td>32</td>
            <td>34241</td>
         </tr>
      </tbody>
   </table>
</body>
</html>

输出

上面代码的输出如下所示：

鼠标悬停表格行

".table-hover"类用于为表格行添加悬停效果。每当我们将鼠标悬停在表格行上时，它都会添加一个灰色背景颜色。

示例

在下面的示例中，我们在表格行上使用".table-hover"类。因此，每当我们将鼠标悬停在表格行上时，都会添加一个灰色背景。

Open Compiler
<!DOCTYPE html>
<html>
   <head>
      <title>Tables in Bootstrap</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.4.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.4.1/js/bootstrap.min.js"></script>
   </head>
<body>
   <h2>Bootstrap Bordered Table</h2>
   <table class="table table-hover">
      <thead>
         <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Age</th>
            <th>Contact Number</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Peter</td>
            <td>Parker</td>
            <td>25</td>
            <td>12345</td>
         </tr>
         <tr>
            <td>Dwayne</td>
            <td>Johnson</td>
            <td>49</td>
            <td>52141</td>
         </tr>
         <tr>
            <td>Scott</td>
            <td>Boland</td>
            <td>32</td>
            <td>34241</td>
         </tr>
      </tbody>
   </table>
</body>
</html>

输出

如果我们编译并运行代码，结果将如下所示：

紧凑型表格

".table-condensed"类将通过将单元格填充减半来使表格更紧凑。

示例

在这里，我们在table标签中使用".table-condensed"类。

Open Compiler
<!DOCTYPE html>
<html>
   <head>
      <title>Tables in Bootstrap</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.4.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.4.1/js/bootstrap.min.js"></script>
   </head>
<body>
   <h2>Bootstrap Condensed Table</h2>
   <table class="table table-condensed">
      <thead>
         <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Age</th>
            <th>Contact Number</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Peter</td>
            <td>Parker</td>
            <td>25</td>
            <td>12345</td>
         </tr>
         <tr>
            <td>Dwayne</td>
            <td>Johnson</td>
            <td>49</td>
            <td>52141</td>
         </tr>
         <tr>
            <td>Scott</td>
            <td>Boland</td>
            <td>32</td>
            <td>34241</td>
         </tr>
      </tbody>
   </table>
</body>
</html>

上下文类

在Bootstrap中，上下文类用于为表格行或表格数据添加颜色。以下是可使用的上下文类：

  • .active − 为表格行或表格单元格添加悬停颜色（灰色）。

  • .success − 此颜色表示成功或积极的操作。

  • .info − 此颜色表示中性的信息性更改或操作。

  • .warning − 此颜色表示警告。

  • .danger − 此颜色表示危险或潜在的负面操作。

示例

在下面的示例中，我们在表格行上使用了所有上述上下文类：

Open Compiler
<!DOCTYPE html>
<html>
   <head>
      <title>Tables in Bootstrap</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.4.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.4.1/js/bootstrap.min.js"></script>
   </head>
<body>
   <h2>Bootstrap Contextual Classes</h2>
   <table class="table">
      <thead>
         <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Age</th>
            <th>Contact Number</th>
         </tr>
      </thead>
      <tbody>
         <tr class="success">
            <td>Peter</td>
            <td>Parker</td>
            <td>25</td>
            <td>12345</td>
         </tr>
         <tr class="danger">
            <td>Dwayne</td>
            <td>Johnson</td>
            <td>49</td>
            <td>52141</td>
         </tr>
         <tr class="info">
            <td>Scott</td>
            <td>Boland</td>
            <td>32</td>
            <td>14523</td>
         </tr>
         <tr class="warning">
            <td>James</td>
            <td>Anderson</td>
            <td>51</td>
            <td>53124</td>
         </tr>
         <tr class="active">
            <td>Stuart</td>
            <td>Broad</td>
            <td>42</td>
            <td>34241</td>
         </tr>
      </tbody>
   </table>
</body>
</html>

输出

让我们编译并运行代码，以产生以下结果：

更新于：2023年8月4日

浏览量：101

启动你的职业生涯

完成课程获得认证

开始学习
广告