Bootstrap4 框架组件使用示例从入门到精通轻松掌握响应式布局与交互组件开发技巧

引言：Bootstrap 4 的强大之处

Bootstrap 是目前最流行的前端框架之一，它为开发者提供了一套完整的响应式设计工具和丰富的UI组件。Bootstrap 4 相比之前的版本有了重大改进，采用了 Flexbox 布局系统，引入了更多的实用工具类，并且完全基于 Sass 构建，使得定制更加方便。

本文将从基础到进阶，详细讲解 Bootstrap 4 的核心组件使用方法，包括响应式布局系统、导航组件、表单组件、模态框、轮播图等，并通过完整的代码示例帮助你快速掌握这些技巧。

一、Bootstrap 4 响应式布局系统

1.1 网格系统基础

Bootstrap 4 的网格系统是其最核心的功能，它基于12列的响应式布局。通过使用 .container、.row 和 .col-* 类，我们可以轻松创建适应不同屏幕尺寸的布局。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap 4 网格系统示例</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"> </head> <body> <div class="container"> <!-- 基础网格布局 --> <div class="row"> <div class="col-md-4 bg-primary text-white p-3">列 1 (md:4)</div> <div class="col-md-4 bg-success text-white p-3">列 2 (md:4)</div> <div class="col-md-4 bg-info text-white p-3">列 3 (md:4)</div> </div> <!-- 响应式列堆叠 --> <div class="row mt-3"> <div class="col-sm-6 col-lg-4 bg-warning text-dark p-3">响应式列 (sm:6, lg:4)</div> <div class="col-sm-6 col-lg-4 bg-danger text-white p-3">响应式列 (sm:6, lg:4)</div> <div class="col-sm-12 col-lg-4 bg-secondary text-white p-3">响应式列 (sm:12, lg:4)</div> </div> <!-- 自动宽度列 --> <div class="row mt-3"> <div class="col bg-primary text-white p-3">自动宽度</div> <div class="col bg-success text-white p-3">自动宽度</div> <div class="col bg-info text-white p-3">自动宽度</div> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script> </body> </html>

代码解析：

.container 提供固定宽度的容器
.row 在容器内创建行
.col-md-4 表示在中等屏幕（≥992px）上占据4列宽度
.col-sm-6 表示在小屏幕（≥576px）上占据6列宽度
.col-lg-4 表示在大屏幕（≥992px）上占据4列宽度
使用 mt-3（margin-top: 1rem）添加间距

1.2 嵌套网格系统

在实际项目中，我们经常需要在网格中嵌套网格来创建复杂的布局结构。

<div class="container"> <div class="row"> <div class="col-md-8 bg-light p-3"> <h4>主内容区域</h4> <div class="row"> <div class="col-md-6 bg-info text-white p-2">嵌套列 1</div> <div class="col-md-6 bg-warning text-dark p-2">嵌套列 2</div> </div> </div> <div class="col-md-4 bg-secondary text-white p-3"> <h4>侧边栏</h4> </div> </div> </div>

1.3 偏移和排序

Bootstrap 4 提供了偏移（offset）和排序（order）工具类来控制列的位置和顺序。

<div class="container"> <!-- 偏移示例 --> <div class="row"> <div class="col-md-4 bg-primary text-white p-3">偏移前</div> <div class="col-md-4 offset-md-4 bg-success text-white p-3">偏移后</div> </div> <!-- 排序示例 --> <div class="row mt-3"> <div class="col-md-4 order-md-2 bg-warning text-dark p-3">第二显示</div> <div class="col-md-4 order-md-1 bg-info text-white p-3">第一显示</div> <div class="col-md-4 order-md-3 bg-danger text-white p-3">第三显示</div> </div> </div>

二、导航组件详解

2.1 基础导航栏

导航栏是网站的重要组成部分，Bootstrap 4 提供了多种导航组件。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap 4 导航组件</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"> </head> <body> <!-- 基础导航栏 --> <nav class="navbar navbar-expand-lg navbar-dark bg-primary"> <div class="container"> <a class="navbar-brand" href="#">我的网站</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="#">首页</a> </li> <li class="nav-item"> <a class="nav-link" href="#">产品</a> </li> <li class="nav-item"> <a class="nav-link" href="#">关于我们</a> </li> <li class="nav-item"> <a class="nav-link" href="#">联系我们</a> </li> </ul> </div> </div> </nav> <!-- 带下拉菜单的导航 --> <nav class="navbar navbar-expand-lg navbar-light bg-light mt-3"> <div class="container"> <a class="navbar-brand" href="#">下拉菜单示例</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#dropdownNav"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="dropdownNav"> <ul class="navbar-nav"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 产品分类 </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">电子产品</a> <a class="dropdown-item" href="#">家居用品</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">其他产品</a> </div> </li> </ul> </div> </div> </nav> <!-- 标签页导航 --> <div class="container mt-4"> <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item" role="presentation"> <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">首页</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">个人资料</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">消息</a> </li> </ul> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab"> <p class="mt-3">这是首页内容区域。标签页导航允许用户在不同内容之间切换。</p> </div> <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab"> <p class="mt-3">个人资料页面，可以展示用户信息。</p> </div> <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab"> <p class="mt-3">消息中心，显示用户的通知和消息。</p> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script> </body> </html>

