学习 Bootstrap 5 之 Tables

Posted 2022-02-06 _DiMinisH

学习 Bootstrap 5 之 表格

• 表格 (Tables)
• • 1. 创建表格
  • • (1). 使用原生的表格标签
    • (2). 使用Bootstrap 5 的提供的表格标签类
    • (3). 原生与Bootstrap创建出来的表格的对比
  • 2. 表格颜色样式
  • • (1). 表格颜色样式的效果
    • (2). 表格颜色样式的使用
    • • 1). 用于 <table> 标签
      • 2). 用于 <thead> <tbody> <tfoot> 标签
      • 3). 用于 <th> <tr> <td> 标签
  • 3. 表格突出样式 (Accented tables)
  • • (1). 表格条纹样式 class = "table-striped"
    • (2). 表格鼠标悬浮样式 class = "table-hover"
    • (3). 表格单元格强调样式 class = "table-active"
  • 4. 表格边框 (Table borders)
  • • (1). 默认边框 class = "table-bordered"
    • (2). 无边框 class = "table-borderless"
    • (3). 表格边框样式
  • 5. 紧凑表格样式 (Small tables)
  • 6. 表格内容在垂直方向的排版 (Vertical alignment)
  • • (1). 居上 class = "align-top"
    • (2). 居中 class = "align-middle"
    • (3). 居下 class = "align-bottom"
  • 7. 表格嵌套 (Nesting)
  • 8. 表格标题 (Captions)
  • • (1). 标题在表格上方 class = "caption-top"
    • (2). 标题在表格下方 (默认方式)
  • 9. 响应式表格 (Responsive tables)
  • • (1). 表格宽度总是随视口宽度的变化而变化 class = "table-responsive "
    • (2). 使用断点指定表格宽度变化 .table-responsive-sm|-md|-lg|-xl|-xxl

表格 (Tables)

Bootstrap 5 官方文档

1. 创建表格

(1). 使用原生的表格标签

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

(2). 使用Bootstrap 5 的提供的表格标签类

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

官方提供的写法

<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 colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
    </tbody>
  </table>

(3). 原生与Bootstrap创建出来的表格的对比

  <table>
    <thead>
    <tr>
      <th>#</th>
      <th>First</th>
      <th>Last</th>
      <th>Handle</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th>1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th>3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
    </tbody>
  </table>
  <table class="table">
    <thead>
    <tr>
      <th>#</th>
      <th>First</th>
      <th>Last</th>
      <th>Handle</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th>1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th>3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
    </tbody>
  </table>
  <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 colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
    </tbody>
  </table>

两种写法无明显区别

2. 表格颜色样式

(1). 表格颜色样式的效果

样式类
table-primary
table-secondary
table-success
table-danger
table-warning
table-info
table-light
table-dark

效果如下图:

  <table class="table">
    <thead>
    <tr>
      <th scope="col" >#</th>
      <th scope="col">标题</th>
      <th scope="col">标题</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th scope="row">第一行</th>
      <td class = "table-primary">table-primary</td>
      <td class = "table-secondary">table-secondary</td>
      <td class = "table-success">table-success</td>
    </tr>
    <tr>
      <th scope="row">第二行</th>
      <td class = "table-danger">table-danger</td>
      <td class = "table-warning">table-warning</td>
      <td class = "table-info">table-info</td>
    </tr>
    <tr>
      <th scope="row">第三行</th>
      <td class = "table-light">table-light</td>
      <td class = "table-dark">table-dark</td>
      <td>默认</td>
    </tr>
    </tbody>
  </table>

(2). 表格颜色样式的使用

1). 用于 <table> 标签

使得整个表格设置为指定的样式

<table class="table table-success" >
    <thead >
    <tr>
      <th scope="col">#</th>
      <th scope="col">标题</th>
      <th scope="col">标题</th>
    </以上是关于学习 Bootstrap 5 之 Tables的主要内容，如果未能解决你的问题，请参考以下文章
 
 学习 Bootstrap 5 之 Typography
 学习 Bootstrap 5 之 Background
 学习 Bootstrap 5 之 Containers
 学习 Bootstrap 5 之 Forms
 学习 Bootstrap 5 之 Breakpoints Containers Grid
 学习 Bootstrap 5 之 Interactions