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

Jak stworzyć grupę przycisków Bootstrap 5?

1

Grupa przycisków, jak sama nazwa wskazuje, to po prostu grupa przycisków dopasowanych do siebie, aby zaprezentować je jako pojedynczy element. W naszym poprzednim samouczku dotyczącym przycisków wyjaśniliśmy, jak tworzyć przyciski z polami wyboru i przyciskami opcji przy użyciu koncepcji grupy przycisków. W tym samouczku wyjaśnimy różne typy grup przycisków na przykładach w Bootstrap 5.

Samouczek dotyczący grupy przycisków Bootstrap 5

Ten samouczek obejmuje następujące rozdziały:

  1. Tworzenie poziomej grupy przycisków
  2. Pasek narzędzi grupy przycisków
  3. Rozmiary grup przycisków
  4. Zagnieżdżona grupa przycisków z menu rozwijanym
  5. Pionowa grupa przycisków
  6. Zagnieżdżona pionowa grupa przycisków

1 pozioma grupa przycisków

Pozioma grupa przycisków to prosta forma grupowania dwóch lub więcej przycisków. Stwórzmy grupę czterech przycisków przy użyciu klasy „.btn-group" ze znacznikiem div. Każdy przycisk używa innej klasy kontekstowej, aby pokazać go w różnych kolorach.

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 5 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap 5 CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <!-- Start of Button Group --> <div class="btn-group" role="group" aria-label="Horizontal Button Group"> <button type="button" class="btn btn-primary">Button 1 </button> <button type="button" class="btn btn-warning">Button 2</button> <button type="button" class="btn btn-danger">Button 3</button> <button type="button" class="btn btn-info">Button 4</button> </div> <!-- End of Button Group --> <!-- Bootstrap 5 Scripts --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> </body> </html>

„Role” i „aria-label” są opcjonalne, używane głównie z punktu widzenia ułatwień dostępu w czytnikach ekranu.

Spowoduje to w przeglądarce następujący wynik.

Jak stworzyć grupę przycisków Bootstrap 5?

Powyższy kod jest pełnym kodem szablonu wykorzystującym CDN CSS i linki skryptowe. Możesz po prostu zastąpić blok między początkiem a końcem grupy przycisków kodem podanym w poniższych przykładach, aby utworzyć i przetestować różne style grup przycisków.

Pasek narzędzi grupy 2 przycisków

Opcja grupowania pozwala na uporządkowanie paska narzędziowego poprzez dodanie atrybutu add role=”toolbar”. Możesz również użyć grupy przycisków wraz z grupami wprowadzania, aby utworzyć paski narzędzi z wprowadzaniem tekstu. Przykładowy kod znajduje się poniżej:

<div class="btn-toolbar" role="toolbar" aria-label="Button Group Toolbar"> <div class="btn-group" role="group" aria-label="Button Group"> <button type="button" class="btn btn-primary">A</button> <button type="button" class="btn btn-warning">B</button> <button type="button" class="btn btn-info">C</button> <button type="button" class="btn btn-success">D</button> </div> <div class="input-group"> <span class="input-group-addon" id="id1">@</span> <input type="text" class="form-control" placeholder="This is input group box" aria-describedby="id1"> </div> </div>

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

Jak stworzyć grupę przycisków Bootstrap 5?

Jak widać, elementy grupy przycisków i grupy wejściowej nie mają żadnej przerwy. Powinieneś użyć niestandardowego CSS, aby dodać margines między tymi dwoma elementami, aby odpowiednio je wyrównać.

3 różne rozmiary grup przycisków

Bootstrap 5 pozwala mieć trzy klasy rozmiarów dla dużych (btn-group-lg), domyślnych i małych (btn-group-sm). Możesz bezpośrednio dodać dużą lub małą klasę do klasy „.btn-group”, aby zmienić rozmiar.

<!-- Start of Large Button Group Size --> <div class="btn-group btn-group-lg" role="group" aria-label="Large Button Group"> <button type="button" class="btn btn-primary">Large Button 1</button> <button type="button" class="btn btn-warning">Large Button 2</button> <button type="button" class="btn btn-danger">Large Button 3</button> </div> <!-- Start of Default Button Group Size --> <div class="btn-group" role="group" aria-label="Default Button Group"> <button type="button" class="btn btn-primary">Default Button 1</button> <button type="button" class="btn btn-warning">Default Button 2</button> <button type="button" class="btn btn-danger">Default Button 3</button> </div> <!-- Start of Small Button Group Size --> <div class="btn-group btn-group-sm" role="group" aria-label="Small Button Group"> <button type="button" class="btn btn-primary">Small Button 1</button> <button type="button" class="btn btn-warning">Small Button 2</button> <button type="button" class="btn btn-danger">Small Button 3</button> </div>

Powyższy kod da wyniki, jak pokazano poniżej:

Jak stworzyć grupę przycisków Bootstrap 5?

4 Tworzenie zagnieżdżonych grup przycisków za pomocą rozwijanego menu

Zagnieżdżone grupy przycisków można łatwo utworzyć, umieszczając klasę „.btn-group” wewnątrz innej klasy „.btn-group”. W ten sposób możesz wyświetlić kilka przycisków, a następnie listę rozwijaną z dodatkowymi linkami.

<div class="btn-group" role="group" aria-label="Nested Button Group"> <button type="button" class="btn btn-primary">Button 1</button> <button type="button" class="btn btn-info">Button 2</button> <div class="btn-group" role="group"> <button id="nested1" type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown 1 </button> <div class="dropdown-menu" aria-labelledby="nested1"> <a class="dropdown-item text-danger" href="#">Dropdown Link 1</a> <div class="dropdown-divider"></div> <a class="dropdown-item text-info" href="#">Dropdown Link 2</a> </div> </div> </div>

Wynik powinien wyglądać jak poniżej:

Jak stworzyć grupę przycisków Bootstrap 5?

5 pionowych grup przycisków

Przyciski można grupować w pionie za pomocą klasy „.vertical” wraz z klasą „.btn-group”.

<div class="btn-group-vertical"> <button type="button" class="btn btn-primary">Button 1 </button> <button type="button" class="btn btn-warning">Button 2</button> <button type="button" class="btn btn-danger">Button 3</button> </div>

Wynik kodu powinien dać poniższą grupę przycisków:

Jak stworzyć grupę przycisków Bootstrap 5?

6 Zagnieżdżona pionowa grupa przycisków

Podobnie jak w przypadku zagnieżdżania poziomego, pionowe grupy przycisków można również zagnieżdżać za pomocą listy rozwijanej.

<div class="btn-group-vertical" role="group" aria-label="Nested Button Group"> <button type="button" class="btn btn-primary">Button 1</button> <button type="button" class="btn btn-secondary">Button 2</button> <div class="btn-group" role="group"> <button id="nested2" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown 1 </button> <div class="dropdown-menu" aria-labelledby="nested2"> <a class="dropdown-item text-danger" href="#">Dropdown Link 1</a> <div class="dropdown-divider"></div> <a class="dropdown-item text-danger" href="#">Dropdown Link 2</a> </div> </div> </div>

Poniżej jak będzie wyglądał wynik:

Jak stworzyć grupę przycisków Bootstrap 5?

Zauważ, że przyciski podziału nie są obsługiwane w zagnieżdżaniu pionowym.


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