TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come creare un gruppo di pulsanti Bootstrap 5?

2

Il gruppo di pulsanti come indica il nome è semplicemente un gruppo di pulsanti allineati insieme per mostrarli come un singolo elemento. Nel nostro precedente tutorial sui pulsanti abbiamo spiegato come creare pulsanti con casella di controllo e pulsanti di opzione utilizzando il concetto di gruppo di pulsanti. In questo tutorial spieghiamo diversi tipi di gruppi di pulsanti con esempi in Bootstrap 5.

Tutorial del gruppo di pulsanti Bootstrap 5

Questo tutorial copre i seguenti capitoli:

  1. Creazione di un gruppo di pulsanti orizzontale
  2. Barra degli strumenti del gruppo di pulsanti
  3. Dimensionamento dei gruppi di pulsanti
  4. Gruppo di pulsanti nidificati con menu a discesa
  5. Gruppo pulsanti verticale
  6. Gruppo di pulsanti verticali nidificati

1 gruppo di pulsanti orizzontali

Il gruppo di pulsanti orizzontali è la semplice forma di raggruppamento di due o più pulsanti insieme. Creiamo un gruppo di quattro pulsanti utilizzando la classe ".btn-group" con un tag div. Ogni pulsante utilizza una classe contestuale diversa per mostrarlo in colori diversi.

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

Il “ruolo" e “aria-label” sono opzionali utilizzati principalmente dal punto di vista dell’accessibilità sugli screen reader.

Questo produrrà il seguente risultato nel browser.

Come creare un gruppo di pulsanti Bootstrap 5?

Il codice sopra è il codice del modello completo che utilizza CDN CSS e collegamenti di script. Puoi semplicemente sostituire il blocco tra l’inizio e la fine del gruppo di pulsanti con il codice fornito negli esempi seguenti per creare e testare diversi stili di gruppi di pulsanti.

Barra degli strumenti del gruppo a 2 pulsanti

L’opzione di raggruppamento ti consente di avere una disposizione simile alla barra degli strumenti aggiungendo l’attributo add role="toolbar". Puoi anche utilizzare il gruppo di pulsanti insieme ai gruppi di input per creare barre degli strumenti con l’input di testo. Il codice di esempio è riportato di seguito:

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

Produrrà il seguente risultato sul browser:

Come creare un gruppo di pulsanti Bootstrap 5?

Come puoi vedere, il gruppo di pulsanti e gli elementi del gruppo di input non hanno spazi vuoti. Dovresti usare CSS personalizzato per aggiungere un margine tra questi due elementi per allinearli correttamente.

3 diverse dimensioni dei gruppi di pulsanti

Bootstrap 5 ti consente di avere tre classi di dimensionamento per grande (btn-group-lg), predefinito e piccolo (btn-group-sm). Puoi aggiungere direttamente una classe grande o piccola alla classe ".btn-group" per modificare le dimensioni.

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

Il codice precedente produrrà i risultati come mostrato di seguito:

Come creare un gruppo di pulsanti Bootstrap 5?

4 Creazione di gruppi di pulsanti nidificati con menu a discesa

I gruppi di pulsanti nidificati sono facili da creare posizionando la classe ".btn-group" all’interno di un’altra classe ".btn-group". In questo modo puoi mostrare alcuni pulsanti e poi un menu a discesa con collegamenti aggiuntivi.

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

Il risultato dovrebbe essere il seguente:

Come creare un gruppo di pulsanti Bootstrap 5?

5 gruppi di pulsanti verticali

I pulsanti possono essere raggruppati verticalmente utilizzando la classe ".vertical" insieme alla classe ".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>

Il risultato del codice dovrebbe produrre il seguente gruppo di pulsanti:

Come creare un gruppo di pulsanti Bootstrap 5?

6 gruppi di pulsanti verticali nidificati

Simile all’annidamento orizzontale, anche i gruppi di pulsanti verticali possono essere nidificati con il menu a discesa.

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

Di seguito è riportato come sarà il risultato:

Come creare un gruppo di pulsanti Bootstrap 5?

Si noti che i pulsanti di divisione non sono supportati nell’annidamento verticale.


Impara Bootstrap 5 (Indice )


Fonte di registrazione: webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More