Raccomandazioni di corso:

Elenco a discesa Bootstrap 5

Elenco di base a discesa

Esempio

Un menu a discesa è un menu a scelta multipla che permette agli utenti di selezionare un valore da una lista predefinita:
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
  Pulsante a discesa
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Link 1</a></li>
    <li><a class="dropdown-item" href="#">Link 2</a></li>
    <li><a class="dropdown-item" href="#">Link 3</a></li>
  </ul>
</div>

Prova personalmente

</button>

Esempio di spiegazione .dropdown

Per aprire il menu a discesa, utilizzare la classe indicante il menu a discesa impostata .dropdown-toggle Classe e data-toggle="dropdown" Proprietà del pulsante o del link.

Aggiungi .dropdown-menu Classe a <div> Elemento, che può costruire effettivamente il menu a discesa. Poi aggiungi .dropdown-item Aggiungi la classe a ogni elemento del menu a discesa (link o pulsante).

Linea di separazione dell'elenco a discesa

.dropdown-divider Classe per separare i link nel menu a discesa con una barra orizzontale sottile:

Esempio

<li><hr class="dropdown-divider"></hr></li>

Prova personalmente

Titolo dell'elenco a discesa

.dropdown-header Classe per aggiungere titoli nel menu a discesa:

Esempio

<li><h5 class="dropdown-header">Intestazione del menu a discesa 1</h5></li>

Prova personalmente

Elementi disabilitati e attivi

Usa .active Classe per evidenziare un elemento di discesa specifico (aggiungi sfondo blu).

Per disabilitare un elemento del menu a discesa, usa .disabled Classe (ottiene il colore del testo chiaro e l'icona "no-parking-sign" quando hover).

Esempio

<li><a class="dropdown-item" href="#">Normale</a></li>
<li><a class="dropdown-item active" href="#">Attivo</a></li>
<li><a class="dropdown-item disabled" href="#">Disabilitato</a></li>

Prova personalmente

Posizione dell'elenco a discesa

Puoi anche cambiare .dropend o .dropstart Aggiungi la classe agli elementi di discesa per creare menu "dropend" o "dropstart". Nota che i segni di inserimento/freccia vengono aggiunti automaticamente:

Dropright

<div class="dropdown dropend">

Prova personalmente

Dropleft

<div class="dropdown dropstart">

Prova personalmente

Allineamento a destra dell'elenco a discesa

Per allineare a destra il menu a discesa, aggiungi .dropdown-menu-end Aggiungi la classe .dropdown-menu per gli elementi:

Esempio

<div class="dropdown-menu dropdown-menu-end">

Prova personalmente

Elenco a scorrimento in su

Se si desidera che il menu a discesa si apra verso l'alto invece che verso il basso, cambiare l'elemento <div> con class="dropdown". "dropup"：

Esempio

<div class="dropup">

Prova personalmente

Testo a discesa

.dropdown-item-text La classe viene utilizzata per aggiungere testo puro alle voci a discesa, o per aggiungere lo stile di link predefinito ai link.

Esempio

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Link 1</a></li>
  <li><a class="dropdown-item" href="#">Link 2</a></li>
  <li><a class="dropdown-item" href="#">Link 3</a></li>
  <li><a class="dropdown-item-text" href="#">Link di testo</a></li>
  <li><span class="dropdown-item-text">Testo puro</span></li>
</ul>

Prova personalmente

Combinazione di pulsanti e elenco a discesa

Esempio

<div class="btn-group">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Xiaomi</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Telefono</a></li>
      <li><a class="dropdown-item" href="#">Tablet</a></li>
    </ul>
  </div>
</div>

Prova personalmente

Combinazione di pulsanti verticali e elenco a discesa

Esempio

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Xiaomi</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Telefono</a></li>
      <li><a class="dropdown-item" href="#">Tablet</a></li>
    </ul>
  </div>
</div>

Prova personalmente