零基础入门Bootstrap表格用法

2023-11-22 06:34:42

1. 什么是Bootstrap表格？
Bootstrap表格是基于Bootstrap框架构建的表格组件，它提供了一套美观、响应式的表格样式，可以轻松地创建出各种类型的表格。Bootstrap表格支持多种样式，包括基本表格、条纹表格、边框表格、悬停表格等，还可以通过自定义CSS样式来扩展表格样式。

2. Bootstrap表格的基本用法

要使用Bootstrap表格，首先需要在HTML页面中引用Bootstrap CSS文件和JavaScript文件。然后，就可以使用<table>标签来创建表格，并在<table>标签中添加.table类来应用基本表格样式。

<table class="table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>25</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

3. Bootstrap表格的高级用法

Bootstrap表格还提供了多种高级用法，例如：

条纹表格：可以在<table>标签中添加.table-striped类来应用条纹表格样式。
边框表格：可以在<table>标签中添加.table-bordered类来应用边框表格样式。
悬停表格：可以在<table>标签中添加.table-hover类来应用悬停表格样式。
可排序表格：可以在<table>标签中添加.table-sortable类来应用可排序表格样式。
可分页表格：可以在<table>标签中添加.table-paginated类来应用可分页表格样式。

4. Bootstrap表格的自定义样式

Bootstrap表格还支持自定义CSS样式，可以根据自己的需要来扩展表格样式。例如，可以修改表格的字体、颜色、背景颜色等。

.table {
  font-family: Arial, sans-serif;
  color: #333;
  background-color: #fff;
}

.table-striped tr:nth-child(even) {
  background-color: #f9f9f9;
}

.table-bordered td,
.table-bordered th {
  border: 1px solid #ddd;
}

.table-hover tr:hover {
  background-color: #eee;
}