Bootstrap后台教程如何快速搭建？-建站教程-锦华智联科技

第一部分：准备工作
（图片来源网络，侵删）
- 什么是 Bootstrap？
- 为什么选择 Bootstrap 做后台？
- 环境搭建：引入 Bootstrap
第二部分：后台布局核心
- 整体布局：<body> 结构
- 侧边栏：.sidebar 的实现与美化
- 顶部导航栏：.navbar 的实现
- 区：.main-content 的设计
第三部分：常用组件实战
- 卡片：.card (信息展示区)
- 表格：.table (数据列表)
- 表单：.form (数据录入)
- 按钮与徽章：.btn, .badge
- 面包屑：.breadcrumb (导航路径)
第四部分：响应式设计
- 移动端适配：侧边栏的隐藏与显示
- 断点的运用
第五部分：实战案例 - 构建一个简单的用户管理后台
（图片来源网络，侵删）
- 目标效果
- 完整代码示例
- 代码解析
第六部分：进阶与资源
- 使用官方模板
- 自定义主题
- 推荐的 Bootstrap 后台主题

第一部分：准备工作

什么是 Bootstrap？

Bootstrap 是一个全球最受欢迎的前端开源工具库，它由 Twitter 的设计师和开发者开发，它提供了大量的 预置的 CSS 样式 和 JavaScript 插件，让开发者可以快速构建出响应式、移动设备优先的网站。

为什么选择 Bootstrap 做后台？

开发效率高：无需从零开始写 CSS，直接使用现成的组件，如导航栏、表格、模态框等。
响应式设计：一套代码可以完美适配桌面、平板和手机等不同设备。
风格统一：官方提供了一套成熟、专业的设计语言,保证了界面的一致性和美观度。
生态成熟：社区庞大，有海量的模板、组件和主题可供选择。

环境搭建：引入 Bootstrap

最简单的方式是使用 CDN (Content Delivery Network)，将 Bootstrap 的 CSS 和 JS 文件链接到您的 HTML 项目中。

在您的 HTML 文件的 <head> 标签内引入 CSS，在 <body> 标签结束前引入 JS。

（图片来源网络，侵删）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">Bootstrap 后台管理</title>
    <!-- 1. 引入 Bootstrap 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">
</head>
<body>
    <!-- 这里是后台内容 -->
    <!-- 2. 引入 Bootstrap JS (需要 Popper.js) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

第二部分：后台布局核心

一个典型的后台布局包含三个主要部分：侧边栏、顶部导航栏 和区。

整体布局：`<body>` 结构

我们使用 flex 布局来创建一个经典的后台结构。

<body class="d-flex flex-nowrap">
    <!-- 侧边栏 -->
    <div class="d-flex flex-column flex-shrink-0 p-3 text-bg-dark sidebar" style="width: 280px;">
        <!-- 侧边栏内容 -->
    </div>
    <!-- 主区域，包含顶部导航和内容 -->
    <div class="flex-grow-1">
        <!-- 顶部导航栏 -->
        <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
            <!-- 导航栏内容 -->
        </nav>
        <!-- 主内容区 -->
        <main class="p-4">
            <!-- 页面内容 -->
        </main>
    </div>
</body>

侧边栏：`.sidebar` 的实现与美化

侧边栏通常包含 Logo、导航菜单和用户信息。

<!-- 侧边栏 -->
<div class="d-flex flex-column flex-shrink-0 p-3 text-bg-dark sidebar" style="width: 280px;">
    <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
        <i class="bi bi-speedometer2 fs-4 me-2"></i>
        <span class="fs-4">AdminPanel</span>
    </a>
    <hr>
    <ul class="nav nav-pills flex-column mb-auto">
        <li class="nav-item">
            <a href="#" class="nav-link active" aria-current="page">
                <i class="bi bi-house-door me-2"></i>
                首页
            </a>
        </li>
        <li>
            <a href="#" class="nav-link text-white">
                <i class="bi bi-people me-2"></i>
                用户管理
            </a>
        </li>
        <li>
            <a href="#" class="nav-link text-white">
                <i class="bi bi-gear me-2"></i>
                系统设置
            </a>
        </li>
    </ul>
    <hr>
    <div class="dropdown">
        <a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
            <img src="https://picsum.photos/seed/admin/32/32.jpg" alt="mdo" width="32" height="32" class="rounded-circle me-2">
            <strong>Admin</strong>
        </a>
        <ul class="dropdown-menu dropdown-menu-dark text-small shadow">
            <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>

顶部导航栏：`.navbar` 的实现

顶部导航栏用于显示页面标题、搜索框和用户操作按钮。

