zoukankan      html  css  js  c++  java
  • Bootstrap中的排版(3)-表格

    全屏宽度带水平线的表格  .table
    带边框的表格       .table-bordered
    条纹状表格        .table-striped
    悬停变色表格       .table-hover
    紧凑风格表格       .table-condensed

    小练习:

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="UTF-8">
     5         <title></title>
     6         <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
     7         <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
     8         <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
     9     </head>
    10     <body>
    11         <table class="table table-striped table-bordered table-hover">
    12             <thead>
    13                 <tr>
    14                     <th>标题一</th>
    15                     <th>标题二</th>
    16                     <th>标题三</th>
    17                     <th>标题四</th>
    18                     <th>标题五</th>
    19                 </tr>
    20             </thead>
    21             <tbody>
    22                 <tr>
    23                     <td>内容一</td>
    24                     <td>内容二</td>
    25                     <td>内容三</td>
    26                     <td>内容四</td>
    27                     <td>内容五</td>
    28                 </tr>
    29                 <tr>
    30                     <td>内容一</td>
    31                     <td>内容二</td>
    32                     <td>内容三</td>
    33                     <td>内容四</td>
    34                     <td>内容五</td>
    35                 </tr>
    36                 <tr>
    37                     <td>内容一</td>
    38                     <td>内容二</td>
    39                     <td>内容三</td>
    40                     <td>内容四</td>
    41                     <td>内容五</td>
    42                 </tr>
    43             </tbody>
    44         </table>
    45     </body>
    46 </html>
    示例代码
    
    
    
     
  • 相关阅读:
    hdu 1551 恶心的卡精度题
    ubuntu下升级firefox
    清理windows垃圾
    hdu 1575 矩阵快速幂
    右键菜单中添加用记事本打开(转)
    hdu 1525 博弈
    PHP字符串函数(转)
    笔试注意事项
    .NET 2.0面向对象编程揭秘 继承
    李开复:21世纪7种人才最抢手
  • 原文地址:https://www.cnblogs.com/123wyy123wyy/p/6964893.html
Copyright © 2011-2022 走看看