BootStrap TABLE 相关设置案例
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <title></title> 8 <link rel="stylesheet" href="css/bootstrap.css"> 9 <!--[if lt IE 9]> 10 <script src="js/html5shiv.min.js"></script> 11 <script src="js/respond.min.js"></script> 12 <![endif]--> 13 </head> 14 <body> 15 <div class="container"> 16 <h1>全局CSS样式——表格</h1> 17 18 <h3>TABLE的默认样式</h3> 19 <table> 20 <thead> 21 <tr> 22 <th>编号</th> 23 <th>姓名</th> 24 <th>住址</th> 25 <th>操作</th> 26 </tr> 27 </thead> 28 <tbody> 29 <tr> 30 <td>100011</td> 31 <td>Tommy</td> 32 <td>北京市海淀区万寿路120号</td> 33 <td> 34 <a class="btn btn-success btn-xs" href="#">更新</a> 35 </td> 36 </tr> 37 <tr> 38 <td>100022</td> 39 <td>Cruiser</td> 40 <td>北京市海淀区万寿路122号</td> 41 <td> 42 <a class="btn btn-warning btn-xs" href="#">修改</a> 43 </td> 44 </tr> 45 <tr> 46 <td>100077</td> 47 <td>Jefferry</td> 48 <td>北京市海淀区万寿路123号</td> 49 <td> 50 <a class="btn btn-info btn-xs" href="#">详情</a> 51 </td> 52 </tr> 53 <tr> 54 <td>100099</td> 55 <td>Kingston</td> 56 <td>北京市海淀区万寿路124号</td> 57 <td> 58 <a class="btn btn-danger btn-xs" href="#">删除</a> 59 </td> 60 </tr> 61 </tbody> 62 </table> 63 64 <h3>Bootstrap提供的基础表格</h3> 65 <table class="table"> 66 <thead> 67 <tr> 68 <th>编号</th> 69 <th>姓名</th> 70 <th>住址</th> 71 <th>操作</th> 72 </tr> 73 </thead> 74 <tbody> 75 <tr> 76 <td>100011</td> 77 <td>Tommy</td> 78 <td>北京市海淀区万寿路120号</td> 79 <td> 80 <a class="btn btn-success btn-xs" href="#">更新</a> 81 </td> 82 </tr> 83 <tr> 84 <td>100022</td> 85 <td>Cruiser</td> 86 <td>北京市海淀区万寿路122号</td> 87 <td> 88 <a class="btn btn-warning btn-xs" href="#">修改</a> 89 </td> 90 </tr> 91 <tr> 92 <td>100077</td> 93 <td>Jefferry</td> 94 <td>北京市海淀区万寿路123号</td> 95 <td> 96 <a class="btn btn-info btn-xs" href="#">详情</a> 97 </td> 98 </tr> 99 <tr> 100 <td>100099</td> 101 <td>Kingston</td> 102 <td>北京市海淀区万寿路124号</td> 103 <td> 104 <a class="btn btn-danger btn-xs" href="#">删除</a> 105 </td> 106 </tr> 107 </tbody> 108 </table> 109 110 <h3>带边框的表格</h3> 111 <table class="table table-bordered"> 112 <thead> 113 <tr> 114 <th>编号</th> 115 <th>姓名</th> 116 <th>住址</th> 117 <th>操作</th> 118 </tr> 119 </thead> 120 <tbody> 121 <tr> 122 <td>100011</td> 123 <td>Tommy</td> 124 <td>北京市海淀区万寿路120号</td> 125 <td> 126 <a class="btn btn-success btn-xs" href="#">更新</a> 127 </td> 128 </tr> 129 <tr> 130 <td>100022</td> 131 <td>Cruiser</td> 132 <td>北京市海淀区万寿路122号</td> 133 <td> 134 <a class="btn btn-warning btn-xs" href="#">修改</a> 135 </td> 136 </tr> 137 <tr> 138 <td>100077</td> 139 <td>Jefferry</td> 140 <td>北京市海淀区万寿路123号</td> 141 <td> 142 <a class="btn btn-info btn-xs" href="#">详情</a> 143 </td> 144 </tr> 145 <tr> 146 <td>100099</td> 147 <td>Kingston</td> 148 <td>北京市海淀区万寿路124号</td> 149 <td> 150 <a class="btn btn-danger btn-xs" href="#">删除</a> 151 </td> 152 </tr> 153 </tbody> 154 </table> 155 156 157 <h3>隔行变色的表格</h3> 158 <table class="table table-striped"> 159 <thead> 160 <tr> 161 <th>编号</th> 162 <th>姓名</th> 163 <th>住址</th> 164 <th>操作</th> 165 </tr> 166 </thead> 167 <tbody> 168 <tr> 169 <td>100011</td> 170 <td>Tommy</td> 171 <td>北京市海淀区万寿路120号</td> 172 <td> 173 <a class="btn btn-success btn-xs" href="#">更新</a> 174 </td> 175 </tr> 176 <tr> 177 <td>100022</td> 178 <td>Cruiser</td> 179 <td>北京市海淀区万寿路122号</td> 180 <td> 181 <a class="btn btn-warning btn-xs" href="#">修改</a> 182 </td> 183 </tr> 184 <tr> 185 <td>100077</td> 186 <td>Jefferry</td> 187 <td>北京市海淀区万寿路123号</td> 188 <td> 189 <a class="btn btn-info btn-xs" href="#">详情</a> 190 </td> 191 </tr> 192 <tr> 193 <td>100099</td> 194 <td>Kingston</td> 195 <td>北京市海淀区万寿路124号</td> 196 <td> 197 <a class="btn btn-danger btn-xs" href="#">删除</a> 198 </td> 199 </tr> 200 </tbody> 201 </table> 202 203 <h3>鼠标悬停变色的表格</h3> 204 <table class="table table-hover"> 205 <thead> 206 <tr> 207 <th>编号</th> 208 <th>姓名</th> 209 <th>住址</th> 210 <th>操作</th> 211 </tr> 212 </thead> 213 <tbody> 214 <tr> 215 <td>100011</td> 216 <td>Tommy</td> 217 <td>北京市海淀区万寿路120号</td> 218 <td> 219 <a class="btn btn-success btn-xs" href="#">更新</a> 220 </td> 221 </tr> 222 <tr> 223 <td>100022</td> 224 <td>Cruiser</td> 225 <td>北京市海淀区万寿路122号</td> 226 <td> 227 <a class="btn btn-warning btn-xs" href="#">修改</a> 228 </td> 229 </tr> 230 <tr> 231 <td>100077</td> 232 <td>Jefferry</td> 233 <td>北京市海淀区万寿路123号</td> 234 <td> 235 <a class="btn btn-info btn-xs" href="#">详情</a> 236 </td> 237 </tr> 238 <tr> 239 <td>100099</td> 240 <td>Kingston</td> 241 <td>北京市海淀区万寿路124号</td> 242 <td> 243 <a class="btn btn-danger btn-xs" href="#">删除</a> 244 </td> 245 </tr> 246 </tbody> 247 </table> 248 249 <h3>响应式表格</h3> 250 251 <div class="table-responsive"> 252 <table class="table"> 253 <thead> 254 <tr> 255 <th>编号</th> 256 <th>姓名</th> 257 <th>住址</th> 258 <th>操作</th> 259 </tr> 260 </thead> 261 <tbody> 262 <tr> 263 <td>100011</td> 264 <td>Tommy</td> 265 <td>北京市海淀区万寿路120号</td> 266 <td> 267 <a class="btn btn-success btn-xs" href="#">更新</a> 268 </td> 269 </tr> 270 <tr> 271 <td>100022</td> 272 <td>Cruiser</td> 273 <td>北京市海淀区万寿路122号</td> 274 <td> 275 <a class="btn btn-warning btn-xs" href="#">修改</a> 276 </td> 277 </tr> 278 <tr> 279 <td>100077</td> 280 <td>Jefferry</td> 281 <td>北京市海淀区万寿路123号</td> 282 <td> 283 <a class="btn btn-info btn-xs" href="#">详情</a> 284 </td> 285 </tr> 286 <tr> 287 <td>100099</td> 288 <td>Kingston</td> 289 <td>北京市海淀区万寿路124号</td> 290 <td> 291 <a class="btn btn-danger btn-xs" href="#">删除</a> 292 </td> 293 </tr> 294 </tbody> 295 </table> 296 </div> 297 298 299 </div> 300 301 <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 302 <script src="js/jquery-1.11.3.js"></script> 303 <script src="js/bootstrap.js"></script> 304 <script> 305 (function () { 306 var s = document.createElement("script"); 307 s.onload = function () { 308 bootlint.showLintReportForCurrentDocument([]); 309 }; 310 s.src = "js/bootlint.js"; 311 document.body.appendChild(s) 312 })(); 313 </script> 314 </body> 315 </html>
以上代码效果如图：
响应式效果如下：
浙公网安备 33010602011771号