Search

使用 Bootstrap 表格展示数据

 

Bootstrap 是一个流行的前端框架,提供了许多预定义的样式和组件,使得开发响应式和美观的网页变得更加容易。表格(Table)是展示数据的常用 使用 Bootstrap 表格展示数据 组件,Bootstrap 提供了丰富的样式和功能,使得数据展示更加简洁和美观。本文将详细介绍如何使用 Bootstrap 表格展示数据,包括基本用法、高级功能以及实际应用案例。

### 一、Bootstrap 表格的基本用法

#### 1. 引入 Bootstrap

在开始之前,需要在项目中引入 Bootstrap。可以通过 CDN 或本地文件的方式引入:

“`html
<!– 引入 Bootstrap CSS –>
<link href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css” rel=”stylesheet”>

“`

 创建基本表格

 

使用 Bootstrap 表格类(`.table`)创建一个基本表格:

“`html
<table class=”table”>
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>28</td>
<td>工程师</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>34</td>
<td>设计师</td>
</tr>
</tbody>
</table>
“`

### 二、高级功能

#### 1. 表格样式

Bootstrap 提供了多种表格样式,通过 韩国电话号码 添加不同的类可以实现:

– **条纹行**:使用 `.table-striped` 类为表格添加条纹行样式。
– **带边框的表格**:使用 `.table-bordered` 类为表格添加边框。
– **悬浮行**:使用 `.table-hover` 类为表格添加悬浮行效果。
– **紧凑表格**:使用 `.table-sm` 类创建更紧凑的表格。

示例:

“`html
<table class=”table table-striped table-bordered table-hover table-sm”>
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>28</td>
<td>工程师</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>34</td>
<td>设计师</td>
</tr>
</tbody>
</table>
“`

 

响应式表格

 

使用 `.table-responsive` 类将表格包装起来,可以在小 巴西电话号码 屏幕设备上实现水平滚动,使得表格内容不会溢出:

“`html
<div class=”table-responsive”>
<table class=”table”>
<!– 表格内容 –>
</table>
</div>
“`

### 三、实际应用案例

#### 1. 显示动态数据

在实际项目中,表格的数据通常来自服务器,需要动态生成。以下是一个使用 JavaScript 动态生成表格内容的示例:

“`html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Bootstrap Table Example</title>
<link href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”container mt-5″>
<h2>用户列表</h2>
<div class=”table-responsive”>
<table class=”table table-striped table-bordered table-hover table-sm”>
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
</tr>
</thead>
<tbody id=”userTableBody”>
<!– 动态数据行 –>
</tbody>
</table>
</div>
</div>

<script>
// 示例数据
const users = [
{ id: 1, name: ‘张三’, age: 28, job: ‘工程师’ },
{ id: 2, name: ‘李四’, age: 34, job: ‘设计师’ },
{ id: 3, name: ‘王五’, age: 29, job: ‘产品经理’ },
];

// 获取表格主体元素
const tableBody = document.getElementById(‘userTableBody’);

// 动态生成表格行
users.forEach(user => {
const row = document.createElement(‘tr’);
row.innerHTML = `
<td>${user.id}</td>
<td>${user.name}</td>
<td>${user.age}</td>
<td>${user.job}</td>
`;
tableBody.appendChild(row);
});
</script>
</body>
</html>
“`

#### 2. 结合后端数据

在实际应用中,数据通常来自后端API。以下是一个简单的示例,展示如何通过AJAX请求获取数据并填充表格:

“`html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Bootstrap Table with AJAX</title>
<link href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”container mt-5″>
<h2>用户列表</h2>
<div class=”table-responsive”>
<table class=”table table-striped table-bordered table-hover table-sm”>
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
</tr>
</thead>
<tbody id=”userTableBody”>
<!– 动态数据行 –>
</tbody>
</table>
</div>
</div>

<script>
// 发送 AJAX 请求获取数据
fetch(‘https://api.example.com/users’)
.then(response => response.json())
.then(data => {
const tableBody = document.getElementById(‘userTableBody’);
data.forEach(user => {
const row = document.createElement(‘tr’);
row.innerHTML = `
<td>${user.id}</td>
<td>${user.name}</td>
<td>${user.age}</td>
<td>${user.job}</td>
`;
tableBody.appendChild(row);
});
})
.catch(error => console.error(‘Error fetching data:’, error));
</script>
</body>
</html>
“`

### 结论

Bootstrap 提供了强大的表格功能,使得数据展示更加简洁美观。通过结合 HTML、CSS 和 JavaScript,可以轻松创建动态和响应式的表格,适用于各种应用场景。无论是静态数据展示还是动态数据加载,Bootstrap 表格都能提供出色的用户体验。

Leave a comment

Your email address will not be published. Required fields are marked *