Bootstrap 3.0 - Schaltflächenstil für Lernnotizen

In diesem Artikel wird hauptsächlich der Stil der Schaltflächen erläutert.

1. Optionen

2. Größe

3. Aktivitätsstatus

4. Deaktivierter Zustand

5. HTML-Tags, die als Schaltflächen verwendet werden können

6. Zusammenfassung

Optionen

Verwenden Sie die oben aufgeführten Klassen, um schnell eine gestaltete Schaltfläche zu erstellen.

 Code kopieren
 Der Code lautet wie folgt:

 <button type="button" class="btn btn-default">Standard</button>
 <button type="button" class="btn btn-primary">Primär</button>
 <button type="button" class="btn btn-success">Erfolg</button>
 <button type="button" class="btn btn-info">Info</button>
 <button type="button" class="btn btn-warning">Warnung</button>
 <button type="button" class="btn btn-danger">Gefahr</button>
 <button type="button" class="btn btn-link">Link</button>

Größe

Müssen Ihre Schaltflächen unterschiedliche Größen haben? Verwenden Sie .btn-lg, .btn-sm, .btn-xs, um Schaltflächen unterschiedlicher Größe zu erhalten.

 Code kopieren
 Der Code lautet wie folgt:

 <p>
 <button type="button" class="btn btn-primary btn-lg">Großer Knopf</button>
 <button type="button" class="btn btn-default btn-lg">Großer Button</button>
 </p>
 <p>
 <button type="button" class="btn btn-primary">Standardschaltfläche</button>
 <button type="button" class="btn btn-default">Standardschaltfläche</button>
 </p>
 <p>
 <button type="button" class="btn btn-primary btn-sm">Kleiner Knopf</button>
 <button type="button" class="btn btn-default btn-sm">Kleiner Knopf</button>
 </p>
 <p>
 <button type="button" class="btn btn-primary btn-xs">Extra kleiner Knopf</button>
 <button type="button" class="btn btn-default btn-xs">Extra kleiner Knopf</button>
 </p>

Durch Hinzufügen von .btn-block zur Schaltfläche kann diese 100 % der Breite des übergeordneten Knotens ausfüllen und die Schaltfläche wird auch zu einem Element auf Blockebene.

 Code kopieren
 Der Code lautet wie folgt:

 <button type="button" class="btn btn-primary btn-lg btn-block">Schaltfläche auf Blockebene</button>
 <button type="button" class="btn btn-default btn-lg btn-block">Schaltfläche auf Blockebene</button>

Aktivitätsstatus

Wenn die Schaltfläche aktiv ist, erscheint sie gedrückt (dunklerer Hintergrund, dunklerer Rand, eingefügter Schatten). Für das B<button>-Element wird dies durch :active erreicht. Für das <a>-Element wird dies durch .active erreicht. Sie können jedoch auch .active<button> in Verbindung damit verwenden und es programmgesteuert aktivieren.

Da :active ein Pseudozustand ist, muss er nicht hinzugefügt werden. Sie können jedoch .active hinzufügen, wenn Sie dasselbe Erscheinungsbild anzeigen müssen.

 Code kopieren
 Der Code lautet wie folgt:

 <button type="button" class="btn btn-primary btn-lg active">Primäre Schaltfläche</button>
 <button type="button" class="btn btn-default btn-lg active">Schaltfläche</button>

Sie können .activeclass zu <a> hinzufügen.

 Code kopieren
 Der Code lautet wie folgt:

 <a href="#" class="btn btn-primary btn-lg active" role="button">Primärer Link</a>
 <a href="#" class="btn btn-default btn-lg aktiv" role="button">Link</a>

Vergleichen könnt ihr es mit dem Button oben.

Deaktivierter Zustand

Indem Sie die Hintergrundfarbe der Schaltfläche um 50 % verringern, können Sie dafür sorgen, dass sie nicht anklickbar erscheint.

Fügen Sie <button> das deaktivierte Attribut hinzu.

 Code kopieren
 Der Code lautet wie folgt:

 <button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primäre Schaltfläche</button>
 <button type="button" class="btn btn-default btn-lg" disabled="disabled">Schaltfläche</button>

Sie können die Maus auf die Schaltfläche bewegen und darauf klicken, um den Effekt zu sehen.

Browserübergreifende Kompatibilität

Wenn Sie einem <button> das Attribut disabled hinzufügen, wird der Text in der Schaltfläche in Internet Explorer 9 und niedriger grau mit einem hässlichen Schatten dargestellt. Dies lässt sich derzeit nicht beheben.

Fügen Sie .disabledclass zu <a> hinzu.

 Code kopieren
 Der Code lautet wie folgt:

 <a href="#" class="btn btn-primary btn-lg disabled" role="button">Primärer Link</a>
 <a href="#" class="btn btn-default btn-lg deaktiviert" role="button">Link</a>

Dies ist ein Vergleich mit der Schaltfläche oben.

Wir verwenden .disabled als Hilfsklasse, genau wie .activeclass, daher muss kein Präfix hinzugefügt werden.

Die Linkfunktionalität ist nicht beeinträchtigt

Die oben erwähnte Klasse ändert nur das Erscheinungsbild von <a> und hat keinen Einfluss auf die Funktionalität. In diesem Dokument haben wir die Standardfunktionalität von Links durch JavaScript-Code deaktiviert.

Kontextspezifische Verwendung

Während Schaltflächenklassen für <a>- und <button>-Elemente verwendet werden können, werden in unseren Nav- und Navbar-Komponenten nur <button>-Elemente unterstützt.

HTML-Tags, die als Schaltflächen verwendet werden können

Sie können den Elementen <a>, <button> oder <input> eine Schaltflächenklasse hinzufügen.

 Code kopieren
 Der Code lautet wie folgt:

 <a class="btn btn-default" href="#" role="button">Link</a>
 <button class="btn btn-default" type="submit">Schaltfläche</button>
 <input Klasse="btn btn-default" Typ="button" Wert="Eingabe">
 <input class="btn btn-default" type="submit" value="Senden">

Browserübergreifende Leistung

Als bewährte Methode empfehlen wir dringend, wann immer möglich das Element <button> zu verwenden, um eine konsistente Darstellung in allen Browsern sicherzustellen.

Dieser Firefox-Fehler verhindert unter anderem, dass wir die Zeilenhöhe für Schaltflächen mit dem Tag <input> festlegen können. Dies führt dazu, dass sie in Firefox nicht auf einer Linie mit anderen Schaltflächen liegen.

Zusammenfassen

In diesem Abschnitt wird hauptsächlich der Stil der Schaltflächen erläutert. Wichtig ist, dass diese Stile zur Steuerung flexibel einsetzbar sind.