Bootstarp 4 入门之Bootstrap 表格

表格样式

使用最基本的.table标记,下面的例子是基于.table-*的表格在 Bootstrap 中的外观。 所有表格样式都在 Bootstrap 4 中继承,这意味着任何嵌套表格的样式都与父表格相同。
描述

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

添加背景颜色 .table-dark 在深色背景
描述

<table class="table table-dark">
...
</table>

表头选项

与表格和暗表类似,使用修饰符类.thead-light.thead-dark 使 <thead> 显示为浅灰色或深灰色。
描述

<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table">
  <thead class="thead-light">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

隔行变色背景 table-striped

描述

<table class="table table-striped">
...
</table>

描述

<table class="table table-striped table-dark">
...
</table>

表边框

描述

<table class="table table-bordered">
...
</table>

描述

<table class="table table-bordered table-dark">
...
</table>

去除表格边框

使用.table-borderless 类来移除表格里的所有边框。
描述

<table class="table table-borderless">
...
</table>

描述

<table class="table table-borderless table-dark">
...
</table>

高亮行table-hover

描述

<table class="table table-hover">
...
</table>

描述

<table class="table  table-hover table-dark">
...
</table>

更小的表格 table-sm

描述
描述

行单独上色

描述

<tr class="table-active">...</tr>

<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

描述

<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

表格标题<caption>

描述

<table class="table">
  <caption>List of users</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

响应表格

通过使用.table 包装 .table-responsive ,使所有viewport 都能响应。 或者,使用.table-responsive{-sm|-md|-lg|-xl}选择一个最大断点,通过该断点可以获得响应
描述

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

评论区 (0)

没有记录
支持 markdown,图片截图粘贴拖拽都可以自动上传。