带斑马线的表格

Posted 2020-08-01 lonecloud

　　

<h1>斑马线表格</h1>
<table class="table table-striped">
   <thead>
     <tr>
       <th>表格标题</th>
       <th>表格标题</th>
       <th>表格标题</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
   </tbody>
 </table>

刚已经说了，Bootstrap为表格不同的样式风格提供了不同的类名，主要包括：

  ?  .table：基础表格

  ?  .table-striped：斑马线表格

  ?  .table-bordered：带边框的表格

  ?  .table-hover：鼠标悬停高亮的表格

  ?  .table-condensed：紧凑型表格

  ?  .table-responsive：响应式表格