Bootstrap 表格

发布时间：2020-12-17 20:59:25 所属栏目：安全来源：网络整理

导读：!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.mi

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

这里写图片描述

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!