logo标签列表

Bootstrap中的垂直菜单

csstwitter-bootstrap
31

是否有一种方法可以通过使用任何bootstrap类来创建一个垂直菜单（不是下拉式菜单，而是完全分离的侧边栏垂直菜单）？ 我可以使用自己的css创建一个，但只想知道是否在Bootstrap中有任何内置类可用于此，或者是否可以使用顶部栏进行任何技巧性操作来实现此目标？

我认为默认情况下没有这个功能。如果有的话，他们会在文档中列出来的。 - Seth
我觉得你可以黑掉顶栏来实现它。但是让我先检查一下。 - Gautam
1
请看http://jsfiddle.net/luismruiz/YRVev/，我认为你会找到解决方案。 - Md. Sahadat Hossain
12个回答
32

这个问题现在很久了。

但是如果有人在这里查看，当前版本的技巧是使用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>
13
6
使用 Bootstrap 2.0，您可以给选项卡添加 "stackable" 类，这将使它们垂直堆叠。
3
3

通过一些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;
}
1

响应式实用类

我能想到的最简单的方法是在设计中使用垂直左侧菜单和可折叠的顶部导航，并附加/使用Bootstrap的响应式CSS。

然后，只需将手机、平板电脑等类（适合您的需求）添加到左侧导航栏中，将桌面等类添加到顶部导航栏中。

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

尝试一下，希望它能够满足您的需求。

糟糕..当然，你问题的重点是 - 堆叠式标签/药片 - Gary
1
1
这还不太像我想要的，但我通过在最左边的两个区域中堆叠导航标签实现了类似的效果。这是我的应用程序的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个 span，但从页面的视图中，它具有完整的12个 span。
当前显示页面对应的按钮呈活动状态，其他按钮呈非活动状态。在文件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被包含，因为在文件 app/assets/stylesheets/application.css 中有一行*= require_tree .。
0
不，当前版本没有。但您可以从Github下载下一个版本进行查看。它有垂直标签和选项卡。也许这会有所帮助？（请注意，它正在建设中）
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接