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 correctement.
Aspect structurel: utilisez un conteneur avec le nom de la classe BTN-groupe et placez plusieurs boutons dans ce conteneur.
Le groupe de bouton est également un composant indépendant, donc le fichier source correspondant peut être trouvé:
Moins: boutons.
Sass: _buttons.scss
CSS: Bootstrap.css Ligne 3131 ~ 3291
<div> <Button Type = "Button"> <span> </span> </ Button>… <Button Type = "Button"> <span> </span> </ Button> </div>
CSS:
.btn-group, .btn-group-vertical {position: relatif; affichage: bloc en ligne; Vertical-Align: Middle;}. btn-group> .btn, .btn-group-vertical> .btn {position: relatif; float: left;}. btn-group> .btn: hover, .btn-group-Tertic .BTN: Hover, .Btn-Group-Vertical> .BTn: Focus, .BTn-Group-Vertical> .BTn: focus, .btn-group-vertical> .btn: active, .btn-group-vertical> .btn: active, .btn-group> .btn.active, .btn-group-vertn> .btn.cactive {z-Index: 2;}. .btn: focus, .btn-group-vertical> .btn: focus {Outline: Aucun;}. btn-group .btn + .btn, .btn-group .btn + .btn-group, .btn-group .btn-group + .btn-group {margin-left: -1px;}En plus d'utiliser l'élément <frush>, vous pouvez également utiliser d'autres éléments de balise, tels que la balise <a>. La seule chose à garantir est que peu importe la balise utilisée, l'élément de balise dans le conteneur .btn-groupe doit avoir le nom de classe.BTN
Les quatre coins du groupe de boutons sont tous des coins arrondis, à l'exception des premier et dernier boutons qui ont des coins arrondis sur les bords, les autres boutons n'ont pas de coins ronds.
Explication détaillée:
1. Par défaut: tous les boutons sont des coins arrondis
2. À l'exception du premier bouton et du dernier bouton, les autres boutons seront arrondis.
3. Le dernier bouton n'est laissé que sous forme de coins arrondis et les coins inférieurs droits.
Code source:
.btn-group> .btn: non (: premier-enfant): non (: dernier-enfant): not (.dropdown-toggle) {border-radius: 0;}. btn-group> .btn: premier-enfant {margin-left: 0;}. {border-top-right-radius: 0; border-bottom-right-radius: 0;}. btn-group> .btn: dernier-enfant: not (: premier-enfant),. {Float: Left;}. Btn-group> .btn-group: non (: premier-enfant): non (: dernier-enfant)> .btn {border-radius: 0;}. btn-group> .btn-group: premier-enfant> .btn: dernier-enfant, .btn-group> .BTn-Group: First-child> .dropbow 0; border-bottom-right-radius: 0;}. Btn-group> .btn-group: dernier-enfant> .btn: premier-enfant {border-top-left-radius: 0; border-bottom-left-radius: 0;}Barre d'outils de groupe de bouton
Dans un éditeur de texte riche, organisez les groupes de boutones, tels que la copie, la coupe, collez un groupe, alignez la gauche, le centre, la droite et les deux extrémités, et utilisez la barre d'outils de bouton de trame bootstrap btn-toolbar
<div> <div>… </div> <div>… </div> <div>… </div> <div>… </div> <div>… </div> </div>
Principe: Laissez principalement plusieurs groupes de récipient. Les éléments du groupe .Btn flotter et conserver une distance extérieure gauche 5px entre les groupes.
.btn-toolbar {margin-left: -5px;}. btn-toolbar .btn-group, .btn-toolbar .input-group {float: left;}. btn-toolbar> .btn, .btn-toolbar> .btn-group, .btn-toolbar> .Input-group {margin-left: 5px;}Remarquez qui efface le flotteur sur BTN-Toolbar
.btn-toolbar: avant, .btn-toolbar: après {affichage: table; contenu: "";}. btn-toolbar: après {clear: les deux;}Exemple:
<div> <v> <Button Type = "Button"> <span> </span> </ Button> <Button Type = "Button"> <span> </span> </ Button> <Fut-Button> <Fut-Button> </span> </ Button> <Button Type = "Button"> <span> </span> </spande> <v> <div> <Button Type = "Button"> <pander> </span> </ / Button> </ Button> </ Button>
Bouton Regroupement
Plusieurs fois, nous organisons les groupes de boutones du menu déroulant pour obtenir un effet similaire au menu de navigation:
Lorsque vous l'utilisez, modifiez simplement le nom de classe du conteneur déroulant qui a fait le menu déroulant avant le groupe BTN et le placer au même niveau que le bouton normal:
<v> <Button Type = "Button"> Home </ Button> <Button Type = "Button"> Affichage du produit </ Button> <Button Type = "Button"> Analyse de cas </ Button> <Button Type = "Button"> Contactez-nous </ Button> <span> </ Span> </futoggle> <ul> <li> <a href = "#>" #> société " Profil </a> </li> <li> <a href = "#"> Culture d'entreprise </a> </li> <li> <a href = "#"> Structure organisationnelle </a> </li> <li> <a href = "#"> Service client </a> </li> </ul> </v> </v> .btn-group> .btn-group {float: float: à gauche;}. Btn-group> .btn-group: non (: premier-enfant): not (: dernier-enfant)> .btn {border-radius: 0;}. 0;}. BTN-Groupe> .BTn-Group: Last-Child> .BTn: First-Child {border-top-left-radius: 0; border-bottom-left-radius: 0;}. Btn-group .Dropdown-toggle: active, .btn-group.open .dropdown-toggle {outline: 0;}. .Dropdown-toggle {padding-right: 8px; padding-left: 8px;}. btn-group> .btn-lg + .dropdown-toggle {padding-right: 12px; padding-left: 12px;}. btn-group.open. rgba (0, 0, 0, .125); box-shadow: insert 0 3px 5px rgba (0, 0, 0, .125);}. btn-group.open .dropdown-toggle.btn-link {-webkit-box-shadow: non; box-shadow: non;}Boutons groupés verticalement
Remplacez simplement le nom de classe groupé horizontalement.btn-group par .btn-group-vertical.
<v> <Button Type = "Button"> Home </ Button> <Button Type = "Button"> Affichage du produit </ Button> <Button Type = "Button"> Analyse de cas </ Button> <Button Type = "Button"> Contactez-nous </ Button> <span> </ Span> </futoggle> <ul> <li> <a href = "#>" #> société " Profil </a> </li> <li> <a href = "#"> Culture d'entreprise </a> </li> <li> <a href = "#"> Structure organisationnelle </a> </li> <li> <a href = "#"> Service client </a> </li> </ul> </v> </v> .Btn-group-vert>. .btn-group, .btn-group-vertical> .btn-group, .btn-group-vertical> .btn-group-vertical> .btn-group-vertical> .btn {affiche: block; float: non; largeur: 100%; max-width: 100%;}. btn-group-vertic> .btn {float: notone;}. .btn + .btn, .btn-group-vertical> .btn + .btn-group, .btn-group-vertical> .btn-group + .btn, .btn-group-vertical> .btn-group + .btn-group {margin-top: -1px; margin-left: 0;}. .btn: non (: premier-enfant): non (: dernier-enfant) {border-top-right-radius: 4px; border-bottom-right-radius: .btn {border-bottom-left-radius: 0;}. btn-group-vertical> .btn: dernier-enfant: non (: premier-enfant) {border-top-left-radius: 0; border-top-right-radius) 0; border-bottom-left-radius: 4px;}. Btn-group-vertical> .btn-group: non (: premier-enfant): not (: dernier-enfant)> .btn {border-radius: 0;}. .btn-group: Premier-enfant: non (: dernier-enfant)> .dropdown-toggle {border-bottom-right-radius: 0; border-bottom-left-radius: 0;}. btn-group-vertical> .btn-group: Last-Child: Not (: premier-enfant)> .BTn: First-Child-Rad-Rad-Rad-rad-rad-rad-right: Border-Top-Left-Radius: 0; Border-Top-Right-Radius: 0;}Le bouton d'égalisation est également appelé le bouton de regroupement adaptatif:
La largeur de l'ensemble du groupe de bouton est à 100% du conteneur, et chaque bouton du groupe de bouton divise la largeur de l'ensemble du conteneur. Par exemple, il y a cinq boutons dans un groupe de bouton, chaque bouton est de 20% de la largeur du conteneur; Il y a quatre boutons dans un groupe de bouton, chaque bouton est de 25% de la largeur du conteneur;
Méthode d'implémentation: il suffit d'ajouter un nom de classe.
<div> <Buttton Type = "Button"> Home </ Buttton> <Buttton Type = "Button"> Analyse de cas </ Buttton> <Buttton Type = "Button"> Contactez-nous </ Buttton> </div> .BTN-Group-Justified {Affichage: Table; Width: 100%; Table-Layout: Fixed; Border-Collapse: Sépreuse;}. > .btn-group {display: table-cell; float: non; width: 1%;}. btn-group-justifié> .btn-group .btn {width: 100%;}Simuler .btn-group-justifié dans une table (affichage: table) et simulez le modèle de bouton à l'intérieur dans une cellule de table (affichage: table-cellule).
Remarque: Lors de la fabrication d'un groupe de boutons égaux, essayez d'utiliser la balise <a> pour fabriquer des boutons, car lors de l'utilisation des éléments de balise de bouton, l'utilisation de l'affichage: la table n'est pas conviviale pour prendre en charge dans certains navigateurs.
Lectures recommandées de wulin.com:
Explication détaillée du bouton bootstrap
Ce qui précède est le composant du bouton bootstrap qui vous est présenté par l'éditeur. J'espère que cela vous sera utile!