Bootstrap 突出显示导航列表中的选定项目答案

【问题标题】：Bootstrap highlight selected item in a nav listBootstrap 突出显示导航列表中的选定项目
【发布时间】：2013-03-28 12:00:55
【问题描述】：

所以我使用 bootstrap 和 slim 来构建一些可导航的页面。我坚持在列表中突出显示所选项目，因为应用了“激活”类。我确实找到了一些名为 affix 或 scrollspy 的东西，但这些与我需要做的不同，即在页面之间导航。我有以下代码：

  .container-fluid
      .row-fluid
        .span2
          ul.nav.nav-list
            li.active = link_to 'Home', root_path
            li.divider
            li = link_to 'Openings', openings_path
            ...
        .span10
          ==yield

我相信这方面应该有一些最佳实践。任何建议将不胜感激。

【问题讨论】：

标签： ruby-on-rails-3 twitter-bootstrap slim-lang

【解决方案1】：

如果您正在动态创建页面，那么您通常可以使用您的框架将 active 类添加到菜单链接。我没有使用 ruby on rails 的经验，所以我不能给你太多帮助。

不过，还有很多其他方法可以实现相同的目标。例如，您可以将类添加到各种页面的 body 标签，调整导航列表项的 HTML，添加 CSS 样式，一切顺利。

HTML

<body class="home"> 
or  
<body class="contact">  

<ul class="nav nav-list">
  <li class="home"> <a href="#">home</li>
  <li class="contact"> <a href="#">contact</li>
</ul>

CSS

.home li.home a, .contact li.contact a{  
background-color#999;
color:white;
}

or if you want to go with the built-in Bootstrap active styling, 
something similar to this:  

.home li.home a, .contact li.contact a,
.home li.home a, .contact li.contact a:hover,
.home li.home a, .contact li.contact a:focus {  
color: #555555;
text-decoration: none;
background-color: #e5e5e5;
-webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
-moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
}

您可以将这种方法用于动态和静态网站。

希望这可以帮助您入门！

【讨论】：