折叠式边栏,带引导装置


102

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

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


7
我们都同意elmastudio.de的边栏不再崩溃了吗?
Peter V.Mørch'16

还请检出这些有用的引导程序侧边栏菜单集合designerslib.com/bootstrap-sidebar-menu-templates
Karuppiah RK

Answers:


124

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

另外,这里还有更多的Bootstrap侧边栏示例


引导程序4

在Bootstrap 4中创建响应式导航栏边栏“抽屉”吗?


@Delucia:适用于Android上的Chrome。Bootply本身无法正常工作,但是请单击“切换到渲染视图”链接。
Dan Dascalescu 2015年

2
带有侧边栏的
shaijut,2016年

1
@stom:它隐藏在手机和平​​板电脑版本上,这是问题所在。
fuddin

25

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

9

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

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

固定侧栏

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

列中的侧栏

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

仪表板

如果您使用的是Google Bootstrap信息中心,则可以找到多个合适的信息中心,例如this。但是,其中大多数都需要大量编码。我已经开发了一个仪表板,该仪表板不需要其他javascript(bootstrap javascript旁边)。这是一个演示

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

滑杆

如果你想在按下一个按钮,这也有可能只用一点点javascript.Here侧边栏隐藏是一个演示


6

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

3

它没有在文档中提及,但是可以使用“折叠”方法在Bootstrap 3上使用左侧边栏。

如bootstrap.js所述:

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

这意味着,在目标中添加类“ width”,将按宽度而不是高度进行扩展:

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


您将如何隐藏左侧菜单仅80%,并显示一个小按钮以再次展开菜单?
Pathros
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.