Bootstrap 表格

Bootstrap 的简单表格实例

<!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>

效果如图：

Bootstrap 的斑马表格实例

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

效果如图：

Bootstrap 表格

Bootstrap 的简单表格实例

效果如图：

Bootstrap 的斑马表格实例

相关文章