Bootstrap 表格学习笔记

Bootstrap 是一个流行的前端框架，它提供了一套基于 HTML、CSS 和 JavaScript 的开源工具包，可以帮助开发者快速构建现代化的Web应用。其中，表格是 Bootstrap 中常用的组件之一，本文将介绍如何使用 Bootstrap 创建表格。

基本表格

创建一个基本的 Bootstrap 表格很简单，只需在HTML代码中添加一个 table 元素即可。Bootstrap 还提供了一些类用于表格样式和布局。

htmlCopy Code
<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td>20</td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>22</td>
    </tr>
    <tr>
      <td>3</td>
      <td>王五</td>
      <td>24</td>
    </tr>
  </tbody>
</table>

上面的代码创建了一个包含表头和数据的表格。其中 thead 元素定义表格的首部，tr 元素定义表格的行，th 元素定义表格的列头；tbody 元素定义表格的主体，td 元素定义表格的单元格。添加 class="table" 类可以使表格具有 Bootstrap 的基本样式。

带边框的表格

如果需要一个带有边框的表格，在 class 属性中添加 table-bordered 类即可。

htmlCopy Code
<table class="table table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td>20</td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>22</td>
    </tr>
    <tr>
      <td>3</td>
      <td>王五</td>
      <td>24</td>
    </tr>
  </tbody>
</table>

带颜色条纹的表格

如果需要为表格的行添加颜色条纹，可以在 class 属性中添加 table-striped 类。

htmlCopy Code
<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td>20</td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>22</td>
    </tr>
    <tr>
      <td>3</td>
      <td>王五</td>
      <td>24</td>
    </tr>
  </tbody>
</table>

响应式表格

Bootstrap 还提供了响应式表格，可以在小屏幕设备上显示滚动条和隐藏一些不必要的表格内容，以适应不同尺寸的屏幕。

htmlCopy Code
<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>地址</th>
        <th>手机号</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>张三</td>
        <td>20</td>
        <td>北京市海淀区</td>
        <td>13900000001</td>
      </tr>
      <tr>
        <td>2</td>
        <td>李四</td>
        <td>22</td>
        <td>上海市浦东新区</td>
        <td>13900000002</td>
      </tr>
      <tr>
        <td>3</td>
        <td>王五</td>
        <td>24</td>
        <td>广州市天河区</td>
        <td>13900000003</td>
      </tr>
    </tbody>
  </table>
</div>

上面的代码创建了一个响应式表格，如果页面宽度不足，表格会产生水平滚动条，并隐藏掉一些不必要的表格内容，以适应小屏幕设备。

总结

本文介绍了 Bootstrap 表格的基本使用方法以及常用样式和布局。通过掌握这些方法，我们能够快速创建出符合设计要求的表格，并且在不同的设备上都能得到良好的呈现效果。