Bootstrap5创建悬停效果表格

103次阅读
没有评论

要创建具有悬停效果行的表格,可以使用 Bootstrap5 中的表格组件和 CSS 伪类选择器来实现。下面是详细的步骤和 HTML 示例:

步骤1:使用 <table> 元素创建表格,添加 table-hover 类使表格具有悬停效果行的样式。

步骤2:在表格中使用 <thead> 和 <tbody> 元素来分组表格的标题和内容。

步骤3:在表格行中使用 CSS 伪类选择器 :hover 来设置悬停时的样式。

HTML 示例代码如下:

<!DOCTYPE html>
<html>
<head>
	<title>Bootstrap 5 Hoverable Table</title>
	<meta charset="UTF-8">
	<!-- 引入 Bootstrap 5 样式文件 -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" integrity="sha512-PD/UfQuPnGwTJrFjRm8fGeCtYmRhZ1sAgBzRpL2UGIqPLwt12rm2d91oBcNGy8btjmjTHNhcElAxXfNVnFysZQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>

	<div class="container mt-5">
		<table class="table table-hover">
			<thead>
				<tr>
					<th>编号</th>
					<th>名称</th>
					<th>价格</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>001</td>
					<td>iPhone 13</td>
					<td>$1299</td>
				</tr>
				<tr>
					<td>002</td>
					<td>Samsung Galaxy S21</td>
					<td>$999</td>
				</tr>
				<tr>
					<td>003</td>
					<td>Google Pixel 6</td>
					<td>$899</td>
				</tr>
			</tbody>
		</table>
	</div>

	<!-- 引入 Bootstrap 5 JS 文件 -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js" integrity="sha512-6eWTKUNUqNwU+RRlCHx05AbUWuYJXol3krVJzv5Q+j7V0JjRwUb7dzsb4xP8+0txfHctXJc17h+OrUnbNVdeGg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>
</html>

在这个示例中,我们使用 Bootstrap5 的表格组件创建了一个简单的表格,并添加了 table-hover 类使表格具有悬停效果行的样式。在表格行中,我们使用 CSS 伪类选择器 :hover 来设置悬停时的样式。

正文完
 
评论(没有评论)