TechBlogSD - Все для WordPress і WEB розробки
WEB і WordPress інструкції, новини, огляди тем та плагінів

Як створити навігацію Bootstrap 5?

1

Компонент nav у Bootstrap використовується для створення списку посилань з різними стилями. В основному посилання на список використовуються як навігаційне меню. У цьому підручнику давайте розглянемо різні стилі посилань, які можна створити за допомогою компонента навігації Bootstrap 5.

Підручник з Bootstrap 5 Navs

  1. Створення базових навігаційних посилань
  2. Вертикальна ні
  3. Вкладки з навігацією
  4. Додавання таблеток у nav
  5. Нав з таблетками та виправданим вирівнюванням
  6. Адаптивна нав
  7. Навігація з випадаючим меню
  8. Нав з вертикальною вкладкою та таблеткою

1 Основні навігаційні посилання

Стандартна та основна навігація виглядатиме так:

Код для базової навігації такий:

<ul class="nav"> <li class="nav-item"> <a class="nav-link active" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul>

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

  • Вся навігація – це невпорядкований список із використанням класу “.nav".
  • Кожен
  • тег представляє елемент навігації за допомогою класу “.nav-item”.
  • Всередині
  • тег прив’язки використовується для створення посилання на фактичний текст за допомогою класу “.nav-link”.

Вміст навігації можна вирівняти по центру і вправо за допомогою додаткових класів всередині

тег, як показано нижче:

  • <ul class = “nav justify-content-center”>-для вирівнювання по центру.
  • <ul class = “nav justify-content-end”>-для вирівнювання по кінці або по правому краю.
  • <ul class = “nav nav-fill”>-заповнити всю горизонтальну ширину.
  • <ul class = “nav nav-justified”>-заповнення повної горизонтальної ширини, при цьому кожна навігаційна посилання має однакову ширину.

2 Вертикальна нав

Ви можете використовувати клас “flex-column”, щоб зробити весь вміст навігації вирівняним за вертикальними посиланнями замість горизонтальних, як показано нижче:

А код для створення вертикального компонента навігації нижче:

<ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link active" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul>

3 Створення вкладок за допомогою Nav

Ви також можете легко створювати вміст із вкладками за допомогою класу “.nav-tabs” всередині

тег, як показано нижче:

<ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul>

Клас “.nav-tabs” перетворить навігацію за умовчанням на вкладку, як показано нижче:

Як створити навігацію Bootstrap 5?

4 Додавання таблеток у нав

Ви можете додавати таблетки, коробки з основним кольором фону, до посилань, використовуючи клас ".nav-pills".

<ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul>

Результат у браузері буде виглядати так:

Як створити навігацію Bootstrap 5?

5 Nav з таблетками та виправданим вирівнюванням

Якщо ви хочете, щоб елементи навігації були вирівняні на всю ширину, додайте клас ".nav-fill", як показано нижче:

<ul class="nav nav-pills nav-fill"> <li class="nav-item"> <a class="nav-link active" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul>

Це дасть такий результат:

Як створити навігацію Bootstrap 5?

6 Чуйний компонент Nav

Наразі створені компоненти nav не реагують, і ви повинні додати додаткові класи утиліт flexbox, щоб зробити їх чуйними. Наприклад, ми можемо зробити його гнучким із пристроїв середнього розміру, використовуючи клас “.flex-md-row”, як показано нижче:

<ul class="nav nav-pills flex-column flex-md-row"> <li class="nav-item"> <a class="nav-link active" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">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="#">Link 1</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> <a class="dropdown-item" href="#">Link 4</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Link 5</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 6</a> </li> </ul>

Випадаючий компонент навігації з таблетками буде виглядати так:

Як створити навігацію Bootstrap 5?

8 Nav з вертикальними вкладками та таблетками

Ви також можете використовувати макет сітки та створювати вертикальний вміст із вкладками за допомогою компонента навігації з таблетками.

<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="#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 5?

Перегляньте посібник із перевірки компонента панелі навігації Bootstrap,  щоб дізнатися більше про панель навігації.


Вивчити Bootstrap 5 (індекс )


Джерело запису: webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі