Bootstrap implémente les compétences effect_javascript du menu déroulant-js tutoriel-php.cn

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

WBOY

Libérer： 2016-05-16 15:02:51

original

1929 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

Principalement ajouté

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

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.

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.

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>

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

<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>  <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>  <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.

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">  </ul> </div>

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.