文档
Bootstrap 后台 Dashboard 布局
目标
用 Bootstrap 5 组件搭建一个经典后台管理界面：侧边栏 + 顶部导航 + 数据卡片 + 表格。
完整代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Dashboard</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
</head>
<body>
<!-- 顶部导航 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
<div class="container-fluid">
<a class="navbar-brand fw-bold" href="#">📊 毕设后台</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
<i class="bi bi-person-circle"></i> 管理员
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">个人信息</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">退出登录</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<!-- 侧边栏 -->
<aside class="col-md-3 col-lg-2 d-md-block bg-light sidebar p-3 min-vh-100">
<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-box"></i> 商品管理</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-graph-up"></i> 数据报表</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-gear"></i> 系统设置</a>
</li>
</ul>
</aside>
<!-- 主内容区 -->
<main class="col-md-9 col-lg-10 p-4">
<h2 class="mb-4">仪表盘</h2>
<!-- 数据卡片 -->
<div class="row g-3 mb-4">
<div class="col-sm-6 col-xl-3">
<div class="card text-bg-primary">
<div class="card-body">
<div class="d-flex justify-content-between">
<div>
<h6 class="card-title">用户总数</h6>
<h2 class="mb-0">12,483</h2>
</div>
<i class="bi bi-people display-6 opacity-50"></i>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-xl-3">
<div class="card text-bg-success">
<div class="card-body">
<div class="d-flex justify-content-between">
<div>
<h6 class="card-title">今日收入</h6>
<h2 class="mb-0">¥8,420</h2>
</div>
<i class="bi bi-cash-stack display-6 opacity-50"></i>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-xl-3">
<div class="card text-bg-warning">
<div class="card-body">
<div class="d-flex justify-content-between">
<div>
<h6 class="card-title">待处理订单</h6>
<h2 class="mb-0">56</h2>
</div>
<i class="bi bi-clock display-6 opacity-50"></i>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-xl-3">
<div class="card text-bg-danger">
<div class="card-body">
<div class="d-flex justify-content-between">
<div>
<h6 class="card-title">异常报警</h6>
<h2 class="mb-0">3</h2>
</div>
<i class="bi bi-exclamation-triangle display-6 opacity-50"></i>
</div>
</div>
</div>
</div>
</div>
<!-- 数据表格 -->
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="mb-0">最近订单</h5>
<button class="btn btn-primary btn-sm">查看全部</button>
</div>
<div class="table-responsive">
<table class="table table-hover mb-0">
<thead class="table-light">
<tr>
<th>订单号</th><th>客户</th><th>金额</th><th>状态</th><th>时间</th>
</tr>
</thead>
<tbody>
<tr>
<td>#2024001</td><td>张三</td><td>¥1,299</td>
<td><span class="badge bg-success">已完成</span></td><td>2024-01-15</td>
</tr>
<tr>
<td>#2024002</td><td>李四</td><td>¥599</td>
<td><span class="badge bg-warning text-dark">处理中</span></td><td>2024-01-14</td>
</tr>
<tr>
<td>#2024003</td><td>王五</td><td>¥2,199</td>
<td><span class="badge bg-danger">已取消</span></td><td>2024-01-13</td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
运行
浏览器直接打开 HTML 文件。
预期输出
- 顶部暗色导航栏，带下拉菜单
- 左侧导航菜单
- 4 个统计卡片（蓝/绿/黄/红）
- 订单数据表格，带状态 Badge
- 响应式：手机端侧边栏折叠