Bootstrap вертикальное меню многоуровневое: Bootstrap многоуровневое меню или как реализовать горизонтальную панель

Leave a Comment / Разное / By /

Содержание

Bootstrap 4 — Navbar (основное меню)

Статья, в которой рассмотрим, как с помощью компонента Navbar создать вертикальное схлопывающееся меню для сайта.

Как с помощью Navbar создать основное вертикальное меню для сайта

Для создания основного вертикального меню необходимо:

  • подключить на страницу CSS код, который будет определять вид меню на больших экранах;
  • определённым образом организовать HTML код, который будет задавать нужное положение элементов.

HTML и CSS код вертикального меню для сайте на базе Navbar:


...
<!-- CSS -->
<style>
@media (min-width: 768px) {
  .navbar-container {
    position: sticky;
    top: 0;
    overflow-y: auto;
    height: 100vh;
  }
  .navbar-container .navbar {
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: nowrap;
    flex-direction: column;
    height: 100%;
  }
  . navbar-container .navbar-collapse {
    align-items: flex-start;
  }
  .navbar-container .nav {
    flex-direction: column;
    flex-wrap: nowrap;
  }
  .navbar-container .navbar-nav {
    flex-direction: column !important;
  }
}
</style>
...
<!-- HTML -->
<body>
  <div>
    <div>
      <div>
        <!-- Вертикальное меню -->
        <nav>
          <a href="#">Navbar</a>
          <button type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span></span>
          </button>
          <div>
            <!-- Пункты вертикального меню -->
            <ul>
              <li>
              <a href="#link-1">Ссылка 1</a>
              </li>
              <li>
              <a href="#link-2">Ссылка 2</a>
              </li>
              <li>
              <a href="#link-3">Ссылка 3</a>
              </li>
              <li>
              <a href="#link-4">Ссылка 4</a>
              </li>
              <li>
              <a href="#link-5">Ссылка 5</a>
              </li>
            </ul>
          </div>
        </nav>
      </div>
      <div>
        <!-- Основной контент страницы  -->
        .
 
  ..
      </div>
    </div>
  </div>
</body>
...

Демо меню

Как изменить расположение кнопки «гамбургер»

Например, для того чтобы расположить кнопку «гамбургер» в левой части меню, достаточно её просто расположить до бренда:


<nav>
  <button type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span></span>
  </button>  
  <a href="#">Navbar</a>          
  ...

Например, для того чтобы кнопку поместить по центру, оставшегося после бренда пространства в меню, к ней необходимо добавить классы ml-auto и mr-auto:


...
<button type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
. ..

Как выровнять пункты в мобильном виде меню

Выравнивание пунктов в мобильном представлении меню выполняется посредством добавления класса text-right или text-center к элементу с классом navbar-nav:


...
<!-- Выравнивание пунктов по правому краю -->
<ul>
...


...
<!-- Выравнивание пунктов по центру -->
<ul>
...

Компоненты Bootstrap

Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core

Последнее обновление: 31.10.2015

Bootstrap имеет ряд компонентов, которые не сводятся к стандартным кнопкам или текстовым полям, а представляют более сложные элементы. Полный список компонентов Bootstrap можно найти на официальной странице проекта http://getbootstrap.com/components/. Рассмотрим вкратце некоторые из них.

Навигационные панели

Первый компонент Bootstrap, с которым мы сталкиваемся в проекте, это навигационная панель. Данный компонент располагается на мастер-странице _Layout:


<div>
        <div>
            <div>
                <button type="button" data-toggle="collapse" data-target=".navbar-collapse">
                    <span></span>
                    <span></span>
                    <span></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", null, new { @class = "navbar-brand" })
            </div>
            <div>
                <ul>
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>

И даже если мы сузим границы веб-браузера или запустим сайт на мобильном устройстве, то мы увидим, что панель навигации остается достаточно функциональной:

Компонент представляет класс navbar

. Чтобы панель была фиксирована по верху страницы, используется также класс navbar-fixed-top. Если бы мы, наоборот, захотели фиксировать панель по низу, то в этом случае использовали бы класс navbar-fixed-bottom

И также в объявлении блока навигации используется класс navbar-inverse, который инвертирует цвета по умолчанию. Вместо этого класса мы могли бы использовать navbar-default, тогда в этом случае у нас бы было меню стандартных светлых тонов.

Для создания ссылок навигации применяется класс nav. Bootstrap представляет несколько классов для оформления ссылок навигации. По умолчанию используется класс navbar-nav, но мы можем использовать и другие возможности.

Для создания навигации по типу вкладок применяется класс nav-tabs. Так, например следующее меню:


<ul>
    <li class ="active">@Html.ActionLink("Home", "Index", "Home")</li>
    <li>@Html.ActionLink("About", "About", "Home")</li>
    <li>@Html.
 
 
 ActionLink("Contact", "Contact", "Home")</li>
</ul>

даст такой эффект:

Еще один вариант создания панели ссылок представляет класс nav-pills:


<ul>
    <li class ="active">@Html.ActionLink("Home", "Index", "Home")</li>
    <li>@Html.ActionLink("About", "About", "Home")</li>
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

А комбинируя классы nav-pills и nav-stacked, мы можем создать вертикальное меню:


<ul>
	...............................
