Bootstrap - Schaltflächen

Dieses Kapitel behandelt das Verwendungsalter der Bootstrap-Schaltfläche anhand von Beispielen. Alles, was eine Klasse von gegeben wird.btnerbt das Standard-Aussehen einer grauen Schaltfläche mit abgerundeten Ecken. Bootstrap bietet jedoch einige Optionen zum Stylen von Schaltflächen, die in der folgenden Tabelle zusammengefasst sind:

Sr.Nr.	Klasse & Beschreibung
1	btn Standard / Standard-Schaltfläche.
2	btn-primary Bietet zusätzliches visuelles Gewicht und identifiziert die primäre Aktion in einer Reihe von Schaltflächen.
3	btn-success Zeigt eine erfolgreiche oder positive Aktion an.
4	btn-info Kontextschaltfläche für informative Warnmeldungen.
5	btn-warning Weist darauf hin, dass bei dieser Aktion Vorsicht geboten ist.
6	btn-danger Zeigt eine gefährliche oder möglicherweise negative Aktion an.
7	btn-link Betonen Sie eine Schaltfläche, indem Sie sie wie einen Link aussehen lassen, während Sie das Verhalten der Schaltfläche beibehalten.

Das folgende Beispiel zeigt alle oben genannten Schaltflächenklassen -

<!-- Standard button -->
<button type = "button" class = "btn btn-default">Default Button</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type = "button" class = "btn btn-primary">Primary Button</button>

<!-- Indicates a successful or positive action -->
<button type = "button" class = "btn btn-success">Success Button</button>

<!-- Contextual button for informational alert messages -->
<button type = "button" class = "btn btn-info">Info Button</button>

<!-- Indicates caution should be taken with this action -->
<button type = "button" class = "btn btn-warning">Warning Button</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type = "button" class = "btn btn-danger">Danger Button</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type = "button" class = "btn btn-link">Link Button</button>

Knopfgröße

In der folgenden Tabelle sind die Klassen zusammengefasst, mit denen Schaltflächen verschiedener Größen abgerufen werden.

Sr.Nr.	Klasse & Beschreibung
1	.btn-lg Dies macht die Schaltfläche groß.
2	.btn-sm Dies macht die Tastengröße klein.
3	.btn-xs Dies macht die Tastengröße extra klein.
4	.btn-block Dadurch werden Schaltflächen auf Blockebene erstellt, die sich über die gesamte Breite eines übergeordneten Elements erstrecken.

Das folgende Beispiel zeigt dies -

<p>
   <button type = "button" class = "btn btn-primary btn-lg">
      Large Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg">
      Large button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary">
      Default size Primary button
   </button>
   
   <button type = "button" class = "btn btn-default">
      Default size button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-sm">
      Small Primary 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 Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-xs">
      Extra small button
   </button>
</p>

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

Button State

Bootstrap bietet Klassen, mit denen Sie den Status von Schaltflächen als aktiv, deaktiviert usw. ändern können. Diese werden in den folgenden Abschnitten erläutert.

Aktiver Zustand

Schaltflächen werden gedrückt angezeigt (mit einem dunkleren Hintergrund, einem dunkleren Rand und einem eingefügten Schatten), wenn sie aktiv sind. In der folgenden Tabelle sind Klassen zusammengefasst, mit denen Schaltflächenelemente und Ankerelemente aktiviert werden.

Element	Klasse
Schaltflächenelement	Verwenden .active Klasse, um zu zeigen, dass es aktiviert ist.
Ankerelement	Verwenden .active Klasse zu <a> Tasten, um anzuzeigen, dass es aktiviert ist.

Das folgende Beispiel zeigt dies -

<p>
   <button type = "button" class = "btn btn-default btn-lg ">
      Default Button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg active">
      Active Button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-lg">
      Primary button
   </button>
   
   <button type = "button" class = "btn btn-primary btn-lg active">
      Active Primary button
   </button>
</p>

Deaktivierter Zustand

Wenn Sie eine Schaltfläche deaktivieren, wird die Farbe um 50% ausgeblendet und der Farbverlauf geht verloren.

In der folgenden Tabelle sind Klassen zusammengefasst, mit denen Schaltflächenelemente und Ankerelemente deaktiviert werden.

Element	Klasse
Schaltflächenelement	Ergänzen Sie die disabled Attribut zu den Schaltflächen <Button>.
Ankerelement	Ergänzen Sie die disabled Klasse zu <a> Schaltflächen. Note- Diese Klasse ändert nur das Erscheinungsbild des <a>, nicht seine Funktionalität. Sie müssen benutzerdefiniertes JavaScript verwenden, um Links hier zu deaktivieren.

Das folgende Beispiel zeigt dies -

<p>
   <button type = "button" class = "btn btn-default btn-lg">
      Default Button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg" disabled = "disabled">
      Disabled Button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-lg">
      Primary button
   </button>
   
   <button type = "button" class = "btn btn-primary btn-lg" disabled = "disabled">
      Disabled Primary button
   </button>
</p>

<p>
   <a href = "#" class = "btn btn-default btn-lg" role = "button">
      Link
   </a>
   
   <a href = "#" class = "btn btn-default btn-lg disabled" role = "button">
      Disabled Link
   </a>
</p>

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

Schaltflächen-Tags

Sie können Schaltflächenklassen mit dem Element <a>, <button> oder <input> verwenden. Es wird jedoch empfohlen, es hauptsächlich mit <button> -Elementen zu verwenden, um browserübergreifende Inkonsistenzprobleme zu vermeiden.

Das folgende Beispiel zeigt dies -

<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">