关键点解析：

.navbar-expand-lg 控制导航栏在大屏幕展开，小屏幕折叠
.navbar-toggler 是移动端的汉堡菜单按钮
data-toggle="collapse" 和 data-target 控制折叠区域
.ml-auto 使导航项右对齐
.dropdown 类配合 data-toggle="dropdown" 实现下拉功能
.nav-tabs 和 .tab-content 组合实现标签页切换

2.2 面包屑导航

面包屑导航帮助用户了解当前在网站中的位置。

<nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">首页</a></li> <li class="breadcrumb-item"><a href="#">产品中心</a></li> <li class="breadcrumb-item active" aria-current="page">电子产品</li> </ol> </nav>

三、表单组件详解

3.1 基础表单

Bootstrap 4 提供了多种表单样式和验证状态。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap 4 表单组件</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-4"> <!-- 基础表单 --> <form> <div class="form-group"> <label for="email">邮箱地址</label> <input type="email" class="form-control" id="email" placeholder="name@example.com"> <small class="form-text text-muted">我们不会分享您的邮箱。</small> </div> <div class="form-group"> <label for="password">密码</label> <input type="password" class="form-control" id="password" placeholder="输入密码"> </div> <div class="form-group"> <label for="exampleFormControlSelect1">选择选项</label> <select class="form-control" id="exampleFormControlSelect1"> <option>选项 1</option> <option>选项 2</option> <option>选项 3</option> <option>选项 4</option> <option>选项 5</option> </select> </div> <div class="form-group"> <label for="exampleFormControlTextarea1">备注信息</label> <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea> </div> <div class="form-group"> <div class="form-check"> <input class="form-check-input" type="checkbox" id="gridCheck"> <label class="form-check-label" for="gridCheck"> 我同意服务条款 </label> </div> </div> <button type="submit" class="btn btn-primary">提交</button> </form> <!-- 内联表单 --> <form class="form-inline mt-4"> <label class="sr-only" for="inlineFormInputName2">名称</label> <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="姓名"> <label class="sr-only" for="inlineFormInputGroupUsername2">用户名</label> <div class="input-group mb-2 mr-sm-2"> <div class="input-group-prepend"> <div class="input-group-text">@</div> </div> <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="用户名"> </div> <div class="form-check mb-2 mr-sm-2"> <input class="form-check-input" type="checkbox" id="inlineFormCheck"> <label class="form-check-label" for="inlineFormCheck"> 记住我 </label> </div> <button type="submit" class="btn btn-primary mb-2">登录</button> </form> <!-- 表单验证状态 --> <form class="mt-4"> <div class="form-group row"> <label for="inputValid" class="col-sm-2 col-form-label">有效输入</label> <div class="col-sm-10"> <input type="text" class="form-control is-valid" id="inputValid" value="正确的输入"> <div class="valid-feedback">看起来不错！</div> </div> </div> <div class="form-group row"> <label for="inputInvalid" class="col-sm-2 col-form-label">无效输入</label> <div class="col-sm-10"> <input type="text" class="form-control is-invalid" id="inputInvalid" value="错误的输入"> <div class="invalid-feedback">请输入正确的内容。</div> </div> </div> </form> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script> </body> </html>

3.2 高级表单组件

<!-- 自定义表单控件 --> <div class="container mt-4"> <h5>自定义复选框和单选按钮</h5> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="customCheck1"> <label class="custom-control-label" for="customCheck1">自定义复选框</label> </div> <div class="custom-control custom-radio"> <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input"> <label class="custom-control-label" for="customRadio1">自定义单选按钮 1</label> </div> <div class="custom-control custom-radio"> <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input"> <label class="custom-control-label" for="customRadio2">自定义单选按钮 2</label> </div> <!-- 自定义选择框 --> <div class="custom-control custom-select-lg mb-3 mt-3"> <select class="custom-select" id="customSelect"> <option selected>选择一个选项...</option> <option value="1">选项 1</option> <option value="2">选项 2</option> <option value="3">选项 3</option> </select> </div> <!-- 文件输入 --> <div class="custom-file mt-3"> <input type="file" class="custom-file-input" id="customFile"> <label class="custom-file-label" for="customFile">选择文件...</label> </div> </div>

