Button-Styles
Bootstrap bietet sieben Arten von Tasten:
Um die Schaltfläche Designs oben zu erreichen, Bootstrap hat die folgenden Klassen:
-
.btn-default -
.btn-primary -
.btn-success -
.btn-info -
.btn-warning -
.btn-danger -
.btn-link
Das folgende Beispiel zeigt den Code für die verschiedenen Knopfarten:
Beispiel
<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> Versuch es selber " Die Schaltfläche Klassen können auf einer verwendet werden <a> , <button> oder <input> Element:
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"> Versuch es selber " Warum tun wir setzen # im href - Attribut des Link?
Da wir keine Seite haben zu verknüpfen, und wir wollen nicht zu bekommen "404" Nachricht, setzen wir # als Link. Im wirklichen Leben ist es natürlich gewesen Seite eine echte URL zum "Suchen".
Button-Größen
Bootstrap bietet vier Knopfgrößen:
Die Klassen, die verschiedene Größen definieren, sind:
-
.btn-lg -
.btn-md -
.btn-sm -
.btn-xs
Das folgende Beispiel zeigt den Code für verschiedene Knopfgrößen:
Beispiel
<button
type="button" class="btn btn-primary btn-lg">Large</button>
<button
type="button" class="btn btn-primary btn-md">Medium</button>
<button
type="button" class="btn btn-primary btn-sm">Small</button>
<button
type="button" class="btn btn-primary btn-xs">XSmall</button>
Versuch es selber " Block Level Buttons
Ein Blockebene Taste erstreckt sich über die gesamte Breite des übergeordneten Elements.
In Klasse .btn-block ein Block - Level - Schaltfläche zu erstellen:
Beispiel
<button type="button" class="btn btn-primary btn-block">Button 1</button> Versuch es selber " Aktiv / Disabled Buttons
Eine Schaltfläche kann zu einem aktiven eingestellt werden (erscheint gedrückt) oder deaktiviert (unclickable) Zustand:
Die Klasse .active macht eine Schaltfläche erscheint gedrückt, und die Klasse .disabled macht eine Taste unclickable:
Beispiel
<button
type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled
Primary</button> Versuch es selber " Testen Sie sich mit Übungen!
Übung 1 » Übung 2» Übung 3 » Übung 4»
Komplette Bootstrap-Taste Referenz
Eine vollständige Referenz aller Taste Klassen gehen , um unsere komplette Bootstrap - Knopf Referenz .