
上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文件)


本例效果如图2.7所示。

图2.7 应用Bootstrap表格样式
Bootstrap框架功能非常强大,可提供多种表格样式。下面我们添加一种类名为“table-striped”的类似斑马纹表格样式,并同时添加类名为“table-bordered”的样式来为表格加上边框。
【代码2-3】(详见源代码ch02目录中ch02.loadTableStripedCSS.html文件)

本例代码效果如图2.8所示。

图2.8 带斑马纹和边框的表格