在bootstrap中，可以使用table-hover类名实现鼠标悬停表格行变色的效果。下面小编举例讲解bootstrap如何制作鼠标悬停表格行变色的效果。工具/原料morebootstrap+html代码编辑器：zend studio 10.0 方法/步骤1/6分步阅读

新建一个html文件，命名为test.html，用于讲解bootstrap如何制作鼠标悬停表格行变色的效果。

2/6

在test.html文件内，使用link标签加载bootstrap.min.css样式文件。

3/6

在test.html文件内，在div内，使用table标签创建一个表格。

4/6

在test.html文件内，给div添加class属性，并通过该属性定义div的样式，设置它的宽度为350px，外边距为10px。

5/6

在table标签内，给它添加table类名，实现表格样式的添加，再添加table-bordered类名，显示表格边框，最后，添加table-hover类名，实现鼠标悬停表格行变色的效果。

6/6

在浏览器打开test.html文件，查看实现的效果。

总结：1/1

1、使用link标签加载bootstrap.min.css样式文件。2、在div内，使用table标签创建一个表格。3、给div添加class属性，并通过该属性定义div的样式，设置它的宽度为350px，外边距为10px。4、在table标签内，给它添加table类名，实现表格样式的添加，再添加table-bordered类名，显示表格边框，最后，添加table-hover类名，实现鼠标悬停表格行变色的效果。5、在浏览器打开test.html文件，查看实现的效果。

BOOTSTRAPHTML