Bootstrap 表格

来源：互联网发布：js a标签点击事件编辑：程序博客网时间：2024/05/17 21:56
<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><meta name="Author" content="LinDL"><title>Bootstrap代码</title><link href="../bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet"></head><body><div class="container">  <h1 class="page-header">表格<small>&lt;table&gt;</small></h1>  <h2>默认的表格</h2>  <table class="table">    <thead>      <tr>        <th>姓名</th>        <th>性别</th>        <th>年龄</th>      </tr>    </thead>    <tr>      <td>zhang</td>      <td>女</td>      <td>21</td>    </tr>    <tr>      <td>huang</td>      <td>男</td>      <td>17</td>    </tr>  </table>  <h2>压缩表格</h2>  <!--实际上是缩小了表格的内间距-->  <table class="table table-condensed">    <thead>      <tr>        <th>姓名</th>        <th>性别</th>        <th>年龄</th>      </tr>    </thead>    <tr>      <td>zhang</td>      <td>女</td>      <td>21</td>    </tr>    <tr>      <td>huang</td>      <td>男</td>      <td>17</td>    </tr>  </table>  <h2>带边框表格</h2>  <table class="table table-bordered">    <thead>      <tr>        <th>姓名</th>        <th>性别</th>        <th>年龄</th>      </tr>    </thead>    <tr>      <td>zhang</td>      <td>女</td>      <td>21</td>    </tr>    <tr>      <td>huang</td>      <td>男</td>      <td>17</td>    </tr>  </table>  <h2>奇偶条纹表格</h2>  <table class="table table-striped">    <thead>      <tr>        <th>姓名</th>        <th>性别</th>        <th>年龄</th>      </tr>    </thead>    <tr>      <td>zhang</td>      <td>女</td>      <td>21</td>    </tr>    <tr>      <td>huang</td>      <td>男</td>      <td>17</td>    </tr>  </table>  <h2>悬停高亮表格</h2>  <table class="table table-hover">    <thead>      <tr>        <th>姓名</th>        <th>性别</th>        <th>年龄</th>      </tr>    </thead>    <tr>      <td>zhang</td>      <td>女</td>      <td>21</td>    </tr>    <tr>      <td>huang</td>      <td>男</td>      <td>17</td>    </tr>  </table></div><script src="../bootstrap-3.3.5-dist/js/bootstrap.js"></script> <script src="../bootstrap-3.3.5-dist/js/jquery-2.2.0.min.js"></script></body></html>
这里写图片描述
0 0