<!-- 顶部导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
    <div class="container-fluid">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="sidebarMenu">
            <!-- 可以在这里放一些导航项 -->
        </div>
        <div class="d-flex align-items-center">
            <button class="btn btn-link text-dark me-3" type="button">
                <i class="bi bi-bell fs-5"></i>
            </button>
            <div class="dropdown">
                <a href="#" class="d-flex align-items-center text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                    <img src="https://picsum.photos/seed/admin/32/32.jpg" alt="mdo" width="32" height="32" class="rounded-circle me-2">
                    <strong>Admin</strong>
                </a>
                <ul class="dropdown-menu dropdown-menu-end dropdown-menu-light text-small shadow">
                    <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>
    </div>
</nav>

注意：上面的 <button class="navbar-toggler"> 是为了在移动端触发侧边栏的显示/隐藏，我们会在第四部分详细说明。

区：`.main-content` 的设计

这里就是放置具体页面内容的地方，如仪表盘、数据表格、表单等。

<!-- 主内容区 -->
<main class="p-4">
    <h1>仪表盘</h1>
    <p>欢迎来到后台管理系统。</p>
    <!-- 后面会在这里添加更多内容 -->
</main>

第三部分：常用组件实战

卡片：`.card`

卡片是现代 Web 设计中最灵活的组件,非常适合用来展示信息块。

<div class="row">
    <div class="col-md-4">
        <div class="card text-white bg-primary mb-3">
            <div class="card-header">总用户数</div>
            <div class="card-body">
                <h5 class="card-title">1,250</h5>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card text-white bg-success mb-3">
            <div class="card-header">今日访问</div>
            <div class="card-body">
                <h5 class="card-title">3,560</h5>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card text-white bg-danger mb-3">
            <div class="card-header">待处理订单</div>
            <div class="card-body">
                <h5 class="card-title">89</h5>
            </div>
        </div>
    </div>
</div>

表格：`.table`

用于展示结构化数据,非常直观。

<div class="card">
    <div class="card-header">
        <i class="bi bi-people me-2"></i>用户列表
    </div>
    <div class="card-body">
        <table class="table table-striped table-hover">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">用户名</th>
                    <th scope="col">邮箱</th>
                    <th scope="col">注册时间</th>
                    <th scope="col">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>张三</td>
                    <td>zhangsan@example.com</td>
                    <td>2025-10-01</td>
                    <td>
                        <a href="#" class="btn btn-sm btn-primary">编辑</a>
                        <a href="#" class="btn btn-sm btn-danger">删除</a>
                    </td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>李四</td>
                    <td>lisi@example.com</td>
                    <td>2025-10-02</td>
                    <td>
                        <a href="#" class="btn btn-sm btn-primary">编辑</a>
                        <a href="#" class="btn btn-sm btn-danger">删除</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

表单：`.form`

用于数据录入，Bootstrap 提供了非常美观的表单样式。

<div class="card">
    <div class="card-header">
        <i class="bi bi-person-plus me-2"></i>添加新用户
    </div>
    <div class="card-body">
        <form>
            <div class="mb-3">
                <label for="username" class="form-label">用户名</label>
                <input type="text" class="form-control" id="username" placeholder="请输入用户名">
            </div>
            <div class="mb-3">
                <label for="email" class="form-label">邮箱地址</label>
                <input type="email" class="form-control" id="email" placeholder="name@example.com">
            </div>
            <div class="mb-3">
                <label for="password" class="form-label">密码</label>
                <input type="password" class="form-control" id="password">
            </div>
            <button type="submit" class="btn btn-primary">提交</button>
        </form>
    </div>
</div>

按钮与徽章

按钮: .btn 配合 .btn-* (如 btn-primary, btn-success)。
徽章: .badge 用于计数或状态标识。

<!-- 按钮 -->
<button type="button" class="btn btn-primary">主要按钮</button>
<button type="button" class="btn btn-success">成功按钮</button>
<!-- 徽章 -->
<span class="badge bg-secondary">未读</span>
<span class="badge bg-success">在线</span><span class="badge bg-secondary">新</span></h5>

第四部分：响应式设计

后台系统必须能在移动设备上正常使用，核心是 侧边栏的隐藏 和 汉堡菜单 的显示。

修改 HTML 结构：给侧边栏和主区域添加一个包裹容器，并设置 id。
添加汉堡菜单：在顶部导航栏添加一个 navbar-toggler 按钮。
使用 Bootstrap 的 JavaScript：data-bs-toggle="collapse" 和 data-bs-target="#sidebarMenu" 会自动处理显示/隐藏逻辑。

我们已经在第二部分展示了核心代码，现在补充一下完整的 main 和 nav 部分,并添加一些样式来优化移动端体验。

