企业官网建设流程全解析

简介：基于Bootstrap3的侧边导航栏示例资源，面向需要快速搭建响应式后台布局或门户侧边菜单的前端初学者与开发者，解决导航结构在小屏适配、折叠交互与样式定制方面的常见需求。压缩包共9个文件，包含示例页面、Bootstrap核心样式与脚本、jQuery库以及glyphicons字体图标资源等，整体仅170KB，轻量易用。已有5177人学习下载。资源内提供可直接运行的侧边栏页面，涵盖导航栏HTML结构、折叠按钮与data-toggle交互写法；同时保留了字体图标文件，便于在菜单或按钮中直接引用图标。通过阅读示例，可以快速掌握navbar-inverse、sidebar、collapse等类的组合运用，并根据需要调整宽度、配色或扩展子菜单，适合用于后台管理界面或文档站点侧边导航的参考与改造。 Bootstrap 3的侧边导航栏，是我这几年做后台管理系统时绕不开的一个东西。虽然现在Bootstrap已经出到5.x，但仍有大量存量项目跑在3.x上，很多外包项目、老系统升级时都会碰到“别换技术栈，能用就行”的需求。这时候你会发现一个问题：Bootstrap 3官方组件里没有真正的“侧边栏”，navbar做的是顶部横排导航，想在页面左侧做一棵可展开收起、能高亮当前项、还能兼顾移动端的导航树，就得自己组合栅格、Collapse插件和一些CSS/JS。

这篇文章写给正在维护Bootstrap 3项目、或者接手这类后台前端页面的同学。我会从布局选型讲起，把固定式侧边栏、折叠式侧边栏、抽屉式侧边栏三种主流做法都拆开讲清楚，并且落到可以直接跑的HTML/CSS/JS上。如果你只是想先快速用一个能跑的结构，可以直接抄第3节的代码；如果你还想弄明白为什么这么写、踩过哪些坑，可以从第1节慢慢看。

1. 先弄清需求：三种侧边导航布局怎么选

1.1 顶部导航与侧边导航的本质区别

后台管理系统和展示型官网对导航的需求差别非常大。官网一般菜单少，五六个板块顶天了，顶部导航足够。但后台系统不一样：用户管理、订单管理、商品管理、权限配置、日志审计……菜单项轻松超过一二十个，而且还有父子层级。这时候如果全部塞进顶部导航栏，要么横向溢出，要么折叠到“更多”里，操作效率极低。

侧边导航栏的优势在于：垂直方向空间充裕，天然适合树形结构；菜单项可以在左侧常驻，用户扫一眼就知道自己在哪里；配合高亮状态，当前模块一目了然。这也是绝大多数Admin后台采用“左侧菜单+右侧内容区”的原因。

1.2 固定式、折叠式、抽屉式三种布局对比

实操里最常见的侧边导航做法有三种。我给它们起了比较直白的名字，对应到不同场景：

选择上我有个建议：如果项目只需要在PC端跑，固定式最稳，性能最好，也最容易排错；如果明确要做移动端适配，抽屉式是首选；折叠式适合那种用户长时间在后台里“干活”的工具类系统，常见的比如钉钉管理后台、云服务商控制台。Bootstrap 3没有现成的折叠侧边栏组件，多数情况是我自己维护一个.sidebar-collapsed类，切换宽度搞定。

2. 从栅格开始：HTML骨架与固定定位的实现

2.1 用栅格划分左右区域，还是要固定定位？

很多新手会这样写：左侧col-md-2，右侧col-md-10，以为就完事了。这种写法在页面内容很短时没问题，一旦右侧内容变长出现滚动条，左侧的导航栏会跟着页面滚上去，用户想切换菜单还得滚回顶部，体验很差。

