码迷,mamicode.com
首页 > 其他好文 > 详细

Bootstrap 表格

时间:2014-07-22 23:06:56      阅读:327      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   java   color   

Bootstrap 的简单表格实例

mamicode.com,码迷
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Example of Table with twitter bootstrap</title> 
<meta name="description" content="Creating a table with Twitter Bootstrap. Learn how to use Twitter Bootstrap toolkit to create Tables with examples.">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet"> 
</head>
<body>
<table class="table">
        <thead>
          <tr>
            <th>Student-ID</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Grade</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>001</td>
            <td>Rammohan </td>
            <td>Reddy</td>
            <td>A+</td>
          </tr>
          <tr>
            <td>002</td>
            <td>Smita</td>
            <td>Pallod</td>
            <td>A</td>
          </tr>
          <tr>
            <td>003</td>
            <td>Rabindranath</td>
            <td>Sen</td>
            <td>A+</td>
          </tr>
        </tbody>
      </table>
</body>
</html>
mamicode.com,码迷

效果如图:

mamicode.com,码迷

 

Bootstrap 的斑马表格实例

和简单实例不同的是table的class名改为 <table class="table table-striped">即可

效果如图:

mamicode.com,码迷

Bootstrap 表格,码迷,mamicode.com

Bootstrap 表格

标签:des   style   blog   http   java   color   

原文地址:http://www.cnblogs.com/LT0314/p/3700535.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!