Detaillierte Erläuterung der Fähigkeiten der Bootstrap-Schaltfläche „component_javascript'.

Schaltflächengruppen müssen wie Dropdown-Menükomponenten auf das Button.js-Plug-in angewiesen sein, um ordnungsgemäß zu funktionieren.

Struktureller Aspekt: ​​Verwenden Sie einen Container mit dem Klassennamen btn-group und platzieren Sie mehrere Schaltflächen in diesem Container .

Die Schaltflächengruppe ist ebenfalls eine eigenständige Komponente, daher finden Sie die entsprechende Quellcodedatei:

Weniger: Buttons.less

Sass:_buttons.scss

Css:Bootstrap.css Zeile 3131 ~ Zeile 3291

<div class="btn-group">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-step-backward"></span>
</button>
…
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-step-forward"></span>
</button>
</div>

CSS:

.btn-group,
.btn-group-vertical {
position: relative;
display: inline-block;
vertical-align: middle;
}
.btn-group > .btn,
.btn-group-vertical > .btn {
position: relative;
float: left;
}
.btn-group > .btn:hover,
.btn-group-vertical > .btn:hover,
.btn-group > .btn:focus,
.btn-group-vertical > .btn:focus,
.btn-group > .btn:active,
.btn-group-vertical > .btn:active,
.btn-group > .btn.active,
.btn-group-vertical > .btn.active {
z-index: 2;
}
.btn-group > .btn:focus,
.btn-group-vertical > .btn:focus {
outline: none;
}
.btn-group .btn + .btn,
.btn-group .btn + .btn-group,
.btn-group .btn-group + .btn,
.btn-group .btn-group + .btn-group {
margin-left: -1px;
}

Zusätzlich zum -Element können Sie auch andere Tag-Elemente verwenden, z. B. das -Tag. Das Einzige, was Sie sicherstellen müssen, ist, dass das Tag-Element im . Der BTN-Gruppencontainer muss einen Klassennamen enthalten.btn

Die vier Ecken der Tastengruppe sind abgerundet. Mit Ausnahme der ersten und letzten Tasten, die an den Seiten abgerundete Ecken haben, haben die anderen Tasten keine abgerundeten Ecken.

Detaillierte Erklärung:

1. Standard: Alle Schaltflächen haben abgerundete Ecken

2. Mit Ausnahme der ersten und der letzten Schaltfläche werden die abgerundeten Ecken der anderen Schaltflächen gelöscht

3. Nur die obere rechte Ecke und die untere rechte Ecke der letzten Schaltfläche sind abgerundet

Quellcode:

