Bootstrap-v5-页面内容（表格）

一、表格

  • 设置表格样式（.table）,表格头部（.table-light .table-dark ）
  • 状态类给表格、行、单元格添加特殊的颜色（table-primary、table-secondary、table-success、table-danger、table-warning、table-info、table-light、table-dark）
  • 条纹行（table-striped）
  • 可悬停行（.table-hover）
  • 突出显示表格行/单元格（.table-active）
  • 给表格加边框（.table-bordered）
  • 无边框表格（.table-borderless）
  • 紧凑表格（.table-sm）
  • 表格垂直对齐（.align-top .align-middle .align-bottom）
  • 表格嵌套（.mb-0）
  • 响应式表格（将table放在.table-responsive包裹中.table-responsive   .table-responsive-sm   .table-responsive-md   .table-responsive-lg   .table-responsive-xl   .table-responsive-xxl）

二、实例

<!DOCTYPE html>
<html>
  <head>
      <!-- HTML5文档类型 -->
    <meta charset="utf-8">
    <!-- 移动端适配 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 让IE浏览器使用最新的引擎渲染页面 -->
    <mata http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Bootstrap核心css库 -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <!-- Bootstrap核心js库 -->
    <script src="js/bootstrap.js"></script>
    <!-- jquery核心js库 -->
    <script src="js/jquery.js"></script>
    <title>bootstrap</title>
  </head>
  <body>
    <h1>你好Bootstrap表格</h1>
    <table class="table table-bordered table-striped table-hover ">
      <thead class="table-dark ">
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>家庭住址</th>
        </tr>
      </thead>
      <tbody>
        <tr class="table-danger">
          <th scope="row">01</th>
          <td>王淑然</td>
          <td>20</td>
          <td>男</td>
          <td>广东省深圳市宝安区新安街道财富港大厦7栋</td>
        </tr>
        <tr>
          <td>01</td>
          <td class="table-secondary">王淑然</td>
          <td>20</td>
          <td>男</td>
          <td>广东省深圳市宝安区新安街道财富港大厦7栋</td>
        </tr>
        <tr>
          <th scope="row">01</th>
          <td>王淑然</td>
          <td>20</td>
          <td>男</td>
          <td>广东省深圳市宝安区新安街道财富港大厦7栋</td>
        </tr>
        <tr>
          <td>01</td>
          <td>王淑然</td>
          <td>20</td>
          <td>男</td>
          <td class="table-active">广东省深圳市宝安区新安街道财富港大厦7栋</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

 

posted @ 2021-09-23 14:02  AnnLing  阅读(291)  评论(0)  编辑  收藏  举报