use*_*654 4 html css navigation sidebar twitter-bootstrap-3
我想构建一个侧边栏导航,其行为完全类似于bootsrap组件页面,区别在于它应该出现在左侧: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>
通过数据属性
最简单的.
创建<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'),
// ...
});
除非另有说明,否则所有选项均为可选项
| 归档时间： |
|
| 查看次数： |
4340 次 |
| 最近记录： |