Explication détaillée des compétences du menu déroulant du bouton Bootstrap Component

Explication détaillée des compétences du menu déroulant du bouton Bootstrap Component_Javascript

WBOY

Libérer： 2016-05-16 09:00:23

original

2223 Les gens l'ont consulté

Le groupe de boutons est également un composant indépendant. Comme le composant de menu déroulant, le groupe de boutons doit s'appuyer sur le plug-in bouton.js pour fonctionner correctement.

Combinez un groupe de

en un

<div class="btn-toolbar" role="toolbar">
 <div class="btn-group">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>
  <button type="button" class="btn btn-default">3</button>
  <button type="button" class="btn btn-default">4</button>
  <button type="button" class="btn btn-default">5</button>
  <button type="button" class="btn btn-default">6</button>
 </div>
 <div class="btn-group">
  <button type="button" class="btn btn-default">7</button>
  <button type="button" class="btn btn-default">8</button>
 </div>
 <div class="btn-group">
  <button type="button" class="btn btn-default">9</button>
 </div>
 </div>

Copier après la connexion

Les menus déroulants des boutons ont fondamentalement la même apparence que les menus déroulants. La seule différence entre eux est que le conteneur externe div.dropdown est remplacé par div.btn-group

<div class="btn-group">
 <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  按钮下拉菜单
  <span class="caret"></span>
 </button>
 <ul class="dropdown-menu">
  <li><a href="#">菜单列表1</a></li>
  <li><a href="#">菜单列表2</a></li>
  <li><a href="#">菜单列表3</a></li>
  <li><a href="#">菜单列表4</a></li>
  <li><a href="#">菜单列表5</a></li>
 </ul>
 </div>

Copier après la connexion

fichier bootstrap.css

.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
 outline: 0;
}
.btn-group > .btn + .dropdown-toggle {
 padding-right: 8px;
 padding-left: 8px;
}
.btn-group > .btn-lg + .dropdown-toggle {
 padding-right: 12px;
 padding-left: 12px;
}
.btn-group.open .dropdown-toggle {
 -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn-group.open .dropdown-toggle.btn-link {
 -webkit-box-shadow: none;
  box-shadow: none;
}

Copier après la connexion

Triangle descendant vers le haut du bouton

Le triangle vers le bas du bouton est créé en ajoutant un élément de balise span à la balise du bouton, et le nom de la classe est .caret

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 按钮下拉菜单
 <span class="caret"></span>
</button>

Copier après la connexion

Cette forme triangulaire est implémentée via CSS. Voici le code source de bootstrap.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

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.

Étiquettes associées：

bootstrap dérouler 按钮菜单

source：php.cn

Article précédent：Explication détaillée du groupe de boutons Bootstrap du composant JS et des compétences déroulantes button_javascript Article suivant：Compétences code_javascript pour la mise en œuvre du service Web d'appel inter-domaines Ajax

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

Derniers articles par auteur