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

Jak stworzyć listę rozwijaną Bootstrap 5?

3

W poprzednim samouczku dotyczącym przycisków Bootstrap wspomnieliśmy już o komponencie rozwijanym. Lista rozwijana to nic innego jak przycisk (lub link) i pokazuje listę po kliknięciu. W tym samouczku zapoznajmy się z różnymi rodzajami list rozwijanych Bootstrap 5 z przykładami. Pamiętaj, aby dołączyć bootstrap.bundled.min.js, aby menu rozwijane działało. Możesz odnieść się do szablonu startowego tutaj.

Bootstrap 5 rozwijane samouczek

  1. Podstawowe cechy list rozwijanych
  2. Tworzenie domyślnego przycisku rozwijanego
  3. Dodawanie dzielnika
  4. Wyłączanie linku w menu rozwijanym
  5. Rozwijane z wyrównaniem menu w prawo
  6. Przycisk rozwijany z nagłówkiem
  7. Rozmiar przycisku rozwijanego
  8. Podział przycisk rozwijany
  9. Podział przycisku rozwijania
  10. Punkty do zapamiętania

1 Podstawy Bootstrapa 5 Dropdowns

  • Rozwijane listy to przełączalna lista linków lub elementów przycisków wyświetlanych w górę lub w dół.
  • Jest to zwykle używane w przypadku elementów menu rozwijanego lub rozwijanego oraz elementów nawigacji na pasku bocznym.
  • Działa w oparciu o skrypt Popper.js.
  • Powinieneś dodać popper.min.js, a następnie bootstrap.min.js w tej samej kolejności. Użyj wszystkich przykładów z tego samouczka wraz z naszym szablonem startowym.
  • Domyślnie do elementu rozwijanego nie będą dodawane żadne atrybuty „role" ani „aria-“. Należy je wstawiać ręcznie w razie potrzeby.
  • Pozycje rozwijane można zamknąć, klikając przycisk lub klikając na zewnątrz. Możesz także użyć klawisza „Esc”, aby zamknąć pozycje rozwijane.

2 Tworzenie domyślnego przycisku rozwijanego

Poniżej znajduje się kod do tworzenia domyślnego menu rozwijanego w Bootstrap 5:

<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownmenu" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown Button </button> <div class="dropdown-menu" aria-labelledby="dropdownmenu"> <a class="dropdown-item" href="#">Dropdown One</a> <a class="dropdown-item" href="#">Dropdown Two</a> <a class="dropdown-item" href="#">Dropdown Three</a> </div> </div>

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

Jak stworzyć listę rozwijaną Bootstrap 5?

  • Zasadniczo musisz owinąć zawartość wewnątrz div za pomocą klasy „.dropdown”. To zidentyfikuje przycisk jako przycisk rozwijany. Możesz również użyć tagu zamiast przycisku.
  • Przycisk (lub link) należy dołączyć do klasy „.dropdown-toggle”. W tym przykładzie użyliśmy klasy „btn-primary” do stworzenia przycisku z kolorem podstawowym. Możesz użyć dowolnej klasy narzędziowej koloru, aby mieć inny przycisk koloru.
  • Po przycisku utwórz rozwijane menu z pozycjami.

3 Dodawanie dzielników w menu rozwijanym

Teraz wiesz, jak utworzyć podstawowy przycisk rozwijany. Dodajmy trochę dekoracyjnych rzeczy, takich jak dodanie przegrody między pozycjami menu a nagłówkiem.

<div class="dropdown"> <button class="btn btn-info dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown Button </button> <div class="dropdown-menu" aria-labelledby="dropdownmenu"> <h6 class="dropdown-header">Dropdown Header</h6> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Dropdown One</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Dropdown Two</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Dropdown Three</a> </div> </div>

Menu rozwijane będzie wyglądać jak poniżej:

Jak stworzyć listę rozwijaną Bootstrap 5?

4 Wyłączanie łącza w elemencie rozwijanym

Możesz wyłączyć element w menu rozwijanym, aby zapobiec klikaniu:

<div class="dropdown"> <button class="btn btn-info dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown Button </button> <div class="dropdown-menu" aria-labelledby="dropdownmenu"> <a class="dropdown-item" href="#">Dropdown One</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Dropdown Two</a> <div class="dropdown-divider"></div> <a class="dropdown-item disabled" href="#">Dropdown Three</a> </div> </div>

Użyliśmy przycisku info i wyłączyliśmy trzeci link. Przesunięcie myszy nad wyłączonym linkiem spowoduje wyświetlenie symbolu zatrzymania kursora i nie będzie można go kliknąć.

Jak stworzyć listę rozwijaną Bootstrap 5?

5 Rozwijane menu z wyrównaniem prawego menu

