Bootstrap 5.1.3 可以通过修改表格的 CSS 类来创建深色表格。具体步骤如下:
- 在表格的 table 标签上添加 table-dark 类,来设置整个表格为深色样式。
- 对于表头,添加 thead-dark 类,来设置表头为深色样式。
- 对于单元格中的文本,可以使用 text-white 类来设置为白色文本。
下面是一个完整的 HTML 示例代码,可以创建一个深色表格:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap Dark Table Example</title>
<!-- 引入Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<table class="table table-dark">
<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>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<!-- 引入Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>
在这个示例中,我们在 table 标签上添加了 table-dark 类来设置整个表格为深色样式,同时在表头 thead 上添加了 thead-dark 类来设置表头为深色样式。每一行数据中的单元格文本都使用了 text-white 类来设置为白色文本。
正文完