为什么选择 Bootstrap？

在开始之前，简单说明一下为什么选择 Bootstrap 作为后台模板的基石：

后台管理系统模板bootstrap
（图片来源网络，侵删）
  1. 快速开发：提供了大量预定义的 CSS 组件（导航栏、卡片、表格、模态框等）,无需从零开始编写样式。
  2. 响应式设计：内置的响应式栅格系统能确保您的后台在桌面、平板和手机上都有良好的显示效果。
  3. 组件丰富：开箱即用的 JavaScript 插件（如下拉菜单、弹出框、标签页）可以轻松实现复杂的交互。
  4. 生态成熟：有海量的主题、模板和插件可供选择，社区活跃,遇到问题容易找到解决方案。

完整后台管理模板（HTML 代码）

这是一个功能齐全的单文件 HTML 模板，包含了侧边栏导航、顶部栏、内容区域和一些常用的示例组件。

如何使用：

  1. 将以下所有代码复制到一个新的 .html 文件中。
  2. 用浏览器打开该文件,您将看到一个完整的后台界面。
  3. 您可以根据需要修改 HTML 结构、文本内容和样式。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">后台管理系统 - Bootstrap 模板</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.2/font/bootstrap-icons.min.css">
    <style>
        /* --- 全局和侧边栏样式 --- */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f8f9fa;
        }
        .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;
            width: 250px; /* 侧边栏宽度 */
        }
        .sidebar .nav-link {
            color: #fff;
            font-weight: 500;
            padding: 12px 20px;
            border-radius: 0;
        }
        .sidebar .nav-link:hover {
            background-color: rgba(255, 255, 255, .1);
        }
        .sidebar .nav-link.active {
            background-color: #007bff;
        }
        .sidebar .nav-link i {
            margin-right: 10px;
            width: 20px;
            text-align: center;
        }
        /* --- 主内容区域样式 --- */
        .main-content {
            margin-left: 250px; /* 与侧边栏宽度相同 */
            padding-top: 48px; /* 与顶部导航栏高度相同 */
            min-height: 100vh;
        }
        /* --- 顶部导航栏样式 --- */
        .navbar {
            padding: .75rem 1.5rem;
        }
        .navbar-brand {
            font-weight: bold;
        }
        /* --- 卡片和表格样式 --- */
        .card {
            border: none;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            margin-bottom: 1.5rem;
        }
        .card-header {
            background-color: #fff;
            border-bottom: 1px solid #e9ecef;
            font-weight: 600;
        }
        /* --- 响应式调整 --- */
        @media (max-width: 768px) {
            .sidebar {
                margin-left: -250px; /* 默认隐藏 */
                transition: margin 0.3s;
            }
            .sidebar.show {
                margin-left: 0; /* 点击菜单按钮后显示 */
            }
            .main-content {
                margin-left: 0; /* 移动端主内容区无左边距 */
            }
        }
    </style>
