如何使用 Bootstrap 将徽章放在表格单元格中？

Bootstrap 是一个常用的前端框架，徽章和表格则是网站常用的元素。在 Bootstrap 中，可以很方便地将徽章放在表格单元格中。

Bootstrap 徽章

徽章是一种展示数据或状态的小标记，将它们放在有关联的文本旁边或其他产品元素旁边。

Bootstrap 中的徽章组件可以使用以下类进行定制：

• .badge：用于定义徽章组件的基本样式。
• .badge-<variant>：用于定义徽章组件的变化样式。其中，<variant> 表示颜色变化，可以是 primary、secondary、success、danger、warning、info 或 light。

例如：

<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>

效果如下：

Bootstrap 表格

表格是一种展示数据的常见元素，Bootstrap 中的表格组件可以使用以下类进行定制：

• .table：用于定义表格组件的基本样式。
• .table-sm：用于定义紧凑型表格组件的基本样式。
• .table-bordered：用于定义带边框的表格组件的基本样式。
• .table-borderless：用于定义无边框的表格组件的基本样式。
• .table-striped：用于定义隔行变色的表格组件的基本样式。
• .table-hover：用于定义鼠标悬停时的效果样式。

例如：

<table class="table table-striped table-hover">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First Name</th>
      <th scope="col">Last Name</th>
      <th scope="col">Username</th>
      <th scope="col">Badge</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>John</td>
      <td>Doe</td>
      <td>@johndoe</td>
      <td><span class="badge badge-primary">Admin</span></td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jane</td>
      <td>Doe</td>
      <td>@janedoe</td>
      <td><span class="badge badge-secondary">User</span></td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Jim</td>
      <td>Smith</td>
      <td>@jimsmith</td>
      <td><span class="badge badge-warning">Guest</span></td>
    </tr>
  </tbody>
</table>

效果如下：

将徽章放在表格单元格中

可以在表格单元格中使用徽章组件，例如：

<td><span class="badge badge-primary">Admin</span></td>
<td><span class="badge badge-secondary">User</span></td>
<td><span class="badge badge-warning">Guest</span></td>

将这个代码嵌入到前面的表格代码中，就可以将徽章放在表格单元格中了。

Markdown 代码片段：

## Bootstrap 徽章

徽章是一种展示数据或状态的小标记，将它们放在有关联的文本旁边或其他产品元素旁边。

Bootstrap 中的徽章组件可以使用以下类进行定制：

- `.badge`：用于定义徽章组件的基本样式。
- `.badge-<variant>`：用于定义徽章组件的变化样式。其中，`<variant>` 表示颜色变化，可以是 `primary`、`secondary`、`success`、`danger`、`warning`、`info` 或 `light`。

例如：

```html
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>

效果如下：

Bootstrap 表格

表格是一种展示数据的常见元素，Bootstrap 中的表格组件可以使用以下类进行定制：

• .table：用于定义表格组件的基本样式。
• .table-sm：用于定义紧凑型表格组件的基本样式。
• .table-bordered：用于定义带边框的表格组件的基本样式。
• .table-borderless：用于定义无边框的表格组件的基本样式。
• .table-striped：用于定义隔行变色的表格组件的基本样式。
• .table-hover：用于定义鼠标悬停时的效果样式。

例如：

<table class="table table-striped table-hover">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First Name</th>
      <th scope="col">Last Name</th>
      <th scope="col">Username</th>
      <th scope="col">Badge</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>John</td>
      <td>Doe</td>
      <td>@johndoe</td>
      <td><span class="badge badge-primary">Admin</span></td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jane</td>
      <td>Doe</td>
      <td>@janedoe</td>
      <td><span class="badge badge-secondary">User</span></td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Jim</td>
      <td>Smith</td>
      <td>@jimsmith</td>
      <td><span class="badge badge-warning">Guest</span></td>
    </tr>
  </tbody>
</table>

效果如下：

将徽章放在表格单元格中

可以在表格单元格中使用徽章组件，例如：

<td><span class="badge badge-primary">Admin</span></td>
<td><span class="badge badge-secondary">User</span></td>
<td><span class="badge badge-warning">Guest</span></td>

将这个代码嵌入到前面的表格代码中，就可以将徽章放在表格单元格中了。