.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
border-radius: 0;
}
.btn-group > .btn:first-child {
margin-left: 0;
}
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.btn-group > .btn-group {
float: left;
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group > .btn-group:first-child> .btn:last-child,
.btn-group > .btn-group:first-child> .dropdown-toggle {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.btn-group > .btn-group:last-child> .btn:first-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}

Schaltflächengruppen-Symbolleiste

Um im Rich-Text-Editor Schaltflächengruppen anzuordnen, z. B. eine Gruppe zu kopieren, auszuschneiden, einzufügen, linksbündig, mittig ausgerichtet, rechtsbündig und an beiden Enden auszurichten, müssen Sie Bootstrap Frame verwenden Schaltfläche Symbolleiste BTN-Symbolleiste

<div class="btn-toolbar">
<div class="btn-group">
…
</div>
<div class="btn-group">
…
</div>
<div class="btn-group">
…
</div>
<div class="btn-group">
…
</div>
</div>

Prinzip: Der Hauptzweck besteht darin, die mehreren .btn-group-Gruppenelemente des Containers schweben zu lassen und einen linken Rand von 5 Pixeln zwischen den Gruppen aufrechtzuerhalten

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

Achten Sie darauf, Floats in der BTN-Symbolleiste zu löschen

.btn-toolbar:before,
.btn-toolbar:after｛
　display: table;
content: " ";
｝
.btn-toolbar:after{
clear: both;
}

Beispiel:

<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-align-left"></span>
</button>
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-align-center"></span>
</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-align-right"></span>
</button>
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-align-justify"></span>
</button>
</div>
<div class="btn-group">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-font"></span>
</button>
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-bold"></span>
</button>
</div>
</div>

Schaltfläche verschachtelte Gruppierung

Oft ordnen wir gemeinsame Schaltflächengruppen in Dropdown-Menüs zusammen, um einen ähnlichen Effekt wie ein Navigationsmenü zu erzielen:

Wenn Sie es verwenden, ändern Sie einfach den Klassennamen des Dropdown-Containers, der zum Erstellen des Dropdown-Menüs verwendet wird, in „btn-group“ und platzieren Sie ihn auf derselben Ebene wie die normale Schaltfläche:

<div class="btn-group">
<button class="btn btn-default" type="button">首页</button>
<button class="btn btn-default" type="button">产品展示</button>
<button class="btn btn-default" type="button">案例分析</button>
<button class="btn btn-default" type="button">联系我们</button>
<div class="btn-group">
<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>
</div>
.btn-group > .btn-group {
float: left;
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group > .btn-group:first-child> .btn:last-child,
.btn-group > .btn-group:first-child> .dropdown-toggle {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.btn-group > .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;
}
.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;
}

Schaltflächen vertikal gruppiert

Ersetzen Sie einfach den Namen der horizontalen Gruppierungsklasse .btn-group durch .btn-group-vertical.

<div class="btn-group-vertical">
<button class="btn btn-default" type="button">首页</button>
<button class="btn btn-default" type="button">产品展示</button>
<button class="btn btn-default" type="button">案例分析</button>
<button class="btn btn-default" type="button">联系我们</button>
<div class="btn-group">
<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>
</div>
.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group,
.btn-group-vertical > .btn-group > .btn {
display: block;
float: none;
width: 100%;
max-width: 100%;
}
.btn-group-vertical > .btn-group > .btn {
float: none;
}
.btn-group-vertical > .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-group-vertical > .btn:not(:first-child):not(:last-child) {
border-radius: 0;
}
.btn-group-vertical > .btn:first-child:not(:last-child) {
border-top-right-radius: 4px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn:last-child:not(:first-child) {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 4px;
}
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child,
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
border-top-left-radius: 0;
border-top-right-radius: 0;
}

Die Schaltfläche „Gleichteilung“ wird auch als adaptive Gruppierungsschaltfläche bezeichnet:

Die Breite der gesamten Schaltflächengruppe beträgt 100 % des Containers, und jede Schaltfläche in der Schaltflächengruppe teilt die Breite des gesamten Containers gleichmäßig auf. Beispielsweise gibt es fünf Schaltflächen in einer Schaltflächengruppe und jede Schaltfläche ist 20 % der Breite des Containers; eine Schaltfläche Es gibt vier Schaltflächen in der Gruppe, jede Schaltfläche ist 25 % der Breite des Containers

Implementierungsmethode: Hängen Sie einfach einen Klassennamen.btn-group-justified an die Schaltfläche group.btn-group an

<div class="btn-group btn-group-justified">
<buttton class="btn btn-default" type="button">首页</buttton>
<buttton class="btn btn-default" type="button">案例分析</buttton>
<buttton class="btn btn-default" type="button">联系我们</buttton>
<buttton class="btn btn-default" type="button">关于我们</buttton>
</div>
.btn-group-justified {
display: table;
width: 100%;
table-layout: fixed;
border-collapse: separate;
}
.btn-group-justified > .btn,
.btn-group-justified > .btn-group {
display: table-cell;
float: none;
width: 1%;
}
.btn-group-justified > .btn-group .btn {
width: 100%;
}

Simulieren Sie .btn-group-justified in einer Tabelle (Anzeige: Tabelle) und simulieren Sie die darin enthaltene Schaltflächenvorlage in einer Tabellenzelle (Anzeige: Tabellenzelle).

Hinweis: Versuchen Sie beim Erstellen gleicher Schaltflächengruppen, das Tag zu verwenden, da die Verwendung von display:table in einigen Browsern nicht benutzerfreundlich ist 🎜>

Script House empfohlene Lektüre:

Detaillierte Erklärung der Bootstrap-Schaltfläche

Das Obige ist die vom Herausgeber eingeführte Bootstrap-Schaltflächenkomponente. Ich hoffe, sie wird für alle hilfreich sein!