Bootstrap 表格

女爷i 2022-08-23 14:00 361阅读 0赞

Bootstrap 的简单表格实例

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4. <meta charset="utf-8"> 
  5. <title>Example of Table with twitter bootstrap</title> 
  6. <meta name="description" content="Creating a table with Twitter Bootstrap. Learn how to use Twitter Bootstrap toolkit to create Tables with examples.">
  7. <link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet"> 
  8. </head>
  9. <body>
  10. <table class="table">
  11.         <thead>
  12.           <tr>
  13.             <th>Student-ID</th>
  14.             <th>First Name</th>
  15.             <th>Last Name</th>
  16.             <th>Grade</th>
  17.           </tr>
  18.         </thead>
  19.         <tbody>
  20.           <tr>
  21.             <td>001</td>
  22.             <td>Rammohan </td>
  23.             <td>Reddy</td>
  24.             <td>A+</td>
  25.           </tr>
  26.           <tr>
  27.             <td>002</td>
  28.             <td>Smita</td>
  29.             <td>Pallod</td>
  30.             <td>A</td>
  31.           </tr>
  32.           <tr>
  33.             <td>003</td>
  34.             <td>Rabindranath</td>
  35.             <td>Sen</td>
  36.             <td>A+</td>
  37.           </tr>
  38.         </tbody>
  39.       </table>
  40. </body>
  41. </html>

效果如图：

300753343778532.jpg

#

Bootstrap 的斑马表格实例

和简单实例不同的是table的class名改为

即可

效果如图：

300753464706626.jpg

发表评论

表情：
评论列表 （有 0 条评论，361人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Bootstrap-全局css-表格

    表格 1.基本实例 为任意 `<table>` 标签添加 `.table` 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。 <

    亦凉亦凉/ 0 赞/ 466 阅读