Neueste Web-Entwicklung Tutorials
 

Bootstrap Button Groups


Button-Gruppen

Bootstrap ermöglicht Ihnen die Gruppe eine Reihe von Schaltflächen zusammen (in einer einzigen Zeile) in einer Feldgruppe:

-

Verwenden Sie ein <div> Element mit Klasse .btn-group eine Schaltfläche Gruppe zu erstellen:

Beispiel

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>
Versuch es selber "

Tipp: Statt Knopfgrößen für jede Taste in einer Gruppe von Anwendung verwenden Klasse .btn-group-* Größe alle Tasten in der Gruppe:

Beispiel

<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>
Versuch es selber "

Vertikale Knopfgruppen

Bootstrap auch die vertikale Tastengruppen:

-

Verwenden Sie die Klasse .btn-group-vertical eine vertikale Tastengruppe zu erstellen:

Beispiel

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>
Versuch es selber "

Justified Button-Gruppen

Um die gesamte Breite des Bildschirms erstrecken, verwenden Sie die .btn-group-justified Klasse:

Beispiel mit <a> Elementen:

Beispiel

<div class="btn-group btn-group-justified">
  <a href="#" class="btn btn-primary">Apple</a>
  <a href="#" class="btn btn-primary">Samsung</a>
  <a href="#" class="btn btn-primary">Sony</a>
</div>
Versuch es selber "

Hinweis: Für die <button> Elemente, müssen Sie jede Taste in einer wickeln .btn-group Klasse:

Beispiel

<div class="btn-group btn-group-justified">
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Samsung</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
</div>
Versuch es selber "

Nesting-Knopf Gruppen & Dropdown-Menüs

-

Nest Schaltfläche Gruppen Dropdown-Menüs zu erstellen:

Beispiel

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Sony <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Tablet</a></li>
      <li><a href="#">Smartphone</a></li>
    </ul>
  </div>
</div>
Versuch es selber "

Split-Taste Auswahlmenüs

Beispiel

<div class="btn-group">
  <button type="button" class="btn btn-primary">Sony</button>
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Tablet</a></li>
    <li><a href="#">Smartphone</a></li>
  </ul>
</div>
Versuch es selber "

Testen Sie sich mit Übungen!

Übung 1 » Übung 2» Übung 3 » Übung 4» Übung 5 »