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

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

使用方法

左侧边栏折叠效果

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

<div class="container">
    <div class="row" id="row-main">
        <div class="col-md-3" id="sidebar">
            ...
        </div>
        <div class="col-md-9" id="content">
            ...
        </div>
    </div>
</div>              
              

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

• 侧边栏被隐藏
• 内容部分占据侧边栏的位置

在这个例子中，内容部分将有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 */
    }
}                
              

注意上面的媒体查询代码，这里使用min-width: 992px来匹配中等宽度的列（.col-md-）。

由于使用了负的margin-left值，侧边栏会被推到屏幕之外。为了将它隐藏，所有要在容器上设置overflow:hidden;。

#row-main {
    overflow-x: hidden; /* necessary to hide collapsed sidebar */
}                
              

最后要处理的事情是侧边栏的动画效果。

#content {
    -webkit-transition: width 0.3s ease;
    -moz-transition: width 0.3s ease;
    -o-transition: width 0.3s ease;
    transition: width 0.3s ease;
}
#sidebar {
    -webkit-transition: margin 0.3s ease;
    -moz-transition: margin 0.3s ease;
    -o-transition: margin 0.3s ease;
    transition: margin 0.3s ease;
}                
              

当我们需要切换侧边栏的时候，只需要更换是的的class名称即可。

$("#sidebar").toggleClass("collapsed");
$("#content").toggleClass("col-md-12 col-md-9");                
              

右侧边栏折叠效果

又侧边栏折叠效果的制作方法和左侧边栏的基本相同。HTML结构如下：

<div class="container">
    <div class="row" id="row-main">
        <div class="col-md-9" id="content">
            ...
        </div>
        <div class="col-md-3" id="sidebar">
            ...
        </div>
    </div>
</div>                
              

唯一不同的是要使用margin-right属性来隐藏侧边栏。

@media (min-width: 992px) {
    .collapsed {
        display: block;
        margin-right: -25%; /* same width as sidebar */
    }
}                
              

其它具体代码请参考下载文件或demo。