使用 Bootstrap 折叠侧边栏

我刚刚访问了这个页面 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>

侧边栏本身有一个 hide-xs 类

$('.sidebar-toggle').click(function(){
$('#sidebar').removeClass('hidden-xs');
});

如果你点击按钮,它从顶部切换侧边栏。很高兴看到侧边栏表现得像上面的网站显示。感谢你们的帮助!

500507 次浏览

Bootstrap 3

Yes, it's possible. This "off-canvas" example should help to get you started.

https://codeply.com/p/esYgHWB2zJ

Basically you need to wrap the layout in an outer div, and use media queries to toggle the layout on smaller screens.

/* 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;
}
}

Also, there are several more Bootstrap sidebar examples here


Bootstrap 4

Create a responsive navbar sidebar "drawer" in Bootstrap 4?

http://getbootstrap.com/examples/offcanvas/

This is the official example, may be better for some. It is under their Experiments examples section, but since it is official, it should be kept up to date with the current bootstrap release.

Looks like they have added an off canvas css file used in their example:

http://getbootstrap.com/examples/offcanvas/offcanvas.css

And some JS code:

$(document).ready(function () {
$('[data-toggle="offcanvas"]').click(function () {
$('.row-offcanvas').toggleClass('active')
});
});

Via Angular: using ng-class of Angular, we can hide and show the side bar.

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;
}
}

EDIT: I've added one more option for bootstrap sidebars.

There are actually three manners in which you can make a bootstrap 3 sidebar. I tried to keep the code as simple as possible.

Fixed sidebar

Here you can see a demo of a simple fixed sidebar I've developed with the same height as the page

Sidebar in a column

I've also developed a rather simple column sidebar that works in a two or three column page inside a container. It takes the length of the longest column. Here you can see a demo

Dashboard

If you google bootstrap dashboard, you can find multiple suitable dashboard, such as this one. However, most of them require a lot of coding. I've developed a dashboard that works without additional javascript (next to the bootstrap javascript). Here is a demo

For all three examples you off course have to include the jquery, bootstrap css, js and theme.css files.

Slidebar

If you want the sidebar to hide on pressing a button this is also possible with only a little javascript.Here is a demo

Its not mentioned on doc, but Left sidebar on Bootstrap 3 is possible using "Collapse" method.

As mentioned by bootstrap.js :

Collapse.prototype.dimension = function () {
var hasWidth = this.$element.hasClass('width')
return hasWidth ? 'width' : 'height'
}

This mean, adding class "width" into target, will expand by width instead of height :

http://jsfiddle.net/2316sfbz/2/