四、交互组件：模态框（Modal）

模态框是现代Web应用中常用的交互组件，用于显示重要信息或表单。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap 4 模态框示例</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-5"> <!-- 触发模态框的按钮 --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> 打开基础模态框 </button> <button type="button" class="btn btn-success" data-toggle="modal" data-target="#formModal"> 打开表单模态框 </button> <button type="button" class="btn btn-info" data-toggle="modal" data-target="#largeModal"> 打开大模态框 </button> <!-- 基础模态框 --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">模态框标题</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> 这是一个基础的模态框示例。模态框可以包含任何内容，包括文本、表单、图片等。 </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary">保存更改</button> </div> </div> </div> </div> <!-- 表单模态框 --> <div class="modal fade" id="formModal" tabindex="-1" role="dialog" aria-labelledby="formModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="formModalLabel">用户注册</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <form> <div class="form-group"> <label for="recipient-name" class="col-form-label">姓名:</label> <input type="text" class="form-control" id="recipient-name"> </div> <div class="form-group"> <label for="message-text" class="col-form-label">留言:</label> <textarea class="form-control" id="message-text"></textarea> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button> <button type="button" class="btn btn-primary">提交</button> </div> </div> </div> </div> <!-- 大模态框 --> <div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="largeModalLabel">大模态框</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <p>大模态框使用 <code>.modal-lg</code> 类，适合显示更多内容。</p> <div class="row"> <div class="col-md-6 bg-light p-3">左侧内容</div> <div class="col-md-6 bg-light p-3">右侧内容</div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button> </div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script> </body> </html>

模态框JavaScript API示例：

// 通过JavaScript触发模态框 $('#myModal').modal({ backdrop: 'static', // 点击背景不关闭 keyboard: false, // 按ESC键不关闭 show: true // 立即显示 }); // 模态框事件监听 $('#myModal').on('shown.bs.modal', function () { console.log('模态框已完全显示'); }); $('#myModal').on('hidden.bs.modal', function () { console.log('模态框已完全隐藏'); }); // 编程方式打开/关闭 $('#myModal').modal('show'); $('#myModal').modal('hide'); $('#myModal').modal('toggle');

五、轮播组件（Carousel）

轮播组件用于展示图片、内容幻灯片，是网站展示产品或特色内容的常用组件。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap 4 轮播组件示例</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"> <style> .carousel-item { height: 400px; background-size: cover; background-position: center; } .carousel-caption { background: rgba(0,0,0,0.5); padding: 20px; border-radius: 8px; } </style> </head> <body> <div class="container mt-4"> <!-- 基础轮播 --> <div id="basicCarousel" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#basicCarousel" data-slide-to="0" class="active"></li> <li data-target="#basicCarousel" data-slide-to="1"></li> <li data-target="#basicCarousel" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active" style="background-image: url('https://picsum.photos/800/400?random=1')"> <div class="carousel-caption d-none d-md-block"> <h3>第一张幻灯片</h3> <p>这是第一张幻灯片的描述文本</p> </div> </div> <div class="carousel-item" style="background-image: url('https://picsum.photos/800/400?random=2')"> <div class="carousel-caption d-none d-md-block"> <h3>第二张幻灯片</h3> <p>这是第二张幻灯片的描述文本</p> </div> </div> <div class="carousel-item" style="background-image: url('https://picsum.photos/800/400?random=3')"> <div class="carousel-caption d-none d-md-block"> <h3>第三张幻灯片</h3> <p>这是第三张幻灯片的描述文本</p> </div> </div> </div> <a class="carousel-control-prev" href="#basicCarousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">上一页</span> </a> <a class="carousel-control-next" href="#basicCarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">下一页</span> </a> </div> <!-- 带控制按钮的轮播 --> <div class="mt-4"> <button id="prevBtn" class="btn btn-secondary">上一张</button> <button id="nextBtn" class="btn btn-secondary">下一张</button> <button id="pauseBtn" class="btn btn-warning">暂停</button> <button id="cycleBtn" class="btn btn-info">循环</button> </div> <!-- 高级轮播 --> <div id="advancedCarousel" class="carousel slide mt-4" data-ride="carousel" data-interval="3000"> <div class="carousel-inner"> <div class="carousel-item active"> <div class="d-flex justify-content-center align-items-center" style="height: 300px; background: linear-gradient(45deg, #1a2a6c, #b21f1f, #fdbb2d);"> <h2 class="text-white">渐变背景 1</h2> </div> </div> <div class="carousel-item"> <div class="d-flex justify-content-center align-items-center" style="height: 300px; background: linear-gradient(45deg, #000428, #004e92);"> <h2 class="text-white">渐变背景 2</h2> </div> </div> <div class="carousel-item"> <div class="d-flex justify-content-center align-items-center" style="height: 300px; background: linear-gradient(45deg, #134e5e, #71b280);"> <h2 class="text-white">渐变背景 3</h2> </div> </div> </div> <a class="carousel-control-prev" href="#advancedCarousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">上一页</span> </a> <a class="carousel-control-next" href="#advancedCarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">下一页</span> </a> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script> <script> // 轮播控制API $(document).ready(function() { // 上一张 $('#prevBtn').click(function() { $('#basicCarousel').carousel('prev'); }); // 下一张 $('#nextBtn').click(function() { $('#basicCarousel').carousel('next'); }); // 暂停 $('#pauseBtn').click(function() { $('#basicCarousel').carousel('pause'); }); // 循环 $('#cycleBtn').click(function() { $('#basicCarousel').carousel('cycle'); }); // 轮播事件监听 $('#basicCarousel').on('slide.bs.carousel', function() { console.log('轮播开始切换'); }); $('#basicCarousel').on('slid.bs.carousel', function() { console.log('轮播完成切换'); }); }); </script> </body> </html>

