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

Question

我一直在玩Bootstrap一段时间.虽然我一直都能使一切运转起来.我一直在考虑一个即将推出的项目,它需要一个附加的侧导航器,就像Twitter Bootstrap doc中的那个一样.

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

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

这里的任何引导程序都可以帮助我弄清楚我需要添加什么来实现这些功能.此外,我一直无法让人字形显示与那里完全一样,我的人字形总是与文本一起被捣碎.

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

简而言之,这不是bootstrap的内置功能.