• Bootstrap中的条纹表格效果
  • 专心滴打铁 发表于 2015/7/5 12:39:00 | 分类标签: Bootstrap 表格效果 条纹表格
  • 条纹表格

    通过添加 .table-striped class,您将在 <tbody> 内的行上看到条纹,如下面的实例所示:

    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    <!DOCTYPE html>
    <html>
    <head>
       <title>Bootstrap 实例 - 条纹表格</title>
       <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
       <script src="/scripts/jquery.min.js"></script>
       <script src="/bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
     
    <table class="table table-striped">
       <caption>条纹表格布局</caption>
       <thead>
          <tr>
             <th>名称</th>
             <th>城市</th>
             <th>密码</th>
          </tr>
       </thead>
       <tbody>
          <tr>
             <td>Tanmay</td>
             <td>Bangalore</td>
             <td>560001</td>
          </tr>
          <tr>
             <td>Sachin</td>
             <td>Mumbai</td>
             <td>400003</td>
          </tr>
          <tr>
             <td>Uma</td>
             <td>Pune</td>
             <td>411027</td>
          </tr>
       </tbody>
    </table>
     
    </body>
    </html>

    结果如下所示:
  • 请您注意

    ·自觉遵守:爱国、守法、自律、真实、文明的原则

    ·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规

    ·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品

    ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任

    ·您在编程中国社区新闻评论发表的作品,本网站有权在网站内保留、转载、引用或者删除

    ·参与本评论即表明您已经阅读并接受上述条款

  • 感谢本文作者
  • 作者头像
  • 昵称:专心滴打铁
  • 加入时间:2013/7/13 0:00:00
  • TA的签名
  • 这家伙很懒,虾米都没写
  • +进入TA的空间
  • 以下内容也很赞哦
分享按钮