我想创建一个侧边导航栏,与Bootstrap组件页面上的导航栏完全相同,但不同之处在于它应该出现在左侧:http://getbootstrap.com/components/
要求:
- 设置与最后查看的标题相关的活动类
- 折叠/展开子级
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>
<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'),
// ...
});
除非另有说明,否则所有选项都是可选的。