Exemple de tutoriel de menu déroulant du bouton 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.

Comme mentionné précédemment

Le menu déroulant de type bouton est fondamentalement le même que le menu déroulant en apparence. 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 afin d'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"

　　按钮下拉菜单

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;
}

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;
}

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;
}

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

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>

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>

Enfin

Certaines utilisations étendues des listes déroulantes ordinaires, telles 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!