Question

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

要求：

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

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

Answer 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>

通过数据属性

简单的。

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

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

除非另有说明，否则所有选项均为可选项。

Bootstrap侧边栏导航就像在组件站点上一样

1 个答案: