Подтвердить что ты не робот

Вертикальное меню в Bootstrap

Есть ли способ создать вертикальное меню (не выпадающее меню, полностью отдельное вертикальное меню на боковой панели), используя любой класс начальной загрузки? Я могу создать его с помощью моего css, но просто хочу знать, есть ли какой-либо встроенный класс для этого в bootstrap, или это можно сделать с помощью верхней панели с любым взломом?

4b9b3361

ОТВЕТЫ

Ответ 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>

Ответ 3

С помощью Bootstrap 2.0 вы можете присвоить вкладкам "стековый" класс, который делает их стек вертикально.

Ответ 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;
}

Ответ 6

Вы можете использовать закладки Bootstrap с bootstrap-verticaltabs. Это изменяет вкладки Bootstrap, чтобы обеспечить альтернативный вертикальный стиль. Таким образом вы можете использовать встроенные вкладки в начальной загрузке и получить вертикальное меню, которое вы ищете.

Вертикальные вкладки Bootstrap

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

Ответ 7

Ответственные классы полезности

Самый простой способ, который я могу представить, - иметь вертикальное левое меню И сворачивание Top Nav в вашем дизайне, а также прикрепить/использовать загрузочные файлы scss.

Затем просто добавьте классы скрытого телефона, планшета и т.д. (чтобы соответствовать) на ваш левый навигатор и скрытый рабочий стол и т.д. на верхнюю навигацию

см. http://twitter.github.com/bootstrap/scaffolding.html#responsive

играйте с этим и, надеюсь, он сможет сделать то, что вы хотите.

Ответ 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.

Ответ 9

Нет, не в текущем. Но вы можете взглянуть на следующую версию, загрузив ее из github. У этого есть вертикальные таблетки и вкладки. Может быть, это поможет? (имейте в виду, он находится в стадии разработки tho)

Ответ 10

Вы можете использовать класс боковой панели для визуализации элементов списка по вертикали. Не совсем меню, но близко:

http://twitter.github.com/bootstrap/examples/fluid.html

Ответ 12

Попробуйте выполнить следующее (не требуется custom.css):

<div class="col-md-2">
    <nav>
        <ul class="nav">
            <li><a href="#">Link1</a></li>
            <li><a href="#">Link2</a></li>
            <li><a href="#">Link3</a></li>
            <li><a href="#">Link4</a></li>
        </ul>
    </nav>
</div>