</head>
<body>
    <!-- 侧边栏 Sidebar -->
    <nav id="sidebar" class="sidebar">
        <div class="position-sticky">
            <div class="px-3 mb-4">
                <h4 class="text-white"><i class="bi bi-speedometer2"></i> 控制台</h4>
            </div>
            <ul class="nav flex-column">
                <li class="nav-item">
                    <a class="nav-link active" href="#" data-bs-toggle="collapse" data-bs-target="#dashboardSubmenu">
                        <i class="bi bi-grid-1x2"></i>
                        仪表盘
                    </a>
                    <div class="collapse show" id="dashboardSubmenu">
                        <ul class="nav flex-column ms-3">
                            <li class="nav-item">
                                <a class="nav-link" href="#">总览</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">分析</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#" data-bs-toggle="collapse" data-bs-target="#userSubmenu">
                        <i class="bi bi-people"></i>
                        用户管理
                    </a>
                    <div class="collapse" id="userSubmenu">
                        <ul class="nav flex-column ms-3">
                            <li class="nav-item">
                                <a class="nav-link" href="#">用户列表</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">角色权限</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        <i class="bi bi-box-seam"></i>
                        商品管理
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        <i class="bi bi-receipt-cutoff"></i>
                        订单管理
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        <i class="bi bi-gear"></i>
                        系统设置
                    </a>
                </li>
            </ul>
        </div>
    </nav>
    <!-- 主内容区 Main Content -->
    <div class="main-content">
        <!-- 顶部导航栏 Top Navbar -->
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
            <div class="container-fluid">
                <a class="navbar-brand d-block d-sm-none" href="#" id="sidebarToggle">
                    <i class="bi bi-list"></i>
                </a>
                <span class="navbar-text ms-auto me-3">
                    <i class="bi bi-bell-fill text-warning"></i>
                    <span class="badge bg-danger">3</span>
                </span>
                <div class="dropdown">
                    <a class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" href="#" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
                        <img src="https://picsum.photos/seed/admin/32/32.jpg" alt="admin" width="32" height="32" class="rounded-circle me-2">
                        <strong>管理员</strong>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
                        <li><a class="dropdown-item" href="#">个人资料</a></li>
                        <li><a class="dropdown-item" href="#">设置</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="#">退出登录</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <!-- 页面内容 Page Content -->
        <main class="px-4 py-5">
            <h1 class="mb-4">仪表盘总览</h1>
            <!-- 统计卡片 Statistic Cards -->
            <div class="row g-3">
                <div class="col-xl-3 col-md-6">
                    <div class="card text-white bg-primary">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h4 class="card-title">总用户数</h4>
                                    <p class="card-text h2 mb-0">8,846</p>
                                </div>
                                <div class="align-self-center">
                                    <i class="bi bi-people-fill fs-1"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6">
                    <div class="card text-white bg-success">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h4 class="card-title">总销售额</h4>
                                    <p class="card-text h2 mb-0">¥125,600</p>
                                </div>
                                <div class="align-self-center">
                                    <i class="bi bi-currency-yen fs-1"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6">
                    <div class="card text-white bg-warning">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h4 class="card-title">待处理订单</h4>
                                    <p class="card-text h2 mb-0">64</p>
                                </div>
                                <div class="align-self-center">
                                    <i class="bi bi-cart-fill fs-1"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6">
                    <div class="card text-white bg-info">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h4 class="card-title">访问量</h4>
                                    <p class="card-text h2 mb-0">28,409</p>
                                </div>
                                <div class="align-self-center">
                                    <i class="bi bi-eye-fill fs-1"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 图表和数据表格 Chart & Table -->
            <div class="row mt-4">
                <!-- 图表区域 -->
                <div class="col-lg-8">
                    <div class="card">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <span>销售趋势</span>
                            <div class="btn-group btn-group-sm" role="group">
                                <button type="button" class="btn btn-outline-primary active">日</button>
                                <button type="button" class="btn btn-outline-primary">周</button>
                                <button type="button" class="btn btn-outline-primary">月</button>
                            </div>
                        </div>
                        <div class="card-body">
                            <!-- 这里可以集成 ECharts, Chart.js 等图表库 -->
                            <div style="height: 300px; background-color: #f8f9fa; display: flex; align-items: center; justify-content: center; color: #6c757d;">
                                <i class="bi bi-bar-chart-fill fs-1"></i>
                                <span class="ms-2">图表占位区域</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 最新活动 -->
                <div class="col-lg-4">
                    <div class="card">
                        <div class="card-header">最新活动</div>
                        <div class="card-body">
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item d-flex justify-content-between align-items-start">
                                    <div class="ms-2 me-auto">
                                        <div class="fw-bold">新用户注册</div>
                                        <small class="text-muted">2分钟前</small>
                                    </div>
                                    <span class="badge bg-success rounded-pill">新</span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between align-items-start">
                                    <div class="ms-2 me-auto">
                                        <div class="fw-bold">订单 #1001 已支付</div>
                                        <small class="text-muted">10分钟前</small>
                                    </div>
                                    <span class="badge bg-primary rounded-pill">订单</span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between align-items-start">
                                    <div class="ms-2 me-auto">
                                        <div class="fw-bold">服务器维护通知</div>
                                        <small class="text-muted">1小时前</small>
                                    </div>
                                    <span class="badge bg-warning text-dark rounded-pill">系统</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 数据表格 Data Table -->
            <div class="row mt-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <span>用户列表</span>
                            <button class="btn btn-primary btn-sm">
                                <i class="bi bi-plus-circle"></i> 新增用户
                            </button>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-hover table-striped table-bordered">
                                    <thead>
                                        <tr>
                                            <th scope="col">#</th>
                                            <th scope="col">用户名</th>
                                            <th scope="col">邮箱</th>
                                            <th scope="col">角色</th>
                                            <th scope="col">注册时间</th>
                                            <th scope="col">状态</th>
                                            <th scope="col" class="text-center">操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <th scope="row">1</th>
                                            <td>张三</td>
                                            <td>zhangsan@example.com</td>
                                            <td><span class="badge bg-primary">管理员</span></td>
                                            <td>2025-10-25</td>
                                            <td><span class="badge bg-success">活跃</span></td>
                                            <td class="text-center">
                                                <button class="btn btn-sm btn-info"><i class="bi bi-pencil"></i></button>
                                                <button class="btn btn-sm btn-danger"><i class="bi bi-trash"></i></button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th scope="row">2</th>
                                            <td>李四</td>
                                            <td>lisi@example.com</td>
                                            <td><span class="badge bg-secondary">编辑</span></td>
                                            <td>2025-10-24</td>
                                            <td><span class="badge bg-success">活跃</span></td>
                                            <td class="text-center">
                                                <button class="btn btn-sm btn-info"><i class="bi bi-pencil"></i></button>
                                                <button class="btn btn-sm btn-danger"><i class="bi bi-trash"></i></button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th scope="row">3</th>
                                            <td>王五</td>
                                            <td>wangwu@example.com</td>
                                            <td><span class="badge bg-info">用户</span></td>
                                            <td>2025-10-23</td>
                                            <td><span class="badge bg-warning">待审核</span></td>
                                            <td class="text-center">
                                                <button class="btn btn-sm btn-info"><i class="bi bi-pencil"></i></button>
                                                <button class="btn btn-sm btn-danger"><i class="bi bi-trash"></i></button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <!-- 分页 -->
                            <nav aria-label="Page navigation">
                                <ul class="pagination justify-content-center">
                                    <li class="page-item disabled">
                                        <a class="page-link" href="#" tabindex="-1">上一页</a>
                                    </li>
                                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
                                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                                    <li class="page-item">
                                        <a class="page-link" href="#">下一页</a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </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>
    <script>
        // 移动端侧边栏切换
        document.getElementById('sidebarToggle').addEventListener('click', function() {
            document.getElementById('sidebar').classList.toggle('show');
        });
        // 处理侧边栏菜单的折叠/展开
        document.querySelectorAll('.sidebar .nav-link[data-bs-toggle="collapse"]').forEach(function(link) {
            link.addEventListener('click', function() {
                // 移除其他同级菜单的 'active' 类
                const parent = this.parentElement;
                const siblings = parent.parentElement.children;
                for (let sibling of siblings) {
                    if (sibling !== parent && sibling.querySelector('.nav-link.active')) {
                        sibling.querySelector('.nav-link.active').classList.remove('active');
                    }
                }
                // 为当前点击的链接添加 'active' 类
                this.classList.add('active');
            });
        });
    </script>
