如何获取Bootstrap的固定导航栏样式？

Question

我已经玩了一段时间的Bootstrap。虽然我一直能让所有东西正常工作，但我正在考虑在即将到来的项目中使用它，该项目需要一个与Twitter Bootstrap文档中存在的固定侧边导航完全相同的内容。

我甚至尝试将这些类包含到我的<元素中。

<ul class="nav nav-list affix-top">

有没有精通 Bootstrap 的专家可以帮我弄清楚我需要添加什么才能使它们正常工作。此外，我一直无法像那边那样显示 chevrons（翻译：尖头符号），我的 chevrons 总是与文本混在一起。

- Ameen

Answer 1

您是否记得在JS中开启它？

他们使用：

$('#navbar').affix()

不过，您需要根据自己的需求更改选择器。

啊，现在您已经重新表述了您想要的内容！

他们还有一个叫做.bs-docs-sidenav的类来处理这个问题。

.bs-docs-sidenav {
    width: 228px;
    margin: 30px 0 0;
    padding: 0;
    background-color: #fff;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065);
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,.065);
    box-shadow: 0 1px 4px rgba(0,0,0,.065);
}

他们会给li元素添加一个名为active的类，然后在这里指定其行为：

.bs-docs-sidenav > .active > a {
    position: relative;
    z-index: 2;
    padding: 9px 15px;
    border: 0;
    text-shadow: 0 1px 0 rgba(0,0,0,.15);
    -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
    -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
    box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
}

简而言之，这不是Bootstrap的内置功能。

- Rich Bradshaw

---

谢谢，但这只是为了附加导航。我无法重新创建它们导航列表的视觉样式（(.nav-tabs stacked)接近，但没有当前选择突出显示）。不管怎样还是谢谢。 :) - Ameen

非常感谢。另外，我需要调整JS才能使“active”正常工作吗？实际上，我想在这篇文章中添加一张图片来传达我的真实意图，但似乎我还不能这样做。 - Ameen

我不确定，看起来好像不需要。猜测你可能还需要 scrollspy 使其高亮显示。没关系！你很快就会获得声望！ - Rich Bradshaw

什么会给LI添加active类？这是Bootstrap.affix模块的一部分吗？ - Nic Cottrell

Answer 2

我曾经遇到过同样的问题，直到在Bootstrap文档页面上找到了这个include，才让我的工作正常运行。

http://twitter.github.com/bootstrap/assets/js/application.js

!function ($) {

  $(function(){

    var $window = $(window)

    // Disable certain links in docs
    $('section [href^=#]').click(function (e) {
      e.preventDefault()
    })

    // side bar
    $('.bs-docs-sidenav').affix({
      offset: {
        top: function () { return $window.width() <= 980 ? 290 : 210 }
      , bottom: 270
      }
    })          
  })
}(window.jQuery)

因此，在复制和粘贴引导程序固定导航时添加代码 abode 应该可以解决这个问题。

- NICKO

Answer 3

要获得与github.io页面相同的效果，您需要添加完整的CSS。

<style type="text/css">

.bs-docs-sidenav > li > a {
    border: 1px solid #E5E5E5;
    /*display: block;*/
    /*margin: 0 0 -1px;*/
    padding: 8px 14px;
}

.bs-docs-sidenav > li > a {
    border: 1px solid #E5E5E5;
    /*display: block;*/
    /*margin: 0 0 -1px;*/
    padding: 8px 14px;
}

.bs-docs-sidenav > li:first-child > a {
    border-radius: 6px 6px 0 0;
}

.bs-docs-sidenav > li:last-child > a {
    border-radius: 0 0 6px 6px;
}

.bs-docs-sidenav > .active > a {
    border: 0 none;
    box-shadow: 1px 0 0 rgba(0, 0, 0, 0.1) inset, -1px 0 0 rgba(0, 0, 0, 0.1) inset;
    padding: 9px 15px;
    position: relative;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
    z-index: 2;
}

.bs-docs-sidenav .icon-chevron-right {
    float: right;
    margin-right: -6px;
    margin-top: 2px;
    opacity: 0.25;
}

.bs-docs-sidenav > li > a:hover {
    background-color: #F5F5F5;
}

.bs-docs-sidenav a:hover .icon-chevron-right {
    opacity: 0.5;
}

.bs-docs-sidenav .active .icon-chevron-right, .bs-docs-sidenav .active a:hover .icon-chevron-right {
    /*background-image: url("../img/glyphicons-halflings-white.png");*/
    opacity: 1;
}

.bbs-docs-sidenav.affix {
    top: 40px;
}

.bbs-docs-sidenav.affix-bottom {
    bottom: 270px;
    position: absolute;
    top: auto;
}

</style>

将此代码包含在您的模板或HTML中，并遵循Bootstrap侧边导航格式：

<div class="row">
      <div class="span3 bs-docs-sidebar">
        <ul class="nav nav-list bs-docs-sidenav">
          <li><a href="#overview"><i class="icon-chevron-right"></i> Overview</a></li>
          <li><a href="#transitions"><i class="icon-chevron-right"></i> Transitions</a></li>
          ....
        </ul>
      </div>
      <div class="span9">

      ....

      </div>
</div>

- Nikolay Christov