Bootstrap 侧边栏导航，如组件站点上的答案

【问题标题】：Bootstrap sidebar nav like on components siteBootstrap 侧边栏导航，如组件站点上的
【发布时间】：2016-04-29 13:03:37
【问题描述】：

我想构建一个侧边栏导航，其行为与引导组件页面上的行为完全相同，不同之处在于它应该出现在左侧： http://getbootstrap.com/components/

要求：

设置与上次查看的标题相关的活动类
折叠/展开儿童

是否有预定义的方式来实现这一点？

【问题讨论】：

标签： html css twitter-bootstrap-3 navigation sidebar

【解决方案1】：

http://afeld.github.io/bootstrap-toc/

您可以在该页面上找到 Bootstrap 使用的确切目录。

用法

除了正常的 Bootstrap 设置（请参阅他们的入门指南），您还需要包含 Bootstrap 目录样式表和 JavaScript 文件。

<!-- add after bootstrap.min.css -->
<link rel="stylesheet" href="https://cdn.rawgit.com/afeld/bootstrap-toc/v0.3.0/dist/bootstrap-toc.min.css">
<!-- add after bootstrap.min.js -->
<script src="https://cdn.rawgit.com/afeld/bootstrap-toc/v0.3.0/dist/bootstrap-toc.min.js"></script>

通过数据属性

最简单的。

使用data-toggle="toc" 属性创建一个<nav> 元素。

<nav id="toc" data-toggle="toc"></nav>

你可以把它放在你喜欢的页面上。由于该插件利用了 Bootstrap 的 Scrollspy 插件，因此您还需要向 <body> 添加几个属性：

<body data-spy="scroll" data-target="#toc">

通过 JavaScript

如果您需要定制。

如果您更喜欢以其他方式创建导航元素（例如在单页应用程序中），您可以将 jQuery 对象传递给 Toc.init().

$(function() {
var navSelector = '<something>';
var $myNav = $(navSelector);
Toc.init($myNav);
  $('body').scrollspy({
    target: navSelector
  });
});

有关初始化该插件的更多信息，请参阅 Scrollspy 文档。

选项

当调用Toc.init() 时，您可以传入<nav> 元素的jQuery 对象（如上所示），或者一个选项对象：

Toc.init({
  $nav: $('#myNav'),
  // ...
});

除非另有说明，否则所有选项都是可选的。

【讨论】：

仅供参考。取自文档的 JS 示例是错误的：github.com/afeld/bootstrap-toc/issues/18
@user3631654 你可以用正确的信息更新我的问题，我现在做了以供将来参考。