六、卡片组件（Cards）

卡片是Bootstrap 4中非常灵活的组件，用于展示内容块。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap 4 卡片组件示例</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-4"> <!-- 基础卡片 --> <div class="row"> <div class="col-md-4 mb-4"> <div class="card"> <img src="https://picsum.photos/300/200?random=4" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">卡片标题</h5> <p class="card-text">这是卡片的内容描述，可以包含任意长度的文本。</p> <a href="#" class="btn btn-primary">查看详情</a> </div> </div> </div> <div class="col-md-4 mb-4"> <div class="card"> <div class="card-header"> 特色产品 </div> <div class="card-body"> <h5 class="card-title">高级卡片</h5> <p class="card-text">带标题的卡片，适合展示重要信息。</p> <a href="#" class="btn btn-success">购买</a> </div> <div class="card-footer text-muted"> 2天前更新 </div> </div> </div> <div class="col-md-4 mb-4"> <div class="card text-white bg-primary"> <div class="card-header">主要信息</div> <div class="card-body"> <h5 class="card-title">彩色卡片</h5> <p class="card-text">使用背景色类创建彩色卡片。</p> </div> </div> </div> </div> <!-- 卡片组 --> <div class="card-group mt-4"> <div class="card"> <img src="https://picsum.photos/300/200?random=5" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">产品 1</h5> <p class="card-text">卡片组可以水平排列卡片。</p> </div> </div> <div class="card"> <img src="https://picsum.photos/300/200?random=6" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">产品 2</h5> <p class="card-text">它们会自动适应宽度。</p> </div> </div> <div class="card"> <img src="https://picsum.photos/300/200?random=7" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">产品 3</h5> <p class="card-text">非常适合展示产品列表。</p> </div> </div> </div> <!-- 列中的卡片 --> <div class="row mt-4"> <div class="col-sm-6"> <div class="card mb-3"> <div class="row no-gutters"> <div class="col-md-4"> <img src="https://picsum.photos/150/150?random=8" class="card-img" alt="..."> </div> <div class="col-md-8"> <div class="card-body"> <h5 class="card-title">列表卡片</h5> <p class="card-text">图文结合的卡片布局。</p> <p class="card-text"><small class="text-muted">最后更新 3分钟前</small></p> </div> </div> </div> </div> </div> <div class="col-sm-6"> <div class="card mb-3"> <div class="row no-gutters"> <div class="col-md-4"> <img src="https://picsum.photos/150/150?random=9" class="card-img" alt="..."> </div> <div class="col-md-8"> <div class="card-body"> <h5 class="card-title">另一个卡片</h5> <p class="card-text">响应式卡片布局。</p> <p class="card-text"><small class="text-muted">最后更新 1小时前</small></p> </div> </div> </div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script> </body> </html>

七、折叠组件（Collapse）

