Implémentation du menu déroulant sous le framework Bootstrap (exemple de code)-js tutoriel-php.cn

Ce que cet article vous apporte concerne la mise en œuvre de menus déroulants dans le cadre Bootstrap (exemples de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Des menus contextuels ou des éléments de menu masqués/affichés sont souvent nécessaires lors de l'interaction avec des pages Web. Bootstrap fournit un menu contextuel commutable pour afficher une liste de liens par défaut. 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 le menu déroulant Bootstrap (recommandation de cours gratuite : tutoriel bootstrap)

Comment l'utiliser

Lors de l'utilisation le menu déroulant du framework Bootstrap, Il faut appeler le fichier bootstrap.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. Vous pouvez également appeler ce fichier js

car les effets d'interaction des composants de Bootstrap dépendent tous d'un plug. -in écrit par la bibliothèque jQuery, donc avant d'utiliser bootstrap.js, jquery.js doit d'abord être chargé pour produire des effets

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></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 l'intégralité de l'élément du menu déroulant

<div class="dropdown"></div>

Copier après la connexion

2. Utilisez un < button> comme menu parent. Et définissez le nom de la classe "dropdown-toggle" et l'attribut personnalisé "data-toggle", et la valeur doit être cohérente avec le nom de la classe du conteneur le plus externe

<button class="btn dropdown-toggle" type="button" data-toggle="dropdown">

Copier après la connexion

3. L'élément de menu déroulant utilise une liste ul et définit une classe nommée "menu déroulant"

<ul class="dropdown-menu" role="menu">

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" 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

Implémentation du menu déroulant sous le framework Bootstrap (exemple de code)

4. En définissant la classe .dropup pour l'élément parent du drop. -menu bas, vous pouvez faire apparaître le menu (la valeur par défaut est de apparaître vers le bas)

<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

Implémentation du menu déroulant sous le framework Bootstrap (exemple de code)

Analyse des principes

Pour le composant de menu déroulant du framework Bootstrap, ses éléments de menu déroulant sont masqués par défaut car le "menu déroulant" par défaut le style est défini sur "display:none" ; lorsque l'utilisateur clique sur l'élément de menu parent, le menu déroulant s'affiche ; lorsque l'utilisateur clique à nouveau, le menu déroulant continue à se cacher, liaison d'événement pour. tous les éléments avec le style data-toggle="dropdown"

2. Lorsque l'utilisateur clique sur un lien ou un bouton avec le style data-toggle="dropdown", le code d'événement javascript est déclenché

.dropdown-menu {
  position: absolute;/*设置绝对定位，相对于父元素p.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

3 . Le code d'événement javascript ajoute un style .open au conteneur parent

4. Le menu .dropdown-menu qui est masqué par défaut peut être affiché après avoir un style .open en externe pour obtenir l'effet souhaité.

5. Lorsque l'utilisateur clique à nouveau, le nom de la classe "open" dans le conteneur "p.dropdown" sera à nouveau supprimé

【Autres utilisations】

Une autre utilisation intéressante est que l'élément déclencheur peut être placé en dehors du conteneur parent du menu

Cependant, il existe deux façons d'utiliser cela Points à noter

.open > .dropdown-menu {
  display: block;
}

Copier après la connexion

1. Définissez la valeur id du conteneur parent

2. Définissez l'attribut data-toggle et l'attribut data-target de l'élément déclencheur. La valeur de l'attribut data-target est #id< 🎜. >

Utilisation étendue

<button class="btn dropdown-toggle" type="button" data-toggle="dropdown" data-target="#dropdown1">外部触发器</button>
<div class="dropdown" id="dropdown1">
    <ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
        <li role="presentation"><a href="##">HTML</a></li>
        <li role="presentation"><a href="##">CSS</a></li>
        <li role="presentation"><a href="##">javascript</a></li>
    </ul>
</div>

Copier après la connexion

【 Séparateur ]

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

;li>Ajoutez le nom de classe "pider" pour implémenter la fonction d'ajout de séparateurs déroulants

Implémentation du menu déroulant sous le framework Bootstrap (exemple de code)

.dropdown-menu .pider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}

Copier après la connexion

<li role="separator" class="pider"></li>

Copier après la connexion

[Titre du menu]

<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" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Copier après la connexion

dans n'importe quelle goutte- menu bas Un groupe d'actions peut être identifié en ajoutant un titre

Implémentation du menu déroulant sous le framework Bootstrap (exemple de code)

<li class="dropdown-header">Dropdown header</li>

Copier après la connexion

Implémentation du menu déroulant sous le framework Bootstrap (exemple de code)

【对齐方式】

Bootstrap框架中下拉菜单默认是左对齐，如果想让下拉菜单相对于父容器右对齐时，可以在“dropdown-menu”上添加一个“dropdown-menu-right”类名

.dropdown-menu-right {
  right: 0;
  left: auto;
}

Copier après la connexion

由于