html5折叠式侧边栏,基于Bootstrap网格系统的可折叠侧边栏特效

bootstrap-collapsible-sidebar是一款基于Bootstrap网格系统的可折叠侧边栏特效。该特效通过Bootstrap网格系统，少量的CSS和jQuery代码来完成类似侧边栏面板的折叠效果。

使用方法

左侧边栏折叠效果

Bootstrap 3使用12列的响应式网格系统。下面的例子中侧边栏占3列，内容部分占9列。在使用中你需要根据实际情况来完成你的布局。

...

...

在侧边栏折叠的时候将会发生下面的情况：

侧边栏被隐藏

内容部分占据侧边栏的位置

在这个例子中，内容部分将有9列变为12列。

对于如何隐藏侧边栏，可以通过2种方式来实现：

对于大屏幕设备，使用负的margin(和侧边栏宽度相同)和过渡动画来隐藏它。

对于小屏幕设备，需要做的事情仅仅是在折叠的隐藏侧边栏。

.collapsed {

display: none; /* hide it for small displays */

}

@media (min-width: 992px) {

.collapsed {

display: block;

margin-left: -25%; /* same width as sidebar */

}

}</