Bootstrap 基本表格

总体而言，表格是一种结构化的数据表示方式，按照行和列进行组织。表格通常用于各种上下文中，例如数据库系统、电子表格和HTML网站。

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

在本文中，我们将讨论可以用于创建和样式化Bootstrap表格的各种不同类，并提供适当的示例。

Bootstrap基本表格

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

示例

在下面的例子中，我们使用“ table ”类在table标签内创建了一个基本的Bootstrap表格。

<!DOCTYPE html>
<html>
   <head>
      <title>Tables in Bootstrap</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/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表格 –

Striped Rows

使用“ .table-striped ”类，我们可以在表格中添加斑马纹。

示例

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

<!DOCTYPE html>
<html>
   <head>
      <title>Tables in Bootstrap</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/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>

输出

在执行给定的查询时，输出显示如下−

带边框的表格

“.table-bordered”类可以用来为整个表格和单元格添加边框−

示例

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

<!DOCTYPE html>
<html>
   <head>
      <title>Tables in Bootstrap</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/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”类在表格行上。因此，当我们将鼠标悬停在表格行上时，将添加一个灰色的背景。

<!DOCTYPE html>
<html>
   <head>
      <title>Tables in Bootstrap</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/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-condensed”类。

<!DOCTYPE html>
<html>
   <head>
      <title>Tables in Bootstrap</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/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 − 此颜色表示危险或潜在的负面操作。

示例

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

<!DOCTYPE html>
<html>
   <head>
      <title>Tables in Bootstrap</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/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>