使用 Bootstrap 折叠侧边栏

Posted 2023-03-24

【中文标题】使用 Bootstrap 折叠侧边栏

【英文标题】：Collapsing Sidebar with Bootstrap

【发布时间】：2013-10-24 04:43:42

【问题描述】：

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

如果您单击该按钮，它会从顶部切换侧边栏。很高兴看到侧边栏的行为与上面显示的网站一样。任何帮助表示赞赏！

【问题讨论】：

我们是否都同意elmastudio.de 不再有侧边栏折叠？

还可以查看这些有用的引导侧边栏菜单集合designerslib.com/bootstrap-sidebar-menu-templates

【参考方案1】：

引导程序 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;
  

另外还有几个more Bootstrap sidebar examples here

---

引导程序 4

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

【讨论】：

@Delucia：它适用于 android 上的 Chrome。 Bootply 本身无法正常工作，但请点击“切换到渲染视图”链接。

here 是官方引导带有侧边栏的仪表板模板

@stom：它隐藏在手机和平​​板电脑版本上，这是问题所在。

【参考方案2】：

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

【参考方案3】：

编辑：我为引导侧边栏添加了一个选项。

实际上，您可以通过三种方式制作 bootstrap 3 侧边栏。我试图让代码尽可能简单。

固定侧边栏

在这里你可以看到我开发的一个简单的固定侧边栏的demo，与页面高度相同

列中的侧边栏

我还开发了一个相当简单的列侧边栏，可以在容器内的两列或三列页面中使用。它占用最长列的长度。在这里你可以看到demo

仪表板

如果你google bootstrap dashboard，你可以找到多个合适的dashboard，比如this one。但是，它们中的大多数都需要大量编码。我开发了一个仪表板，无需额外的 javascript（在引导 javascript 旁边）即可工作。这是demo

对于所有三个示例，您当然必须包含 jquery、bootstrap css、js 和 theme.css 文件。

滑动条

如果您希望侧边栏在按下按钮时隐藏，这也可以只用一点 javascript.Here is a demo

【参考方案4】：

通过 Angular：使用 Angular 的ng-class，我们可以隐藏和显示侧边栏。

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;
    

【参考方案5】：

文档中没有提到，但 Bootstrap 3 的左侧边栏可以使用“折叠”方法。

如 bootstrap.js 所述：

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

这意味着，将类“宽度”添加到目标中，将按宽度而不是高度扩展：

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

【讨论】：

如何将左侧菜单仅隐藏 80% 并显示一个小按钮以再次展开菜单？