上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文件）：
01 <! DOCTYPE html>
02 <html lang="en">
03 <head>
04 <meta charset="UTF-8">
05 <link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
06 <title>Bootstrap - Load Table CSS</title>
07 </head>
08 <body>
09 <table class="table"> <! -- 只需要添加class="table"即可 -->
10 <tr>
11 <th>No</th>
12 <th>Name</th>
13 <th>Age</th>
14 <th>Gendle</th>
15 </tr>
16 <tr>
17 <td>001</td>
18 <td>Tom</td>
19 <td>18</td>
20 <td>male</td>
21 </tr>
22 <tr>
23 <td>002</td>
24 <td>Mary</td>
25 <td>20</td>
26 <td>female</td>
27 </tr>
28 <tr>
29 <td>003</td>
30 <td>Jack</td>
31 <td>22</td>
32 <td>male</td>
33 </tr>
34 </table>
35 <script src="../js/jquery.js"></script> <! --jQuery应该放在前面优
先加载-->
36 <script src="../bootstrap/js/bootstrap.js"></script>
37 </body>
38 </html>
39 <head>
本例效果如图2.7所示。
图2.7 应用Bootstrap表格样式
当然，Bootstrap框架功能非常强大，提供多种表格样式。下面，我们添加一种类名为“table-striped”的类似斑马纹表格样式，并同时添加类名为“table-bordered”的样式来为表格加上边框。
【代码2-3】（详见源代码ch02目录中ch02.loadTableStripedCSS.html文件）
01 <table class="table table-striped table-bordered">
02 <tr>
03 <th>No</th>
04 <th>Name</th>
05 <th>Age</th>
06 <th>Gendle</th>
07 </tr>
08 <tr>
09 <td>001</td>
10 <td>Tom</td>
11 <td>18</td>
12 <td>male</td>
13 </tr>
14 <tr>
15 <td>002</td>
16 <td>Mary</td>
17 <td>20</td>
18 <td>female</td>
19 </tr>
20 <tr>
21 <td>003</td>
22 <td>Jack</td>
23 <td>22</td>
24 <td>male</td>
25 </tr>
26 </table>
本例代码效果如图2.8所示。
图2.8 带斑马纹和边框的表格