我刚刚访问了这个页面http://www.elmastudio.de/，想知道是否可以使用Bootstrap 3来构建左侧边栏折叠。
用于从顶部折叠侧边栏的代码（仅适用于手机）：
<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>
Sidebar本身具有hidden-xs类。以下js将其移除。
$('.sidebar-toggle').click(function(){
$('#sidebar').removeClass('hidden-xs');
});
Bootstrap 3
是的，这是可能的。这个“离线画布”示例应该有助于您入门。
https://codeply.com/p/esYgHWB2zJ
基本上，您需要将布局包装在外部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边栏样例
Bootstrap 4
http://getbootstrap.com/examples/offcanvas/
这是官方示例，可能对某些人更好。它位于他们的实验示例部分，但由于它是官方的，应该随着当前的Bootstrap发布保持最新。
看起来他们添加了一个在他们示例中使用的离线画布CSS文件:
http://getbootstrap.com/examples/offcanvas/offcanvas.css
还有一些JS代码:
$(document).ready(function () {
$('[data-toggle="offcanvas"]').click(function () {
$('.row-offcanvas').toggleClass('active')
});
});
编辑：我添加了一个bootstrap侧边栏的选项。
实际上，您可以以三种方式制作bootstrap 3侧边栏。我尽可能保持代码简单。
在这里，您可以看到我开发的高度与页面相同的简单固定侧边栏的演示
我还开发了一个相当简单的列侧边栏，适用于容器内的两列或三列页面。它采用最长列的长度。在这里，您可以看到演示
如果您搜索bootstrap仪表板，则可以找到多个合适的仪表板，例如此类。但是，它们大多需要大量编码。我开发了一个无需额外javascript（除了bootstrap javascript）即可运行的仪表板。这是一个演示
对于所有三个示例，您当然必须包括jquery、bootstrap css、js和theme.css文件。
如果您希望在按下按钮时隐藏侧边栏，则只需使用少量javascript即可实现。这是一个演示
ng-class，我们可以隐藏和显示侧边栏。
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;
}
}
文档中没有提到，但是在Bootstrap 3中可以使用“折叠”方法来实现左侧边栏。
正如bootstrap.js所述：
Collapse.prototype.dimension = function () {
var hasWidth = this.$element.hasClass('width')
return hasWidth ? 'width' : 'height'
}