bootstrap table

2019-07-06 作者:计算机教程   |   浏览(196)

table

表格

紧凑型表格

table table-bordered

表格带边框


.table

<!DOCTYPE html> <html>   <head>     <meta charset="utf-8">     <meta name="viewpot" content="width=device-width,initial-scale=1.0">      <title>learn bootstrap</title>      <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">  <link href="google-code-prettify/prettify.css" rel="stylesheet">   </head>   <body onload="prettyPrint()">   <script src="jquery1.11.3/jquery-1.11.3.min.js"></script>   <script src="bootstrap/js/bootstrap.js"></script>   <script src="google-code-prettify/prettify.js"></script>    <div class="container">   <hr/>  <table class="table">   <thead>       <tr>         <td>人员</td>         <td>颜值</td>       </tr>   </thead>     <tbody>         <tr>         <td>范冰冰</td>         <td>15</td>       </tr>       <tr>         <td>柳岩</td>         <td>12</td>       </tr>       <tr>         <td>雾岛津奈美</td>         <td>11</td>       </tr>     </tbody>   <hr/>   <table class="table table-striped">     <thead>       <tr>         <td>人员</td>         <td>颜值</td>       </tr>     </thead>     <tbody>         <tr>         <td>范冰冰</td>         <td>15</td>       </tr>       <tr>         <td>柳岩</td>         <td>12</td>       </tr>       <tr>         <td>雾岛津奈美</td>         <td>11</td>       </tr>     </tbody>  </table>     <table class="table table-bordered">     <thead>       <tr>         <td>人员</td>         <td>颜值</td>       </tr>     </thead>     <tbody>         <tr>         <td>范冰冰</td>         <td>15</td>       </tr>       <tr>         <td>柳岩</td>         <td>12</td>       </tr>       <tr>         <td>雾岛津奈美</td>         <td>11</td>       </tr>     </tbody>   </table>   </div>   </body> </html>

.table .table-striped

table table-striped

表格带条纹

斑马表格

.table .table-bordered

响应式表格

本文由永利电子游戏网站发布于计算机教程,转载请注明出处:bootstrap table

关键词: