折叠边栏与Bootstrap 3
我刚刚访问了这个页面http://www.elmastudio.de/，并想知道是否可以使用Bootstrap 3来构build左侧边栏的崩溃。
代码从顶部折叠边栏（仅限手机）：
<button type="button" class="navbar-toggle sidebar-toggle" data-toggle="collapse" data-target=".sidebar-ex1-collapse"> <span class="sr-only">Sidebar</span> <span class="glyphicon glyphicon-check"></span> </button> 补充工具本身有隐藏xs类。 它被删除与以下js
$('.sidebar-toggle').click(function(){ $('#sidebar').removeClass('hidden-xs'); });
如果您单击该button，则会从顶部切换边栏。 看到侧栏像上面显示的网站一样很棒。 任何帮助表示赞赏！
是的，这是可能的。 这个“非canvas”的例子应该有助于让你开始。
http://bootply.com/88026
基本上你需要将布局封装在外部div中，并使用媒体查询在较小的屏幕上切换布局。
/* collapsed sidebar styles */ @media screen and (max-width: 767px) { .row-offcanvas { position: relative; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .row-offcanvas-right .sidebar-offcanvas { right: -41.6%; } .row-offcanvas-left .sidebar-offcanvas { left: -41.6%; } .row-offcanvas-right.active { right: 41.6%; } .row-offcanvas-left.active { left: 41.6%; } .sidebar-offcanvas { position: absolute; top: 0; width: 41.6%; } #sidebar { padding-top:0; } }
此外，还有几个Bootstrap边栏示例
对于任何感兴趣的人来说，这里还有一个有用的入门模板。
http://getbootstrap.com/examples/offcanvas/
这是官方的例子，可能会更好一些。 它是在他们的实验实例部分，但是因为它是官方的，所以它应该与当前的引导版本保持同步。
看起来他们已经添加了一个在他们的例子中使用的canvasCSS文件：
http://getbootstrap.com/examples/offcanvas/offcanvas.css
还有一些JS代码：
$(document).ready(function () { $('[data-toggle="offcanvas"]').click(function () { $('.row-offcanvas').toggleClass('active') }); });
通过Angular：使用ng-class的Angular，我们可以隐藏和显示侧栏。
http://jsfiddle.net/DVE4f/359/
<div class="container" style="width:100%" ng-app ng-controller="AppCtrl"> <div class="row"> <div ng-class="showgraphSidebar ? 'col-xs-3' : 'hidden'" id="colPush" > Sidebar </div> <div ng-class="showgraphSidebar ? 'col-xs-9' : 'col-xs-12'" id="colMain" > <button ng-click='toggle()' >Sidebar Toggle</a> </div> </div> </div>
。
function AppCtrl($scope) { $scope.showgraphSidebar = false; $scope.toggle = function() { $scope.showgraphSidebar = !$scope.showgraphSidebar; } }
编辑：我已经添加了一个更多的选项自举侧边栏。
实际上有三种方式可以制作引导3边栏。 我尽量保持代码尽可能简单。
修正了侧边栏
在这里，你可以看到一个简单的固定侧边栏的演示 ，我已经开发了与页面高度相同的侧边栏
侧栏在一列中
我还开发了一个相当简单的列侧边栏，在一个容器内的两个或三个列页面中工作。 它取最长的一列的长度。 在这里你可以看到一个演示
仪表板
如果你是谷歌引导仪表板，你可以find多个合适的仪表板，如这一个 。 但是，其中大部分需要大量的编码。 我开发了一个仪表板，没有额外的JavaScript工作（旁边的引导JavaScript）。 这里是一个演示
对于你所有的三个例子，你必须包括jquery，bootstrap css，js和theme.css文件。
滑杆
如果你想侧边栏按下button隐藏这也是可能的只有一点点的javascript.Here是一个演示
它没有在文档中提到，但引导程序3上的左边栏可以使用“折叠”方法。
正如bootstrap.js所提到的：
Collapse.prototype.dimension = function () { var hasWidth = this.$element.hasClass('width') return hasWidth ? 'width' : 'height' }
这意味着，将类“宽度”添加到目标中，将通过宽度而不是高度来扩展：
