要创建具有悬停效果行的表格，可以使用 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 来设置悬停时的样式。
正文完