Bootstrap-HTML（四）徽章与表格
- 前言
- 一、Bootstrap5 徽章
- （一）徽章的作用及创建
- （二）胶囊徽章
- （三）元素内的徽章
- 二、Bootstrap5 表格
- （一）创建一个简单的表格
- （二）表格颜色
- （三）创建带条纹行的表格
- （四）带边框表格
- （五）无边框表格
- （六）鼠标悬停状态表格
- （七）创建较小的表格
- （八）响应式表格
前言
- 在之前的博客中，我们已经详细探讨了 Bootstrap5 列表组，领略了它如何巧妙地对相关内容进行分组展示，以及在不同布局场景下所展现出的独特优势。
- 在这篇文章中，我们将把目光聚焦到另外两个同样重要且实用的元素 —— 徽章与表格
一、Bootstrap5 徽章
（一）徽章的作用及创建
- 徽章（Badges）在网页设计中有着重要的用途，一般用于在网页上标明一些有价值的信息，例如重要的标题、警告信息、通知计数器等
- 创建徽章十分简单，只需要将 .badge 类加上带有指定意义的颜色类（如 .bg-secondary）添加到 元素上即可。
- 而且徽章可以根据父元素的大小的变化而灵活变化
- 以下是一些示例代码展示不同颜色徽章的效果
<h4 class="badge bg-primary">hot</h4>
<span class="badge bg-primary">主要</span>
<span class="badge bg-secondary">次要</span>
<span class="badge bg-success">成功</span>
<span class="badge bg-danger">危险</span>
<span class="badge bg-warning">警告</span>
<span class="badge bg-info">信息</span>
<span class="badge bg-light">浅色</span>
<span class="badge bg-dark">深色</span>
（二）胶囊徽章
- 如果想让徽章呈现出药丸形状（具有更多圆角的样子），可以使用 .rounded-pill 类来设置，示例如下：
<span class="badge rounded-pill bg-primary">主要</span>
（三）元素内的徽章
徽章还可以应用在其他元素内部，比如在列表项中展示通知数量等情况，像下面这样：
<ul class="list-inline">
<li class="list-inline-item">首页</li>
<li class="list-inline-item">分类</li>
<li class="list-inline-item">消息
<span class="badge bg-secondary rounded-pill">5</span>
</li>
</ul>
二、Bootstrap5 表格
（一）创建一个简单的表格
- Bootstrap5 通过 .table 类来设置基础表格的样式，以下是一个简单的表格示例代码，包含表头和表体内容：
<div class="container">
<table class="table">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>手机号</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>22</td>
<td>13333445566</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>21</td>
<td>13211223344</td>
<tr>
<td>3</td>
<td>王五</td>
<td>22</td>
<td>13555667788</td>
</tr>
</tbody>
</table>
</div>
（二）表格颜色
- 通过指定意义的颜色类名可以为表格的行或者单元格设置颜色，不同颜色类有着不同的表意和应用场景，具体如下：
- .table-primary：蓝色，指定这是一个重要的操作。
- .-table-success：绿色，指定这是一个允许执行的操作。
- .table-danger：红色，指定这是可以危险的操作。
- .table-info：浅蓝色，表示内容已变更。
- .table-warning：橘色，表示需要注意的操作。
- .table-active：灰色，用于鼠标悬停效果。
- .table-secondary：灰色，表示内容不怎么重要。
- .table-light：浅灰色，可以是表格行的背景。
- .table-dark：深灰色，可以是表格行的背景。
（三）创建带条纹行的表格
- 通过添加 .table-striped 类，可在 内的行上看到条纹效果，示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 最新的 Bootstrap5 核心 css 文件 -->
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<!-- 图标文件 -->
<link rel="stylesheet" href="../../icons-v1.11.2/font/bootstrap-icons.min.css">
<!--最新的 Bootstrap5 核心 JavaScript 文件 -->
<script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-striped">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>手机号</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>22</td>
<td>13333445566</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>21</td>
<td>13211223344</td>
<tr>
<td>3</td>
<td>王五</td>
<td>22</td>
<td>13555667788</td>
</tr>
</tbody>
</table>
</body>
</html>
（四）带边框表格
<table class="table table-bordered">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>手机号</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>22</td>
<td>13333445566</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>21</td>
<td>13211223344</td>
<tr>
<td>3</td>
<td>王五</td>
<td>22</td>
<td>13555667788</td>
</tr>
</tbody>
</table>
（五）无边框表格
- 通过添加 .table-borderless 类可以取消表格和单元格所有边的边框，代码示例如下：
<table class="table table-borderless">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>手机号</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>22</td>
<td>13333445566</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>21</td>
<td>13211223344</td>
<tr>
<td>3</td>
<td>王五</td>
<td>22</td>
<td>13555667788</td>
</tr>
</tbody>
</table>
（六）鼠标悬停状态表格
使用 .table-hover 类可以为表格的每一行添加鼠标悬停效果（灰色背景），示例如下：
<table class="table table-hover">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>手机号</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>22</td>
<td>13333445566</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>21</td>
<td>13211223344</td>
<tr>
<td>3</td>
<td>王五</td>
<td>22</td>
<td>13555667788</td>
</tr>
</tbody>
</table>
（七）创建较小的表格
- .table-sm 类用于通过减少内边距来设置较小的表格，使表格更紧凑并节省空间，示例如下：
<table class="table table-sm">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>手机号</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>22</td>
<td>13333445566</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>21</td>
<td>13211223344</td>
<tr>
<td>3</td>
<td>王五</td>
<td>22</td>
<td>13555667788</td>
</tr>
</tbody>
</table>
（八）响应式表格
- 要使任何表格具有响应性，只需将 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格。还可以使用类 .table-responsive{-sm|-md|-lg|-xl} 根据视口宽度指定表格何时应具有滚动条，示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 最新的 Bootstrap5 核心 css 文件 -->
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<!-- 图标文件 -->
<link rel="stylesheet" href="../../icons-v1.11.2/font/bootstrap-icons.min.css">
<!--最新的 Bootstrap5 核心 JavaScript 文件 -->
<script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>手机号</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>22</td>
<td>13333445566</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>21</td>
<td>13211223344</td>
<tr>
<td>3</td>
<td>王五</td>
<td>22</td>
<td>13555667788</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
- 不同类对应的视口宽度及滚动条出现情况如下：
- .table-responsive-sm：在视口宽度 < 576px 时显示滚动条。
- .table-responsive-md：在视口宽度 < 768px 时显示滚动条。
- .table-responsive-lg：在视口宽度 < 992px 时显示滚动条。
- .table-responsive-xl：在视口宽度 < 1200px 时显示滚动条。
- .table-responsive-xxl：在视口宽度 < 1400px 时显示滚动条。
| 非常感谢您的阅读，喜欢的话记得三连哦 |
