Bootstrap4 表格学习笔记

Bootstrap 是一个流行的前端框架，它包括了许多有用的组件，其中之一就是表格。Bootstrap 表格可以让你轻松地创建出漂亮而且高度可定制的表格。本文将会介绍 Bootstrap 表格的基础知识，并且提供一些实例以帮助你更好地理解和运用。

创建表格

使用 Bootstrap 创建表格的方法非常简单。首先，我们需要一个 <table> 元素作为我们的表格容器，并给这个元素添加一个 table 类名。接着，在 <table> 元素内部，我们可以使用 <thead>、<tbody>、和 <tfoot> 元素来添加表格的标题、主体内容以及页脚信息。

下面是一个简单的表格示例：

markdownCopy Code
<table class="table">
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>20</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>25</td>
        </tr>
    </tbody>
</table>

添加样式

Bootstrap 表格提供了丰富的样式选项，可以让你定制表格的外观，使其符合你网站的风格。

以下是一些表格样式的实例：

基本表格

这是 Bootstrap 表格最基础的样式，它只有简单的边框和间距。

markdownCopy Code
<table class="table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>20</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

条纹表格

这个样式添加了交替颜色的背景色，帮助你更好地区分不同的行。

markdownCopy Code
<table class="table table-striped">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>20</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

边框表格

这个样式添加了更加明显的边框和空白间隔。

markdownCopy Code
<table class="table table-bordered">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>20</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

总结

通过本文的学习，你已经了解了 Bootstrap 表格的基础知识以及如何使用和定制表格的样式。希望这些知识能够帮助你更好地应用 Bootstrap 框架，打造出美观而且实用的网站。