Bootstrap的文档子导航怎么做？答案

【问题标题】：How to do Bootstrap's documentation sub-navigation?Bootstrap的文档子导航怎么做？
【发布时间】：2012-07-06 19:53:16
【问题描述】：

我开始使用 Twitter-Bootstrap 来帮助我开始制作 Web 应用程序。到目前为止，我很喜欢我所看到的，但我想要一个类似于他们文档的子导航的东西。

例如，http://twitter.github.com/bootstrap/components.html 有一个子导航栏。我真的很喜欢当你滚动过去时它神奇地粘在顶部的方式。另外，我比普通的nav-pills 更喜欢它的样式

不过，我不能完全弄清楚是什么导致了这种效果。他们的javascript中的这条评论让我有点害怕：

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

【问题讨论】：

标签： javascript jquery css twitter-bootstrap

【解决方案1】：

虽然我没有使用 javascript，但我确实提取了他们的 CSS，在我拼凑的引导应用程序上创建了我自己的子导航栏。 .subnav 的相关 CSS 位于 http://twitter.github.com/bootstrap/assets/css/docs.css

他们的警告只是意味着 javascript 不是为公共消费而编写的，因此它可能没有经过充分测试或编写得很好。但是，这是用于修复滚动条上的子导航栏的 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-fixed 类并设置一个标志。否则，该类将被删除并将标志设置为 false

【讨论】：

Bootstrap 在 v2 中更改了其文档，因此不再包含 .subnav CSS。还有其他来源吗？