折叠组件用于创建可展开/折叠的内容区域，常用于FAQ、手风琴菜单等。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap 4 折叠组件示例</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-4"> <!-- 基础折叠 --> <p> <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"> 链接触发折叠 </a> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> 按钮触发折叠 </button> </p> <div class="collapse" id="collapseExample"> <div class="card card-body"> 这是可折叠的内容区域。点击上面的链接或按钮可以切换显示状态。 </div> </div> <!-- 手风琴效果 --> <div class="mt-4"> <div class="accordion" id="accordionExample"> <!-- 第一个折叠项 --> <div class="card"> <div class="card-header" id="headingOne"> <h2 class="mb-0"> <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 问题 1: 什么是 Bootstrap？ </button> </h2> </div> <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample"> <div class="card-body"> Bootstrap 是一个流行的前端框架，提供了响应式设计、网格系统和丰富的UI组件，帮助开发者快速构建现代化的网站。 </div> </div> </div> <!-- 第二个折叠项 --> <div class="card"> <div class="card-header" id="headingTwo"> <h2 class="mb-0"> <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 问题 2: 如何使用 Bootstrap 4？ </button> </h2> </div> <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample"> <div class="card-body"> 可以通过 CDN 引入 Bootstrap，也可以下载到本地使用。只需在 HTML 文件中添加相应的 CSS 和 JS 文件即可开始使用。 </div> </div> </div> <!-- 第三个折叠项 --> <div class="card"> <div class="card-header" id="headingThree"> <h2 class="mb-0"> <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> 问题 3: Bootstrap 4 有哪些新特性？ </button> </h2> </div> <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample"> <div class="card-body"> Bootstrap 4 引入了 Flexbox 布局系统，改进了网格系统，增加了更多实用工具类，并且完全基于 Sass 构建，支持自定义主题。 </div> </div> </div> </div> </div> <!-- 多个折叠项 --> <div class="mt-4"> <p> <button class="btn btn-success" type="button" data-toggle="collapse" data-target="#multiCollapseExample1" aria-expanded="false" aria-controls="multiCollapseExample1">折叠项 1</button> <button class="btn btn-warning" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">折叠项 2</button> <button class="btn btn-danger" type="button" data-toggle="collapse" data-target="#multiCollapseExample3" aria-expanded="false" aria-controls="multiCollapseExample3">折叠项 3</button> </p> <div class="row"> <div class="col"> <div class="collapse multi-collapse" id="multiCollapseExample1"> <div class="card card-body"> 折叠项 1 的内容。可以独立控制多个折叠区域。 </div> </div> </div> <div class="col"> <div class="collapse multi-collapse" id="multiCollapseExample2"> <div class="card card-body"> 折叠项 2 的内容。每个折叠区域都有独立的状态。 </div> </div> </div> <div class="col"> <div class="collapse multi-collapse" id="multiCollapseExample3"> <div class="card card-body"> 折叠项 3 的内容。可以同时展开多个区域。 </div> </div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script> <script> // 折叠事件监听 $('#collapseExample').on('shown.bs.collapse', function () { console.log('折叠区域已展开'); }); $('#collapseExample').on('hidden.bs.collapse', function () { console.log('折叠区域已折叠'); }); // 编程方式控制 $('#collapseExample').collapse('toggle'); // 切换 $('#collapseExample').collapse('show'); // 显示 $('#collapseExample').collapse('hide'); // 隐藏 </script> </body> </html>

八、工具提示（Tooltips）和弹出框（Popovers）

8.1 工具提示

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap 4 工具提示和弹出框</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-4"> <h4>工具提示（Tooltips）</h4> <p>将鼠标悬停在按钮上查看工具提示：</p> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="顶部工具提示"> 顶部提示 </button> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="右侧工具提示"> 右侧提示 </button> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="底部工具提示"> 底部提示 </button> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="左侧工具提示"> 左侧提示 </button> <h4 class="mt-4">弹出框（Popovers）</h4> <p>点击按钮显示弹出框：</p> <button type="button" class="btn btn-primary" data-toggle="popover" title="弹出框标题" data-content="这是弹出框的内容，可以包含更多信息。"> 点击显示弹出框 </button> <button type="button" class="btn btn-success" data-toggle="popover" data-placement="right" data-content="右侧弹出框内容"> 右侧弹出框 </button> <button type="button" class="btn btn-info" data-toggle="popover" data-html="true" data-content="<strong>HTML内容</strong><br>支持<em>HTML标签</em>"> HTML内容弹出框 </button> <!-- 带表单的弹出框 --> <button type="button" class="btn btn-warning mt-3" id="formPopover"> 带表单的弹出框 </button> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script> <script> // 初始化工具提示 $(function () { $('[data-toggle="tooltip"]').tooltip(); }); // 初始化弹出框 $(function () { $('[data-toggle="popover"]').popover(); }); // 带表单的弹出框 $(function () { $('#formPopover').popover({ html: true, placement: 'right', title: '快速登录', content: ` <form> <div class="form-group"> <input type="text" class="form-control form-control-sm" placeholder="用户名"> </div> <div class="form-group"> <input type="password" class="form-control form-control-sm" placeholder="密码"> </div> <button type="submit" class="btn btn-primary btn-sm btn-block">登录</button> </form> ` }); }); // 编程方式控制 $('#example').tooltip('show'); // 显示 $('#example').tooltip('hide'); // 隐藏 $('#example').tooltip('toggle'); // 切换 $('#example').tooltip('dispose'); // 销毁 // 事件监听 $('#example').on('shown.bs.tooltip', function () { console.log('工具提示已显示'); }); </script> </body> </html>

