bootstrap表格多样式及代码 

  1 <!DOCTYPE HTML>
  2 <html>
  3 <head>
  4     <meta charset="utf-8">
  5     <title>基础表格</title>
  6     <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  7 </head>
  8 
  9 <body>
 10 <h1>基础表格</h1>
 11 <table class="table">
 12     <thead>
 13     <tr>
 14         <th>表格标题</th>
 15         <th>表格标题</th>
 16         <th>表格标题</th>
 17     </tr>
 18     </thead>
 19     <tbody>
 20     <tr>
 21         <td>表格单元格</td>
 22         <td>表格单元格</td>
 23         <td>表格单元格</td>
 24     </tr>
 25     <tr>
 26         <td>表格单元格</td>
 27         <td>表格单元格</td>
 28         <td>表格单元格</td>
 29     </tr>
 30     </tbody>
 31 </table>
 32 <h1>斑马线表格</h1>
 33 <table class="table table-striped">
 34     <thead>
 35     <tr>
 36         <th>表格标题</th>
 37         <th>表格标题</th>
 38         <th>表格标题</th>
 39     </tr>
 40     </thead>
 41     <tbody>
 42     <tr>
 43         <td>表格单元格</td>
 44         <td>表格单元格</td>
 45         <td>表格单元格</td>
 46     </tr>
 47     <tr>
 48         <td>表格单元格</td>
 49         <td>表格单元格</td>
 50         <td>表格单元格</td>
 51     </tr>
 52     <tr>
 53         <td>表格单元格</td>
 54         <td>表格单元格</td>
 55         <td>表格单元格</td>
 56     </tr>
 57     <tr>
 58         <td>表格单元格</td>
 59         <td>表格单元格</td>
 60         <td>表格单元格</td>
 61     </tr>
 62     </tbody>
 63 </table>
 64 <h1>带边框的表格</h1>
 65 <table class="table table-bordered">
 66     <thead>
 67     <tr>
 68         <th>表格标题</th>
 69         <th>表格标题</th>
 70         <th>表格标题</th>
 71     </tr>
 72     </thead>
 73     <tbody>
 74     <tr>
 75         <td>表格单元格</td>
 76         <td>表格单元格</td>
 77         <td>表格单元格</td>
 78     </tr>
 79     <tr>
 80         <td>表格单元格</td>
 81         <td>表格单元格</td>
 82         <td>表格单元格</td>
 83     </tr>
 84     <tr>
 85         <td>表格单元格</td>
 86         <td>表格单元格</td>
 87         <td>表格单元格</td>
 88     </tr>
 89     <tr>
 90         <td>表格单元格</td>
 91         <td>表格单元格</td>
 92         <td>表格单元格</td>
 93     </tr>
 94     </tbody>
 95 </table>
 96 <h1>鼠标悬浮高亮的表格</h1>
 97 <table class="table table-striped table-bordered table-hover">
 98     <thead>
 99     <tr>
100         <th>表格标题</th>
101         <th>表格标题</th>
102         <th>表格标题</th>
103     </tr>
104     </thead>
105     <tbody>
106     <tr>
107         <td>表格单元格</td>
108         <td>表格单元格</td>
109         <td>表格单元格</td>
110     </tr>
111     <tr>
112         <td>表格单元格</td>
113         <td>表格单元格</td>
114         <td>表格单元格</td>
115     </tr>
116     <tr>
117         <td>表格单元格</td>
118         <td>表格单元格</td>
119         <td>表格单元格</td>
120     </tr>
121     <tr>
122         <td>表格单元格</td>
123         <td>表格单元格</td>
124         <td>表格单元格</td>
125     </tr>
126     </tbody>
127 </table>
128 <h1>紧凑型表格</h1>
129 <table class="table table-condensed">
130     <thead>
131     <tr>
132         <th>表格标题</th>
133         <th>表格标题</th>
134         <th>表格标题</th>
135     </tr>
136     </thead>
137     <tbody>
138     <tr>
139         <td>表格单元格</td>
140         <td>表格单元格</td>
141         <td>表格单元格</td>
142     </tr>
143     <tr>
144         <td>表格单元格</td>
145         <td>表格单元格</td>
146         <td>表格单元格</td>
147     </tr>
148     <tr>
149         <td>表格单元格</td>
150         <td>表格单元格</td>
151         <td>表格单元格</td>
152     </tr>
153     <tr>
154         <td>表格单元格</td>
155         <td>表格单元格</td>
156         <td>表格单元格</td>
157     </tr>
158     </tbody>
159 </table>
160 <h1>响应式表格</h1>
161 <div class="table-responsive">
162     <table class="table table-bordered">
163         <thead>
164         <tr>
165             <th>表格标题</th>
166             <th>表格标题</th>
167             <th>表格标题</th>
168         </tr>
169         </thead>
170         <tbody>
171         <tr>
172             <td>表格单元格</td>
173             <td>表格单元格</td>
174             <td>表格单元格</td>
175         </tr>
176         <tr>
177             <td>表格单元格</td>
178             <td>表格单元格</td>
179             <td>表格单元格</td>
180         </tr>
181         <tr>
182             <td>表格单元格</td>
183             <td>表格单元格</td>
184             <td>表格单元格</td>
185         </tr>
186         <tr>
187             <td>表格单元格</td>
188             <td>表格单元格</td>
189             <td>表格单元格</td>
190         </tr>
191         </tbody>
192     </table>
193 </div>
194 </body>
195 </html>


 

posted @ 2016-10-25 21:09  皇阿码  阅读(1652)  评论(0)    收藏  举报