</ul>
Пагинация

Класс pagination позволяет создать панель ссылок в виде постраничной навигации:


<ul>
  <li><a href="#">«</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">»</a></li>
</ul>
Заглавия

Для создания ссылок заголовков применяется класс breadcrumb:


<ul>
    <li class ="active">@Html. ActionLink("Home", "Index", "Home")</li>
    <li>@Html.ActionLink("About", "About", "Home")</li>
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

Кнопки

Для создания кнопок Bootstrap имеет класс btn. Как правило, кнопки офрмляются в группу с помощью класса btn-group:


<div role="group">
  <button type="button">Left</button>
  <button type="button">Middle</button>
  <button type="button">Right</button>
</div>
Кнопка с выпадающим списком

Для создания выпадающего списка по примеру элемента нам надо использовать кнопку вместе со списком, который должен иметь класс dropdown-menu:


<div>
    <button type="button" data-toggle="dropdown">
        Язык программирования <span></span>
    </button>
    <ul role="menu">
        <li><a href="#">JavaScript</a></li>
        <li><a href="#">C#</a></li>
        <li><a href="#">VB. NET</a></li>
        <li></li>
        <li><a href="#">Java</a></li>
    </ul>
</div>

Метки

Для оформления кусков текста в качестве меток мы можем использовать класс label. Также мы можем использовать дополнительные классы меток, чтобы конкретизировать тип сообщения:


<span>Default</span>
<span>Primary</span>
<span>Success</span>
<span>Info</span>
<span>Warning</span>
<span>Danger</span>

Похожую функциональность предлагает класс alert:


<div>Задача успешно завершена</div>
<div>Дополнительная информация</div>
<div>Внимание!</div>
<div>Опасно!</div>

Это только некоторые компоненты, которые предлагает Bootstrap. Но уже по ним можно увидеть, что Bootstrap довольно гибок, и даже сложные по структуре компоненты может легко адаптировать и приспособить под конкретные устройства.

НазадСодержаниеВперед

Навбар · Начальная загрузка

Документация и примеры для мощного, отзывчивого навигационного заголовка Bootstrap, панели навигации. Включает поддержку фирменного стиля, навигации и многого другого, включая поддержку нашего плагина для сворачивания.

Как это работает

Вот что вам нужно знать перед началом работы с панелью навигации:

  • Для панелей навигации требуется упаковка .navbar с .navbar-expand{-sm|-md|-lg|-xl} для адаптивного свертывания и классов цветовых схем.
  • Панели навигации и их содержимое по умолчанию изменчивы. Используйте дополнительные контейнеры, чтобы ограничить их ширину по горизонтали.
  • Используйте наши служебные классы spacing и flex для управления интервалами и выравниванием в панелях навигации.
  • Панели навигации по умолчанию реагируют, но вы можете легко изменить их, чтобы изменить это. Отзывчивое поведение зависит от нашего подключаемого модуля Collapse JavaScript.
  • Панели навигации по умолчанию скрыты при печати. Заставьте их распечатать, добавив .d-print до .navbar . См. служебный класс дисплея.
  • Обеспечьте доступность с помощью элемента

Прочтите пример и список поддерживаемых подкомпонентов.

Поддерживаемый контент

Navbars поставляются со встроенной поддержкой нескольких подкомпонентов. При необходимости выберите из следующего:

  • .navbar-brand для названия вашей компании, продукта или проекта.
  • .navbar-nav для полноразмерной и облегченной навигации (включая поддержку раскрывающихся списков).
  • .navbar-toggler для использования с нашим подключаемым модулем сворачивания и другими функциями переключения навигации.
  • .form-inline для любых элементов управления и действий формы.
  • .navbar-text для добавления вертикально центрированных строк текста.
  • .collapse.navbar-collapse для группировки и скрытия содержимого панели навигации родительской точкой останова.

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

 <навигация>
  Панель навигации

В этом примере используются служебные классы цвета ( bg-light ) и интервала ( my-2 , my-lg-0 , mr-sm-0 , my-sm-0 ).

Марка

.navbar-brand можно применить к большинству элементов, но якорь работает лучше всего, поскольку для некоторых элементов могут потребоваться служебные классы или пользовательские стили.

 
<навигация>
  Панель навигации


<навигация>
  Панель навигации

Добавление изображений в .navbar-brand , скорее всего, всегда потребует пользовательских стилей или утилит для правильного размера. Вот несколько примеров для демонстрации.

 
<навигация>
  <а href="#">
    
  
 
 
<навигация>
  <а href="#">
    
    Начальная загрузка

Навигация

Навигационные ссылки

Navbar основаны на наших опциях . nav с собственным классом модификатора и требуют использования классов переключателей для правильного адаптивного стиля. Навигация в навигационных панелях также будет увеличиваться, чтобы занимать как можно больше горизонтального пространства , чтобы обеспечить надежное выравнивание содержимого вашей навигационной панели.

Активные состояния — с .active — для указания того, что текущая страница может быть применена непосредственно к .nav-link или их непосредственному родителю .nav-элемент с.

 <навигация>
  Панель навигации

А поскольку мы используем классы для навигации, вы можете полностью отказаться от подхода, основанного на списках, если хотите.

 <навигация>
  Панель навигации