Exemple de tutoriel du menu déroulant Bootstrap

Ce chapitre expliquera comment utiliser la classe Bootstrap pour ajouter un menu déroulant à un bouton. Pour ajouter un menu déroulant à un bouton, placez simplement le bouton et le menu déroulant dans un groupe .btn. Vous pouvez également utiliser pour indiquer que le bouton agit comme un menu déroulant.

L'exemple suivant montre un menu déroulant de bouton simple :

Exemple

<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">默认        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li>
            <a href="#">功能</a>
        </li>
        <li>
            <a href="#">另一个功能</a>
        </li>
        <li>
            <a href="#">其他</a>
        </li>
        <li class="divider"></li>
        <li>
            <a href="#">分离的链接</a>
        </li>
    </ul></div><div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">原始        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li>
            <a href="#">功能</a>
        </li>
        <li>
            <a href="#">另一个功能</a>
        </li>
        <li>
            <a href="#">其他</a>
        </li>
        <li class="divider"></li>
        <li>
            <a href="#">分离的链接</a>
        </li>
    </ul></div>

Utilisation de base

Utilisation du framework Bootstrap Lors de l'utilisation d'un Composant de menu déroulant, il est très important d'utiliser sa structure correctement. 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. Utilisez un package conteneur. nommé "dropdown" L'élément entier du menu déroulant

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

2. Utilisez un bouton 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 classe de 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 un nom de classe "menu déroulant"

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

Copier après la connexion

  
  
  ActionAnother actionSomething else here

Copier après la connexion

4. En définissant le .dropup classe pour l'élément parent du menu déroulant, vous pouvez Le menu apparaît (la valeur par défaut est pop-down)

<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

Bootstrap Pour le composant de menu déroulant du framework, ses éléments de menu déroulant sont masqués par défaut car le style par défaut de "menu déroulant" est défini sur " display:none"; lorsque l'utilisateur clique sur l'élément de menu parent, le menu déroulant sera affiché; lorsque l'utilisateur cliquera à nouveau, le menu déroulant continuera à se cacher

.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

Analysons maintenant le principe de mise en œuvre. C'est très simple. Grâce à la technologie js, ajoutez ou supprimez le nom de la classe "open" pour contrôler l'affichage ou le masquage du menu déroulant. C'est-à-dire que par défaut, « div.dropdown » n'a pas le nom de classe « open ». Lorsque l'utilisateur clique pour la première fois, « div.dropdown » ajoutera le nom de classe « open » lorsque l'utilisateur clique ; encore une fois, "div.dropdown" "Le nom de classe "ouvert" dans le conteneur sera à nouveau supprimé

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

Copier après la connexion

Utilisation étendue

[ligne de séparation]

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

Dropdown

• Action
• Another action
• Something else here
<li role="separator" class="divider"></li>
• Separated link