css - 如何获取 Bootstrap 的贴附导航列表样式？

Question

我一直在玩 Bootstrap 一段时间。虽然我总是能够让一切正常工作。我一直在为即将到来的项目考虑它，该项目需要一个附加的侧面导航，就像Twitter Bootstrap 文档中的那个一样。

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

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

这里的任何引导专家都可以帮助我弄清楚我需要添加什么才能使这些启动和工作。此外，我一直无法让 V 形完全像那里那样显示，我的 V 形总是与文本混在一起。

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);
}

然后他们添加一个名为activeli 的类，然后在此处指定其行为：

.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);
}

简而言之，这不是引导程序的内置功能。

Answer 2

我遇到了同样的问题，直到在引导文档页面上找到这个包含后才能让我的工作。

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)

因此，在复制和粘贴引导 afix 导航时添加代码住所应该可以解决这个问题。

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 中，并遵循引导程序侧导航格式：

<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>