Bootstrap 3在菜单/导航栏中移动
我正在构build一个基于浏览器的移动应用程序，并决定使用Bootstrap 3作为devise的css框架。 Bootstrap 3在导航栏中提供了一个很好的“响应”function，如果它检测到关于浏览器分辨率的特定“中断点”，它将自动崩溃。 它在很多情况下工作。
但是最近你有没有注意到很多基于浏览器的移动应用程序如何将主要导航隐藏在屏幕左侧，并且当右上angular的切换图标被按下（切换）时，主要导航滑出进入屏幕的方式约2/3的权利？ 这是一个越来越stream行的解决scheme，通过移动设备上的基于浏览器的应用程序进行导航，我认为从理论上来说，修改引导程序css / js以适应这个版本的导航崩溃function应该是相当容易的。
这些function如何实现？ 似乎不应该做太多的修改。 我很想听听你对这个问题的想法/解决scheme。 另外，我认为这将是Bootstrap作为内置function实现的一个很好的长期解决scheme。
不幸的是，我还没有尝试过创build这个function，因为当我熟悉这些技术的时候，我主要是一个PHP / MySQL的开发人员，我相信一个像这样有用的function应该由具有我没有的洞察力的专家来构build作为前端开发者。
有一个stream行的Bootstrap叉子 – Jasny Bootstrap。 该叉具有开箱即用的各种实现（幻灯片，推，揭示）： http : //jasny.github.io/bootstrap/javascript/#offcanvas
这是为了我自己的项目，我也在这里分享。
演示： http : //jsbin.com/OjOTIGaP/1/edit
这个在3.2之后有麻烦，所以下面的那个可能对你更好：
https://jsbin.com/seqola/2/edit —更好的版本，稍微
CSS
/* adjust body when menu is open */ body.slide-active { overflow-x: hidden } /*first child of #page-content so it doesn't shift around*/ .no-margin-top { margin-top: 0px!important } /*wrap the entire page content but not nav inside this div if not a fixed top, don't add any top padding */ #page-content { position: relative; padding-top: 70px; left: 0; } #page-content.slide-active { padding-top: 0 } /* put toggle bars on the left :: not using button */ #slide-nav .navbar-toggle { cursor: pointer; position: relative; line-height: 0; float: left; margin: 0; width: 30px; height: 40px; padding: 10px 0 0 0; border: 0; background: transparent; } /* icon bar prettyup - optional */ #slide-nav .navbar-toggle > .icon-bar { width: 100%; display: block; height: 3px; margin: 5px 0 0 0; } #slide-nav .navbar-toggle.slide-active .icon-bar { background: orange } .navbar-header { position: relative } /* un fix the navbar when active so that all the menu items are accessible */ .navbar.navbar-fixed-top.slide-active { position: relative } /* screw writing importants and shit, just stick it in max width since these classes are not shared between sizes */ @media (max-width:767px) { #slide-nav .container { margin: 0; padding: 0!important; } #slide-nav .navbar-header { margin: 0 auto; padding: 0 15px; } #slide-nav .navbar.slide-active { position: absolute; width: 80%; top: -1px; z-index: 1000; } #slide-nav #slidemenu { background: #f7f7f7; left: -100%; width: 80%; min-width: 0; position: absolute; padding-left: 0; z-index: 2; top: -8px; margin: 0; } #slide-nav #slidemenu .navbar-nav { min-width: 0; width: 100%; margin: 0; } #slide-nav #slidemenu .navbar-nav .dropdown-menu li a { min-width: 0; width: 80%; white-space: normal; } #slide-nav { border-top: 0 } #slide-nav.navbar-inverse #slidemenu { background: #333 } /* this is behind the navigation but the navigation is not inside it so that the navigation is accessible and scrolls*/ #slide-nav #navbar-height-col { position: fixed; top: 0; height: 100%; width: 80%; left: -80%; background: #eee; } #slide-nav.navbar-inverse #navbar-height-col { background: #333; z-index: 1; border: 0; } #slide-nav .navbar-form { width: 100%; margin: 8px 0; text-align: center; overflow: hidden; /*fast clearfixer*/ } #slide-nav .navbar-form .form-control { text-align: center } #slide-nav .navbar-form .btn { width: 100% } } @media (min-width:768px) { #page-content { left: 0!important } .navbar.navbar-fixed-top.slide-active { position: fixed } .navbar-header { left: 0!important } } HTML
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="slide-nav"> <div class="container"> <div class="navbar-header"> <a class="navbar-toggle"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="navbar-brand" href="#">Project name</a> </div> <div id="slidemenu"> <form class="navbar-form navbar-right" role="form"> <div class="form-group"> <input type="search" placeholder="search" class="form-control"> </div> <button type="submit" class="btn btn-primary">Search</button> </form> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li class="dropdown-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li class="dropdown-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li class="dropdown-header">Nav header</li> <li><a href="#">Separated link test long title goes here</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> </div> </div> </div>
jQuery的
$(document).ready(function () { //stick in the fixed 100% height behind the navbar but don't wrap it $('#slide-nav.navbar .container').append($('<div id="navbar-height-col"></div>')); // Enter your ids or classes var toggler = '.navbar-toggle'; var pagewrapper = '#page-content'; var navigationwrapper = '.navbar-header'; var menuwidth = '100%'; // the menu inside the slide menu itself var slidewidth = '80%'; var menuneg = '-100%'; var slideneg = '-80%'; $("#slide-nav").on("click", toggler, function (e) { var selected = $(this).hasClass('slide-active'); $('#slidemenu').stop().animate({ left: selected ? menuneg : '0px' }); $('#navbar-height-col').stop().animate({ left: selected ? slideneg : '0px' }); $(pagewrapper).stop().animate({ left: selected ? '0px' : slidewidth }); $(navigationwrapper).stop().animate({ left: selected ? '0px' : slidewidth }); $(this).toggleClass('slide-active', !selected); $('#slidemenu').toggleClass('slide-active'); $('#page-content, .navbar, body, .navbar-header').toggleClass('slide-active'); }); var selected = '#slidemenu, #page-content, body, .navbar, .navbar-header'; $(window).on("resize", function () { if ($(window).width() > 767 && $('.navbar-toggle').is(':hidden')) { $(selected).removeClass('slide-active'); } }); });
我认为你要找的东西通常被称为“canvas外”的布局。 以下是官方Bootstrap文档中的标准示例： http : //getbootstrap.com/examples/offcanvas/
“官方”示例使用右侧的侧栏切换closures，并单独从顶部的导航栏菜单。 我还发现了这些从左侧滑入的非canvas变体，可能更接近您正在寻找的内容。
http://www.bootstrapzero.com/bootstrap-template/off-canvas-sidebar http://www.bootstrapzero.com/bootstrap-template/facebook
我们可以使用sidr插件从左或右创build一个非帆布菜单。 我已经在我的一个项目中实现了它，它是用bootstrapdevise的。
我已经按照下面的链接…似乎很容易实现。 🙂
使用Sidr插件，使用Bootstrap创build类似于facebook mobile的响应式菜单
我们开始使用slideout.js它不是直接使用Bootstrap，因为它是无依赖关系的。 但是，您可以将其与引导程序结合使用，例如只有在网站显示在移动设备上时才显示滑出button。
你可以在这里或这里find它。
您可能也对这个jQuery插件和CSS框架感兴趣： https ： //myflashlabs.github.io/24component-bars/
它可以帮助您创build一个完全响应的canvas外导航，以及适用于不同types项目的许多其他菜单types。
当你已经有解决scheme的时候，你不需要自己编写代码。
