Question

有没有办法通过使用任何引导类来创建垂直菜单（不是下拉列表，侧栏上完全独立的垂直菜单）？我可以使用我的css创建一个，但只是想知道在引导程序中是否有任何内置类，或者可以使用任何hack的顶栏来完成？

Answer 1

这个问题现在已经过时了。

但如果有人在这里看到当前版本中的技巧就是使用nav-stack类，如下所示：

<nav>
  <ul class="nav nav-pills nav-stacked span2">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Answer 2

Twitter Bootstrap 2.0的“nav nav-list”类可以方便地构建侧栏。

你可以看到很多文档 http://www.w3resource.com/twitter-bootstrap/nav-tabs-and-pills-tutorial.php

Answer 3

使用Bootstrap 2.0，您可以为标签提供“可堆叠”类，这使它们可以垂直堆叠。

Answer 4

通过一些CSS覆盖，我发现手风琴/折叠插件可以很好地用作侧边栏垂直菜单。这是我用于白色背景菜单的一些覆盖的小样本。手风琴放在一个部分容器内：

.accordion-group
{
    margin-bottom: 1px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    border-bottom: 1px solid #E5E5E5;
    border-top: none;
    border-left: none;
    border-right: none;
}

.accordion-heading:hover
{
    background-color: #FFFAD9;
}

Answer 5

这是基于Bootstrap的垂直菜单 http://www.okvee.net/articles/okvee-bootstrap-sidebar-menu 它也支持响应式设计。

Answer 6

您可以使用bootstrap-verticaltabs的Bootstrap标签。这会修改Bootstrap的选项卡以提供另一种垂直样式。这样，您可以使用bootstrap中的内置选项卡，并获取您正在寻找的垂直菜单。

Bootstrap Vertical Tabs

https://github.com/entropillc/bootstrap-verticaltabs

Answer 7

响应式实用程序类

我能想到的最简单方法是在设计中使用垂直左侧菜单和折叠Top Nav，并附加/使用bootstraps响应式css。

然后只需将隐藏的手机，平板电脑等类（适合）添加到左侧导航和隐藏桌面等顶部导航

请参阅：http://twitter.github.com/bootstrap/scaffolding.html#responsive

玩弄它，希望它应该能够做你想做的事情

Answer 8

这看起来并不像我想要的，但我完成了类似的事情这是通过在最左边的两个跨度中堆叠导航丸。这就是我的应用程序 app/views/layouts/application.html.erb文件看起来像：

<!DOCTYPE html>
...
  <body>
    <!-- top navigation bar -->
    <div class="navbar navbar-fixed-top">
       ...
    </div>
    <div class="container-fluid">
      <!-- the navigation buttons bar on the left -->
      <div class="sidebar-nav span2"> <!-- we reserve 2 spans out of 12 for this -->
        <ul class="nav nav-pills nav-stacked">
          <li class="<%= current_page?(root_path) ? 'active' : 'inactive' %>">
            <%= link_to "Home", root_path %>
          </li>
          <li class="<%= current_page?(section_a_path) ? 'active' : 'inactive' %>">
            <%= link_to "Section A", section_a_path %>
          </li>
          <li class="<%= current_page?(section_b_path) ? 'active' : 'inactive' %>">
            <%= link_to "Section B", section_b_path %>
          </li>
        </ul>
      </div>
      <div class="container-fluid span10"> <!-- use the remaining 10 spans -->
        <%= flash_messages %>
        <%= yield :layout %> <!-- the content page sees a full 12 spans -->
      </div>
    </div> <!-- class="container-fluid" -->
    ...
  </body>
</html>

现在堆叠的药丸出现在导航栏下方的左上角。当用户点击时其中之一，相应的页面加载。从的角度来看 application.html.erb，该页面有10个最右边的可用空间，但从页面的角度来看，它有完整的12个跨度。

与当前正在显示的页面对应的按钮呈现为活跃，其他人不活跃。指定活动和非活动的颜色文件app/assets/stylesheets/custom.css.scss中的按钮（在本例中为还定义了禁用状态的颜色）：

@import "bootstrap";
...
$spray:       #81c9e2;
$grey_light:  #dddddd;
...
.nav-pills {
    .inactive > a, .inactive > a:hover {
        background-color: $spray;
    }
    .disabled > a, .disabled > a:hover {
        background-color: $grey_light;
    }
}

未定义活动药丸的颜色，因此它显示为默认的蓝色。

包含文件custom.css.scss，原因是*= require_tree .行档案app/assets/stylesheets/application.css。