Bootstrap前端开发实例｜自定义表格数据行的背景颜色

清华计算机学堂 2022-12-10

1753

Bootstrap是Twitter开发的一套Web前端框架，Bootstrap可以简单地理解为：对CSS的再次封装，因此在大多数情况下，对Bootstrap的应用就是对该框架的相关调用。

本系列所有Bootstrap代码基于Bootstrap 4.3.1实现，在IntelliJ IDEA 2019.2.3环境中编写完成，在最新版的“搜狗高速浏览器”和“Google Chrome浏览器”上测试成功，因此建议读者在上述环境或条件下使用源代码。所有源代码不需要下载Bootstrap的其他文件，在使用时保持网络畅通即可。此外，本系列实例推文需要读者有一定的HTML、CSS和JavaScript的基础知识。

下面这个实例演示了自定义表格数据行的背景颜色。

实例功能

此实例主要通过使用table-danger、table-secondary等类，实现在表格上使用不同的颜色设置数据行背景的效果。当在浏览器中显示页面时，单击“设置偶数行背景为红色”按钮，则表格中的偶数(以0为基准)行的背景颜色呈现红色，如图1所示。

■ 图1

单击“设置偶数行背景为灰色”按钮，则表格中的偶数行的背景颜色呈现灰色，如图2所示。

■ 图2

实现代码

在上面这段代码中，<tr class="table-warning">表示设置该数据行的背景颜色为橘色。<tr class="table-success">表示设置该数据行的背景颜色为绿色。<tr class=" table-primary">表示设置该数据行的背景颜色为蓝色。<tr class=" table-danger">表示设置该数据行的背景颜色为红色。除此之外，Bootstrap 4还自定义了下列几种颜色来设置表格数据行背景：table-info(青色)、table-active(灰色)、table-secondary(灰色)、table-light(浅色)、table-dark(黑色)。

此实例的源文件是MyCode＼ChapB＼ChapB054.html。

源代码下载

关注微信公众号，后台回复关键词 “Bootstrap代码097” 即可获得完整源代码。

* 在测试代码时，必须保持网络畅通。

参考图书

《Bootstrap+Vue.js前端开发超实用代码集锦》

ISBN：978-7-302-56815-5

罗帅罗斌编著

定价：99.8元