使用Bootstrap 3折叠边栏

Question

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

如果单击该按钮,则会从顶部切换侧边栏.很高兴看到侧边栏的行为与上面显示的网站相似.任何帮助表示赞赏!

Answer 1

Bootstrap 3

是的,这是可能的.这个"画外"示例应该有助于您入门.

http://bootply.com/88026

基本上,您需要将布局包装在外部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

在Bootstrap 4中创建响应式导航栏侧边栏"抽屉"？

Answer 2

对于任何有兴趣的人,这里有另一个有用的入门模板.

http://startbootstrap.com/templates/simple-sidebar.html

Answer 3

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

Answer 4

编辑:我为引导程序侧栏添加了一个选项.

实际上有三种方式你可以制作一个bootstrap 3侧边栏.我试图让代码尽可能简单.

固定侧边栏

在这里,您可以看到我开发的一个简单的固定侧边栏的演示,其高度与页面相同

列中的侧栏

我还开发了一个相当简单的列边栏,可以在容器内的两个或三个列页面中工作.它需要最长列的长度.在这里你可以看到一个演示

仪表板

如果您使用google bootstrap信息中心,则可以找到多个合适的信息中心,例如此信息中心.但是,大多数都需要大量编码.我开发了一个仪表板,无需额外的javascript(在bootstrap javascript旁边).这是一个演示

对于所有三个示例,您当然必须包括jquery,bootstrap css,js和theme.css文件.

滑杆

如果您希望侧边栏在按下按钮时隐藏,这也可以只使用一点点javascript.Here是一个演示

Answer 5

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