Bootstrap Button-Gruppe

Schaltflächengruppen ermöglichen es, mehrere Schaltflächen in derselben Zeile anzuordnen. Wenn Sie Schaltflächen zusammen ausrichten möchten, ist dies sehr nützlich. Sie könnenBootstrap Button PluginFügt optionales JavaScript-Verhalten im Radio- und Checkbox-Stil hinzu.

Die folgende Tabelle fasst einige wichtige Klassen zusammen, die Bootstrap für die Verwendung von Schaltflächengruppen bereitstellt:

KlasseBeschreibungCode-Beispiel
.btn-groupDiese Klasse wird verwendet, um eine grundlegende Schaltflächengruppe zu bilden. Platzieren Sie in.btn-groupeine Reihe von Schaltflächen mit der Klasse.btn. 
<div class="btn-group">
  <button type="button" class="btn btn-default">Button1</button>
   <button type="button" class="btn btn-default">Button2</button>
</div>
.btn-toolbarDiese Klasse hilft dabei, mehrere <div class="btn-group">-Gruppen zu einem <div class="btn-toolbar"> zusammenzufügen, meist um komplexere Komponenten zu erhalten. 
<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">...</div>
  <div class="btn-group">...</div>
</div>
.btn-group-lg, .btn-group-sm, .btn-group-xsDiese Klassen können auf die Größe der gesamten Schaltflächengruppe angewendet werden, ohne dass die Größe jeder einzelnen Schaltfläche angepasst werden muss. 
<div class="btn-group btn-group-lg">...</div>
<div class="btn-group btn-group-sm">...</div>
<div class="btn-group btn-group-xs">...</div>
.btn-group-verticalDiese Klasse bewirkt, aass eine Gruppe von Schaltflächen vertikal statt horizontal gestapelt angezeigt wird. 
<div class="btn-group-vertical">
  ...
</div>

Grundlegende Schaltflächengruppe

Das folgende Beispiel demonstriert die in der obigen Tabelle besprochene Klasse.btn-groupund deren Verwendung:

Beispiel

<div class="btn-group"> <button type="button" class="btn btn-default">Button 1</button> <button type="button" class="btn btn-default">Button 2</button> <button type="button" class="btn btn-default">Button 3</button> </div>

Ausprobieren »

Das Ergebnis wird unten angezeigt:

基本的按钮组

Button-Toolbar

Das folgende Beispiel demonstriert die in der obigen Tabelle besprochene Klasse.btn-toolbarund deren Verwendung:

Beispiel

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

Ausprobieren »

Das Ergebnis wird unten angezeigt:

按钮工具栏

Button-Größe

Das folgende Beispiel demonstriert die in der obigen Tabelle besprochene Klasse.btn-group-*und deren Verwendung:

Beispiel

<div class="btn-group btn-group-lg"> <button type="button" class="btn btn-default">Button 1</button> <button type="button" class="btn btn-default">Button 2</button> <button type="button" class="btn btn-default">Button 3</button> </div> <div class="btn-group btn-group-sm"> <button type="button" class="btn btn-default">Button 4</button> <button type="button" class="btn btn-default">Button 5</button> <button type="button" class="btn btn-default">Button 6</button> </div> <div class="btn-group btn-group-xs"> <button type="button" class="btn btn-default">Button 7</button> <button type="button" class="btn btn-default">Button 8</button> <button type="button" class="btn btn-default">Button 9</button> </div>

Ausprobieren »

Das Ergebnis wird unten angezeigt:

按钮组的大小

Verschachtelung

Sie können eine andere Schaltflächengruppe innerhalb einer Schaltflächengruppe verschachteln, d. h., in ein.btn-groupeine weitere einbetten.btn-group . Dies wird verwendet, wenn Sie ein Dropdown-Menü mit einer Reihe von Schaltflächen kombinieren möchten.

Beispiel

<div class="btn-group"> <button type="button" class="btn btn-default">Button 1</button> <button type="button" class="btn btn-default">Button 2</button> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Dropdown<span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Dropdown link 1</a></li> <li><a href="#">Dropdown link 2</a></li> </ul> </div> </div>

Ausprobieren »

Das Ergebnis wird unten angezeigt:

嵌套的按钮组

Vertikale Schaltflächengruppe

Das folgende Beispiel demonstriert die in der obigen Tabelle besprochene Klasse.btn-group-verticalund deren Verwendung:

Beispiel

<div class="btn-group-vertical"> <button type="button" class="btn btn-default">Button 1</button> <button type="button" class="btn btn-default">Button 2</button> <div class="btn-group-vertical"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Dropdown<span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Dropdown link 1</a></li> <li><a href="#">Dropdown link 2</a></li> </ul> </div> </div>

Ausprobieren »

Das Ergebnis wird unten angezeigt:

垂直的按钮组
Weitere Erweiterungen