所以正确做法是：把侧边栏从文档流里“拎”出来，让左侧固定定位于视口左侧，右侧内容区通过外边距留空。为什么用margin-left而不是用栅格的col-md-offset-2？因为侧边栏position: fixed之后，栅格系统对它是失效的，内容区只能靠外边距撑出对应位置。我用栅格主要是为了确定宽度比例，而不是依赖栅格做定位。

一个基础结构是：

<div class="container-fluid"> <div class="row"> <nav class="sidebar" id="sidebar"> <!-- 菜单内容 --> </nav> <main class="main-content"> <!-- 页面内容 --> </main> </div> </div>

然后定义CSS：

.sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 16.66666667%; /* 对应col-md-2的比例 */ background-color: #2c3e50; overflow-y: auto; } .main-content { margin-left: 16.66666667%; padding: 20px; }

这里有个细节：16.66666667%是2/12换算来的，如果你用了col-md-3，侧边栏宽度就是25%。保持CSS里的比例和栅格类一致，是整个布局不出错的前提。

2.2 固定定位后的宽度计算与媒体查询处理

用百分比宽度虽然灵活，但在一些分界点上容易出问题。比如在768px~992px这个区间，col-md-*还没生效，固定定位的侧边栏却还占着16.66%，内容区会被挤得很窄。

我习惯的做法是：使用Bootstrap 3媒体查询断点来分层控制。在@media (min-width: 992px)内启用固定侧边栏；在小于992px时，侧边栏恢复为文档流中的普通块级元素，或者干脆隐藏，由移动端导航方案接管。

@media (min-width: 992px) { .sidebar { position: fixed; width: 16.66666667%; } .main-content { margin-left: 16.66666667%; } } @media (max-width: 991px) { .sidebar { position: relative; width: 100%; min-height: auto; } .main-content { margin-left: 0; } }

这一段代码是很多老项目没有的。不看断点直接写死margin-left，结果小屏下内容区始终空出一大块，按钮点不到，表格撑破容器。踩过这个坑之后，我写侧边栏的第一件事就是先设计好断点行为，再做视觉美化。

3. 落地代码：固定式侧边导航的完整实现

3.1 基础HTML结构（nav + ul + li）

固定式侧边栏的核心结构其实很朴素：一个<nav>容器，里面嵌套两层<ul>。第一层是一级菜单，第二层是折叠面板里的二级菜单。Bootstrap 3的Collapse插件非常适合做二级菜单展开收起，因为它自带collapse、in类切换逻辑，不需要额外写太多JS。

我常用的模板长这样：

<nav class="sidebar"> <div class="sidebar-header"> <span class="glyphicon glyphicon-cloud"></span> 管理系统 </div> <ul class="nav nav-sidebar"> <li class="active"> <a href="index.html"> <span class="glyphicon glyphicon-dashboard"></span> 总览 </a> </li> <li> <a href="#menu-users">$('.sidebar [data-toggle="collapse"]').on('click', function () { var target = $(this).attr('href'); $('.nav-sub').not(target).collapse('hide'); });

这段逻辑在菜单项较多时很有用。我通常还会在点击子菜单链接时设置高亮状态，把当前项所在的父级菜单一并标亮：

$('.nav-sub a').on('click', function () { $('.nav-sidebar li').removeClass('active'); $('.nav-sub li').removeClass('active'); $(this).closest('.nav-sub').closest('li').addClass('active'); $(this).closest('li').addClass('active'); });

重点是CSS要配合好，否则光有类没有视觉效果：