九、进阶技巧：自定义Bootstrap主题

9.1 使用Sass自定义主题

// 自定义变量 $primary: #3498db; $secondary: #2c3e50; $success: #27ae60; $danger: #e74c3c; $warning: #f39c12; $info: #1abc9c; // 自定义字体 $font-family-base: 'Roboto', sans-serif; // 自定义边框半径 $border-radius: 8px; $border-radius-lg: 12px; $border-radius-sm: 4px; // 自定义间距 $spacer: 1rem; $spacers: ( 0: 0, 1: $spacer * .25, 2: $spacer * .5, 3: $spacer, 4: $spacer * 1.5, 5: $spacer * 3, 6: $spacer * 4.5, 7: $spacer * 6 ); // 导入Bootstrap @import "bootstrap/scss/bootstrap"; // 自定义工具类 .custom-shadow { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .custom-gradient { background: linear-gradient(135deg, $primary, $info); } .rounded-xl { border-radius: $border-radius-lg * 1.5 !important; }

9.2 使用自定义主题的HTML示例

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>自定义Bootstrap主题</title> <!-- 使用自定义CSS --> <link rel="stylesheet" href="custom-bootstrap.css"> <!-- 或者使用CDN并覆盖样式 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"> <style> /* 覆盖默认变量 */ :root { --primary: #3498db; --secondary: #2c3e50; --success: #27ae60; --danger: #e74c3c; --warning: #f39c12; --info: #1abc9c; } /* 自定义工具类 */ .custom-shadow { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .custom-gradient { background: linear-gradient(135deg, var(--primary), var(--info)); color: white; } .rounded-xl { border-radius: 16px !important; } /* 自定义按钮 */ .btn-custom { background: linear-gradient(135deg, var(--primary), var(--info)); border: none; color: white; transition: transform 0.2s; } .btn-custom:hover { transform: translateY(-2px); color: white; opacity: 0.9; } /* 自定义导航 */ .navbar-custom { background: linear-gradient(135deg, var(--secondary), var(--primary)); box-shadow: 0 2px 10px rgba(0,0,0,0.1); } .navbar-custom .navbar-brand, .navbar-custom .nav-link { color: white !important; font-weight: 500; } .navbar-custom .nav-link:hover { opacity: 0.8; } /* 自定义卡片 */ .card-custom { border: none; border-radius: 16px; overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; } .card-custom:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.15); } .card-custom .card-header { background: var(--primary); color: white; font-weight: 600; } /* 自定义表单 */ .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25); } .custom-file-input:focus ~ .custom-file-label { border-color: var(--primary); box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25); } /* 自定义模态框 */ .modal-content { border-radius: 16px; border: none; } .modal-header { background: var(--primary); color: white; border-radius: 16px 16px 0 0; } .modal-header .close { color: white; opacity: 0.8; } .modal-header .close:hover { opacity: 1; } /* 自定义工具提示 */ .tooltip-inner { background-color: var(--primary); border-radius: 8px; padding: 8px 12px; } .tooltip-arrow::before { border-top-color: var(--primary) !important; } /* 自定义弹出框 */ .popover { border-radius: 12px; border: 1px solid var(--primary); box-shadow: 0 4px 12px rgba(0,0,0,0.15); } .popover-header { background: var(--primary); color: white; border-radius: 12px 12px 0 0; font-weight: 600; } /* 自定义轮播指示器 */ .carousel-indicators li { width: 12px; height: 12px; border-radius: 50%; border: 2px solid white; } .carousel-indicators .active { background-color: white; } /* 自定义折叠手风琴 */ .accordion .card-header { background: var(--light); border: none; border-radius: 8px !important; margin-bottom: 4px; } .accordion .card-header button { color: var(--primary); font-weight: 600; text-decoration: none; } .accordion .card-header button:hover { color: var(--secondary); } /* 响应式工具类 */ @media (max-width: 768px) { .custom-gradient { background: var(--primary); } .btn-custom { width: 100%; margin-bottom: 8px; } } /* 动画效果 */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fadeIn 0.5s ease-out; } /* 自定义滚动条 */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--light); } ::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--secondary); } </style> </head> <body> <!-- 自定义导航栏 --> <nav class="navbar navbar-expand-lg navbar-custom"> <div class="container"> <a class="navbar-brand" href="#">MyBrand</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"> <span class="navbar-toggler-icon" style="filter: invert(1);"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ml-auto"> <li class="nav-item"><a class="nav-link" href="#">首页</a></li> <li class="nav-item"><a class="nav-link" href="#">产品</a></li> <li class="nav-item"><a class="nav-link" href="#">关于</a></li> <li class="nav-item"><a class="nav-link" href="#">联系</a></li> </ul> </div> </div> </nav> <!-- 自定义渐变区域 --> <div class="custom-gradient py-5 text-center animate-fade-in"> <div class="container"> <h1 class="display-4 font-weight-bold">欢迎来到自定义主题</h1> <p class="lead">体验完全定制化的Bootstrap 4主题</p> <button class="btn btn-light btn-lg mt-3">了解更多</button> </div> </div> <!-- 自定义卡片网格 --> <div class="container mt-5"> <div class="row"> <div class="col-md-4 mb-4"> <div class="card card-custom h-100"> <div class="card-header">特性 1</div> <div class="card-body"> <h5 class="card-title">响应式设计</h5> <p class="card-text">自适应所有设备尺寸，提供最佳用户体验。</p> <button class="btn btn-custom btn-block">查看详情</button> </div> </div> </div> <div class="col-md-4 mb-4"> <div class="card card-custom h-100"> <div class="card-header">特性 2</div> <div class="card-body"> <h5 class="card-title">性能优化</h5> <p class="card-text">优化的CSS和JavaScript，确保快速加载。</p> <button class="btn btn-custom btn-block">查看详情</button> </div> </div> </div> <div class="col-md-4 mb-4"> <div class="card card-custom h-100"> <div class="card-header">特性 3</div> <div class="card-body"> <h5 class="card-title">易于定制</h5> <p class="card-text">基于Sass构建，轻松修改颜色、字体等。</p> <button class="btn btn-custom btn-block">查看详情</button> </div> </div> </div> </div> </div> <!-- 自定义表单 --> <div class="container mt-5"> <div class="row justify-content-center"> <div class="col-md-8"> <div class="card card-custom"> <div class="card-header">联系表单</div> <div class="card-body"> <form> <div class="form-group"> <label for="name">姓名</label> <input type="text" class="form-control" id="name" placeholder="请输入您的姓名"> </div> <div class="form-group"> <label for="email">邮箱</label> <input type="email" class="form-control" id="email" placeholder="name@example.com"> </div> <div class="form-group"> <label for="message">留言</label> <textarea class="form-control" id="message" rows="4" placeholder="请输入您的留言..."></textarea> </div> <div class="form-group"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="customCheck"> <label class="custom-control-label" for="customCheck">我同意接收新闻通讯</label> </div> </div> <button type="submit" class="btn btn-custom btn-lg btn-block">发送消息</button> </form> </div> </div> </div> </div> </div> <!-- 自定义模态框触发按钮 --> <div class="container mt-5 text-center"> <button type="button" class="btn btn-custom btn-lg" data-toggle="modal" data-target="#customModal"> 打开自定义模态框 </button> <button type="button" class="btn btn-outline-primary btn-lg ml-2" data-toggle="tooltip" data-placement="top" title="这是一个自定义工具提示！"> 悬停查看提示 </button> <button type="button" class="btn btn-outline-success btn-lg ml-2" data-toggle="popover" title="自定义弹出框" data-content="这是一个带有自定义样式的弹出框！"> 点击查看弹出框 </button> </div> <!-- 自定义模态框 --> <div class="modal fade" id="customModal" tabindex="-1" role="dialog" aria-labelledby="customModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="customModalLabel">自定义模态框</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <div class="row"> <div class="col-md-6"> <div class="card border-0"> <div class="card-body text-center"> <h4 class="text-primary">功能 1</h4> <p>自定义样式的模态框内容</p> </div> </div> </div> <div class="col-md-6"> <div class="card border-0"> <div class="card-body text-center"> <h4 class="text-success">功能 2</h4> <p>支持响应式布局</p> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-custom">确认</button> </div> </div> </div> </div> <!-- 自定义手风琴 --> <div class="container mt-5 mb-5"> <h3 class="text-center mb-4">常见问题</h3> <div class="accordion" id="customAccordion"> <div class="card card-custom mb-2"> <div class="card-header" id="headingOne"> <h2 class="mb-0"> <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 如何开始使用自定义主题？ </button> </h2> </div> <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#customAccordion"> <div class="card-body"> 只需将自定义CSS文件引入到您的项目中，然后按照文档使用相应的类名即可。您也可以通过修改Sass变量来进一步定制。 </div> </div> </div> <div class="card card-custom mb-2"> <div class="card-header" id="headingTwo"> <h2 class="mb-0"> <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 自定义主题是否兼容Bootstrap插件？ </button> </h2> </div> <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#customAccordion"> <div class="card-body"> 是的，所有Bootstrap 4的JavaScript插件都与自定义主题完全兼容。您可以继续使用模态框、轮播、工具提示等所有功能。 </div> </div> </div> <div class="card card-custom mb-2"> <div class="card-header" id="headingThree"> <h2 class="mb-0"> <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> 如何优化自定义主题的性能？ </button> </h2> </div> <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#customAccordion"> <div class="card-body"> 建议使用Sass编译CSS，只导入需要的模块，压缩CSS文件，并使用CDN加速。同时，合理使用工具类减少重复代码。 </div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script> <script> // 初始化所有组件 $(function () { // 初始化工具提示 $('[data-toggle="tooltip"]').tooltip(); // 初始化弹出框 $('[data-toggle="popover"]').popover({ trigger: 'focus' // 点击其他地方自动关闭 }); // 模态框事件 $('#customModal').on('shown.bs.modal', function () { console.log('自定义模态框已打开'); }); // 手风琴事件 $('#customAccordion').on('shown.bs.collapse', function (e) { console.log('展开项:', $(e.target).attr('id')); }); }); // 自定义JavaScript功能 document.addEventListener('DOMContentLoaded', function() { // 为所有自定义按钮添加点击反馈 document.querySelectorAll('.btn-custom').forEach(btn => { btn.addEventListener('click', function() { this.style.transform = 'scale(0.95)'; setTimeout(() => { this.style.transform = ''; }, 100); }); }); // 表单提交处理 document.querySelector('form').addEventListener('submit', function(e) { e.preventDefault(); alert('表单已提交！（这是一个演示）'); }); }); </script> </body> </html>

