Le menu déroulant est utilisé pour afficher un menu contextualisé basé sur la liste des liens.
1. Cas
Enveloppez le déclencheur déroulant et le menu déroulant dans .Dropdown, puis ajoutez le code HTML qui constitue le menu.
<v> <Button Type = "Button" id = "DropDownMenu1" Data-Toggle = "Dropdown"> Dropdown <span> </span> </ Button> <Ul Role = "Menu" Aria-LABELLEDBY = "DropdownMenu1"> <li rôle = "Présentation"> <a rôle = "Menuitem" role = "présentation"> <a role = "menutem" tabindex = "- 1" href = "#"> une autre action </a> </li> <li role = "présentation"> <a role = "menutem" tabindex = "- 1" href = "#"> autre chose ici </a> </li> <li role = "présentation"> </li> <li role = " tabindex = "- 1" href = "#"> lien séparé </a> </li> </ul> </div>
Vous pouvez trouver à travers le code ci-dessus qu'il peut y avoir de nombreuses classes ou attributs de style inconnus.
Il y a un bouton déroulant et un petit crist icône sur le côté droit. Bien sûr, le texte de cette petite icône et bouton est du même niveau.
Tout d'abord, voyons qu'il y a une liste déroulante dans le bouton du bouton et un attribut Data-Toggle. La liste apparaîtra en fonction de cet attribut.
Immédiatement après, le menu déroulant de l'étiquette UL doit être utilisé en conjonction avec la classe déroulante de la classe de style du bouton ci-dessus, et lier le bouton ci-dessus via Aria-LarredBy.
Ensuite, il y a un diviseur dans la quatrième étiquette Li qui est en fait une classe de style pour diviser les lignes.
Peut-être que je comprends de cette façon, mais je ne le comprends certainement pas correctement.
2. Options d'alignement
Ajouter .Text-droite au menu déroulant.Dropdown-menu pour aligner le texte.
<v> <Button Type = "Button" id = "DropDownMenu1" Data-Toggle = "Dropdown"> Dropdown <span> </span> </ Button> <Ul Role = "Menu" Aria-LABELLEDBY = "DropdownMenu1"> <li rôle = "Présentation"> <a rôle = "Menuitem" role = "présentation"> <a role = "menutem" tabindex = "- 1" href = "#"> une autre action </a> </li> <li role = "présentation"> <a role = "menutem" tabindex = "- 1" href = "#"> autre chose ici </a> </li> <li role = "présentation"> </li> <li role = " tabindex = "- 1" href = "#"> lien séparé </a> </li> </ul> </div>
Il suffit d'ajouter une classe de style texte en texte à la balise UL dans le code ci-dessus.
3. Titre
Un ensemble d'actions peut être marqué en ajoutant un titre dans n'importe quel menu déroulant.
<h1> menu déroulant </h1> <v> <Button Type = "Button" id = "DropDownMenu1" Data-Toggle = "Dropdown"> Dropdown <span> </span> </ftont> <ul Role = "Menu" Aria-LabelledBy = "DropdownMenu1"> <li rôle = "Présentation"> Menuit de Dropdow tabindex = "- 1" href = "#"> action </a> </li> <li role = "présentation"> <a role = "menutem" tabindex = "- 1" href = "#"> une autre action </a> </li> <li role = "présentation"> <a role = "Menuitem" Tabindex = "- 1" href = "# #"> quelque chose autre role = "présentation"> </li> <li role = "présentation"> En-tête déroulant </li> <li role = "présentation"> <a role = "menutem" tabindex = "- 1" href = "#"> lien séparé </a> </li> </ul> </v>
L'essentiel est d'ajouter une classe de style .dropdown-header dans <li role = "présentation"> En-tête déroulante </li>.
4. Éléments de menu désactivés
Ajouter. Dédiction à <li> dans le menu déroulant pour désactiver le lien.
Continuez à modifier le code ci-dessus pour remplacer le code dans la ligne de quelque chose d'autre ici
Copiez le code comme suit: <li role = "présentation"> <a role = "menutem" tabindex = "- 1" href = "#"> autre chose ici </a> </li>
Ajoutez principalement des classes de style.
Après l'avoir exécuté, vous pouvez voir l'effet. En fait, l'effet est similaire au style de titre ci-dessus. Lorsque vous cliquez sur, une icône désactivée sera affichée.
5. Cas de base
1) menu déroulant de type bouton
Mettez tous les boutons dans le groupe .btn et ajoutez la marque de menu correcte pour faire un déclencheur de menu déroulant.
Menu déroulant à bouton unique
Changez simplement quelques marques de base et transformez le bouton en un commutateur de menu déroulant.
<div> <Button Type = "Button" Data-Toggle = "Dropdown"> Action <span> </span> </fitton> <Ul Role = "Menu"> <li> <a href = "#"> Action </a> </li> <li> <a href = "#"> Une autre action </a> </li> <li> <li> <li> <a href = "#"> Lien séparé </a> </li> </ul> </div>
Menu extrait du bouton divisé
De même, le menu déroulant du bouton Split nécessite la même marque de changement, mais un seul bouton séparé de plus.
<div> <Button Type = "Button"> Action </ Button> <div> <Button Type = "Button" Data-Toggle = "Dropdown"> <span> </span> <span> Toggle Dropdown </span> </sponte> <ul Role = "Menu"> <li> <a href = "#"> Action </a> </li> <li> <a href = "#"> href = "#"> autre chose ici </a> </li> <li> </li> <li> <a href = "#"> Lien séparé </a> </li> </div> </ div>
Vous ne pouvez cliquer que sur la petite icône pour apparaître.
2) taille
Le bouton de menu déroulant s'applique aux boutons de toutes tailles.
<div> <Button Type = "Button" Data-Toggle = "Dropdown"> Big Button <span> </span> </button> <ul> ... </ul> </div> <! - Small Button Group -> <div> <Button Type = "Button" Data-Toggle = "Dropdown"> Button <span> </span> </ / Button> <ul> ... </ul> </v> <! - Extra Small Button Groupe de bouton - <ul> </ul> </v> <! data-toggle = "Dropdown"> Button supplémentaire <span> </span> </fitton> <ul> ... </ul> </div>
Contrôlez la taille du bouton via les classes de style .BTN-LG, .BTN-SM et .BTN-XS.
3) menu contextuel vers le haut
L'ajout de .dropup à l'élément parent fera le menu déroulant déclenché au-dessus de l'élément.
<div> <Button Type = "Button"> DROPUP </ Button> <Button Type = "Button" Data-Toggle = "Dropdown"> <span> </span> <span> Toggle Dropdown </span> </utton> <ul> <! - Liens de menu Dropdown -> </ul> </div>
Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour étudier et vous attacher 3 sujets passionnants:
Tutoriel d'apprentissage bootstrap
Tutoriel pratique de bootstrap
Tutoriel d'utilisation du plug-in bootstrap
Cet article présente principalement le contenu pertinent du menu déroulant, puis introduit la combinaison de boutons et de menus déroulants. Il y a pas mal de changements et le style est également bon. J'espère que tout le monde aime ça.