引導側欄導航像組件網站

我想建一個側欄導航是behavaves酷似與差異bootsrap組件頁面，它應該出現在左側上： http://getbootstrap.com/components/引導側欄導航像組件網站

要求：

收起
設置活動類/展開兒童

是否有預定義的方式來實現這一點？

來源

2016-04-29 user3631654

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

你可以找到引導該網頁上使用內容的確切的表。

使用

在正常引導設置的頂部（見他們的入門指南），您將需要包括的內容樣式表和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

：由於該插件利用引導的Scrollspy插件，你還需要一對夫婦的屬性添加到<body>。

如果您希望創建您的導航元素的另一種方式（如單頁的應用程序內），你可以傳遞一個jQuery對象爲Toc.init().

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

見Scrollspy文檔，瞭解更多有關初始化該插件。

選項

當調用Toc.init()，則可以通過在jQuery對象爲<nav>元件（如上所示），或一個選擇對象：

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

所有選項是可選的，除非另有說明。

來源

2016-04-29 13:14:57 Randy

僅供參考。來自文檔的JS示例是錯誤的：https：// github。com/afeld/bootstrap-toc/issues/18 – user3631654

@ user3631654您可以用正確的信息更新我的問題，我現在做了以供將來參考。 – Randy

引導側欄導航像組件網站

回答

相關問題