Le groupe de boutons est également un composant indépendant. Le groupe de bouton est le même que le composant de menu déroulant et doit s'appuyer sur le plugin bouton.js pour fonctionner normalement.
Combinez un groupe de <div> en un <v> pour faire des composants plus complexes.
<div role = "Toolbar"> <v> <Button Type = "Button"> 1 </ Button> <Button Type = "Button"> 2 </ Button> <Button Type = "Button"> 3 </ Button> <Button Type = "Button"> 4 </ Button> <Button Type = "Button"> 5 </ Button> <Button Type = "Button"> 5 </ Button> <bouton type = "Button"> 6 < Type = "Button"> 7 </ Button> <Button Type = "Button"> 8 </ Button> </div> <div> <Button Type = "Button"> 9 </ Button> </div> </div>
Le menu déroulant de bouton ne ressemble qu'à le menu déroulant. La seule différence entre eux est que le conteneur externe div.dropdown est remplacé par div.btn-group
<div> <Button Data-Toggle = "Dropdown"> Button Menu <span> </span> </ bouton> <ul> <li> <a href = "#"> Liste des menus 1 </a> </li> <li> <a href = "#"> Menu la liste des menues 3 </a> href = "#"> Menu List 4 </a> </li> <li> <a href = "#"> Liste des menus 5 </a> </li> </ul> </div>
Fichier bootstrap.css
.btn-group .dropdown-toggle: actif, .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: Aucun; Box-shadow: aucun;}Le triangle vers le haut vers le bas du bouton
Le triangle vers le bas du bouton est en ajoutant un élément de balise de portée à la balise de bouton, et le nom de classe est .caret
<Button Data-Toggle = "Dropdown"> Menu déroulant du bouton <span> </span> </futton>
Cette forme de triangle est mise en œuvre via CSS. Ce qui suit est le code source de bootstrap.css:
.Caret {affichage: bloc en ligne; Largeur: 0; hauteur: 0; marge-gauche: 2px; Adigne vertical: milieu; Border-top: 4px solide; Border-droite: 4px solide transparent; bordure-gauche: 4px solide transparent;}Ce qui précède concerne cet article, j'espère qu'il sera utile à l'apprentissage de tout le monde.