【问题标题】:Collapsing Sidebar with Bootstrap使用 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');            
});

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

【问题讨论】:

标签: twitter-bootstrap-3 bootstrap-4 sidebar collapse


【解决方案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% 并显示一个小按钮以再次展开菜单?
        猜你喜欢
        • 2014-06-20
        • 1970-01-01
        • 2017-08-29
        • 1970-01-01
        • 2014-08-23
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多