Bootstrap中的排版(3)-表格

全屏宽度带水平线的表格  .table
带边框的表格       .table-bordered
条纹状表格        .table-striped
悬停变色表格       .table-hover
紧凑风格表格       .table-condensed

小练习:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
 7         <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 8         <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
 9     </head>
10     <body>
11         <table class="table table-striped table-bordered table-hover">
12             <thead>
13                 <tr>
14                     <th>标题一</th>
15                     <th>标题二</th>
16                     <th>标题三</th>
17                     <th>标题四</th>
18                     <th>标题五</th>
19                 </tr>
20             </thead>
21             <tbody>
22                 <tr>
23                     <td>内容一</td>
24                     <td>内容二</td>
25                     <td>内容三</td>
26                     <td>内容四</td>
27                     <td>内容五</td>
28                 </tr>
29                 <tr>
30                     <td>内容一</td>
31                     <td>内容二</td>
32                     <td>内容三</td>
33                     <td>内容四</td>
34                     <td>内容五</td>
35                 </tr>
36                 <tr>
37                     <td>内容一</td>
38                     <td>内容二</td>
39                     <td>内容三</td>
40                     <td>内容四</td>
41                     <td>内容五</td>
42                 </tr>
43             </tbody>
44         </table>
45     </body>
46 </html>
示例代码

 

 
posted @ 2017-06-08 21:30  #安生  阅读(302)  评论(0编辑  收藏  举报