Le chapitre de menu déroulant bootstrap explique le menu déroulant, mais n'implique pas la partie d'interaction. Ce chapitre expliquera en détail l'interaction du menu déroulant. À l'aide du plugin déroulant, vous pouvez ajouter des menus déroulants à n'importe quel composant (tels que les barres de navigation, les onglets, les menus de navigation de capsule, les boutons, etc.).
Si vous souhaitez référencer la fonctionnalité du plugin séparément, vous devez référencer Dropdown.js. Ou, comme mentionné dans le chapitre Bootstrap Plugin Présentation, vous pouvez vous référer à bootstrap.js ou versions compressées de bootstrap.min.js.
1. Utilisation
Vous pouvez basculer le contenu caché du plugin de menu déroulant (Dropdown):
1. Utilisez l'attribut de données: ajoutez des données-toggle = "Dropdown" au lien ou au bouton pour changer le menu déroulant, comme indiqué ci-dessous:
<div> <a data-toggle = "dropdown" href = "#"> Dropdown Trigger </a> <ul role = "menu" aria-labelledby = "dLabel"> ... </ul> </div>
Si vous devez garder le lien intact (utile lorsque le navigateur n'activait pas JavaScript), utilisez la propriété Data-Target au lieu de href = "#":
<div> <a id = "dLabel" role = "bouton" data-toggle = "dropdown" data-target = "#" href = "/ page.html"> menu dropdown (dropdown) <span> </span> </a> <ul role = "menu" aria-labelledby = "dLabel"> ... </ul> </v>
2. Grâce à JavaScript: Pour passer à travers JavaScript, veuillez utiliser la méthode suivante:
$ ('. Dropdown-toggle'). Dropdown ()
2. Exemple simple de menu déroulant
En général, le code est le même que les méthodes de composants:
// Utilisation déclarative <v> <Button Data-Toggle = "Dropdown"> Menu déroulant <span> </span> </ Button> <ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> Produit </a> </li> <li> <a href = "#"> Informations </a> href = "#"> À propos de </a> </li> </ul> </div>
Le cœur clé de l'utilisation déclarative:
1. Utilisez des packages pour les conteneurs périphériques;
2. Binding data-toggle = "Dropdown" pour l'événement du bouton de clic interne;
3. Utilisez des éléments de menu.
// Si le bouton est à l'extérieur du conteneur, il peut être lié via le cible des données. <Button id = "btn" data-toggle = "dropdown" data-target = "# dropdown"> Dans les appels javascript, il n'y a pas de propriétés et la méthode n'est pas facile à utiliser. Voici quatre événements de base. // la méthode du menu déroulant, mais a toujours besoin de données - * $ ('# btn'). Dropdown (); $ ('# btn'). Dropdown ('toggle');Le menu déroulant prend en charge 4 types d'événements, correspondant à avant la fenêtre contextuelle, après la fenêtre contextuelle, avant la fermeture et après la fermeture.
// événements, autres $ similaires ('# dropdown'). Sur ('show.bs.dropdown', function () {alert ('freaks immédiatement lorsque la méthode Show est appelée!');});3. Utilisation des menus déroulants dans la page Tab
<! Doctype html> <html> <éad- head> <itle> instance bootstrap - page de balise avec menu drop-down </ title> <link href = "/ bootstrap / css / bootstrap.min.css" rel = "stylesheet"> <script src = "/ scripts / jQuery.min.js"> </ script> src = "/ bootstrap / js / bootstrap.min.js"> </ script> <body> <p> Page de balise avec menu déroulant </p> <ul> <li> <a href = "#"> Accueil </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a href = "#"> ios </a> </li> <li> <a href = "#"> vb.net </a> </li> <li> <a data-toggle = "dropdown" href = "#"> java <span> </span> </a> <ul> <li> <a href = "#"> swing </a> href = "#"> jMeter </a> </li> <li> <a href = "#"> ejb </a> </li> <li> <a href = "#"> lien signé </a> </li> </li> </li> <li> <a href = "#"> Php </a> </li> </ul>
Image de reproduction:
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
Ce qui précède concerne cet article, j'espère qu'il sera utile à l'apprentissage de tout le monde.