语义 bootstrap 导航栏 - sass

Question

起点：

使用bootstrap-sass（罗盘）
具有以下 html-标记（无法更改）

<div class="some">
  <ul>
    <li><a href="#" class="inactive">Item1</a></li>
    <li><a href="#" class="active">Item2</a></li>
    <li><a href="#" class="inactive">Item3</a></li>
  </ul>
</div>

可以将上面的样式（使用 sass-bootstrap）作为没有 "brand-logo" 且不更改 html 的导航栏 - 例如语义上？

Answer 1

我认为我们需要查看更多代码，但如果没记错的话，您正在使用标准的 Twitter Bootstrap 菜单。如果是这样，您 'could' 使用 class 设置样式并显示 none 代码中的品牌徽标。如果您可以从 HTML 中删除品牌徽标，那就更容易了

Answer 2

如果您只想要样式，只需使用想要的样式，例如：

.some {
    @extend .navbar;
    @extend .navbar-inverse;
}
.some {
    ul {
        @extend .nav;
        @extend .navbar-nav;
        @extend .navbar-right;
        > li a.active {
            &,
            &:hover,
            &:focus {
                color: $navbar-inverse-link-active-color;
                background-color: $navbar-inverse-link-active-bg;
            }
        }
    }
}

例如以上将为您的 div/ul 设置样式以获得右对齐的反向导航栏 - 所有样式都类似于 bootstrap.

我没有测试 javascript - 它可能会失败，因为它会搜索 navbar - 但上面的简单样式有效。

对于li > a.active部分：我只是直接从bootstrap-sass复制过来的，因为bootstrap使用了active对于 li 元素而不是 a 元素，因此您需要准确设置 a.active.

的样式

此外，它并没有折叠成按钮，只是将其布局更改为垂直列表。

"brand" 将被自动排除，因为它不在标记中。

语义 bootstrap 导航栏 - sass

Semantic bootstrap navbar - sass

css

twitter-bootstrap

sass

compass-sass