简介Bootstrap 3 侧边导航栏资源包面向需要快速搭建响应式侧边栏导航的前端开发初学者与页面重构人员。以可直接运行的 HTML 示例为入口配合 Bootstrap 3 核心样式、jQuery 与 Bootstrap 脚本解决了侧边导航在桌面与移动端之间的折叠展开问题适用于后台管理界面、文档站点及资讯类门户的导航设计。压缩包共 9 个文件主要包括 HTML 页面、CSS 样式表、JS 脚本及字体图标文件woff/eot/ttf/svg 等整体仅 170KB轻量易用。已有 5178 人学习下载。通过该资源可以直观了解 Bootstrap 3 导航栏的 HTML 结构、navbar-collapse 响应式折叠原理、图标字体的本地引用方式以及移动端三横线按钮的触发机制参考示例还能快速定制自己的后台侧边导航替换链接、增加图标或子菜单并基于 Bootstrap 的 JavaScript 插件扩展滚动监听等交互适合作为前端练习和项目起步的轻量参照。1. Bootstrap 3 侧边导航栏还在维护老系统的人最该把这个布局做稳Bootstrap 3 的侧边导航栏是我这几年被问得最多的老前端方案之一。不少系统到今天还在跑 Bootstrap 3——内部管理系统、数据分析平台、旧版 CMS 后台侧边导航是这类页面的标配布局。它由三件事拼成栅格分栏留出左侧 25% 宽度Affix 插件让菜单滚到顶时固定住ScrollSpy 在滚动中自动高亮当前章节三者配合就是一个完整的侧边导航体验。网上现成示例大多是新版框架的写法直接抄到 3 上会翻车Bootstrap 4/5 用 position-sticky栅格断点不同Affix 更是 3 的独有插件。这篇笔记写给还要维护老系统、想把侧边导航做稳的开发者从原理讲到参数再到五个典型踩坑。2. 栅格、Affix 与 ScrollSpy侧边导航栏的三个技术支柱动手写代码之前得先把三个插件的职责分清楚栅格管占位Affix 管固定ScrollSpy 管高亮。很多人一上来就复制菜单代码结果发现固定了不高亮、高亮了不固定就是因为没搞明白这三件事分别由谁负责。下面逐个拆开讲每一节都会给出选型理由和边界条件。2.1 栅格决定占位col-md-3 的分栏宽度以及为什么不建议写死像素Bootstrap 3 的栅格是 12 等分。侧边导航的标准分法是左侧 col-md-3 占 25%右侧 col-md-9 占 75%。这个比例不是随便选的导航项文字一般不超过八个字220 像素左右的内容宽度足够放下常见字号内容区留 75%在 14 英寸笔记本上依然能正常呈现表格和多列文本。栅格断点决定了侧边栏什么时候从「侧边」变成「堆叠」写代码前最好把这张表背下来视口范围容器宽度col-md-3 实际宽度说明小于 768pxxs自适应100%列堆叠侧边栏跑到正文上方768px 及以上sm750px100%仍堆叠需要手动处理992px 及以上md970px250px含 padding内容 220px侧边栏生效1200px 及以上lg1170px300px含 padding内容 270px侧边栏生效这里有个容易忽略的点栅格只管宽度不管高度。列的实际高度由内容撑起所以左侧列通常只有菜单那么高。如果想让左侧整条有背景色或边框一直延伸到页面底部常见做法是给 col-md-3 加 min-height: 100vh或者用伪元素在视觉上补一条背景。不要用 position: absolute 去拉满高度那会改变 Affix 计算起始位置的参照点后患很多。为什么不建议用固定像素宽度写死 260px 在 992px 视口下没问题但到 1200px 以上容器会空出一截小屏上则会溢出。栅格类自带响应式宽度改动成本最低而且后续要给 Affix 算固定宽度时栅格宽度是可预测的写死像素则每台设备都不一样。2.2 Affix 决定固定状态机与两个偏移参数Affix 是 Bootstrap 3 独有的滚动定位插件4/5 里没有要用得拿 position: sticky 或自写滚动判断。它的行为是一个三态状态机页面还没滚到设定位置时元素保持文档流里的原始位置这个状态叫 affix-top滚过>!DOCTYPE html html langzh-CN head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1 titleBS3 侧边导航示例/title link relstylesheet hrefcss/bootstrap.min.css style body { position: relative; } #sidebarNav.affix { top: 20px; } /style /head body>#sidebarNav.affix { top: 40px; } media (min-width: 992px) and (max-width: 1199px) { #sidebarNav.affix { width: 220px; } } media (min-width: 1200px) { #sidebarNav.affix { width: 270px; } }这两组宽度不是拍脑袋写的Bootstrap 3 默认容器在 992px 断点是 970px加上 row 的负外边距展开为 1000pxcol-md-3 占 25% 是 250px去掉左右各 15px 的列内边距内容区就是 220px1200px 断点容器是 1170px展开 1200px25% 是 300px去掉内边距就是 270px。如果项目改了容器宽度这个值要在控制台里实测公式是$(#sidebarNav).parent().width()在固定前后各取一次固定后取到的就是需要写进 CSS 的值。如果嫌媒体查询麻烦或者容器宽度经常变可以用事件监听的方式动态赋值var $sidebar $(#sidebarNav); var $col $sidebar.parent(); $sidebar.on(affix.bs.affix, function () { $sidebar.css(width, $col.width()); }); $sidebar.on(affix-top.bs.affix affix-bottom.bs.affix, function () { $sidebar.css(width, ); });当 Affix 从 affix-top 切入 affix 状态时把父列当前的内容宽度读出来写到固定元素上退出固定时清掉内联宽度。这个方案的优点是容器宽度改了不用动 CSS缺点是在状态切换的瞬间可能会有一帧宽度跳动因为事件触发时 class 已经切过去了。对视觉敏感的项目建议还是用媒体查询写死JS 方案只作为非标容器的兜底。4.3 锚点跳转的偏移修正平滑滚动与 scroll-margin-top菜单能固定、能高亮之后还差最后一截点击菜单项跳转到对应区块时区块标题会被固定顶栏遮住。浏览器默认的锚点跳转会把目标元素顶部对齐到视口顶部固定顶栏一压标题就没了。现代浏览器的解决方式是 CSS 的 scroll-margin-topsection[id] { scroll-margin-top: 60px; }section[id] 会把所有带 id 的区块都纳入定位目标元素的上缘会停在距视口顶部 60px 处正好让固定顶栏让开。一行解决不需要任何 JS而且 ScrollSpy 的判定不受影响。如果你的项目还需要平滑滚动动画Bootstrap 3 本身不提供常见做法是用 jQuery 拦截点击并手动滚动$(#sidebarNav).on(click, a[href^#]:not([data-togglecollapse]), function (e) { e.preventDefault(); var $target $($(this).attr(href)); if ($target.length) { var top $target.offset().top - 60; $(html, body).animate({ scrollTop: top }, 300); } });选择器里特意排除了带>li a href#subUser>$(#sidebarNav [data-togglecollapse]).on(click, function (e) { e.preventDefault(); });阻止的是锚点跳转data-target 指定的折叠展开由 Bootstrap 事件接管不受影响。ScrollSpy 激活二级菜单项时父级菜单不会自动展开需要监听 activate 事件手动处理$(body).on(activate.bs.scrollspy, function () { var $active $(#sidebarNav li.active); $active.closest(.collapse).each(function () { $(this).collapse(show); $(this).parent(li).addClass(active); }); });这段在子菜单被高亮时把父级折叠面板展开同时给父 li 补上 active 类视觉上才能呈现「父菜单展开、子菜单高亮」的完整状态。6.2 移动端把侧边栏收进折叠面板移动端不是简单把菜单藏起来而是给一个展开入口button classbtn btn-default visible-xs visible-sm >media (min-width: 992px) { #sidebarNav.collapse { display: block; } }#sidebarNav 在 HTML 里加 collapse 类桌面端靠这条媒体查询覆盖成 display: block小屏端由按钮切换折叠。Affix 的初始化也要跟着改成按宽度决定把 HTML 里的>if (window.innerWidth 992) { $(#sidebarNav).affix({ offset: { top: 70 } }); }window.innerWidth 在页面加载时读一次即可。这样小屏设备完全不初始化 Affix避免固定定位在窄视口下遮住内容。6.3 两分钟验证脚本交付前我会在控制台跑下面这段确认插件初始化和状态机完整$(function () { console.log(scrollspy:, $(body).data(bs.scrollspy) ? 已初始化 : 未初始化); console.log(affix:, $(#sidebarNav).data(bs.affix) ? 已初始化 : 未初始化); $(window).on(scroll resize, function () { var cls $(#sidebarNav).attr(class) || ; var state (cls.match(/affix(-\w)?/) || [无])[0]; console.log(scrollTop:, $(window).scrollTop(), | 状态:, state); }); });data(bs.scrollspy) 和 data(bs.affix) 只要不是 undefined说明插件已经初始化滚动监听会打印出 affix-top、affix、affix-bottom 三种状态的切换节点。验收标准滚动完整一页控制台能依次看到三个状态页脚露出时侧边栏让位菜单高亮跟随滚动实时切换。我现在的习惯是侧边导航一上页面先开控制台跑一遍这段确认状态机完整再做视觉微调。这个习惯省掉了不少「明明没问题但用户说卡」的沟通成本。多级菜单和移动端折叠都是很小的增量真正值钱的是把固定、高亮、偏移三个参数当成一个整体来调而不是各调各的。希望帮到你。本文还有配套的精品资源点击获取