Bootstrap-4 -Knöpfe
Schaltflächenstile
Bootstrap 4 bietet verschiedene Arten von Schaltflächen:
Beispiel
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</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-dark">Dark</button>
<button
type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
Die Schaltflächenklassen können für <a>, <button>, oder
<input>-Elemente 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, geben wir # als Link ein. Im wirklichen Leben sollte es natürlich eine echte URL zur Seite „Suchen“ sein.
Schaltflächenübersicht
Bootstrap 4 bietet acht Outline/Bordered Buttons:
Beispiel
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button
type="button" class="btn btn-outline-warning">Warning</button>
<button
type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button
type="button" class="btn btn-outline-light text-dark">Light</button>
Knopfgrößen
Verwenden Sie die .btn-lgKlasse für große Schaltflächen oder die .btn-smKlasse für kleine Schaltflächen:
Beispiel
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
Ebenenschaltflächen blockieren
Klasse hinzufügen .btn-block, um eine Schaltfläche auf Blockebene zu erstellen, die sich über die gesamte Breite des übergeordneten Elements erstreckt.
Beispiel
<button type="button" class="btn btn-primary btn-block">Full-Width
Button</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 das disabledAttribut macht eine Schaltfläche nicht anklickbar. Beachten Sie, dass <a>-Elemente das Attribut disabled nicht unterstützen und daher die .disabledKlasse verwenden müssen, damit es visuell deaktiviert erscheint.
Beispiel
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
<a href="#" class="btn btn-primary
disabled">Disabled Link</a>
Spinner-Schaltflächen
Sie können einer Schaltfläche auch "Spinner" hinzufügen, worüber Sie in unserem BS4-Spinner-Tutorial mehr erfahren :
Beispiel
<button class="btn btn-primary">
<span class="spinner-border
spinner-border-sm"></span>
</button>
<button class="btn
btn-primary">
<span class="spinner-border
spinner-border-sm"></span>
Loading..
</button>
<button
class="btn btn-primary" disabled>
<span class="spinner-border
spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span
class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>