Jak zauważyłeś w powyższych przykładach, domyślnie menu będzie wyświetlane z wyrównaniem do lewej. Możesz go zmienić na wyrównanie do prawej, dodając klasę „.dropdown-menu-right” wraz z klasą „.dropdown-menu”. Pamiętaj, że spowoduje to przeniesienie całego okna menu na prawo od kontenera. Powinieneś użyć dodatkowych stylów CSS, aby prawidłowo umieścić menu pod elementem rozwijanego przycisku.

<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown Button Alignment Right </button> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownmenu"> <a class="dropdown-item" href="#">Dropdown One</a> <a class="dropdown-item" href="#">Dropdown Two</a> <a class="dropdown-item" href="#">Dropdown Three</a> </div> </div>

Pozycje menu wyrównane do prawej będą wyglądać jak poniżej:

Jak stworzyć listę rozwijaną Bootstrap 5?

6 Przycisk rozwijany z nagłówkiem

Możesz również dodać tekst nagłówka wewnątrz elementów menu za pomocą klasy „.dropdown-header” z dowolnym ze znaczników H1 – H6. Ogólnie nagłówek jest dodawany na górze menu i nie można go kliknąć.

<div class="dropdown"> <button class="btn btn-warning dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown Button </button> <div class="dropdown-menu" aria-labelledby="dropdownmenu"> <h5 class="dropdown-header" href="#">Dropdown Header</h5> <a class="dropdown-item" href="#">Dropdown One</a> <a class="dropdown-item" href="#">Dropdown Two</a> </div> </div>

Lista rozwijana z nagłówkiem da następujący wynik:

Jak stworzyć listę rozwijaną Bootstrap 5?

7 Rozmiar przycisku rozwijanego

Ustaw duży lub mały przycisk rozwijany, używając klas „.btn-lg” i „.btn-sm”, jak poniżej:

<div class="btn-group"> <button class="btn btn-danger btn-lg dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown Button </button> <div class="dropdown-menu" aria-labelledby="dropdownmenu"> <a class="dropdown-item" href="#">Dropdown One</a> <a class="dropdown-item" href="#">Dropdown Two</a> <a class="dropdown-item" href="#">Dropdown Three</a> </div> </div> <div class="btn-group"> <button class="btn btn-danger btn-sm dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown Button </button> <div class="dropdown-menu" aria-labelledby="dropdownmenu"> <a class="dropdown-item" href="#">Dropdown One</a> <a class="dropdown-item" href="#">Dropdown Two</a> <a class="dropdown-item" href="#">Dropdown Three</a> </div> </div>

Zauważ, że użyliśmy dwóch grup przycisków, aby pokazać dwa przyciski w linii, jeśli chcesz pokazać tylko jeden przycisk (powiedzmy duży), możesz użyć domyślnej klasy „.dropdown”.

Duże i małe przyciski rozwijane są pokazane poniżej:

Jak stworzyć listę rozwijaną Bootstrap 5?

8 Podział przycisku rozwijanego

Jak na razie widzieliśmy różne rodzaje menu rozwijanych jako pojedynczy przycisk. Przycisk podziału składa się z dwóch przycisków, dlatego należy użyć grupy przycisków, aby pokazać je w linii bez przerw. Podział dwóch przycisków jest możliwy za pomocą klasy css „.dropdown-toggle-split”.

<div class="btn-group"> <button type="button" class="btn btn-secondary">Split Button</button> <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Dropdown Button Group</span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Dropdown One</a> <a class="dropdown-item" href="#">Dropdown Two</a> <a class="dropdown-item" href="#">Dropdown Three</a> </div> </div>

Podział rozwijanego przycisku będzie wyglądał jak poniżej:

Jak stworzyć listę rozwijaną Bootstrap 5?

9 Przycisk dzielonego zrzutu

Jest to po prostu styl rozwijany zamiast domyślnego rozwijanego przy użyciu klasy „.dropup”.

<div class="btn-group dropup"> <button type="button" class="btn btn-warning">Split Dropup Button</button> <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Dropdown Button Group</span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Dropdown One</a> <a class="dropdown-item" href="#">Dropdown Two</a> <a class="dropdown-item" href="#">Dropdown Three</a> </div> </div>

Przycisk podziału listy rozwijanej będzie wyglądał jak poniżej:

Jak stworzyć listę rozwijaną Bootstrap 5?

10 ważnych punktów do zapamiętania

Menu rozwijane zostanie automatycznie wyświetlone w dół lub w górę w zależności od widocznego obszaru przeglądarki. Na przykład, gdy jesteś na końcu strony, pozycje menu rozwijanego będą wyświetlane powyżej, podobnie jak menu rozwijane.

Element przycisku w menu rozwijanym obsługuje wszystkie klasy narzędziowe do obsługi koloru tła, podobnie jak domyślny komponent przycisku. Bootstrap 3 obsługuje tylko linki do pozycji menu. Ale w Bootstrap 4 i 5 każdy element menu może być elementem linku lub przycisku.


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