Bootstrap 4 Dropdown
Menu a discesa di base
Un menu a discesa è un menu attivabile che consente all'utente di scegliere un valore da un elenco predefinito:
Esempio
<div class="dropdown">
<button type="button" class="btn btn-primary
dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item" href="#">Link 3</a>
</div>
</div>
Esempio spiegato
La .dropdownclasse indica un menu a tendina.
Per aprire il menu a discesa, utilizzare un pulsante o un collegamento con una classe di .dropdown-togglee l'
data-toggle="dropdown"attributo.
Aggiungi la .dropdown-menuclasse a un <div>elemento per creare effettivamente il menu a discesa. Quindi aggiungi la
.dropdown-itemclasse a ciascun elemento (link o pulsanti) all'interno del menu a discesa.
Divisore a discesa
La .dropdown-dividerclasse viene utilizzata per separare i collegamenti all'interno del menu a discesa con un sottile bordo orizzontale:
Esempio
<div class="dropdown-divider"></div>
Intestazione a discesa
La .dropdown-headerclasse viene utilizzata per aggiungere intestazioni all'interno del menu a discesa:
Esempio
<div class="dropdown-header">Dropdown header 1</div>
Disattiva e attiva gli elementi
Evidenzia un elemento a discesa specifico con la .activeclasse (aggiunge un colore di sfondo blu).
Per disabilitare un elemento nel menu a tendina, usa la .disabledclasse (ottiene un colore del testo grigio chiaro e un'icona "divieto di parcheggio" al passaggio del mouse):
Esempio
<a class="dropdown-item active" href="#">Active</a>
<a class="dropdown-item disabled" href="#">Disabled</a>
Posizione a discesa
Puoi anche creare un menu "a discesa" o "a sinistra", aggiungendo la classe .droprighto .dropleftall'elemento a discesa. Nota che il cursore/freccia viene aggiunto automaticamente:
Dropright
<div class="dropdown dropright">
Dropleft
<div class="dropdown dropleft">
Menu a tendina a destra
Per allineare a destra il menu a discesa, aggiungi la .dropdown-menu-rightclasse all'elemento con .menu a discesa:
Esempio
<div class="dropdown-menu dropdown-menu-right">
Ritiro
Se vuoi che il menu a discesa si espanda verso l'alto invece che verso il basso, cambia l'elemento <div> con class="dropdown" in "dropup":
Esempio
<div class="dropup">
Testo a discesa
La .dropdown-item-textclasse viene utilizzata per aggiungere testo normale a un elemento a discesa o utilizzata sui collegamenti per lo stile predefinito dei collegamenti.
Esempio
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link
1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item-text" href="#">Text Link</a>
<span
class="dropdown-item-text">Just Text</span>
</div>
Pulsanti raggruppati con un menu a discesa
Esempio
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn
btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
Menu a discesa dei pulsanti divisi
Esempio
<div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle
dropdown-toggle-split"
data-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
</div>
</div>
Gruppo pulsanti verticali con menu a discesa
Esempio
<div class="btn-group-vertical">
<button type="button" class="btn
btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn
btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
Completa il riferimento a discesa Bootstrap 4
Per un riferimento completo di tutte le opzioni, i metodi e gli eventi a discesa, vai al nostro Riferimento a discesa Bootstrap 4 JS .