Bootstrap implémente les compétences effect_javascript du menu déroulant

Menu déroulant Un menu contextuel basculable pour afficher une liste de liens.

1. Cas

Enveloppez le déclencheur du menu déroulant et le menu déroulant dans .dropdown, puis ajoutez le code HTML qui constitue le menu.

 <div class="dropdown">
  <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  Dropdown
  <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
  <li role="presentation" class="divider"></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
 </div>

Vous pouvez constater à partir du code ci-dessus qu'il peut contenir de nombreuses classes ou attributs de style inconnus.

Un bouton Dropdown et une petite icône curseur sur le côté droit Bien entendu, le texte de cette petite icône et le bouton sont au même niveau.

Tout d'abord, vérifiez qu'il y a une bascule déroulante dans le bouton du bouton, et qu'il y a également un attribut data-toggle. Basé sur cet attribut, la liste déroulante apparaîtra.

Le menu déroulant qui suit immédiatement la balise ul doit être utilisé en conjonction avec la bascule déroulante de classe de style du bouton ci-dessus, et le bouton ci-dessus est lié par aria-labelledby.

Il y a un séparateur dans la quatrième balise li, qui est en fait une classe de style pour diviser les lignes.

C'est probablement ce que je comprends, et ma compréhension n'est définitivement pas en place.

2. Options d'alignement

Ajoutez .text-right au menu déroulant .dropdown-menu pour aligner le texte à droite.

 <div class="dropdown">
  <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  Dropdown
  <span class="caret"></span>
  </button>
  <ul class="dropdown-menu text-right" role="menu" aria-labelledby="dropdownMenu1">
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
  <li role="presentation" class="divider"></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
 </div>

Ajoutez simplement une classe de style text-right à la balise ul dans le code ci-dessus.

3. Titre

Un groupe d'actions peut être identifié dans n'importe quel menu déroulant en ajoutant un titre.

 <h1 id="下拉菜单">下拉菜单</h1>
  <div class="dropdown">
  <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  Dropdown
  <span class="caret"></span>
  </button>
  <ul class="dropdown-menu text-right" role="menu" aria-labelledby="dropdownMenu1">
  <li role="presentation" class="dropdown-header">Dropdown header</li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
  <li role="presentation" class="divider"></li>
  <li role="presentation" class="dropdown-header">Dropdown header</li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
 </div>

Principalement ajouté

Dropdown header

Il contient une classe de style .dropdown-header.

4. Éléments de menu désactivés

Ajoutez un lien de désactivation .disabled vers

dans le menu déroulant.

Continuez à modifier le code ci-dessus et remplacez le code dans la ligne Something else here

Copier le code Le code est le suivant :

Quelque chose d'autre ici