<!-- 在 <head> 中添加自定义样式 -->
<style>
    body {
        min-height: 100vh;
        background-color: #f5f5f5;
    }
    .sidebar {
        position: fixed;
        top: 0;
        /* 默认隐藏，通过 JS 控制显示 */
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        z-index: 100;
        height: 100vh;
    }
    /* 当侧边栏展开时 */
    .sidebar.show {
        transform: translateX(0);
    }
    .main-content {
        margin-left: 0; /* 移动端不需要左边距 */
        padding-top: 56px; /* 为固定的顶部导航栏留出空间 */
    }
    @media (min-width: 768px) {
        .sidebar {
            position: sticky;
            top: 0;
            transform: translateX(0); /* 桌面端始终显示 */
            height: calc(100vh - 56px); /* 减去顶部导航栏高度 */
        }
        .main-content {
            margin-left: 280px; /* 桌面端为侧边栏留出空间 */
            padding-top: 0;
        }
    }
</style>

第五部分：实战案例 - 构建一个简单的用户管理后台

我们将把前面学到的所有知识整合起来，创建一个包含侧边栏、顶部导航、数据卡片、用户列表和添加用户表单的完整后台页面。

目标效果

完整代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">Bootstrap 后台管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
    <style>
        body {
            min-height: 100vh;
            background-color: #f5f5f5;
        }
        .sidebar {
            position: fixed;
            top: 0;
            left: 0;
            width: 280px;
            height: 100vh;
            background-color: #212529;
            transition: all 0.3s;
            z-index: 100;
        }
        .sidebar.collapsed {
            margin-left: -280px;
        }
        .main-content {
            margin-left: 280px;
            padding-top: 56px;
            transition: all 0.3s;
        }
        .main-content.expanded {
            margin-left: 0;
        }
        @media (max-width: 768px) {
            .sidebar {
                margin-left: -280px;
            }
            .sidebar.show {
                margin-left: 0;
            }
            .main-content {
                margin-left: 0;
            }
        }
    </style>
</head>
<body>
<!-- 侧边栏 -->
<nav id="sidebar" class="sidebar text-white">
    <div class="position-sticky">
        <div class="p-3">
            <a href="#" class="d-flex align-items-center text-white text-decoration-none">
                <i class="bi bi-speedometer2 fs-4 me-2"></i>
                <span class="fs-4">AdminPanel</span>
            </a>
        </div>
        <hr>
        <ul class="nav nav-pills flex-column mb-auto">
            <li class="nav-item">
                <a href="#" class="nav-link active" aria-current="page">
                    <i class="bi bi-house-door me-2"></i>首页
                </a>
            </li>
            <li>
                <a href="#" class="nav-link text-white">
                    <i class="bi bi-people me-2"></i>用户管理
                </a>
            </li>
            <li>
                <a href="#" class="nav-link text-white">
                    <i class="bi bi-gear me-2"></i>系统设置
                </a>
            </li>
        </ul>
        <hr>
        <div class="dropdown">
            <a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                <img src="https://picsum.photos/seed/admin/32/32.jpg" alt="mdo" width="32" height="32" class="rounded-circle me-2">
                <strong>Admin</strong>
            </a>
            <ul class="dropdown-menu dropdown-menu-dark text-small shadow">
                <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>
<!-- 主区域 -->
<div class="main-content">
    <!-- 顶部导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom fixed-top">
        <div class="container-fluid">
            <button class="btn btn-link" id="sidebarToggle" type="button">
                <i class="bi bi-list fs-4"></i>
            </button>
            <div class="d-flex align-items-center ms-auto">
                <button class="btn btn-link text-dark me-3" type="button">
                    <i class="bi bi-bell fs-5"></i>
                </button>
                <div class="dropdown">
                    <a href="#" class="d-flex align-items-center text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                        <img src="https://picsum.photos/seed/admin/32/32.jpg" alt="mdo" width="32" height="32" class="rounded-circle me-2">
                        <strong>Admin</strong>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-end dropdown-menu-light text-small shadow">
                        <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>
        </div>
    </nav>
    <!-- 主内容区 -->
    <main class="p-4">
        <h1 class="mb-4">用户管理</h1>
        <!-- 统计卡片 -->
        <div class="row mb-4">
            <div class="col-md-4">
                <div class="card text-white bg-primary mb-3">
                    <div class="card-header">总用户数</div>
                    <div class="card-body">
                        <h5 class="card-title">1,250</h5>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card text-white bg-success mb-3">
                    <div class="card-header">今日新增</div>
                    <div class="card-body">
                        <h5 class="card-title">35</h5>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card text-white bg-danger mb-3">
                    <div class="card-header">活跃用户</div>
                    <div class="card-body">
                        <h5 class="card-title">890</h5>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <!-- 用户列表 -->
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <span><i class="bi bi-people me-2"></i>用户列表</span>
                        <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addUserModal">
                            <i class="bi bi-plus-circle me-1"></i>添加用户
                        </button>
                    </div>
                    <div class="card-body">
                        <table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th scope="col">#</th>
                                    <th scope="col">用户名</th>
                                    <th scope="col">邮箱</th>
                                    <th scope="col">状态</th>
                                    <th scope="col">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th scope="row">1</th>
                                    <td>张三</td>
                                    <td>zhangsan@example.com</td>
                                    <td><span class="badge bg-success">在线</span></td>
                                    <td>
                                        <a href="#" class="btn btn-sm btn-primary">编辑</a>
                                        <a href="#" class="btn btn-sm btn-danger">删除</a>
                                    </td>
                                </tr>
                                <tr>
                                    <th scope="row">2</th>
                                    <td>李四</td>
                                    <td>lisi@example.com</td>
                                    <td><span class="badge bg-secondary">离线</span></td>
                                    <td>
                                        <a href="#" class="btn btn-sm btn-primary">编辑</a>
                                        <a href="#" class="btn btn-sm btn-danger">删除</a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!-- 快速操作 -->
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        <i class="bi bi-speedometer2 me-2"></i>快速操作
                    </div>
                    <div class="card-body">
                        <div class="d-grid gap-2">
                            <button class="btn btn-outline-primary">导出用户数据</button>
                            <button class="btn btn-outline-success">发送系统通知</button>
                            <button class="btn btn-outline-warning">数据备份</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
