<!DOCTYPE html>
<html>
? <head>
? ? <title>Bootstrap 表格</title>
? ? <meta charset="utf-8">
? ? <meta name="viewport" content="width=device-width,initial-scale=1.0">
? ? <!-- Bootstrap -->
? ? <link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
? ? <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet" media="screen">
? ? <script src="bootstrap/js/jquery.js"></script>
? ? <script src="bootstrap/js/bootstrap.min.js"></script>
? </head>
? <body style="padding:50px;">
? <h3>基本的表格</h3>
? <p>使用方法：在table后面添加.table的类即可</p>
? <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>
? ? ? <br><hr>
? ? ? ?<h3>带条纹背景的表格</h3>
? ? <p>使用方法：在table后面添加.table 和table-striped的类即可</p>
? ? ? <table class="table table-striped">
? ? ? ? <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>
? ? ? <br><hr>
? ? ? <h3>带边框的表格</h3>
? ? <p>使用方法：在table后面添加.table 和table-bordered的类即可，会呈现圆角边框的效果,追加一个table-hover的类，会鼠标悬停的行会呈现浅灰色背景</p>
? ? ? <table class="table table-bordered table-hover">
? ? ? ? <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>
? ? ? <br><hr>
? ? ? <h3>紧缩的表格</h3>
? ? <p>使用方法：在table后面添加.table的类，并追加一个table-condensed的类，会减少一半的内边距，以缩紧表格</p>
? ? ? <table class="table table-striped table-bordered table-hover table-condensed">
? ? ? ? <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>
? ? ? ? ? <tr>
? ? ? ? ? ? <td>002</td>
? ? ? ? ? ? <td>Smita</td>
? ? ? ? ? ? <td>Pallod</td>
? ? ? ? ? ? <td>A</td>
? ? ? ? ? </tr>
? ? ? ? </tbody>
? ? ? </table>
? ? ? <br><hr>
? ? ? <h3>表格行的类</h3>
? ? ? <p>表格行（tr）后添加.success[绿]/error[红]/warning[黄]/info[蓝]四种背景色显示</p>
? ? ? <table class="table table-bordered table-hover">
? ? ? ? <thead>
? ? ? ? ? <tr>
? ? ? ? ? ? <th>Student-ID</th>
? ? ? ? ? ? <th>First Name</th>
? ? ? ? ? ? <th>Last Name</th>
? ? ? ? ? ? <th>Grade</th>
? ? ? ? ? </tr>
? ? ? ? </thead>
? ? ? ? <tbody>
? ? ? ? ? <tr class="success">
? ? ? ? ? ? <td>001</td>
? ? ? ? ? ? <td>Rammohan </td>
? ? ? ? ? ? <td>Reddy</td>
? ? ? ? ? ? <td>A+</td>
? ? ? ? ? </tr>
? ? ? ? ? <tr class="error">
? ? ? ? ? ? <td>002</td>
? ? ? ? ? ? <td>Smita</td>
? ? ? ? ? ? <td>Pallod</td>
? ? ? ? ? ? <td>A</td>
? ? ? ? ? </tr>
? ? ? ? ? <tr class="warning">
? ? ? ? ? ? <td>003</td>
? ? ? ? ? ? <td>Rabindranath</td>
? ? ? ? ? ? <td>Sen</td>
? ? ? ? ? ? <td>A+</td>
? ? ? ? ? </tr>
? ? ? ? ? <tr class="info">
? ? ? ? ? ? <td>002</td>
? ? ? ? ? ? <td>Smita</td>
? ? ? ? ? ? <td>Pallod</td>
? ? ? ? ? ? <td>A</td>
? ? ? ? ? </tr>
? ? ? ? </tbody>
? ? ? </table>
? </body>
</html>
预览图片（缩放50%）：
