Die Schaltflächengruppe entspricht der Dropdown-Menükomponente und muss sich auf das Plugin von Taste.js verlassen, um ordnungsgemäß zu funktionieren.
Struktureller Aspekt: Verwenden Sie einen Container mit Klassenname BTN-Gruppen und platzieren Sie mehrere Tasten in diesem Container.
Die Schaltflächengruppe ist auch eine unabhängige Komponente, sodass die entsprechende Quelldatei gefunden werden kann:
Weniger: Knöpfe
Sass: _buttons.scss
CSS: Bootstrap.CSS -Zeile 3131 ~ 3291
<Div> <button type = "button"> <span> </span> </button>… <schaltetyp = "schaltet"> <span> </span> </button> </div>
CSS:
.BTN-Gruppen, .BTN-Gruppen-konvertical {Position: relativ; Anzeige: Inline-Block; Vertical-Align: Middle;}. Btn-Gruppen> .BTN, .BTN-GROUP-CERVERTICAL> .BTN {Position: Relativ; relativ; .BTN: FOCUS, .BTN-GROUP-VERTICAL> .BTN: FOCUS, .BTN-GROP-CERVERTICAL> .BTN: Active, .BTN-Group-Versvertical> .BTN: Active, .BTN-Group> .BTN.Active, .BTN-Gruppen-konvertisch> .BTN.Active {z-Index: 2;}. {umriss: keine;}.Zusätzlich zur Verwendung des <Tasten> -Elements können Sie auch andere Tag -Elemente wie das <a> Tag verwenden. Das einzige, was Sie sicherstellen müssen, ist, dass das Tag-Element im Container der .BTN-Gruppen, egal welches Tag verwendet wird, den Klassennamen haben.
Die vier Ecken der Knopfgruppe sind alle abgerundeten Ecken, mit Ausnahme der ersten und letzten Knöpfe, die abgerundete Ecken an den Rändern haben, haben die anderen Knöpfe keine runden Ecken.
Detaillierte Erklärung:
1. Standard: Alle Tasten sind abgerundete Ecken
2. Mit Ausnahme der ersten Taste und der letzten Taste werden die anderen Tasten abgerundet.
3. Der letzte Knopf bleibt nur als abgerundete Ecken und die unteren rechten Ecken.
Quellcode:
.BTN-Group> .BTN: Nicht (: Erst-Kind): nicht (: letztes Kind): nicht (.dropdown-Toggle) {Border-Radius: 0;}. Btn-Gruppen> .BTN: Erst-Kind {Margin-Links: 0;}. Btn-Gruppen> .Btn: Erst-Kind: Nicht-Child: nicht (: nicht-links): nicht (nicht-links). 0; Border-Bottom-Right-Radius: 0;}. Btn-Gruppen> .BTN: Last-Kind: nicht (: Erstkind), Btn-Gruppen> .dropdown-Toggle: nicht (: Erst-Kind) {Border-Top-Links-Radius: 0; Border-Bottom-Linn-Radius; .BTN-Gruppen: nicht (: Erstkind): nicht (: letztes Kind)> .Btn {Border-Radius: 0;}. Btn-Gruppen> .BTN-Gruppen: Erst-Kind> .BTN: Last-Child, .BTN-Gruppen. .BTN-Gruppen: Last-Kind> .BTN: Erstkind {Border-Top-Links-Radius: 0; Border-Bottom-Links-Radius: 0;}Knopfgruppen -Symbolleiste
In einem reichen Texteditor mit Tastengruppen zusammenstellen, z. B. kopieren, schneiden, eine Gruppe einfügen, links, Mitte, rechts und zwei Enden ausrichten und die Taste der Bootstrap-Rahmen-Symbolleiste BTN-Toolbar verwenden
<div> <div>… </div> <div>… </div> <div>… </div> <div>… </div> <div>… </div> </div>
Prinzip: Lassen Sie sich hauptsächlich mehrere Gruppen des Containers.
.Btn-toolbar {margin-links: -5px;}.Beachten Sie, dass der Schwimmer in Btn-Toolbar löschen
.BTN-Toolbar: Vor, .BTN-Toolbar: After {Anzeige: Tabelle; Inhalt: "";}. Btn-Toolbar: After {Clear: Beide;}Beispiel:
<Div> <div> <button type = "button"> <span> </span> </button> <button type = "button"> <span> </span> </button> <button> <button> </span> </button> <button type = "button"> </span> </span> </div> </div> </buttht type = ".
Button Nisting Grouping
Oft arrangieren wir die Knopfgruppen des Dropdown-Menüs zusammen, um einen Effekt zu erzielen, der dem Navigationsmenü ähnelt:
Ändern Sie bei der Verwendung einfach den Klassennamen des Dropdown-Containers, der das Dropdown-Menü zuvor in die BTN-Gruppe erstellt und auf die gleiche Ebene wie die normale Taste platzieren:
<div><button type="button">Home</button><button type="button">Product Display</button><button type="button">Case Analysis</button><button type="button">Contact Us</button><div><button data-toggle="dropdown" type="button">About us<span></span></button><ul><li><a href="#">Company Profil </a> </li> <li> <a href = "#"> Unternehmenskultur </a> </li> <li> <a href = "#"> Organisationsstruktur </a> </li> <li> <a href = "#"> Kundenservice </a> </links: links; .BTN-Gruppen: nicht (: Erstkind): nicht (: letztes Kind)> .BTN {Border-Radius: 0;}. Btn-Gruppen> .BTN-Gruppe: Erst-Kind, .BTN-Gruppen> .BTN-Gruppen: Erst-Kind> .dropdown-Toggle {Border-G-Group: 0; Border-Bottom-Light-Light-Light-Light-Light-Light-Light-Light-Light-Light-Light-Right-Right-Right-Right-Right-Right-Right-Right-Right-Right-Right-Right-Right-Right-Right-Right-Right-Right-Right-Right-Right-Right-Right-Roup: 0; .BTN-Gruppen: Last-Kind> .BTN: Erstkind {Border-top-left-Radius: 0; Border-Bottom-Links-Radius: 0;}. 8px; Padding-Links: 8px;}. Btn-Gruppen> .BTN-LG + .Dropdown-Toggle {Padding-Right: 12px; Padding-Links: 12px;}. Btn-Gruppe. .125); Box-Shadow: Einschub 0 3px 5px rgba (0, 0, 0, .125);}.Tasten vertikal gruppiert
Ersetzen Sie einfach den horizontal gruppierten Klassennamen.
<div><button type="button">Home</button><button type="button">Product Display</button><button type="button">Case Analysis</button><button type="button">Contact Us</button><div><button data-toggle="dropdown" type="button">About us<span></span></button><ul><li><a href="#">Company Profil </a> </li> <li> <a href = "#"> Unternehmenskultur </a> </li> <li> <a href = "#"> organisatorische Struktur </a> </li> <li> <a href = "#"> Kundendienst </a> </li> </ul> </div> </divical- .BTN-Gruppe, .BTN-Gruppen-konvertische> .BTN-Gruppe, .BTN-Gruppen-konvertische> .BTN-Gruppen-konvertische> .BTN-Gruppen-konvertische> .BTN {display: Block: Block: Keine; Breite: 100%; Max-Width: 100%; .BTN, .BTN-GROUP-VERTICAL> .BTN + .BTN-GROUP, .BTN-GROUP-VERTICAL> .BTN-GROUP + .BTN, .BTN-GROUP-VERTICAL> .BTN-GROUP + .BTN-GROUP {Margin-top: -1px; {Border-Top-Right-Radius: 4px; Border-Bottom-Right-Radius: .Btn {Border-Bottom-Links-Radius: 0;}. 4px;}. Btn-Gruppen-konvertical> .BTN-Gruppen: nicht (: Erst-Kind): nicht (: letztes Kind)> .BTN {Border-Radius: 0;}. .Dropdown-Toggle {Border-Bottom-Right-Radius: 0; Border-Bottom-Left-Radius: 0;}.Die Equalization -Taste wird auch als adaptive Gruppierungs -Taste bezeichnet:
Die Breite der gesamten Knopfgruppe beträgt 100% des Containers, und jede Taste in der Knopfgruppe unterteilt die Breite des gesamten Containers. Beispielsweise befinden sich in einer Knopfgruppe fünf Tasten, jede Taste ist 20% der Breite des Containers. Es gibt vier Tasten in einer Knopfgruppe, jede Taste besteht 25% der Breite des Containers.
Implementierungsmethode: Fügen Sie einfach einen Klassennamen hinzu.
<div> <button type = "button"> home </button> <button type = "button"> case Analysis </button> <button type = "button"> uns wenden Sie uns </button> </div> .BTN-Gruppen-Gruppen-Gereinigifizierung {Display: Tabelle; Breite: 100%; Tabelle-Layout: Border-gary-gruppen: .BTN-Gruppen {Anzeige: Tabellenzell; Float: Keine; Breite: 1%;}.Simulieren Sie .BTN-Gruppen-zu einer Tabelle (Anzeige: Tabelle) und simulieren Sie die Schaltflächenvorlage in eine Tabellenzelle (Anzeige: Tabellenzell).
HINWEIS: Wenn Sie eine Gruppe gleicher Schaltflächen erstellen, versuchen Sie, das <a> -Tag zu verwenden, um Schaltflächen zu erstellen, da bei Verwendung von Tastentagelementen die Verwendung von Display: Tabelle nicht freundlich ist, um in einigen Browsern zu unterstützen.
Empfohlene Lesungen von Wulin.com:
Detaillierte Erläuterung der Bootstrap -Taste
Das obige ist die vom Editor vorgelegte Bootstrap -Tastekomponente. Ich hoffe, es wird für Sie hilfreich sein!