bootstrap table教程_bootstrap4 table

在现代Web开发中，表格是展示数据最直观的方式之一。Bootstrap 4 提供了一套强大且易于使用的表格样式和功能，可以快速创建美观、响应式的表格。为您介绍如何使用 Bootstrap 4 来创建和美化表格，并提供多种解决方案。

1. 简单解决方案：使用默认样式

Bootstrap 4 自带了丰富的表格样式，只需要给 <table> 标签添加相应的类名，就能快速创建一个漂亮的表格。

html
<!-- 基础表格 --></p>

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">姓名</th>
      <th scope="col">年龄</th>
      <th scope="col">职业</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>张三</td>
      <td>28</td>
      <td>程序员</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>李四</td>
      <td>32</td>
      <td>设计师</td>
    </tr>
  </tbody>
</table>

<p>

这段代码创建了一个基础的表格，包含表头和两行数据。通过添加 class="table"，表格会自动应用 Bootstrap 的默认样式，包括边框、内边距等。

2. 进阶方案：自定义表格样式

除了使用默认样式，我们还可以根据需要对表格进行个性化定制。

2.1 添加条纹效果

html
<!-- 条纹表格 --></p>

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

<p>

table-striped 类会在奇数行添加浅灰色背景，使表格更易阅读。

2.2 鼠标悬停效果

html
<!-- 悬停表格 --></p>

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

<p>

table-hover 类会让鼠标悬停时高亮显示当前行。

2.3 边框样式

html
<!-- 边框表格 --></p>

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

<p>

table-bordered 类会给表格和每个单元格添加边框。

3. 高级方案：响应式表格

为了让表格在不同设备上都能良好显示，我们可以使用响应式表格：

html</p>

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

<p>

table-responsive 容器会在小屏幕设备上自动为表格添加水平滚动条，确保内容不会被截断。

4. 动态生成表格

如果需要动态生成表格内容，可以使用JavaScript或jQuery。以下是一个简单的例子：

javascript
// 使用原生JavaScript
const tableBody = document.querySelector('tbody');
const data = [
  { id: 1, name: '王五', age: 25, job: '教师' },
  { id: 2, name: '赵六', age: 30, job: '医生' }
];</p>

<p>data.forEach(item => {
  const row = document.createElement('tr');
  row.innerHTML = <code>
    <th scope="row">${item.id}</th>
    <td>${item.name}</td>
    <td>${item.age}</td>
    <td>${item.job}</td>
;
  tableBody.appendChild(row);
});

通过以上方法，您可以根据实际需求选择合适的方案来创建和美化表格。无论是静态还是动态内容，Bootstrap 4 都提供了强大的支持，让表格开发更加简单高效。