十、最佳实践和性能优化

10.1 性能优化技巧

// 1. 按需加载Bootstrap组件 // 不要一次性引入所有组件，只引入需要的 // 例如：只使用模态框和工具提示 import 'bootstrap/js/dist/modal'; import 'bootstrap/js/dist/tooltip'; // 2. 使用Bootstrap的内置工具类 // 避免自定义CSS，优先使用工具类 // 例如：使用 .mt-3 代替自定义 margin-top: 1rem; // 3. 合理使用响应式图片 // 使用Bootstrap的img-fluid类 // <img src="image.jpg" class="img-fluid" alt="响应式图片"> // 4. 优化模态框性能 // 对于大量内容的模态框，使用懒加载 $('#lazyModal').on('show.bs.modal', function () { const modalBody = $(this).find('.modal-body'); if (modalBody.html().trim() === '') { // 加载内容 modalBody.load('/api/content'); } }); // 5. 事件委托 // 对于动态添加的元素，使用事件委托 $(document).on('click', '.dynamic-btn', function() { // 处理动态按钮点击 }); // 6. 防止多次触发 // 使用防抖技术处理频繁触发的事件 function debounce(func, wait) { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; } // 7. 使用CSS变量进行主题切换 // 在CSS中定义变量，通过JavaScript动态修改 function changeTheme(primaryColor) { document.documentElement.style.setProperty('--primary', primaryColor); }

