什么是 Bootstrap v3 后台模板？
Bootstrap v3 是一个非常流行的前端框架，以其响应式设计、丰富的组件和易用性而闻名，基于它构建的后台模板，通常包含了一套预设计的页面布局、UI 组件（如表单、表格、导航、图表等）和样式，旨在帮助开发者快速搭建功能完善、界面美观的后台管理系统。
（图片来源网络，侵删）
为什么选择 Bootstrap v3？
虽然 Bootstrap v5 已经成为主流，但在以下场景中，v3 仍然是一个非常好的选择：
- 维护旧项目：许多现有的企业级项目仍在使用 Bootstrap v3，维护和升级它们需要熟悉 v3。
- 简单直接：v3 的 API 和设计理念相对简单，对于初学者或快速原型开发非常友好。
- 生态系统成熟：围绕 v3 有大量成熟的第三方插件和主题，资源丰富。
- 兼容性：对于需要兼容非常老旧浏览器的项目，v3 提供了更好的支持。
精选的 Bootstrap v3 后台模板推荐
这里为您推荐几个在 GitHub 和开发者社区中广受好评的开源后台模板，它们可以作为您项目的起点。
StartBootstrap - SB Admin 2
这是最经典、最受欢迎的 Bootstrap v3 后台模板之一。
- 特点：
- 简洁现代：设计清爽，没有多余的装饰。
- 功能完整：包含侧边栏导航、顶部导航栏、数据表格、图表、登录页面等。
- 高度可定制：代码结构清晰，易于修改和扩展。
- 文档齐全：官方提供了详细的文档和使用指南。
- GitHub 地址：https://github.com/BlackrockDigital/startbootstrap-sbadmin2
- 演示地址：https://startbootstrap.com/theme/sb-admin-2
- 推荐理由：强烈推荐给新手和希望快速上手的开发者，它是一个完美的学习范本和项目基础。
CoreUI
一个功能极其强大的 Bootstrap v3 管理面板，提供多种布局和主题。
（图片来源网络，侵删）
- 特点：
- 多种布局：支持侧边栏、顶部导航、多种卡片式布局等。
- 组件丰富：集成了大量的 UI 组件和示例页面（如用户管理、图表、日历等）。
- 专业外观：设计非常专业，适合构建复杂的企业级应用。
- 基于 Bootstrap：虽然是付费模板，但其免费版（CoreUI Free）已经足够强大，并且是基于 Bootstrap v3 的。
- GitHub 地址：https://github.com/coreui/coreui-free-bootstrap-admin-template
- 演示地址：https://coreui.io/free/
- 推荐理由：如果您需要构建一个功能非常复杂、界面要求高的后台，CoreUI 是一个绝佳的选择。
Gentelella
一个 Bootstrap 3 的开源管理面板，以其精美的设计和流畅的交互著称。
- 特点：
- 设计精美：UI 设计非常现代化，用户体验好。
- 功能多样：包含邮件、日历、图表、用户资料、登录等多种页面。
- 响应式：在各种设备上都有良好的显示效果。
- 文档友好：代码注释清晰，方便理解和修改。
- GitHub 地址：https://github.com/puikinsh/Gentelella
- 演示地址：https://colorlib.com/polygon/gentelella/
- 推荐理由：如果您对界面的美观度有较高要求，Gentelella 不会让您失望。
如何选择合适的模板？
在选择模板时,可以考虑以下几点：
| 特性 | SB Admin 2 | CoreUI | Gentelella |
|---|---|---|---|
| 易用性 | ⭐⭐⭐⭐⭐ (非常简单) | ⭐⭐⭐⭐ (功能多，稍复杂) | ⭐⭐⭐⭐ (结构清晰) |
| 设计风格 | 简洁、专业 | 现代、功能性强 | 精美、华丽 |
| 功能丰富度 | ⭐⭐⭐ (基础功能齐全) | ⭐⭐⭐⭐⭐ (非常全面) | ⭐⭐⭐⭐ (功能多样) |
| 学习价值 | ⭐⭐⭐⭐⭐ (最佳学习模板) | ⭐⭐⭐⭐ (适合进阶) | ⭐⭐⭐⭐ (适合研究设计) |
| 适用场景 | 快速开发、个人项目、中小型系统 | 大型企业级应用、复杂系统 | 对 UI 要求高的项目、SaaS 产品 |
建议：
- 新手入门或快速开发：首选 SB Admin 2。
- 需要构建功能复杂的后台：选择 CoreUI。
- 追求极致的界面和用户体验：选择 Gentelella。
从零开始构建一个简单的 Bootstrap v3 后台
如果您想自己动手构建,或者想更好地理解模板的原理，可以按照以下步骤操作。
（图片来源网络，侵删）
准备工作
您需要引入 Bootstrap v3 的核心文件，您可以直接从 Bootstrap 官网 下载，或者使用 CDN（推荐用于快速开始）。
在您的 HTML 文件 <head> 标签中添加：
<!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- 可选：Bootstrap 主题 --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap-theme.min.css" rel="stylesheet">
在 HTML 文件底部，</body> 标签之前添加：
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery) --> <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script> <!-- Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
创建基本布局
一个典型的后台布局包含：侧边栏、顶部导航栏和主内容区。
index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">Bootstrap v3 后台</title>
<!-- 引入 Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
/* 自定义样式，让侧边栏和内容区高度一致 */
html, body {
height: 100%;
}
.wrapper {
display: flex;
height: 100%;
}
.sidebar {
width: 250px;
background: #222;
padding-top: 20px;
}
.main-content {
flex: 1;
padding: 20px;
background-color: #f5f5f5;
}
</style>
</head>
<body>
<div class="wrapper">
<!-- 侧边栏 -->
<div class="sidebar">
<div class="text-center">
<h3 class="text-white">后台管理</h3>
</div>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">仪表盘</a></li>
<li><a href="#">用户管理</a></li>
<li><a href="#">文章管理</a></li>
<li><a href="#">系统设置</a></li>
</ul>
</div>
<!-- 主内容区 -->
<div class="main-content">
<!-- 顶部导航栏 -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">欢迎, Admin</a></li>
<li><a href="#">退出</a></li>
</ul>
</div>
</div>
</nav>
<!-- 页面内容 -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">仪表盘</h3>
</div>
<div class="panel-body">
<p>欢迎使用 Bootstrap v3 后台管理系统！</p>
<!-- 这里可以放置图表、表格等内容 -->
<div class="row">
<div class="col-md-3">
<div class="jumbotron text-center">
<h1>1,234</h1>
<p>总用户数</p>
</div>
</div>
<div class="col-md-3">
<div class="jumbotron text-center">
<h1>5,678</h1>
<p>总文章数</p>
</div>
</div>
<!-- ... 更多统计卡片 ... -->
</div>
</div>
</div>
</div>
</div>
<!-- 引入 jQuery 和 Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
</body>
</html>
添加常用组件
在上述布局的基础上,您可以轻松地添加 Bootstrap 的其他组件：
- 表格：使用
.table类来创建数据表格。 - 表单：使用
.form-control类来美化输入框。 - 模态框：用于弹窗提示或表单。
- 图表：集成 Chart.js 或其他图表库。
注意事项与升级建议
- 停止维护：Bootstrap v3 已经在 2025 年 1 月 1 日停止维护，这意味着它不会再收到安全更新和新功能。强烈建议新项目使用 Bootstrap v5。
- jQuery 依赖：Bootstrap v3 严重依赖 jQuery，在 v5 中，jQuery 已经被移除，转而使用原生 JavaScript，如果您决定升级，这是一个主要的改动点。
- 浏览器兼容性：v5 对现代浏览器的支持更好，并且拥抱了 CSS 变量、Flexbox/Grid 等现代技术，开发体验更佳。
- 要找一个现成的模板：从 SB Admin 2, CoreUI, Gentelella 中选择一个最符合你需求的。
- 想自己学习或搭建：参考本文的“从零开始构建”部分，理解 Bootstrap v3 的栅格系统和组件。
- 要开始一个新项目：请优先考虑 Bootstrap v5，它更现代、更强大、维护性更好。
希望这份指南对您有帮助！
