Come nidificare i gruppi di pulsanti e creare menu a discesa in bootstrap 5?
I gruppi di pulsanti possono svolgere un ruolo significativo se desideri avvolgere i pulsanti correlati che rappresentano le azioni multiple e connesse insieme. Inoltre, questi gruppi di pulsanti possono essere nidificati per generare menu a discesa che si rivelano utili in situazioni quando si desidera fornire al tuo utente più scelte.
Prima di saltare su come generare menu a discesa mediante gruppi di bottoni di nidificazione, capiamo rapidamente come i pulsanti possono essere raggruppati insieme.
Come creare gruppi di pulsanti usando bootstrap 5
Ai fini del raggruppamento dei pulsanti devi assegnare un .btn-group Classe per il contenitore Div che avvolge i pulsanti. Inoltre, se si desidera modellare questi gruppi di pulsanti, usa il .Classe BTN insieme alle classi di colori contestuali. IL .btn La classe dà uno stile di base ai gruppi, mentre le classi di colori contestuali vengono utilizzate per fornire un colore di sfondo ai gruppi di pulsanti.
Html
Lo snippet di codice genererà quattro pulsanti raggruppati insieme, ogni pulsante con imbottitura definita, uno sfondo verde e un colore di testo bianco.
Produzione
Ecco come puoi raggruppare i pulsanti usando bootstrap 5.
Ora passeremo all'argomento principale in discussione come indicato dal titolo dell'articolo che è come i gruppi di bottoni possono essere nidificati per generare menu a discesa.
Come nidificare i pulsanti raggruppati per generare menu a discesa
Vorresti nidificare i gruppi di pulsanti per creare un menu a discesa in vari scenari come quando si desidera fornire più opzioni all'utente tra cui scegliere. L'esempio dimostrato di seguito mostra come è possibile eseguire questa attività.
Html
Esempio spiegato
Il codice sopra genera i gruppi di due pulsanti ciascuno composto da un singolo pulsante e ogni pulsante ha un menu a discesa ad esso associato.
Il primo gruppo di pulsanti ha un menu a discesa associato ad esso creato assegnando il .classe a discesa in un elenco non ordinato ed è stato reso attivato assegnando il .dropdown-toggle classe e all'elemento e imposta il suo data-bs-toggle = "discesa". Per inserire varie opzioni all'interno del tag di ancoraggio del menu a discesa è stato nidificato all'interno di un
Anche il secondo discesa collegato al secondo gruppo di pulsanti è stato creato in modo simile.
Produzione
Usando questa tecnica è possibile creare un menu a discesa raggruppando i pulsanti.
Conclusione
Per creare un menu a discesa mediante i gruppi di pulsanti di nidificazione collega un menu a discesa con un gruppo di pulsanti assegnando il .classe a discesa A
- elemento e per inserire gli elementi all'interno del tag del nido di menu all'interno
- elemento e fornire il .Dropdown-Item Classe per il tag di ancoraggio. Inoltre, per rendere il menu attivabile, assegnare il .Classe a discesa all'elemento e impostare il suo data-bs-toggle = "discesa". Seguendo questi passaggi sarai in grado di generare facilmente menu a discesa dai gruppi di pulsanti di nidificazione.