</div>
<!-- 添加用户模态框 -->
<div class="modal fade" id="addUserModal" tabindex="-1" aria-labelledby="addUserModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addUserModalLabel">添加新用户</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="mb-3">
                        <label for="modal-username" class="form-label">用户名</label>
                        <input type="text" class="form-control" id="modal-username">
                    </div>
                    <div class="mb-3">
                        <label for="modal-email" class="form-label">邮箱地址</label>
                        <input type="email" class="form-control" id="modal-email">
                    </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>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const sidebar = document.getElementById('sidebar');
        const mainContent = document.querySelector('.main-content');
        const sidebarToggle = document.getElementById('sidebarToggle');
        sidebarToggle.addEventListener('click', function () {
            sidebar.classList.toggle('collapsed');
            mainContent.classList.toggle('expanded');
        });
        // 在移动端，点击模态框外部时关闭侧边栏
        document.getElementById('addUserModal').addEventListener('hidden.bs.modal', function () {
            if (window.innerWidth < 768) {
                sidebar.classList.remove('show');
            }
        });
    });
</script>
</body>
</html>

第六部分：进阶与资源

使用官方模板

Bootstrap 官方提供了一系列非常精美的后台管理模板，可以直接下载使用,这是最快的方式。

Official Examples: 包含了 Dashboard (仪表盘)、Signin (登录页)、Cover (封面) 等多种布局。

自定义主题

如果你不喜欢 Bootstrap 默认的颜色和样式，可以使用官方的 Bootstrap Customizer 来修改和下载属于你自己的 CSS 文件。

Bootstrap后台教程如何快速搭建？

目录

第一部分：准备工作

什么是 Bootstrap？

为什么选择 Bootstrap 做后台？

环境搭建：引入 Bootstrap

第二部分：后台布局核心

整体布局：`<body>` 结构

侧边栏：`.sidebar` 的实现与美化

顶部导航栏：`.navbar` 的实现

区：`.main-content` 的设计

第三部分：常用组件实战

卡片：`.card`

表格：`.table`

表单：`.form`

按钮与徽章

第四部分：响应式设计

第五部分：实战案例 - 构建一个简单的用户管理后台

目标效果

完整代码示例

第六部分：进阶与资源

使用官方模板

自定义主题

推荐的 Bootstrap 后台主题 (付费/免费)

Bootstrap后台教程如何快速搭建？

目录

第一部分：准备工作

什么是 Bootstrap？

为什么选择 Bootstrap 做后台？

环境搭建：引入 Bootstrap

第二部分：后台布局核心

整体布局：<body> 结构

侧边栏：.sidebar 的实现与美化

顶部导航栏：.navbar 的实现

区：.main-content 的设计

第三部分：常用组件实战

卡片：.card

表格：.table

表单：.form

按钮与徽章

第四部分：响应式设计

第五部分：实战案例 - 构建一个简单的用户管理后台

目标效果

完整代码示例

第六部分：进阶与资源

使用官方模板

自定义主题

推荐的 Bootstrap 后台主题 (付费/免费)

整体布局：`<body>` 结构

侧边栏：`.sidebar` 的实现与美化

顶部导航栏：`.navbar` 的实现

区：`.main-content` 的设计

卡片：`.card`

表格：`.table`

表单：`.form`