Bootstrap- Schaltflächen
Schaltflächenstile
Bootstrap bietet verschiedene Arten von Schaltflächen:
Um die obigen Schaltflächenstile zu erreichen, hat Bootstrap die folgenden Klassen:
.btn.btn-default.btn-primary.btn-success.btn-info.btn-warning.btn-danger.btn-link
Das folgende Beispiel zeigt den Code für die verschiedenen Schaltflächenstile:
Beispiel
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
Die Schaltflächenklassen können für ein <a>, <button>, oder
<input>-Element verwendet werden:
Beispiel
<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">
Warum setzen wir ein # in das href-Attribut des Links?
Da wir keine Seite haben, auf die wir verlinken könnten, und wir keine „404“-Meldung erhalten möchten, setzen wir in unseren Beispielen # als Link. Es sollte eine echte URL zu einer bestimmten Seite sein.
Knopfgrößen
Bootstrap bietet vier Schaltflächengrößen:
Die Klassen, die die verschiedenen Größen definieren, sind:
.btn-lg.btn-sm.btn-xs
Das folgende Beispiel zeigt den Code für verschiedene Schaltflächengrößen:
Beispiel
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Normal</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>
Ebenenschaltflächen blockieren
Eine Schaltfläche auf Blockebene erstreckt sich über die gesamte Breite des übergeordneten Elements.
Klasse hinzufügen .btn-block, um eine Schaltfläche auf Blockebene zu erstellen:
Beispiel
<button type="button" class="btn btn-primary btn-block">Button 1</button>
Aktive/Deaktivierte Schaltflächen
Eine Schaltfläche kann in einen aktiven (scheinbar gedrückt) oder deaktivierten (nicht anklickbaren) Zustand versetzt werden:
Die Klasse .activelässt eine Schaltfläche gedrückt erscheinen, und die Klasse
.disabled
macht eine Schaltfläche nicht anklickbar:
Beispiel
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>
Vollständige Bootstrap-Schaltflächenreferenz
Eine vollständige Referenz aller Schaltflächenklassen finden Sie in unserer vollständigen Bootstrap- Schaltflächenreferenz .