如何做Bootstrap的文檔子導航？

我開始進入Twitter-Bootstrap以幫助我開始製作Web應用程序。我喜歡迄今爲止所看到的，但我希望有一個類似於他們的文檔的subnavigation的東西。例如，http://twitter.github.com/bootstrap/components.html有一個子導航欄。我真的很喜歡它滾動過去時奇蹟般地粘在頂端的方式。此外，我喜歡的造型比普通nav-pills如何做Bootstrap的文檔子導航？

我不能完全弄清楚什麼都會導致這種效果。而且我有點害怕走在他們的JavaScript本評論：

// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT 
// IT'S ALL JUST JUNK FOR OUR DOCS!

來源

2012-07-06 Earlz

雖然我沒有使用的JavaScript，我沒有拉他們的CSS對自舉程序，我扔在一起，創建自己的subnav吧。 .subnav的相關CSS在http://twitter.github.com/bootstrap/assets/css/docs.css

他們的警告只意味着javascript不是爲公共消費編寫的，因此它可能沒有完全測試或寫得很好。然而，這是用於在滾動固定subnav欄的JavaScript：

// fix sub nav on scroll 
var $win = $(window) 
    , $nav = $('.subnav') 
    , navTop = $('.subnav').length && $('.subnav').offset().top - 40 
    , isFixed = 0 

processScroll() 

// hack sad times - holdover until rewrite for 2.1 
$nav.on('click', function() { 
    if (!isFixed) setTimeout(function() { $win.scrollTop($win.scrollTop() - 47) }, 10) 
}) 

$win.on('scroll', processScroll) 

function processScroll() { 
    var i, scrollTop = $win.scrollTop() 
    if (scrollTop >= navTop && !isFixed) { 
    isFixed = 1 
    $nav.addClass('subnav-fixed') 
    } else if (scrollTop <= navTop && isFixed) { 
    isFixed = 0 
    $nav.removeClass('subnav-fixed') 
    } 
}

基本上，當窗口滾動，這個代碼進行檢查以查看是否subnav條已經到達窗口的頂部;如果有，則添加subnav-fixed類並設置一個標誌。否則，該類將被刪除並將該標誌設置爲false

來源

2012-07-06 20:00:05 jackwanders

Bootstrap在v2中更改了其文檔，因此不再包含.subnav CSS。任何其他來源？ – jabbett 2013-02-06 14:22:14

如何做Bootstrap的文檔子導航？

回答

相關問題