如何获得 Bootstrap 固定导航列表样式？

Posted 2023-04-12

【中文标题】如何获得 Bootstrap 固定导航列表样式？

【英文标题】：How to get Bootstrap's affixed navlist style?

【发布时间】：2012-10-04 13:31:43

【问题描述】：

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

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

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

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

【参考方案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);

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

【讨论】：

谢谢，但这只是为了贴上导航。我无法重新创建其导航列表的视觉样式（（堆叠的.nav-tabs）接近，但没有当前的选择突出显示）。不管怎么说，还是要谢谢你。 :)

非常感谢。另外，我是否需要修改 JS 才能使“活动”正常工作？另外，我实际上想在这篇文章中添加一张图片来传达我的实际意图，似乎我还不能这样做。

我不确定，看起来不像。猜猜你可能还需要 scrollspy 来突出显示它。没关系！您很快就会获得声誉！

是什么将active 类添加到 LI 中？这是 bootstrap.affix 模块的一部分吗？

【参考方案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 导航时添加代码库应该可以解决这个问题。

【参考方案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>