Question

我一直在玩Bootstrap。虽然我一直都能使一切运转起来。我一直在考虑一个即将推出的项目，该项目需要一个附加的侧导航器，与Twitter Bootstrap doc.

中的导航器完全相同

我甚至试图将这些类包含在我的元素中。

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

然后他们将一个名为active的类添加到li中，然后在此指定其行为：

.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的内置函数。

Answer 2

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

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>

如何获得Bootstrap的附加导航列表样式？

3 个答案: