![Bootstrap 4 Web设计与开发实战](https://wfqqreader-1252317822.image.myqcloud.com/cover/160/36862160/b_36862160.jpg)
上QQ阅读APP看书,第一时间看更新
2.2 调用Bootstrap样式
以编写一个表格为例,如果不使用Bootstrap或者其他类似的框架,有以下两步:
(1)第一步肯定是构思设计表格的样式,比如宽度、高度、行高、对齐方式、边框等很多地方需要考虑,而且一开始的设想与实际效果并不符合,还需要后面不断地调试。
(2)第二步需要编写相应的HTML/CSS代码,边写,边调试,边思考如何给id或者class命名,最后可能还需要上级或者同事进行审核。
如果决定使用Bootstrap,那么只需要引入Bootstrap,然后在<table>标签中添加一个class="table"就可以获得一个Bootstrap设定好的表格样式。
【代码2-2】应用Bootstrap表格样式(详见源代码ch02目录中ch02.loadTableCSS.html文件)
![](https://epubservercos.yuewen.com/482A23/19549639808909106/epubprivate/OEBPS/Images/Figure-P26_20159.jpg?sign=1739285788-UEuaUORLxhVfmUMcaNeWzdN473WIRtBK-0-137d16ba3b5709626ad308a37b9b67a9)
![](https://epubservercos.yuewen.com/482A23/19549639808909106/epubprivate/OEBPS/Images/Figure-P27_20160.jpg?sign=1739285788-XxbzYzdPBmGgFbpVvw2VVogJSICHeg1W-0-d38f0776dcb37612623123bc9c7c6a9c)
本例效果如图2.7所示。
![](https://epubservercos.yuewen.com/482A23/19549639808909106/epubprivate/OEBPS/Images/Figure-P28_11906.jpg?sign=1739285788-6s8slyAfNxXcrr35y2prkZssAqydJy8m-0-243c8e42081c64580ad13b62fd0e6cd0)
图2.7 应用Bootstrap表格样式
Bootstrap框架功能非常强大,可提供多种表格样式。下面我们添加一种类名为“table-striped”的类似斑马纹表格样式,并同时添加类名为“table-bordered”的样式来为表格加上边框。
【代码2-3】(详见源代码ch02目录中ch02.loadTableStripedCSS.html文件)
![](https://epubservercos.yuewen.com/482A23/19549639808909106/epubprivate/OEBPS/Images/Figure-P28_20161.jpg?sign=1739285788-Mcfpg8UVm9PkwUIKTqcLJlrOD4rFRurd-0-ca3c7b7ff3e64a4c8e729ad036f25667)
本例代码效果如图2.8所示。
![](https://epubservercos.yuewen.com/482A23/19549639808909106/epubprivate/OEBPS/Images/Figure-P29_12022.jpg?sign=1739285788-g27U0IuNXCTBbspMTIf1MEOc9hXMklVH-0-1b125713810bc440e02441a7e78ff8b6)
图2.8 带斑马纹和边框的表格