discesa di base
Un menu a discesa è un menu toggleable che permette all'utente di scegliere un valore da un elenco predefinito:
Esempio
<div class="dropdown">
<button class="btn btn-primary
dropdown-toggle" type="button" data-toggle="dropdown">Dropdown
Example
<span class="caret"></span></button>
<ul
class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div> Prova tu stesso " esempio spiegato
Il .dropdown classe indica un menu a discesa.
Per aprire il menu a discesa, utilizzare un pulsante o un collegamento con una classe di .dropdown-toggle e il data-toggle="dropdown" attributo.
Il .caret classe crea una icona di accento circonflesso freccia ( ) ( ) ( ) , Che indica che il pulsante è una discesa.
Aggiungere il .dropdown-menu di classe ad un <ul> elemento per costruire realmente il menu a discesa.
Divisore discesa
La .divider classe è utilizzata per collegamenti separati all'interno del menu a discesa con un bordo sottile orizzontale:
discesa Intestazione
Il .dropdown-header classe viene utilizzata per aggiungere intestazioni all'interno del menu a discesa:
Disabilitare un elemento
Per disabilitare una voce nel menu a discesa, utilizzare la .disabled classe:
Posizione discesa
A destra-allineare la discesa, aggiungere il .dropdown-menu-right classe per l'elemento con .dropdown-menù:
Dropup
Se si desidera che il menu a discesa per espandere verso l'alto invece che verso il basso, modificare il <div> elemento con class="dropdown" a "dropup" :
Accessibilità discesa
Per contribuire a migliorare l'accessibilità per le persone che utilizzano screen reader, è necessario includere i seguenti role e aria-* attributi, quando si crea un menu a discesa:
Esempio
<div class="dropdown">
<button class="btn btn-default
dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu"
role="menu" aria-labelledby="menu1">
<li
role="presentation"><a role="menuitem" href="#">HTML</a></li>
<li role="presentation"><a role="menuitem" href="#">CSS</a></li>
<li role="presentation"><a role="menuitem" href="#">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li
role="presentation"><a role="menuitem" href="#">About
Us</a></li>
</ul>
</div> Prova tu stesso " Mettiti alla prova con esercizi!
Esercizio 1 » Esercizio 2» Esercizio 3 » Esercizio 4» Esercizio 5 »
Completare Bootstrap discesa di riferimento
Per un riferimento completo di tutte le opzioni a discesa, metodi ed eventi, vai alla nostra Bootstrap JS discesa di riferimento .