Mots précédents
Lors de l'interaction avec des pages Web, des menus contextuels ou des éléments de menu masqués/affichés sont souvent nécessaires. Bootstrap fournit par défaut un menu contextuel commutable pour afficher une liste de liens. De plus, l'affichage du menu dans différents états interactifs doit être utilisé conjointement avec le plug-in javascript. Cet article présentera en détail comment utiliser le menu déroulant Bootstrap
Lorsque vous utilisez le menu déroulant du framework Bootstrap, vous devez appeler le bootstrap Fichier .js fourni par le framework Bootstrap. Bien sûr, si vous utilisez la version non compilée, vous pouvez trouver un fichier nommé "dropdown.js" dans le dossier js, et vous pouvez également appeler ce fichier js
car les effets d'interaction des composants de Bootstrap dépendent tous de A plug-in écrit par la bibliothèque jQuery, donc jquery.js doit être chargé avant d'utiliser bootstrap.js pour produire des effets
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css?1.1.11" rel="stylesheet"></head><body><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js?1.1.11"></script><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js?1.1.11"></script></body></html> Copier après la connexion
Utilisation de base 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
1. Utiliser Un conteneur nommé "dropdown" enveloppe tout l'élément du menu déroulant
<div class="dropdown"></div> Copier après la connexion
2. Utiliser un bouton
et définissez le nom de classe "dropdown -toggle" et les attributs personnalisés "data-toggle", et la valeur doit être cohérente avec le nom de classe du conteneur le plus externe
<button class="btn dropdown-toggle" type="button" data-toggle="dropdown"> Copier après la connexion
<ul class="dropdown-menu" role="menu"> Copier après la connexion
ActionAnother actionSomething else here Copier après la connexion
4. Passer en tant que parent du menu déroulant La classe de paramètres d'élément permet au menu d'apparaître (la valeur par défaut est de apparaître vers le bas) .dropup
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Dropup<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li>
</ul></div> Copier après la connexion
Analyse des principes
.dropdown-menu {
position: absolute;/*设置绝对定位，相对于父元素div.dropdown*/
top: 100%;/*让下拉菜单项在父菜单项底部，如果父元素不设置相对定位，该元素相对于body元素*/
left: 0;
z-index: 1000;/*让下拉菜单项不被其他元素遮盖住*/
display: none;/*默认隐藏下拉菜单项*/
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
} Copier après la connexion
.open > .dropdown-menu {
display: block;
} Copier après la connexion
Utilisation étendue
Le menu déroulant du framework Bootstrap fournit un séparateur déroulant. En supposant que le menu déroulant comporte deux groupes, vous pouvez ajouter un et ajoutez une classe à ce Nom "diviseur" pour implémenter la fonction d'ajout de séparateurs déroulants
.dropdown-menu .divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
} Copier après la connexion
<li role="separator" class="divider"></li> Copier après la connexion
Copier après la connexion
【Titre du menu】
Vous pouvez ajouter un titre à n'importe quel menu déroulant pour indiquer un ensemble d'actions
<li class="dropdown-header">Dropdown header</li> Copier après la connexion
.dropdown-header {
display: block;
padding: 3px 20px;
font-size: 12px;
line-height: 1.42857143;
color: #999;
} Copier après la connexion
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Dropdown<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"><li role="presentation" class="dropdown-header">第一部分菜单头部</li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li><li role="presentation" class="divider"></li><li role="presentation" class="dropdown-header">第二部分菜单头部</li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
</ul></div> Copier après la connexion
[Alignement]
Le menu déroulant dans le framework Bootstrap est aligné à gauche par défaut. Si vous souhaitez que le menu déroulant soit relatif au conteneur parent. Lorsqu'il est aligné à droite, vous pouvez ajouter un nom de classe "dropdown-menu-right" sur "dropdown-menu"
.dropdown-menu-right {
right: 0;
left: auto;
} Copier après la connexion
Default Il s'agit d'un élément de niveau bloc qui remplit la largeur de son parent. Ici, vous devez définir inline-block et margin-left pour l'élément afin que son contenu s'étende sur la largeur et soit à une certaine distance de la gauche
display: inline-block;
margin-left: 60px; Copier après la connexion
<div class="dropdown" style="display: inline-block;margin-left: 60px;">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Dropdown<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1"><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li><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
[Statut de l'élément de menu]
L'état par défaut de l'élément de menu déroulant est l'état de survol (:hover) et l'état de focus (:focus)
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: #262626;
text-decoration: none;
background-color: #f5f5f5;
} Copier après la connexion
En plus des deux états ci-dessus, les éléments du menu déroulant ont également l'état actuel (.active) et l'état désactivé (.disabled). Pour utiliser ces deux états, il vous suffit d'ajouter le nom de la classe correspondante
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Dropdown<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"><li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li><li role="presentation" class="divider"></li><li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
</ul></div> Copier après la connexion
à l'élément de menu correspondant
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!
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
Comment télécharger Binance
La différence entre Win7 32 bits et 64 bits
Comment utiliser la porte dérobée Shift
Quels sont les espaces sans inscription en Chine ?
vlookup correspond à deux colonnes de données
Solution à l'échec de la connexion entre wsus et le serveur Microsoft
Quels sont les formats vidéo
caisse d'armurerie
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
