Exemple de tutoriel de menu déroulant du bouton Bootstrap

Comme mentionné précédemment

Du point de vue de l'apparence, le menu déroulant des boutons est fondamentalement le même que le menu déroulant. La différence est que les menus déroulants ordinaires sont des éléments de bloc, tandis que les menus déroulants de boutons sont des éléments de bloc en ligne. Cet article présentera en détail le menu déroulant du bouton Bootstrap

Vue d'ensemble

Le menu déroulant du bouton est en fait un menu déroulant ordinaire, la seule différence est le conteneur externe "div.dropdown" Changé en "div.btn-group", l'affichage est passé de bloc à bloc en ligne

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">按钮式下拉菜单 <span class="caret"></span>
  </button>
  <ul class="dropdown-menu"><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><div class="dropdown">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">普通下拉菜单 <span class="caret"></span>
  </button>
  <ul class="dropdown-menu"><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>

Pop up

Certains menus doivent apparaître. Par exemple, le menu est en bas de la page, et ce menu a un menu déroulant Dans l'ordre. pour offrir aux utilisateurs une meilleure expérience, le menu déroulant doit apparaître. Dans le framework Bootstrap, un nom de classe "dropup" est spécialement proposé pour cet effet. Il vous suffit d'ajouter ce nom de classe à "btn-group"

[Triangle]

Bouton La valeur par défaut. Le triangle vers le bas est créé en ajoutant un élément de balise "" à la balise et en le nommant "caret"

　　按钮下拉菜单

Copier après la connexion

Ce triangle est complètement implémenté. via le code CSS

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px solid;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

Copier après la connexion

De plus, le triangle "caret" dans le bouton a été stylisé dans une certaine mesure :

.btn .caret {
  margin-left: 0;
}.btn-lg .caret {
  border-width: 5px 5px 0;
  border-bottom-width: 0;
}.dropup .btn-lg .caret {
  border-width: 0 5px 5px;
}

Copier après la connexion

Si la direction du triangle doit être affichée vers le haut, vous devez ajouter le nom de la classe "dropup" à la classe ".btn-group". On peut voir que la différence entre le triangle ascendant et le triangle descendant : En fait. , cela change une valeur de bordure inférieure

.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
  content: "";
  border-top: 0;
  border-bottom: 4px solid;
}

Copier après la connexion

<div class="btn-group dropup" style="margin-top:140px"><button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button><ul class="dropdown-menu"><li><a href="##">按钮下拉菜单项</a></li><li><a href="##">按钮下拉菜单项</a></li><li><a href="##">按钮下拉菜单项</a></li><li><a href="##">按钮下拉菜单项</a></li></ul></div>

Copier après la connexion

Type de partage

Type divisé Le menu déroulant du bouton est en fait une séparation artificielle du bouton et du triangle, de sorte qu'à la fin il n'y a qu'un seul bouton séparé

<div class="btn-group">
  <button type="button" class="btn">Action</button>
  <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span>
  </button>
  <ul class="dropdown-menu"><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

Taille

Le menu déroulant des boutons convient aux boutons de toutes tailles, y compris btn-xs, btn-lg, btn-sm, etc. Bien sûr, la liste déroulante ordinaire prend également en charge la modification de la taille du bouton

<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li>
  </ul></div><div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li>
  </ul></div><div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu"><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

Enfin

Pour une utilisation étendue des listes déroulantes ordinaires, tels que les séparateurs, les séparateurs, l'alignement, l'état des éléments de menu, etc., les menus déroulants des boutons sont également pris en charge. Par conséquent, je pense personnellement qu'il est un peu redondant de configurer le composant de menu déroulant des boutons dans bootstrap. C'est seulement la différence entre le bloc et le bloc en ligne, mais il n'y a pas de différence fonctionnelle

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!