.nav-sidebar > li > a { color: #cfd8dc; padding: 12px 20px; border-left: 3px solid transparent; } .nav-sidebar > li.active > a { background-color: #1c2b36; color: #ffffff; border-left-color: #337ab7; } .nav-sub { background-color: #243342; list-style: none; padding-left: 0; } .nav-sub > li > a { display: block; padding: 10px 20px 10px 30px; color: #b0bec5; text-decoration: none; } .nav-sub > li.active > a, .nav-sub > li > a:hover { color: #ffffff; background-color: #2c3e50; }

3.3 让侧边栏独享滚动条

后台系统内容区经常很长，理想状态是内容区自己滚动，侧边栏保持固定。这个效果靠两个属性即可：侧边栏height: 100vh; overflow-y: auto;，内容区自然就是页面滚动。

如果整个页面用了html, body { height: 100%; overflow: hidden; }，那内容区也要单独设置height: calc(100vh - 顶部导航高度); overflow-y: auto;。我常用的是给.main-content一个固定的高度和滚动属性：

.main-content { height: calc(100vh - 50px); overflow-y: auto; margin-left: 16.66666667%; padding: 20px; }

这段代码里100vh是视口高度，减去50px是顶部导航栏高度，具体数值按项目实际情况调整。如果顶部没有导航栏，直接height: 100vh即可。

4. 移动端适配：抽屉式侧边导航的实现

4.1 为什么不直接使用Bootstrap的collapse组件

有人会想：侧边栏本来就用到了collapse做二级菜单，那整块侧边栏是不是也能靠collapse做抽屉？试过就知道行不通。collapse插件的动画是垂直方向的展开折叠，而抽屉式侧边栏需要的是水平方向的位移动画，完全是两个东西。

正确的做法是：用CSS的transform: translateX(-100%)或者left属性做水平滑动，用遮罩层点击关闭。我自己的项目里更推荐transform，因为它不会触发布局重排，性能上比一直改left平滑得多，尤其是低性能手机上差别明显。

4.2 按钮+遮罩+侧边栏的标准结构

抽屉式侧边栏的HTML结构分成三块：触发按钮、遮罩层、侧边栏本身。

<nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" id="sidebarToggle"> <span class="sr-only">切换导航</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">管理系统</a> </div> </div> </nav> <div class="sidebar-overlay" id="sidebarOverlay"></div> <nav class="sidebar sidebar-offcanvas" id="sidebar"> <!-- 这里的结构和第3节固定式侧边栏完全一致 --> </nav> <main class="main-content"> <!-- 页面内容 --> </main>

对应CSS：

.sidebar-offcanvas { position: fixed; top: 0; left: 0; bottom: 0; width: 80%; max-width: 300px; background-color: #2c3e50; z-index: 1050; transform: translateX(-100%); transition: transform 0.3s ease; overflow-y: auto; } .sidebar-offcanvas.open { transform: translateX(0); } .sidebar-overlay { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 1049; } .sidebar-overlay.show { display: block; }

然后在桌面端要用媒体查询把它恢复正常：

@media (min-width: 992px) { .sidebar-offcanvas { transform: none; width: 16.66666667%; max-width: none; } .sidebar-overlay { display: none !important; } .main-content { margin-left: 16.66666667%; } }

调试时最容易忽略的是z-index层级。顶部导航的navbar-fixed-top默认z-index是1030，遮罩层要大于它、但又不能盖过侧边栏；我习惯遮罩层1049、侧边栏1050，这样点遮罩能关闭，侧边栏内的交互也不受影响。

4.3 必要的JS逻辑与触摸场景注意点

抽屉式侧边栏的JS其实很简单，只需要开关两个类：

function openSidebar() { $('#sidebar').addClass('open'); $('#sidebarOverlay').addClass('show'); } function closeSidebar() { $('#sidebar').removeClass('open'); $('#sidebarOverlay').removeClass('show'); } $('#sidebarToggle').on('click', openSidebar); $('#sidebarOverlay').on('click', closeSidebar);

偶尔会有人问：为什么点击侧边栏里的菜单不自动关闭？如果你项目里的菜单是单页里的锚点跳转，建议在菜单点击事件里也调用closeSidebar()；如果是整页跳转，刷新后侧边栏会恢复默认状态，问题不大。触摸场景建议让遮罩层覆盖整个可视区，同时给body加一个overflow: hidden防止底层内容跟着滚动，关闭后再去掉，否则在手机上容易发生滚动穿透。

5. 实操中常见的坑，逐个排查

5.1 侧边栏高度不对、滚动错乱

最常见的问题有两种。一种是侧边栏背景色只到一半，鼠标滚轮还滚不到底部，通常是没设bottom: 0或者没给固定高度；另一种是侧边栏能滚动，但内容区不能滚，往往是html或body被加了overflow: hidden，导致整个页面容器失去滚动能力。

排查思路很直接：打开浏览器控制台，查看.sidebar有没有position: fixed; top: 0; bottom: 0;，没有就加上。内容区滚动问题把html, body { height: 100%; }和overflow: hidden改成只作用于目标容器即可。

5.2 jQuery版本与插件冲突

Bootstrap 3对jQuery有版本要求，官方文档建议1.9.1及以上，但不是越高越好。我遇到过引入jQuery 3.x之后Collapse插件正常、点击二级菜单却报$(...).collapse is not a function的情况，原因是jQuery 3.x移除了一些旧API，部分Bootstrap 3.3.x版本对其兼容性并不完美。

如果老项目用的还是jQuery 1.7.2，也要注意升级到至少1.9.1。出现插件不执行时，先检查jQuery是否加载了两次，$.fn.jquery打印出来看看，再排查插件文件顺序：jQuery在前，Bootstrap的JS在后。这个问题占了侧边栏点不动原因的七八成。

5.3 图表、字体、子菜单层级等细节

Glyphicons图标不显示，99%是路径问题。Bootstrap 3的字体图标依赖fonts/目录下的四个字体文件，如果你的CSS引入了bootstrap.min.css，但项目结构里没有把字体目录同步拷贝过来，图标就会显示成空方格。可以检查网络请求，看看woff、ttf、eot是不是404。

子菜单层级方面，我不推荐做三级以上。Bootstrap 3的Collapse嵌套层级一深，缩进的CSS要写得很细，屏幕宽度不够时还容易横向溢出。实际项目里我通常把三级菜单合并成两级，或者把不常用的入口移到页面内容区域，点击率反而更高。

5.4 高亮逻辑与后端菜单动态渲染冲突

后端渲染的菜单经常会动态生成id，如果你在后端模板里写了固定的id="menu-users"，一旦用户权限不同、菜单不同，这个id就会重复或缺失。我建议在高亮逻辑里不要依赖具体id，而是根据当前页面URL去匹配菜单项，这样不管是静态页面还是动态渲染都能统一处理：

var current = location.pathname; $('.nav-sidebar a').each(function () { if (current.indexOf($(this).attr('href')) !== -1) { $(this).closest('li').addClass('active'); $(this).closest('.nav-sub').addClass('in'); } });

这段代码放在页面底部、DOM加载完成后执行，即使菜单是后端异步渲染的，也能在首次渲染后打出高亮和展开状态。

6. 最后分享一点我做侧边栏的小习惯

这种偏“老技术栈”的页面，做多了真的会形成自己的套路。我个人比较坚持的两点：一是写样式之前先用真实菜单数据测试，不要用只有两三个菜单的空页面调样式，空页面一切正常、一填真实数据就崩的场景我至少遇到过三次；二是把侧边栏宽度抽成Less/Sass变量，不管你是用固定像素还是百分比，都建议定义成变量的形式，比如@sidebar-width: 220px，后续要调整间距、做折叠展开，只需要改一处，不用全工程搜margin-left。

另外，如果你负责的Bootstrap 3项目还想继续维护，建议把侧边栏的HTML结构、高亮JS代码单独抽成一个小模块，不要散落在每个页面里。这样换肤、加二级菜单、甚至以后迁移到Bootstrap 4，工作量都会小很多。侧边栏不像官方组件那样开箱即用，但它值得你花半天时间做成自己的“半成品”组件，后面所有页面复用它，收益非常明显。

本文还有配套的精品资源，点击获取