Bootstrap创建深色表格

58次阅读
没有评论

Bootstrap 5.1.3 可以通过修改表格的 CSS 类来创建深色表格。具体步骤如下:

  1. 在表格的 table 标签上添加 table-dark 类,来设置整个表格为深色样式。
  2. 对于表头,添加 thead-dark 类,来设置表头为深色样式。
  3. 对于单元格中的文本,可以使用 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 类来设置为白色文本。

正文完
 
评论(没有评论)