Schaltflächen, die Bootstrap jeden Tag erlernen muss (1)_Javascript-Kenntnisse

In diesem Artikel wird hauptsächlich der Stil der Schaltflächen erläutert.
1.Option
2. Größe
3.Aktivitätsstatus
4. Deaktivierter Zustand
5. HTML-Tags, die als Schaltflächen
verwendet werden können

Optionen

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

 <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">链接</button>

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

<p>
 <button type="button" class="btn btn-primary btn-lg">Large button</button>
 <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
 <button type="button" class="btn btn-primary">Default button</button>
 <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
 <button type="button" class="btn btn-primary btn-sm">Small button</button>
 <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
 <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
 <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

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

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

Aktivitätsstatus
Wenn eine Schaltfläche aktiv ist, scheint sie gedrückt zu sein (dunklerer Hintergrund, dunklerer Rand, integrierter Schatten). Für das B-Element wird es durch:active implementiert. Für das -Element wird es über .active implementiert. Sie können .active jedoch auch in Verbindung mit verwenden und es programmgesteuert aktivieren.
Button-Element
Da es sich bei „:active“ um einen Pseudostatus handelt, ist es nicht erforderlich, ihn hinzuzufügen. Sie können jedoch „.active“ hinzufügen, wenn Sie dasselbe Erscheinungsbild anzeigen möchten.

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

Linkelement
Sie können die Klasse .active für hinzufügen.

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

Sie können es mit dem Button oben vergleichen.

Deaktivierter Status
Indem Sie die Hintergrundfarbe der Schaltfläche um 50 % verblassen, können Sie einen nicht anklickbaren Effekt erzeugen.
Button-Element
Deaktiviertes Attribut zur hinzufügen.

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

Sie können die Maus auf die Schaltfläche setzen und klicken, um den Effekt zu sehen.
Browserübergreifende Kompatibilität

Wenn Sie das deaktivierte Attribut zu hinzufügen, wird der Text in der Schaltfläche in Internet Explorer 9 und niedrigeren Versionen grau mit einem ekelhaften Schatten dargestellt. Es gibt derzeit keine Lösung.
Linkelement
.disabled-Klasse für hinzufügen.

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

Dies ist ein Vergleich mit der Schaltfläche oben.
Wir verwenden .disabled als Tool-Klasse, genau wie die .active-Klasse, sodass kein Präfix hinzugefügt werden muss.
Linkfunktionen sind nicht betroffen

Die oben genannten Klassen verändern nur das Erscheinungsbild von und haben keinen Einfluss auf die Funktionalität. In diesem Dokument haben wir die Standardfunktionalität von Links über JavaScript-Code deaktiviert.

HTML-Tags, die als Schaltflächen verwendet werden können
Sie können Schaltflächenklassen zu -, -Elementen hinzufügen.

 <a class="btn btn-default" href="#" role="button">Link</a>
 <button class="btn btn-default" type="submit">Button</button>
 <input class="btn btn-default" type="button" value="Input">
 <input class="btn btn-default" type="submit" value="Submit">

Browserübergreifende Leistung

Als Best Practice empfehlen wir dringend, nach Möglichkeit das -Element zu verwenden, um ein einheitliches Design in allen Browsern sicherzustellen.

Aus anderen Gründen hindert uns dieser Firefox-Fehler daran, die Zeilenhöhe für Schaltflächen basierend auf dem -Tag festzulegen, was dazu führt, dass ihre Höhe nicht mit der anderer Schaltflächen in Firefox übereinstimmt.
Der Hauptinhalt dieses Abschnitts ist der Schaltflächenstil. Sie können diese Stile zur Kontrolle flexibel ausführen. Ich hoffe, dass dies für Ihr Lernen hilfreich ist.