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>下拉菜单</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

L'essentiel est d'ajouter la classe de style .disabled dans la balise li.

Vous pouvez vérifier l'effet après l'avoir exécuté. En fait, l'effet est similaire au style de titre ci-dessus. Lorsque vous cliquez, une icône désactivée s'affiche.

5. Cas de base

1), menu déroulant des boutons
Vous pouvez déclencher un menu déroulant en plaçant n'importe quel bouton dans un groupe .btn et en ajoutant les balises de menu appropriées.

Menu déroulant à un seul bouton

Modifiez simplement quelques balises de base pour transformer un bouton en un commutateur de menu déroulant.

<div class="btn-group">
 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 Action <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" role="menu">
 <li><a href="#">Action</a></li>
 <li><a href="#">Another action</a></li>
 <li><a href="#">Something else here</a></li>
 <li class="divider"></li>
 <li><a href="#">Separated link</a></li>
 </ul>
</div>

Menu déroulant des boutons divisés

De même, une liste déroulante à bouton partagé nécessite le même balisage de modification, mais avec un bouton séparé.

<div class="btn-group">
   <button type="button" class="btn btn-danger">Action</button>
   <div class="dropdown">
    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
    </ul>
   </div>
  </div

Vous pouvez uniquement cliquer sur la petite icône pour afficher le menu.

2), taille

Le bouton du menu déroulant fonctionne avec toutes les tailles de boutons.

<div class="btn-group">
 <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
 Large button <span class="caret"></span>
 </button>
 <ul class="dropdown-menu">
 ...
 </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
 <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
 Small button <span class="caret"></span>
 </button>
 <ul class="dropdown-menu">
 ...
 </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
 <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
 Extra small button <span class="caret"></span>
 </button>
 <ul class="dropdown-menu">
 ...
 </ul>
</div>

Contrôlez la taille du bouton via les classes de style .btn-lg, .btn-sm, .btn-xs.

3), menu contextuel

Ajoutez .dropup à l'élément parent pour créer le menu déroulant déclenché au-dessus de l'élément.

<div class="btn-group dropup">
 <button type="button" class="btn btn-default">Dropup</button>
 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 <span class="caret"></span>
 <span class="sr-only">Toggle Dropdown</span>
 </button>
 <ul class="dropdown-menu">
 <!-- Dropdown menu links -->
 </ul>
</div>

Pour plus d'informations, veuillez vous référer à : Tutoriel d'apprentissage Bootstrap

Résumé :

Cet article présente principalement le contenu pertinent du menu déroulant, puis présente la combinaison de boutons et de menus déroulants. Il y a pas mal de changements et le style est bon.