![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=1739388223-E5gsvecEoSW7MhEnikyaPi43oGGtD2Jf-0-58c31452382c4f1f1ee2ab62b4a66e21)
![](https://epubservercos.yuewen.com/482A23/19549639808909106/epubprivate/OEBPS/Images/Figure-P27_20160.jpg?sign=1739388223-0ZSJr0J5KUxpX0mHarmrNpJwqtV6hyAK-0-626edde1aacaaf84c5ef9479682adf5f)
本例效果如图2.7所示。
![](https://epubservercos.yuewen.com/482A23/19549639808909106/epubprivate/OEBPS/Images/Figure-P28_11906.jpg?sign=1739388223-SsK45zkbGOJ7IgOlEjaRV3sk70tfFSRv-0-dfed09a769355b396095869728821f23)
图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=1739388223-KfMrgWV7yWnj92lmGmoY2nCWF5W3HOqL-0-b06bd1bf7722b8e7332850c3605af12c)
本例代码效果如图2.8所示。
![](https://epubservercos.yuewen.com/482A23/19549639808909106/epubprivate/OEBPS/Images/Figure-P29_12022.jpg?sign=1739388223-7TfsHgEgGeHZmXNuw1UakNQtAR6lJ5WF-0-2e1a51a99246ac5efa64806e6769a5eb)
图2.8 带斑马纹和边框的表格