简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > js tutoriel > le corps du texte

Bootstrap doit apprendre le menu déroulant tous les jours_compétences javascript

WBOY
Libérer： 2016-05-16 15:30:03
original
1101 Les gens l'ont consulté

1. Menu déroulant (utilisation de base)

Amis, veuillez noter que le composant menu déroulant du framework Bootstrap est un composant indépendant Selon les différentes versions, son fichier correspondant :

.

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

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

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

Lorsque vous utilisez le menu déroulant du framework Bootstrap, vous devez appeler le fichier bootstrap.js 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 » :

Copier le code Le code est le suivant :

Déclaration spéciale : Étant donné que les effets d'interaction des composants de Bootstrap reposent tous sur des plug-ins écrits par la bibliothèque jQuery, jquery.min doit être chargé avant d'utiliser bootstrap.min.js .js produira 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

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 composant peut être utilisé normalement. Jetons un coup d'oeil rapide :

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

2. Utilisez un bouton

Étiquettes associées：
bootstrap 下拉菜单
source：php.cn
Article précédent：Implémenter la fonction d'enregistrement du calendrier basée sur jquery_jquery Article suivant：Plug-in jQuery pour obtenir des effets de défilement transparents_jquery
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
Derniers articles par auteur
Derniers numéros
La page ne peut soudainement plus extraire le CSS ou le bootstrap Je suis donc en train de développer une page, j'en ai fait une partie hier et ça a très bi...
Depuis 2024-04-06 21:58:04
0
1
800
Comment résoudre le mystérieux espace vide en bas de page en CSS J'essaie de créer une page Web simple en utilisant Bootstrap et D3, mais je ne sais pas co...
Depuis 2024-04-06 20:22:15
0
1
454
Personnalisez l'apparence des en-têtes accordéon Bootstrap à l'aide de la classe CollapseDisplay Je souhaite styliser le titre de la carte d'un panneau avec la classeeffondrementshow. Dan...
Depuis 2024-04-06 12:53:11
0
1
376
Le commutateur Bootstrap ne fonctionne pas correctement lorsque la page Web est redimensionnée Description :<navxmlns:sec="http://www.thymeleaf.org/extras/spring-security"c...
Depuis 2024-04-05 08:45:39
0
1
3443
Afficher les fichiers PDF AWS en mode Bootstrap dans Laravel J'ai téléchargé l'URL AWS comme https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std_check/6...
Depuis 2024-04-04 22:16:18
0
1
1450
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！