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 Bbb9345e55eb71822850ff156dfde57c8-Element wird es durch:active implementiert. Für das 3499910bf9dac5ae3c52d5ede7383485-Element wird es über .active implementiert. Sie können .active jedoch auch in Verbindung mit bb9345e55eb71822850ff156dfde57c8 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 3499910bf9dac5ae3c52d5ede7383485 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 4aaa525a7e082570d2b0b7fbc1013e29 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 4aaa525a7e082570d2b0b7fbc1013e29 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 3499910bf9dac5ae3c52d5ede7383485 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 3499910bf9dac5ae3c52d5ede7383485 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 3499910bf9dac5ae3c52d5ede7383485-, bb9345e55eb71822850ff156dfde57c8-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 bb9345e55eb71822850ff156dfde57c8-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 d5fd7aea971a85678ba271703566ebfd-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.