Ce chapitre se concentrera sur le menu déroulant Bootstrap. Le menu déroulant est commutable et est un menu contextuel qui affiche le lien au format de liste. Cela peut être réalisé grâce à l'interaction avec le plugin JavaScript du menu déroulant (Dropdown).
Pour utiliser le menu suivant, ajoutez simplement un menu déroulant en classe .Dropdown. L'exemple suivant montre le menu déroulant de base:
<! Doctype html> <html> <éad- head> <itle> instance bootstrap - menu dropdown (dropdowns) </ title> <link href = "/ bootstrap / css / bootstrap.min.css" rel = "Stylesheet"> <script src = "/ scripts / jquery.min.js"> </ script> src = "/ bootstrap / js / bootstrap.min.js"> </cript> <body> <v> <Button Type = "Button" id = "DropdownMenu1" Data-Toggle = "Dropdown"> Enseignement <span> </span> </ Button> <ul Role = "Menu" Aria-LabelledBy = "DropdownMenu1"> <li Role = "Menu"> <a Role = "Menushem =" Role = "Role =" tabindex = "- 1" href = "#"> java </a> </li> <li role = "présentation"> <a role = "menutem" tabindex = "- 1" href = "#"> Mining de données </a> </li> <li role = "présentation"> <a role = "Menuitem" tabindex = "- 1" href = "#> data Communication / réseau </a> </li> <li role = "présentation"> </li> <li role = "présentation"> <a role = "menutem" tabindex = "- 1" href = "#"> Liens séparés </a> </li> </ul> </v> </ body> </html>
Les résultats sont les suivants:
Options de menu déroulant bootstrap
Alignement de menu déroulant Bootstrap
Alignez le menu déroulant directement en ajoutant la classe .Pull-droite à .dropdown-menu. L'exemple suivant le démontre:
<! Doctype html> <html> <éad- head> <itle> instance bootstrap - menu drop-down à droite </ title> <link href = "/ bootstrap / css / bootstrap.min.css" rel = "Stylesheet"> <script src = "/ scripts / jquery.min.js"> </ script> src = "/ bootstrap / js / bootstrap.min.js"> </cript> <body> <v> <Button type = "Button" id = "DropdownMenu1" Data-Toggle = "Dropdown"> Topic <span> </span> </ Button> <ul Role = "menu" Aria-LabelledBy = "DropdownMenu1"> <li role = "Menu"> <a Role = "Role =" Role = " tabindex = "- 1" href = "#"> java </a> </li> <li role = "présentation"> <a role = "menutem" tabindex = "- 1" href = "#"> Mining de données </a> </li> <li role = "présentation"> <a role = "Menuitem" tabindex = "- 1" href = "#> data Communication / réseau </a> </li> <li role = "présentation"> <a role = "présentation"> <a role = "menuitem" tabindex = "- 1" href = "#"> lien séparé </a> </li> </ul> </div> </ body> </html>
Les résultats sont les suivants:
Titre du menu déroulant Bootstrap
Vous pouvez utiliser le casse-tête de classe pour ajouter un titre à la zone d'étiquette du menu déroulant. L'exemple suivant le démontre:
<! Doctype html> <html> <éad- head> <ititle> Exemple bootstrap - Titre de menu de dropdown </ title> <link href = "/ bootstrap / css / bootstrap.min.css" rel = "Stylesheet"> <script src = "/ scripts / jquery.min.js"> </ script> src = "/ bootstrap / js / bootstrap.min.js"> </cript> <body> <v> <Button type = "Button" id = "DropdownMenu1" Data-Toggle = "Dropdown"> Topic <span> </span> </ Button> <ul Role = "menu" Aria-LabelledBy = "DropdownMenu1"> <l role = "Menu"> Drop-down menu-down Menu Titre </li> <li role = "présentation"> <a role = "menutem" tabindex = "- 1" href = "#"> java </a> </li> <li role = "présentation"> <a role = "menutem" tabindex = "- 1" href = "#"> Minuit de données </a> </li> <li role = "présentation"> <a role = "Menuitem" tabindex = "- 1" href = "#"> Communication / réseau de données </a> </li> <li role = "présentation"> </li> <li role = "présentation"> Titre de menu déroulant </li> <li role = "présentation"> <a role = "Menuitem" Tabindex = "- 1" href = "#"> Disason lien </a> </li> </ul> </div> </ body> </html>
Les résultats sont les suivants:
Ce qui précède est la connaissance pertinente du menu déroulant Bootstrap du didacticiel de la mise en page Bootstrap qui vous est présenté par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!