语义引导导航栏 - 青菜

使用自助-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”的navbar，并且不改变htm l - 例如语义？

来源

2015-07-18 kobame

你是什么意思“品牌标志”？引导类名称？ – ramesh

这个问题还不清楚，你想达到什么目的？代码中没有'brand-logo'。请包含更多相关的代码，并更好地解释您希望输出的内容。 –

@TinyGiant问题不是很好（缺少OP已经尝试过的内容），但是如果有人知道twitter-bootstrap，他知道导航栏中的“品牌”是什么。 – jm666

如果你只想要的风格，只需使用所需样式，比如：

.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得到一个右对齐的反向导航栏 - 所有样式就像在引导。

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

对于li > a.active部分：我只是复制它直接从引导，萨斯，它是必要的，因为引导使用active为li元素，而不是为a元素，所以您需要的样式的a.active。

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

“品牌”将被自动排除，因为它不在标记中。

来源

2015-07-19 06:28:36 jm666

正是我在找什么。 – kobame

-1

我想我们需要看到更多的代码，但如果内存服务您使用标准的Twitter Bootstrap菜单。如果是这样，您可以使用该类来设置它的样式，并且不显示代码中的品牌标识。如果你可以从HTML去除品牌标志会更容易

来源

2015-07-19 00:31:25

语义引导导航栏 - 青菜

回答

相关问题