Bootstrap5创建条纹行表格

91次阅读
没有评论

要创建条纹行表格,可以在Bootstrap5中使用表格类 .table-striped。这个类会为表格的奇数行添加灰色的背景色,使得表格更加易于阅读。

以下是创建条纹行表格的示例代码:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Striped Table using Bootstrap 5</title>
	<!-- 导入Bootstrap 5的CSS文件 -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css">
</head>
<body>
	<div class="container">
		<table class="table table-striped">
			<thead>
				<tr>
					<th>姓名</th>
					<th>年龄</th>
					<th>性别</th>
					<th>城市</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>张三</td>
					<td>25</td>
					<td>男</td>
					<td>北京</td>
				</tr>
				<tr>
					<td>李四</td>
					<td>30</td>
					<td>女</td>
					<td>上海</td>
				</tr>
				<tr>
					<td>王五</td>
					<td>28</td>
					<td>男</td>
					<td>广州</td>
				</tr>
				<tr>
					<td>赵六</td>
					<td>32</td>
					<td>女</td>
					<td>深圳</td>
				</tr>
			</tbody>
		</table>
	</div>
	<!-- 导入Bootstrap 5的JS文件 -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
</body>
</html>

在这个示例中,我们使用 .table-striped 类为表格添加了条纹行样式,同时在页面的头部导入了Bootstrap 5的CSS和JS文件。

正文完
 
评论(没有评论)