zoukankan      html  css  js  c++  java
  • bootstrap学习笔记<四>(table表格)

    表格

    bootstrap为table表格定制多个常用样式:基本样式隔行变色样式带边框样式荧光棒样式紧凑样式响应样式

      ☑  .table:基础表格

      ☑  .table-striped:斑马线表格

      ☑  .table-bordered:带边框的表格

      ☑  .table-hover:鼠标悬停高亮的表格

      ☑  .table-condensed:紧凑型表格

      ☑  .table-responsive:响应式表格

    bootsrtap大大提高了表格制作的效率

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>基础表格</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    </head>
    
    <body>
    <h1>基础表格</h1>
    <table class="table">
       <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>
       </tbody>
     </table>
    <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>
    <h1>带边框的表格</h1>
     <table class="table table-bordered">
       <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>
    <h1>鼠标悬浮高亮的表格</h1>
    <table class="table table-striped table-bordered table-hover">
       <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>
     <h1>紧凑型表格</h1>
      <table class="table table-condensed">
       <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>
     <h1>响应式表格</h1>
     <div class="table-responsive">
       <table class="table table-bordered">
       <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>
    </div>
    </body>
    </html>
    View Code

    效果图

     PS:表格内元素样式

    分别对应:

    <tr class="active">      <!--活动灰-->
    <tr class="success">   <!--成功绿-->
    <tr class="info">        <!--信息蓝-->
    <tr class="warning">   <!--警告橙-->
    <tr class="danger">    <!--危险红-->
    View Code

    效果图

  • 相关阅读:
    hdu 2874 Connections between cities(树上倍增)
    HDU 2586 How far away ?
    0-2岁宝宝早教全攻略
    0-2岁宝宝学习能力三步走
    0-6岁教育
    dedecms如何在文章列表前加上序列号
    争吵1
    当爸爸的感觉
    您未被授权查看该页HTTP错误401.1未经授权解决
    TPLink路由器登陆密码怎么破解
  • 原文地址:https://www.cnblogs.com/MirageFox/p/5020792.html
Copyright © 2011-2022 走看看