简洁欢迎页（最常用）
这个模板最经典，登录成功后，显示欢迎信息、用户头像和退出按钮，它清晰地告知用户登录成功,并提供了下一步操作。
效果预览
代码实现
您可以直接复制以下代码到一个 .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">
<!-- Bootstrap Icons (可选，用于头像和退出图标) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
<style>
body {
background-color: #f8f9fa;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.success-card {
max-width: 500px;
margin: 100px auto;
border: none;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.user-avatar {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
border: 4px solid #fff;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.bi-box-arrow-right {
transition: transform 0.2s;
}
.btn-logout:hover .bi-box-arrow-right {
transform: translateX(3px);
}
</style>
</head>
<body>
<div class="container">
<div class="card success-card">
<div class="card-body text-center p-5">
<!-- 成功图标 (可选) -->
<div class="mb-4">
<i class="bi bi-check-circle-fill text-success" style="font-size: 4rem;"></i>
</div>
<!-- 用户头像 -->
<img src="https://i.pravatar.cc/150?img=68" alt="用户头像" class="user-avatar mb-4">
<!-- 欢迎信息 -->
<h2 class="card-title mb-3">欢迎回来，<strong>张三</strong>！</h2>
<p class="card-text text-muted mb-4">
您已成功登录系统，现在可以开始使用所有功能了。
</p>
<!-- 操作按钮 -->
<div class="d-grid gap-2 d-md-flex justify-content-md-center">
<a href="#" class="btn btn-primary btn-lg px-4 me-md-2">进入控制台</a>
<a href="login.html" class="btn btn-outline-secondary btn-lg px-4 btn-logout">
退出登录 <i class="bi bi-box-arrow-right"></i>
</a>
</div>
</div>
</div>
</div>
<!-- Bootstrap 5 JS Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
代码解析
-
HTML 结构:
- 使用了 Bootstrap 的
container、card、card-body等组件来构建页面布局,非常简洁。 i标签使用了 Bootstrap Icons 的bi-check-circle-fill图标来表示成功状态。img标签放置用户头像，这里使用了一个在线随机头像服务pravatar.cc作为示例。h2和p标签显示欢迎信息和提示。a标签用作“进入控制台”和“退出登录”的按钮。
- 使用了 Bootstrap 的
-
CSS 样式:
- 自定义了
body的背景色和字体。 .success-card类设置了卡片的宽度、外边距、阴影,使其在页面中居中并突出显示。.user-avatar类将图片设置为圆形，并添加了边框和阴影,使其更美观。- 添加了一些简单的悬停效果，让“退出登录”按钮的图标在鼠标悬停时轻微移动,提升交互感。
- 自定义了
-
JavaScript:
这里没有复杂的 JS，主要是引入了 Bootstrap 的 JS Bundle，以确保其组件（虽然本例未用到）可以正常工作。
仪表盘风格
这个模板更像一个真正的应用主页，登录成功后直接跳转到仪表盘，展示一些关键数据、快捷操作和用户信息。
效果预览
代码实现
这个模板稍微复杂一些，包含了导航栏、侧边栏和主内容区。
<!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">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
<style>
body {
background-color: #f1f3f5;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 100;
padding: 48px 0 0;
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
background-color: #343a40;
color: white;
}
.sidebar .nav-link {
color: #adb5bd;
padding: 0.75rem 1rem;
}
.sidebar .nav-link.active {
color: #fff;
background-color: #495057;
}
.sidebar .nav-link i {
margin-right: 0.5rem;
}
.main-content {
margin-left: 240px; /* 与侧边栏宽度一致 */
padding: 20px;
}
.navbar-brand {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.stat-card {
border-left: 4px solid;
transition: transform 0.2s;
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.stat-card.primary { border-left-color: #0d6efd; }
.stat-card.success { border-left-color: #198754; }
.stat-card.warning { border-left-color: #ffc107; }
.stat-card.info { border-left-color: #0dcaf0; }
</style>
</head>
<body>
<!-- 顶部导航栏 -->
<nav class="navbar navbar-dark bg-dark fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">我的应用</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="d-flex align-items-center">
<span class="text-white me-3">欢迎, 张三</span>
<a href="login.html" class="btn btn-outline-light btn-sm">
<i class="bi bi-box-arrow-right"></i> 退出
</a>
</div>
</div>
</nav>
<!-- 侧边栏 -->
<div class="sidebar" id="sidebarMenu">
<div class="position-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">
<i class="bi bi-speedometer2"></i> 控制台
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="bi bi-people"></i> 用户管理
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="bi bi-cart3"></i> 订单列表
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="bi bi-gear"></i> 系统设置
</a>
</li>
</ul>
</div>
</div>
<!-- 主内容区 -->
<main class="main-content">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">控制台概览</h1>
</div>
<div class="row g-4">
<!-- 统计卡片 1 -->
<div class="col-12 col-md-6 col-lg-3">
<div class="card stat-card primary">
<div class="card-body">
<div class="d-flex justify-content-between">
<div>
<p class="card-text text-muted">总用户数</p>
<h3 class="card-title mb-0">1,258</h3>
</div>
<i class="bi bi-people-fill text-primary" style="font-size: 2rem;"></i>
</div>
</div>
</div>
</div>
<!-- 统计卡片 2 -->
<div class="col-12 col-md-6 col-lg-3">
<div class="card stat-card success">
<div class="card-body">
<div class="d-flex justify-content-between">
<div>
<p class="card-text text-muted">今日订单</p>
<h3 class="card-title mb-0">342</h3>
</div>
<i class="bi bi-cart-check-fill text-success" style="font-size: 2rem;"></i>
</div>
</div>
</div>
</div>
<!-- 统计卡片 3 -->
<div class="col-12 col-md-6 col-lg-3">
<div class="card stat-card warning">
<div class="card-body">
<div class="d-flex justify-content-between">
<div>
<p class="card-text text-muted">收入</p>
<h3 class="card-title mb-0">¥24,580</h3>
</div>
<i class="bi bi-currency-yen-fill text-warning" style="font-size: 2rem;"></i>
</div>
</div>
</div>
</div>
<!-- 统计卡片 4 -->
<div class="col-12 col-md-6 col-lg-3">
<div class="card stat-card info">
<div class="card-body">
<div class="d-flex justify-content-between">
<div>
<p class="card-text text-muted">在线用户</p>
<h3 class="card-title mb-0">89</h3>
</div>
<i class="bi bi-activity text-info" style="font-size: 2rem;"></i>
</div>
</div>
</div>
</div>
</div>
<!-- 其他内容区域 -->
<div class="row mt-4">
<div class="col-12">
<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">最近活动</h5>
</div>
<div class="card-body">
<p class="card-text">这里可以放置一个活动日志列表或图表。</p>
</div>
</div>
</div>
</div>
</main>
<!-- Bootstrap 5 JS Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
代码解析
-
布局结构:
<nav>: 顶部固定导航栏，包含应用名称、用户名和退出按钮。<div class="sidebar">: 左侧固定侧边栏，包含导航菜单，使用了position: fixed和z-index确保其位置和层级。<main class="main-content">: 主内容区域，通过margin-left为侧边栏留出空间。
-
样式特点:
- 侧边栏使用了深色背景 (
#343a40区形成对比。 - 统计卡片 (
stat-card) 使用了左边框和悬停动画,让数据展示更生动。 - 使用了 Bootstrap 的网格系统 (
row,col-*) 来灵活排列统计卡片。
- 侧边栏使用了深色背景 (
-
交互性:
- 顶部导航栏的“汉堡菜单”按钮 (
navbar-toggler) 在小屏幕上可以折叠侧边栏，这得益于 Bootstrap 的 JavaScript 插件。
- 顶部导航栏的“汉堡菜单”按钮 (
如何选择和使用
- 如果您的应用只是一个简单的登录功能，或者登录后只需要跳转到一个简单的欢迎页面，模板一 是最佳选择，它代码少，加载快,用户体验清晰。
- 如果您正在构建一个功能丰富的 Web 应用（如后台管理系统、CRM 等），模板二 更为合适，它提供了一个完整的应用框架，用户登录后可以立即看到各种功能入口和数据概览，符合现代 Web 应用的设计习惯。
通用建议:
- 替换占位符: 将代码中的
张三、示例头像链接 (pravatar.cc) 和示例数据（如1,258用户）替换成您从后端 API 获取的真实数据。 - 路由跳转: 将
href="#"替换为实际的页面链接或使用前端路由库（如 Vue Router, React Router）进行页面跳转。 - 退出登录: “退出登录”按钮的点击事件通常需要清除本地存储的 Token 并重定向到登录页,这需要结合后端逻辑和前端框架来实现。