10.2 响应式设计最佳实践

<!-- 1. 移动优先的设计 --> <div class="container"> <!-- 小屏幕默认显示，大屏幕调整 --> <div class="row"> <div class="col-12 col-md-8 col-lg-6"> <!-- 内容区域 --> </div> </div> </div> <!-- 2. 图片响应式 --> <div class="container"> <div class="row"> <div class="col"> <img src="large-image.jpg" class="img-fluid rounded" alt="响应式图片"> </div> </div> </div> <!-- 3. 隐藏/显示内容 --> <div class="container"> <!-- 仅在小屏幕显示 --> <div class="d-block d-md-none"> 移动端内容 </div> <!-- 仅在中等以上屏幕显示 --> <div class="d-none d-md-block"> 桌面端内容 </div> </div> <!-- 4. 弹性布局 --> <div class="container"> <div class="d-flex justify-content-between align-items-center"> <div>左侧内容</div> <div>中间内容</div> <div>右侧内容</div> </div> </div> <!-- 5. 响应式表格 --> <div class="container"> <div class="table-responsive"> <table class="table table-striped table-bordered"> <thead> <tr> <th>姓名</th> <th>邮箱</th> <th>状态</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>zhang@example.com</td> <td>活跃</td> </tr> </tbody> </table> </div> </div>