Как создать навигацию в Bootstrap 5?

Компонент nav в Bootstrap используется для создания списка ссылок с разными стилями. В основном ссылки списка используются как навигационное меню. В этом руководстве мы рассмотрим различные стили ссылок, которые можно создать с помощью компонента навигации Bootstrap 5.

Учебное пособие по Bootstrap 5 Navs

Создание основных навигационных ссылок
Вертикальная навигация
Вкладки с навигацией
Добавление таблеток в навигатор
Навигация с таблетками и выравнивание по ширине
Отзывчивая навигация
Навигация с раскрывающимся меню
Навигатор с вертикальной вкладкой и таблеткой

1. Основные навигационные ссылки

Стандартная и базовая навигация будут выглядеть следующим образом:

Код для базовой навигации приведен ниже:

<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="https://www.webnots.com/bootstrap-nav-tutorial/#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.webnots.com/bootstrap-nav-tutorial/#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.webnots.com/bootstrap-nav-tutorial/#">Link 3</a>
</li>
</ul>

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

Вся навигация представляет собой неупорядоченный список с использованием класса «.nav».
Каждый тег
представляет элемент навигации с использованием класса «.nav-item».
Внутри тега
тег привязки используется для создания ссылки на фактический текст с использованием класса «.nav-link».

Содержимое навигационной панели можно выровнять по центру и вправо, используя дополнительные классы в теге

, как показано ниже:

- - - — заполнить всю горизонтальную ширину, чтобы каждая навигационная ссылка имела одинаковую ширину.
      2. Вертикальная навигация
      Вы можете использовать класс «flex-column», чтобы выровнять весь контент навигации по вертикальным ссылкам, а не по горизонтали, как показано ниже:
      А код для создания компонента вертикальной навигации приведен ниже:
      <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link active" href="https://www.webnots.com/bootstrap-nav-tutorial/#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.webnots.com/bootstrap-nav-tutorial/#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.webnots.com/bootstrap-nav-tutorial/#">Link 3</a> </li> </ul>
      3. Создание вкладок с помощью Nav
      Вы также можете легко создавать содержимое с вкладками, используя класс «.nav-tabs» внутри тега
      , как показано ниже:
      <ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" href="https://www.webnots.com/bootstrap-nav-tutorial/#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.webnots.com/bootstrap-nav-tutorial/#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.webnots.com/bootstrap-nav-tutorial/#">Link 3</a> </li> </ul>
      Класс «.nav-tabs» преобразует навигацию по умолчанию в вкладку, как показано ниже:
      4. Добавление таблеток в Nav
      Вы можете добавить к ссылкам таблетки, коробку с основным цветом фона, используя класс «.nav-pills».
      <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="https://www.webnots.com/bootstrap-nav-tutorial/#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.webnots.com/bootstrap-nav-tutorial/#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.webnots.com/bootstrap-nav-tutorial/#">Link 3</a> </li> </ul>
      Результат в браузере будет выглядеть следующим образом:
      5. Навигатор с таблетками и обоснованным выравниванием
      Если вы хотите, чтобы элементы навигации были выровнены по ширине, добавьте класс «.nav-fill», как показано ниже:
      <ul class="nav nav-pills nav-fill"> <li class="nav-item"> <a class="nav-link active" href="https://www.webnots.com/bootstrap-nav-tutorial/#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.webnots.com/bootstrap-nav-tutorial/#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.webnots.com/bootstrap-nav-tutorial/#">Link 3</a> </li> </ul>
      Это даст следующий результат:
      6. Адаптивный компонент навигации
      На данный момент созданные компоненты навигации не реагируют, и вам следует добавить дополнительные служебные классы flexbox, чтобы сделать его отзывчивым. Например, мы можем сделать его гибким для устройств среднего размера, используя класс «.flex-md-row», как показано ниже:
      <ul class="nav nav-pills flex-column flex-md-row"> <li class="nav-item"> <a class="nav-link active" href="https://www.webnots.com/bootstrap-nav-tutorial/#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.webnots.com/bootstrap-nav-tutorial/#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.webnots.com/bootstrap-nav-tutorial/#">Link 3</a> </li> </ul>
      7. Добавление раскрывающегося меню в Nav
      Используйте класс «.dropdown», чтобы вставить раскрывающийся список, а затем элементы меню, используя классы «.dropdown-menu» и «.dropdown-item».
      <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="https://www.webnots.com/bootstrap-nav-tutorial/#">Link 1</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="https://www.webnots.com/bootstrap-nav-tutorial/#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a> <div class="dropdown-menu"> <a class="dropdown-item" href="https://www.webnots.com/bootstrap-nav-tutorial/#">Link 2</a> <a class="dropdown-item" href="https://www.webnots.com/bootstrap-nav-tutorial/#">Link 3</a> <a class="dropdown-item" href="https://www.webnots.com/bootstrap-nav-tutorial/#">Link 4</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="https://www.webnots.com/bootstrap-nav-tutorial/#">Link 5</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="https://www.webnots.com/bootstrap-nav-tutorial/#">Link 6</a> </li> </ul>
      Выпадающий компонент навигации с таблетками будет выглядеть следующим образом:
      8. Навигация с вертикальными вкладками и таблетками.
      Вы также можете использовать макет сетки и создавать контент с вертикальными вкладками, используя компонент навигации с таблетками.
      <div class="row"> <div class="col-3"> <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist"> <a class="nav-link active" id="v-pills-tab1-tab" data-toggle="pill" href="https://www.webnots.com/bootstrap-nav-tutorial/#v-pills-tab1" role="tab" aria-controls="v-pills-tab1" aria-expanded="true">TAB 1</a> <a class="nav-link" id="v-pills-tab2-tab" data-toggle="pill" href="#v-pills-tab2" role="tab" aria-controls="v-pills-tab2" aria-expanded="true">TAB 2</a> <a class="nav-link" id="v-pills-tab3-tab" data-toggle="pill" href="#v-pills-tab3" role="tab" aria-controls="v-pills-tab3" aria-expanded="true">TAB 3</a> <a class="nav-link" id="v-pills-tab4-tab" data-toggle="pill" href="#v-pills-tab4" role="tab" aria-controls="v-pills-tab4" aria-expanded="true">TAB 4</a> </div> </div> <div class="col-9"> <div class="tab-content" id="v-pills-tabContent"> <div class="tab-pane fade show active" id="v-pills-tab1" role="tabpanel" aria-labelledby="v-pills-home-tab">Here is a content for tab 1.</div> <div class="tab-pane fade" id="v-pills-tab2" role="tabpanel" aria-labelledby="v-pills-tab2-tab">Here is a content for tab 2.</div> <div class="tab-pane fade" id="v-pills-tab3" role="tabpanel" aria-labelledby="v-pills-tab3-tab">Here is a content for tab 3.</div> <div class="tab-pane fade" id="v-pills-tab4" role="tabpanel" aria-labelledby="v-pills-tab4-tab">Here is a content for tab 4.</div> </div> </div> </div>
      Это приведет к следующему результату в браузере:
      Ознакомьтесь с руководством по компоненту панели навигации Bootstrap, чтобы узнать больше о панели навигации.
      Изучите Bootstrap 5 (Индекс)