组件网站上的 Bootstrap 侧边栏导航

Question

组件网站上的 Bootstrap 侧边栏导航

htmlcsstwitter-bootstrap-3navigationsidebar

7

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

设置与最后查看的标题相关的活动类
折叠/展开子级

有没有预定义的方法来实现这个功能？

- user3631654

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Randy · Accepted Answer

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

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