模板特点
- 技术栈: HTML5, CSS3, Bootstrap 5.3
- 组件: 使用了 Bootstrap 的 Navbar, Card, List group, Tabs, Buttons, Avatar, Progress bar 等。
- 响应式设计: 在桌面、平板和手机上都有良好的显示效果。
- 交互性: 包含了标签页切换、简单的表单验证、模态框等交互元素。
- 图标: 使用了流行的 Font Awesome 图标库。
- 可定制: 结构清晰，易于修改颜色、内容和布局。
第一步：准备工作
在创建 HTML 文件之前，请确保您的项目已经引入了 Bootstrap 和 Font Awesome 的 CDN，您可以直接复制以下代码到您的 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 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome 6 CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* 自定义样式，让页面更美观 */
body {
background-color: #f8f9fa;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.sidebar .nav-link {
color: #6c757d;
padding: 0.8rem 1.2rem;
border-radius: 0.5rem;
margin-bottom: 0.25rem;
transition: all 0.3s ease;
}
.sidebar .nav-link:hover {
background-color: #e9ecef;
color: #0d6efd;
}
.sidebar .nav-link.active {
background-color: #0d6efd;
color: white;
}
.avatar {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #fff;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.card {
border: none;
box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);
transition: transform 0.2s ease-in-out;
}
.card:hover {
transform: translateY(-3px);
}
.order-item {
cursor: pointer;
}
</style>
</head>
<body>
<!-- 第二步：复制下面的 HTML 代码 -->
<!-- ... (将下面的完整代码粘贴到这里) ... -->
<!-- 第三步：复制下面的 JavaScript 代码 -->
<!-- ... (将下面的完整代码粘贴到这里) ... -->
</body>
</html>
第二步：HTML 结构
将以下完整的 HTML 结构代码粘贴到您之前准备的 HTML 文件中 <body> 标签内部。
<!-- 主容器 -->
<div class="container-fluid py-4">
<div class="row">
<!-- 左侧边栏 -->
<div class="col-md-3 col-lg-2 sidebar p-3 bg-white rounded shadow-sm mb-4 mb-md-0">
<div class="text-center mb-4">
<img src="https://i.pravatar.cc/150?u=user123" alt="用户头像" class="avatar mb-3">
<h5 class="mb-1">张三</h5>
<p class="text-muted small mb-0">高级会员</p>
</div>
<nav class="nav flex-column">
<a class="nav-link active" href="#profile" data-bs-toggle="tab">
<i class="fas fa-user me-2"></i> 个人资料
</a>
<a class="nav-link" href="#orders" data-bs-toggle="tab">
<i class="fas fa-shopping-bag me-2"></i> 我的订单
</a>
<a class="nav-link" href="#favorites" data-bs-toggle="tab">
<i class="fas fa-heart me-2"></i> 我的收藏
</a>
<a class="nav-link" href="#addresses" data-bs-toggle="tab">
<i class="fas fa-map-marker-alt me-2"></i> 收货地址
</a>
<a class="nav-link" href="#security" data-bs-toggle="tab">
<i class="fas fa-shield-alt me-2"></i> 账户安全
</a>
<a class="nav-link" href="#settings" data-bs-toggle="tab">
<i class="fas fa-cog me-2"></i> 系统设置
</a>
</nav>
</div>
<!-- 右侧内容区 -->
<div class="col-md-9 col-lg-10">
<!-- 标签页内容 -->
<div class="tab-content">
<!-- 个人资料 -->
<div class="tab-pane fade show active" id="profile">
<div class="card shadow-sm">
<div class="card-header bg-white border-bottom-0">
<h4 class="mb-0">个人资料</h4>
</div>
<div class="card-body">
<form>
<div class="row g-3">
<div class="col-md-6">
<label for="username" class="form-label">用户名</label>
<input type="text" class="form-control" id="username" value="张三">
</div>
<div class="col-md-6">
<label for="email" class="form-label">电子邮箱</label>
<input type="email" class="form-control" id="email" value="zhangsan@example.com">
</div>
<div class="col-md-6">
<label for="phone" class="form-label">手机号码</label>
<input type="tel" class="form-control" id="phone" value="138****8888">
</div>
<div class="col-md-6">
<label for="birthday" class="form-label">生日</label>
<input type="date" class="form-control" id="birthday">
</div>
<div class="col-12">
<label for="bio" class="form-label">个人简介</label>
<textarea class="form-control" id="bio" rows="3" placeholder="介绍一下自己吧..."></textarea>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary">保存修改</button>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- 我的订单 -->
<div class="tab-pane fade" id="orders">
<div class="card shadow-sm">
<div class="card-header bg-white border-bottom-0">
<h4 class="mb-0">我的订单</h4>
</div>
<div class="card-body">
<!-- 订单筛选标签 -->
<ul class="nav nav-pills mb-4" id="orderTabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="all-tab" data-bs-toggle="pill" data-bs-target="#all-orders" type="button">全部</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pending-tab" data-bs-toggle="pill" data-bs-target="#pending-orders" type="button">待付款</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="shipped-tab" data-bs-toggle="pill" data-bs-target="#shipped-orders" type="button">待收货</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="completed-tab" data-bs-toggle="pill" data-bs-target="#completed-orders" type="button">已完成</button>
</li>
</ul>
<!-- 订单列表 -->
<div class="tab-content" id="orderTabsContent">
<div class="tab-pane fade show active" id="all-orders">
<div class="list-group">
<div class="list-group-item order-item">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1">订单号: 202510280001</h6>
<small class="text-muted">2025-10-28 15:30</small>
</div>
<p class="mb-1">商品：Apple MacBook Pro 14寸 | 数量：1</p>
<div class="d-flex justify-content-between align-items-center">
<span class="badge bg-success text-white">已完成</span>
<span class="fw-bold">¥14,999.00</span>
</div>
</div>
<div class="list-group-item order-item">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1">订单号: 202510250002</h6>
<small class="text-muted">2025-10-25 10:15</small>
</div>
<p class="mb-1">商品：AirPods Pro (第2代) | 数量：1</p>
<div class="d-flex justify-content-between align-items-center">
<span class="badge bg-primary text-white">待收货</span>
<span class="fw-bold">¥1,899.00</span>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pending-orders">
<p class="text-center text-muted">暂无待付款订单</p>
</div>
<div class="tab-pane fade" id="shipped-orders">
<div class="list-group">
<div class="list-group-item order-item">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1">订单号: 202510250002</h6>
<small class="text-muted">2025-10-25 10:15</small>
</div>
<p class="mb-1">商品：AirPods Pro (第2代) | 数量：1</p>
<div class="d-flex justify-content-between align-items-center">
<span class="badge bg-primary text-white">待收货</span>
<span class="fw-bold">¥1,899.00</span>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="completed-orders">
<div class="list-group">
<div class="list-group-item order-item">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1">订单号: 202510280001</h6>
<small class="text-muted">2025-10-28 15:30</small>
</div>
<p class="mb-1">商品：Apple MacBook Pro 14寸 | 数量：1</p>
<div class="d-flex justify-content-between align-items-center">
<span class="badge bg-success text-white">已完成</span>
<span class="fw-bold">¥14,999.00</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 我的收藏 -->
<div class="tab-pane fade" id="favorites">
<div class="card shadow-sm">
<div class="card-header bg-white border-bottom-0">
<h4 class="mb-0">我的收藏</h4>
</div>
<div class="card-body">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4">
<div class="col">
<div class="card h-100">
<img src="https://via.placeholder.com/300x200?text=商品1" class="card-img-top" alt="商品图片">
<div class="card-body">
<h6 class="card-title">商品名称 1</h6>
<p class="card-text text-muted">这里是商品的简短描述...</p>
<div class="d-flex justify-content-between align-items-center">
<span class="text-danger fw-bold">¥299.00</span>
<button class="btn btn-sm btn-outline-danger"><i class="fas fa-heart"></i></button>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://via.placeholder.com/300x200?text=商品2" class="card-img-top" alt="商品图片">
<div class="card-body">
<h6 class="card-title">商品名称 2</h6>
<p class="card-text text-muted">这里是商品的简短描述...</p>
<div class="d-flex justify-content-between align-items-center">
<span class="text-danger fw-bold">¥599.00</span>
<button class="btn btn-sm btn-outline-danger"><i class="fas fa-heart"></i></button>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://via.placeholder.com/300x200?text=商品3" class="card-img-top" alt="商品图片">
<div class="card-body">
<h6 class="card-title">商品名称 3</h6>
<p class="card-text text-muted">这里是商品的简短描述...</p>
<div class="d-flex justify-content-between align-items-center">
<span class="text-danger fw-bold">¥199.00</span>
<button class="btn btn-sm btn-outline-danger"><i class="fas fa-heart"></i></button>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://via.placeholder.com/300x200?text=商品4" class="card-img-top" alt="商品图片">
<div class="card-body">
<h6 class="card-title">商品名称 4</h6>
<p class="card-text text-muted">这里是商品的简短描述...</p>
<div class="d-flex justify-content-between align-items-center">
<span class="text-danger fw-bold">¥899.00</span>
<button class="btn btn-sm btn-outline-danger"><i class="fas fa-heart"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 收货地址 -->
<div class="tab-pane fade" id="addresses">
<div class="card shadow-sm">
<div class="card-header bg-white border-bottom-0 d-flex justify-content-between align-items-center">
<h4 class="mb-0">收货地址</h4>
<button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addAddressModal">
<i class="fas fa-plus me-1"></i> 新增地址
</button>
</div>
<div class="card-body">
<div class="list-group">
<div class="list-group-item active">
<div class="d-flex justify-content-between align-items-start">
<div>
<h6 class="mb-1">张三 <span class="badge bg-primary text-white ms-2">默认</span></h6>
<p class="mb-1">138****8888</p>
<p class="mb-0 text-muted">北京市朝阳区建国路88号SOHO现代城A座2801</p>
</div>
<div>
<button class="btn btn-sm btn-outline-primary me-1">编辑</button>
<button class="btn btn-sm btn-outline-danger">删除</button>
</div>
</div>
</div>
<div class="list-group-item">
<div class="d-flex justify-content-between align-items-start">
<div>
<h6 class="mb-1">李四</h6>
<p class="mb-1">139****9999</p>
<p class="mb-0 text-muted">上海市浦东新区陆家嘴环路1000号恒生银行大厦</p>
</div>
<div>
<button class="btn btn-sm btn-outline-primary me-1">编辑</button>
<button class="btn btn-sm btn-outline-danger">删除</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 账户安全 -->
<div class="tab-pane fade" id="security">
<div class="card shadow-sm">
<div class="card-header bg-white border-bottom-0">
<h4 class="mb-0">账户安全</h4>
</div>
<div class="card-body">
<div class="mb-4">
<div class="d-flex justify-content-between align-items-center mb-2">
<div>
<h6 class="mb-1">登录密码</h6>
<small class="text-muted">定期修改密码，保护账户安全</small>
</div>
<button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#changePasswordModal">修改</button>
</div>
</div>
<hr>
<div class="mb-4">
<div class="d-flex justify-content-between align-items-center mb-2">
<div>
<h6 class="mb-1">手机验证</h6>
<small class="text-muted">已绑定: 138****8888</small>
</div>
<span class="badge bg-success text-white">已验证</span>
</div>
</div>
<hr>
<div class="mb-4">
<div class="d-flex justify-content-between align-items-center mb-2">
<div>
<h6 class="mb-1">邮箱验证</h6>
<small class="text-muted">已绑定: zhangsan@example.com</small>
</div>
<span class="badge bg-success text-white">已验证</span>
</div>
</div>
</div>
</div>
</div>
<!-- 系统设置 -->
<div class="tab-pane fade" id="settings">
<div class="card shadow-sm">
<div class="card-header bg-white border-bottom-0">
<h4 class="mb-0">系统设置</h4>
</div>
<div class="card-body">
<h5 class="mb-3">通知设置</h5>
<div class="form-check form-switch mb-3">
<input class="form-check-input" type="checkbox" id="emailNotifications" checked>
<label class="form-check-label" for="emailNotifications">接收邮件通知</label>
</div>
<div class="form-check form-switch mb-3">
<input class="form-check-input" type="checkbox" id="smsNotifications">
<label class="form-check-label" for="smsNotifications">接收短信通知</label>
</div>
<div class="form-check form-switch mb-3">
<input class="form-check-input" type="checkbox" id="appNotifications" checked>
<label class="form-check-label" for="appNotifications">接收App推送</label>
</div>
<button type="button" class="btn btn-primary">保存设置</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 新增地址模态框 -->
<div class="modal fade" id="addAddressModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">新增收货地址</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="recipientName" class="form-label">收货人姓名</label>
<input type="text" class="form-control" id="recipientName">
</div>
<div class="mb-3">
<label for="recipientPhone" class="form-label">手机号码</label>
<input type="tel" class="form-control" id="recipientPhone">
</div>
<div class="mb-3">
<label for="detailAddress" class="form-label">详细地址</label>
<textarea class="form-control" id="detailAddress" rows="3"></textarea>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="setDefaultAddress">
<label class="form-check-label" for="setDefaultAddress">设为默认地址</label>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
<!-- 修改密码模态框 -->
<div class="modal fade" id="changePasswordModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">修改登录密码</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="currentPassword" class="form-label">当前密码</label>
<input type="password" class="form-control" id="currentPassword">
</div>
<div class="mb-3">
<label for="newPassword" class="form-label">新密码</label>
<input type="password" class="form-control" id="newPassword">
</div>
<div class="mb-3">
<label for="confirmPassword" class="form-label">确认新密码</label>
<input type="password" class="form-control" id="confirmPassword">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary">确认修改</button>
</div>
</div>
</div>
</div>
第三步：JavaScript 交互
在 HTML 文件的底部，</body> 标签之前，添加以下 JavaScript 代码，这部分代码主要用于初始化 Bootstrap 的组件（如标签页和模态框），并添加一些简单的交互逻辑。
<!-- Bootstrap 5 JS Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
// 1. 左侧导航栏点击事件
const sidebarLinks = document.querySelectorAll('.sidebar .nav-link');
sidebarLinks.forEach(link => {
link.addEventListener('click', function(e) {
// 移除所有活动状态
sidebarLinks.forEach(l => l.classList.remove('active'));
// 为当前点击的链接添加活动状态
this.classList.add('active');
});
});
// 2. 订单列表项点击事件（示例：可以跳转到订单详情页）
const orderItems = document.querySelectorAll('.order-item');
orderItems.forEach(item => {
item.addEventListener('click', function() {
// 这里可以添加跳转到订单详情页的逻辑
// window.location.href = '/order/detail?order_id=' + this.querySelector('h6').textContent.split(': ')[1];
alert('您点击了订单: ' + this.querySelector('h6').textContent);
});
});
// 3. 收藏商品点击心形图标事件
const favoriteButtons = document.querySelectorAll('.favorites .btn-outline-danger');
favoriteButtons.forEach(button => {
button.addEventListener('click', function(e) {
e.stopPropagation(); // 阻止事件冒泡，避免触发父元素的点击事件
const icon = this.querySelector('i');
if (icon.classList.contains('fas')) {
// 如果是实心，点击后变空心并取消收藏
icon.classList.remove('fas');
icon.classList.add('far');
this.classList.remove('btn-danger');
this.classList.add('btn-outline-danger');
// 可以在这里添加AJAX请求，后端取消收藏
} else {
// 如果是空心，点击后变实心
icon.classList.remove('far');
icon.classList.add('fas');
this.classList.remove('btn-outline-danger');
this.classList.add('btn-danger');
// 可以在这里添加AJAX请求，后端添加收藏
}
});
});
// 4. 表单提交事件（示例）
const profileForm = document.querySelector('#profile form');
if (profileForm) {
profileForm.addEventListener('submit', function(e) {
e.preventDefault();
// 这里可以添加表单验证和AJAX提交逻辑
const alertDiv = document.createElement('div');
alertDiv.className = 'alert alert-success alert-dismissible fade show mt-3';
alertDiv.innerHTML = `
个人资料已成功更新！
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
`;
this.appendChild(alertDiv);
});
}
// 5. 设置保存按钮点击事件
const settingsSaveBtn = document.querySelector('#settings .btn-primary');
if (settingsSaveBtn) {
settingsSaveBtn.addEventListener('click', function() {
// 这里可以添加AJAX提交逻辑
const alertDiv = document.createElement('div');
alertDiv.className = 'alert alert-success alert-dismissible fade show mt-3';
alertDiv.innerHTML = `
设置已成功保存！
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
`;
this.closest('.card-body').appendChild(alertDiv);
});
}
});
</script>
如何使用
- 创建文件: 创建一个
index.html文件。 - 复制粘贴: 将上面的三个部分（第一步的 head、第二步的 body、第三步的 script）完整地复制到您的
index.html文件中。 - 打开浏览器: 用浏览器打开这个
index.html文件，您就可以看到一个功能完整的 Bootstrap 风格个人中心页面了。
扩展建议
- 后端集成: 将表单提交、数据加载等操作通过 AJAX 与后端 API 进行交互。
- 更多组件: 可以根据需要添加更多功能，如优惠券、消息中心、积分商城等。
- UI 细化: 可以使用 CSS 进一步美化细节，例如添加加载动画、更复杂的表单验证提示等。
- 响应式断点: Bootstrap 默认的断点可能不完全符合您的需求，您可以自定义断点来优化移动端和平板端的布局。
（图片来源网络，侵删）
