Maison > interface Web > Tutoriel d'amorçage > Comment déclencher le menu déroulant dans bootstrap

Comment déclencher le menu déroulant dans bootstrap

爱喝马黛茶的安东尼
Libérer: 2019-07-16 17:36:07
original
2492 Les gens l'ont consulté

Comment déclencher le menu déroulant dans bootstrap

Menu déroulant (utilisation de base)

Amis, veuillez noter que le composant du menu déroulant dans le framework Bootstrap est Un composant indépendant, selon différentes versions, ses fichiers correspondants :

☑ Version LESS : le fichier de code source correspondant est dropdowns.less

☑ Version Sass : le code source correspondant le fichier est _dropdowns .sass

☑ Version Bootstrap compilée : Vérifiez les lignes 3004 à 3130 du fichier bootstrap.css

Lorsque vous utilisez le menu déroulant du framework Bootstrap, vous devez appeler le bootstrap fourni par le framework Bootstrap. Bien entendu, si vous utilisez la version non compilée, vous pouvez trouver un fichier nommé « dropdown.js » dans le dossier js. Vous pouvez également appeler ce fichier js. Cependant, dans notre tutoriel, nous appelons uniformément le fichier compressé « bootstrap.min.js » :

Le code est le suivant :

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
Copier après la connexion

Déclaration spéciale :

Étant donné que les effets d'interaction des composants de Bootstrap reposent tous sur des plug-ins écrits dans la bibliothèque jQuery, jquery.min.js doit être chargé avant d'utiliser bootstrap.min.js pour obtenir l'effet.

Regardons d'abord un exemple simple sur le site officiel :

<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
 …
 <li role="presentation" class="divider"></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
</ul>
</div>
Copier après la connexion

Recommandations associées : "Tutoriel de démarrage de Bootstrap"

Utilisation :

Lors de l'utilisation du composant de menu déroulant dans le framework Bootstrap, il est très important d'utiliser la structure correcte. Si la structure et le nom de la classe ne sont pas utilisés correctement, cela affectera directement si le. Le composant peut être utilisé normalement. Jetons un bref coup d'œil :

1. Utilisez un conteneur nommé "dropdown" pour envelopper l'intégralité de l'élément de menu déroulant :

2. Le bouton est utilisé comme menu parent, et le nom de la classe "dropdown-toggle" et l'attribut personnalisé "data-toggle" sont définis, et la valeur doit être cohérente avec le nom de la classe du conteneur le plus à l'extérieur. Cet exemple est :

data-toggle="dropdown"
Copier après la connexion
.

3. Dropdown L'élément de menu utilise une liste ul et définit une classe nommée "dropdown-menu". Cet exemple est :

<ul class="dropdown-menu">
Copier après la connexion

Exemple





下拉菜单


<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
Copier après la connexion

Comment déclencher le menu déroulant dans bootstrap

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal