Buttons in Bootstrap - Eine Anleitung

Buttons (deutsch: Schaltfächen) sind nicht nur in Formularen wichtige visuelle Anker, um den Besucher  zum Klicken zu animieren. Gut gestaltete Buttons können auch anstelle normaler Textlinks angezeigt werden um eine höhere Click-Trough-Rate zu erreichen. Das Bootstrap Framework bietet von Haus aus verschiedene Buttonstyles für die meisten Anwendungsfälle, die in diesem Tutorial exemplarisch erläutert werden.

Buttons mit Bootstrap

Um einen Standard-Button in Bootstrap zu definieren, genügt es dem jeweiligen HTML-Element die CSS-Klasse „btn“ zuzuweisen. Buttons eignen sich für folgenden HTML-Elemente:

  • Links (a)
  • Formular-Buttons (input)
  • Buttons (button)

Um das Aussehen des Buttons zu ändern, muss ein zusätzliche Klasse entsprechend der anchfolgenden Tabelle vergeben werden.

Aussehen CSS-Klasse Beschreibung
class="btn" Standardbutton (grau)
class="btn btn-primary" Call-To-Action Button
class="btn btn-info" Info-Button
class="btn btn-success" Button mit positiver Nachricht (z. B. Element speichern)
class="btn btn-warning" Button mit Warnung (z. B. Element ersetzen)
class="btn btn-danger" Button mit negativer Nachricht (z. B. Element löschen)
class="btn btn-inverse" Button ohne klar erkennbaren semantischen Zusammenhang (schwarz)
class="btn btn-link" Button als Link darstellen (z. B. Falls Formular-Button nicht als solcher erkennbar sein soll

Verschiedene Buttongrößen

Um die Buttongröße zu ändern ist wiederum eine weitere CSS-Klasse nötig.

Größe CSS-Klasse Beschreibung
class="btn" normalgroßer Standardbutton (grau)
class="btn btn-lg" großer Standardbutton
class="btn btn-sm" kleiner Standardbutton
class="btn btn-xs" winziger Standardbutton
class="btn btn-primary btn-lg" großer Call-To-Action Button

Blocklevel Buttons

Möchte man, dass ein Button über die ganze Breite des Eltern-HTML-Elementes aufspannt, so ist die Klasse „btn-block“ dafür geeignet.

Gesperrte Buttons

Mittel der CSS-Klasse „disabled“ kann ein gesperrter Button gestaltet werden, der nicht anklickbar ist.

Beispiel: Buttons in Bootstrap

Alle oben genannten Features lassen sich am besten nachvollziehen, wenn man anhand einer Beispiel-HTML-Seite das gewünschte Resultat mit dem zugehörigen Quellcode vergleichen kann. Im Bootstrap Tutorial findest du genau das.

Beispiel Buttons in Bootstrap

Nach oben!