使用Bootstrap折叠边栏

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

也有几个more Bootstrap sidebar examples here

---

Bootstrap 4

Create a responsive navbar sidebar "drawer" in 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侧边栏。我试图使代码尽可能简单。

固定的侧边栏

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

一栏中的侧栏

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

仪表板

如果使用google bootstrap仪表板，则可以找到多个合适的仪表板，例如this one。但是，其中大多数都需要大量的编码。我已经开发了一个仪表板，该仪表板不需要其他javascript（bootstrap javascript旁边）。这是demo

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

滑杆

[如果您希望在按下按钮时隐藏侧边栏，也可以只使用少量的javascript。这是demo

Answer 5

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

Answer 6

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