简介基于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端为主低Bootstrap3栅格少量CSS折叠式侧边栏侧边栏可以缩窄成图标条点击再次展开需要最大化内容可视区的工具型后台中需要自己控制宽度状态切换抽屉式侧边栏默认隐藏点击按钮从左侧滑出移动端适配、预览型页面兼顾PC中需要遮罩层和小段JS控制选择上我有个建议如果项目只需要在PC端跑固定式最稳性能最好也最容易排错如果明确要做移动端适配抽屉式是首选折叠式适合那种用户长时间在后台里“干活”的工具类系统常见的比如钉钉管理后台、云服务商控制台。Bootstrap 3没有现成的折叠侧边栏组件多数情况是我自己维护一个.sidebar-collapsed类切换宽度搞定。2. 从栅格开始HTML骨架与固定定位的实现2.1 用栅格划分左右区域还是要固定定位很多新手会这样写左侧col-md-2右侧col-md-10以为就完事了。这种写法在页面内容很短时没问题一旦右侧内容变长出现滚动条左侧的导航栏会跟着页面滚上去用户想切换菜单还得滚回顶部体验很差。所以正确做法是把侧边栏从文档流里“拎”出来让左侧固定定位于视口左侧右侧内容区通过外边距留空。为什么用margin-left而不是用栅格的col-md-offset-2因为侧边栏position: fixed之后栅格系统对它是失效的内容区只能靠外边距撑出对应位置。我用栅格主要是为了确定宽度比例而不是依赖栅格做定位。一个基础结构是div classcontainer-fluid div classrow nav classsidebar idsidebar !-- 菜单内容 -- /nav main classmain-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 classsidebar div classsidebar-header span classglyphicon glyphicon-cloud/span 管理系统 /div ul classnav nav-sidebar li classactive a hrefindex.html span classglyphicon glyphicon-dashboard/span 总览 /a /li li a href#menu-users>$(.sidebar [data-togglecollapse]).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 classnavbar navbar-inverse navbar-fixed-top div classcontainer-fluid div classnavbar-header button typebutton classnavbar-toggle idsidebarToggle span classsr-only切换导航/span span classicon-bar/span span classicon-bar/span span classicon-bar/span /button a classnavbar-brand href#管理系统/a /div /div /nav div classsidebar-overlay idsidebarOverlay/div nav classsidebar sidebar-offcanvas idsidebar !-- 这里的结构和第3节固定式侧边栏完全一致 -- /nav main classmain-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如果你在后端模板里写了固定的idmenu-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工作量都会小很多。侧边栏不像官方组件那样开箱即用但它值得你花半天时间做成自己的“半成品”组件后面所有页面复用它收益非常明显。本文还有配套的精品资源点击获取