我刚刚访问了这个页面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>
侧边栏本身有 hidden-xs 类。使用以下js将其删除
$('.sidebar-toggle').click(function(){
$('#sidebar').removeClass('hidden-xs');
});
如果单击该按钮，它会从顶部切换侧边栏。很高兴看到侧边栏的行为与上面显示的网站一样。任何帮助表示赞赏！
引导程序 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 侧边栏示例
引导程序 4
http://getbootstrap.com/examples/offcanvas/
这是官方的例子，可能对某些人来说更好。它在他们的实验示例部分下，但由于它是官方的，因此应该与当前的引导程序版本保持同步。
看起来他们添加了一个在他们的示例中使用的画布外 css 文件：
http://getbootstrap.com/examples/offcanvas/offcanvas.css
还有一些JS代码：
$(document).ready(function () {
$('[data-toggle="offcanvas"]').click(function () {
$('.row-offcanvas').toggleClass('active')
});
});
编辑：我为引导侧边栏添加了一个选项。
实际上，您可以通过三种方式制作 bootstrap 3 侧边栏。我试图使代码尽可能简单。
在这里你可以看到我开发的一个简单的固定侧边栏的演示，与页面高度相同
我还开发了一个相当简单的列侧边栏，它在容器内的两列或三列页面中工作。它占用最长列的长度。在这里你可以看到一个演示
如果你谷歌引导仪表板，你可以找到多个合适的仪表板，比如这个。但是，它们中的大多数都需要大量编码。我开发了一个仪表板，无需额外的 javascript（在引导 javascript 旁边）即可工作。这是一个演示
对于所有三个示例，您当然必须包含 jquery、bootstrap css、js 和 theme.css 文件。
如果您希望侧边栏在按下按钮时隐藏，这也可以只用一点 javascript.Here is a demo
Via Angular：使用ng-classAngular，我们可以隐藏和显示侧边栏。
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'
}
这意味着，将类“宽度”添加到目标中，将按宽度而不是高度扩展：