</body>
</html>

模板核心功能解析

这个模板包含了以下几个核心部分：

  1. 响应式布局

    后台管理系统模板bootstrap
    （图片来源网络，侵删）
    • 使用 Bootstrap 的栅格系统 (row, col-*) 来构建布局。
    • 在桌面端，侧边栏固定,主内容区在右侧。
    • 在移动端，侧边栏默认隐藏,通过顶部左角的汉堡菜单按钮可以呼出。

  2. 侧边栏导航

    • 固定在左侧,包含系统的主要功能模块。
    • 使用 data-bs-toggle="collapse" 实现了可折叠的子菜单。
    • 每个菜单项都有图标 (Bootstrap Icons),提升视觉效果。

  3. 顶部导航栏

    • 固定在顶部，包含系统名称、通知图标（带红点）和用户下拉菜单。
    • 用户下拉菜单可以快速访问个人资料、设置和退出登录等功能。

  4. 区

    • 统计卡片：使用不同颜色的卡片展示关键数据,一目了然。
    • 图表区域：预留了图表占位，您可以轻松集成 Chart.js 或 ECharts 等图表库来展示数据趋势。
    • 最新活动：一个列表组件,用于展示系统动态或最新消息。
    • 数据表格：一个功能完整的表格，表头、表身、分页组件一应俱全，操作列包含了编辑和删除按钮,通常用于触发模态框。

  5. 交互功能

    后台管理系统模板bootstrap
    （图片来源网络，侵删）
    • 侧边栏折叠：通过 JavaScript 实现了移动端的侧边栏切换。
    • 菜单激活状态：点击菜单项时,会高亮显示当前所在的菜单。
    • 下拉菜单：点击用户头像可以弹出下拉菜单。
    • 工具提示：Bootstrap 组件自带,可以给按钮等元素添加提示。

如何进行二次开发？

  1. 修改主题颜色

    • 修改 <style> 标签中的 CSS 变量或直接覆盖颜色，将所有 #007bff 替换为您自己的品牌色。

  2. 添加新的页面

    • 在侧边栏的 <ul class="nav flex-column"> 中添加新的 <li> 菜单项。
    • 为新菜单项设置 href="#"，并为其添加一个唯一的 id。
    • 区，创建一个新的 <div> 来作为新页面的内容，并设置 id 与菜单项的 href 对应（或者使用 JavaScript 控制显示/隐藏）。

  3. 集成后端 API

    • 使用 fetch 或 axios 等 JavaScript 库,在页面加载时向后端发送请求获取数据。
    • 将获取到的数据动态渲染到统计卡片、表格等组件中，使用 document.createElement 和 appendChild 来动态生成表格行。

  4. 使用模态框

    • 在表格的“操作”列中，将“编辑”按钮的 data-bs-toggle 属性设置为 modal，data-bs-target 属性指向一个模态框的 id。
    • 在 HTML 的底部添加模态框的 HTML 结构,用于编辑或新增数据。

  5. 集成图表库

    • 在图表区域的占位符 <div> 中,初始化并渲染您的图表。
    • 示例（使用 Chart.js）：
      <div class="card-body">
    <canvas id="myChart" height="300"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const ctx = document.getElementById('myChart').getContext('2d');
    new Chart(ctx, { /* 图表配置 */ });
</script>

这个模板为您提供了一个坚实的基础，您可以在此基础上快速构建出功能强大、外观专业的后台管理系统。