TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Jak stworzyć nawigację Bootstrap 5?

5

Komponent nav w Bootstrap służy do tworzenia listy łączy o różnych stylach. Zasadniczo linki do listy są używane jako menu nawigacyjne. W tym samouczku poznajmy różne style linków, które można utworzyć za pomocą komponentu Bootstrap 5 nav.

Samouczek Bootstrap 5 Navs

  1. Tworzenie podstawowych linków nawigacyjnych
  2. Numer pionowy
  3. Karty z nav
  4. Dodawanie tabletek w nav
  5. Nav z pigułkami i uzasadnionym wyrównaniem
  6. Responsywna nawigacja
  7. Nawigacja z menu rozwijanym
  8. Nav z pionową zakładką i pigułką

1 podstawowe łącza nawigacyjne

Domyślna i podstawowa nawigacja będzie wyglądać jak poniżej:

Kod podstawowej nawigacji jest następujący:

<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>

Poniżej znajdują się klasy używane przy tworzeniu domyślnego komponentu nawigacyjnego:

  • Cała nav jest nieuporządkowaną listą przy użyciu klasy „.nav".
  • Każdy
  • tag reprezentuje element nawigacji przy użyciu klasy „.nav-item”.
  • Wewnątrz
  • tag, tag kotwicy służy do tworzenia linku na rzeczywistym tekście za pomocą klasy „.nav-link”.

Zawartość nav można wyrównać do środka i do prawej za pomocą dodatkowych klas w obrębie

tag jak poniżej:

  • <ul class=”nav justify-content-center”> – dla wyrównania do środka.
  • <ul class=”nav justify-content-end”> – dla wyrównania do końca lub do prawej.
  • <ul class=”nav nav-fill”> – wypełnij pełną szerokość w poziomie.
  • <ul class=”nav nav-justified”> – wypełnij pełną poziomą szerokość, przy czym każde łącze nawigacyjne ma taką samą szerokość.

2 Nawigacja pionowa

Możesz użyć klasy „flex-column”, aby cała zawartość nawigacji była wyrównana w pionowych linkach zamiast w poziomie, jak pokazano poniżej:

Poniżej znajduje się kod do tworzenia pionowego komponentu nawigacji:

<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 Tworzenie kart za pomocą Nav

Możesz także łatwo tworzyć zawartość z kartami, używając wewnątrz klasy „.nav-tabs”

tag jak poniżej:

<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>

Klasa „.nav-tabs” przekonwertuje domyślną nawigację na kartę taką jak poniżej:

Jak stworzyć nawigację Bootstrap 5?

4 Dodawanie pigułek w Nav

Możesz dodać pigułki, pudełko z podstawowym kolorem tła, do linków za pomocą klasy „.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>

Wynik w przeglądarce będzie wyglądał jak poniżej:

Jak stworzyć nawigację Bootstrap 5?

5 Nav z pigułkami i uzasadnionym wyrównaniem

Jeśli chcesz, aby elementy nawigacyjne były wyrównane do pełnej szerokości, dodaj klasę „.nav-fill”, jak poniżej:

<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>

Da to następujący wynik:

Jak stworzyć nawigację Bootstrap 5?

6 Responsywny komponent Nav

W tej chwili utworzone komponenty nawigacji nie są responsywne i powinieneś dodać dodatkowe klasy narzędziowe flexbox, aby były responsywne. Na przykład możemy uczynić go elastycznym dla urządzeń średniej wielkości za pomocą klasy „.flex-md-row”, jak poniżej:

<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 Dodawanie rozwijanego menu w Nav

Użyj klasy „.dropdown”, aby wstawić menu rozwijane, a następnie elementy menu za pomocą klas „.dropdown-menu” i „.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>

Komponent rozwijanej nawigacji z pigułkami będzie wyglądał jak poniżej:

Jak stworzyć nawigację Bootstrap 5?

8 Nav z pionowymi zakładkami i pigułkami

Możesz także użyć układu siatki i utworzyć pionową zawartość z zakładkami za pomocą komponentu nawigacyjnego z pigułkami.

<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>

W przeglądarce wygeneruje następujący wynik:

Jak stworzyć nawigację Bootstrap 5?

Sprawdź samouczek dotyczący komponentu paska nawigacyjnego Bootstrap , aby dowiedzieć się więcej o pasku nawigacyjnym.


Dowiedz się o Bootstrapie 5 (Indeks )


Źródło nagrywania: webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów