Bootstrap 5-Schaltfläche

Buttonstile

Bootstrap 5 bietet verschiedene Arten von Buttons：

Beispiel

<button type="button" class="btn">基础</button>
<button type="button" class="btn btn-primary">主要</button>
<button type="button" class="btn btn-secondary">次要</button>
<button type="button" class="btn btn-success">成功</button>
<button type="button" class="btn btn-info">信息</button>
<button type="button" class="btn btn-warning">警告</button>
<button type="button" class="btn btn-danger">危险</button>
<button type="button" class="btn btn-dark">深色</button>
<button type="button" class="btn btn-light">浅色</button>
<button type="button" class="btn btn-link">链接</button>

Probieren Sie es selbst aus

按钮类可用于 <a>、<button> 或 <input> 元素：

Beispiel

<a href="#" class="btn btn-success">链接按钮</a>
<button type="button" class="btn btn-success">按钮</button>
<input type="button" class="btn btn-success" value="输入按钮">
<input type="submit" class="btn btn-success" value="提交按钮">
<input type="reset" class="btn btn-success" value="重置按钮">

Probieren Sie es selbst aus

Warum schreiben wir # in das href-Attribut des Links?

Da wir keine Seite haben, die verlinkt werden kann, und wir keine "404"-Nachricht erhalten möchten, verwenden wir # als Link. In der Realität wäre dies die echte URL der "Such"-Seite.

Knopfkontur

Bootstrap 5 bietet auch acht Kontur/Rahmen-Knöpfe.

Bewegen Sie den Mauszeiger darauf, um zusätzliche "Hover"-Effekte zu sehen:

Beispiel

<button type="button" class="btn btn-outline-primary">Haupt</button>
<button type="button" class="btn btn-outline-secondary">Nebenbei</button>
<button type="button" class="btn btn-outline-success">Erfolg</button>
<button type="button" class="btn btn-outline-info">Information</button>
<button type="button" class="btn btn-outline-warning"> Warnung</button>
<button type="button" class="btn btn-outline-danger">Gefährlich</button>
<button type="button" class="btn btn-outline-dark">Dunkel</button>
<button type="button" class="btn btn-outline-light text-dark">Hell</button>

Probieren Sie es selbst aus

Knopfgröße

Für große Knöpfe verwenden .btn-lg Klasse, für kleine Knöpfe verwenden .btn-sm Klasse:

Beispiel

<button type="button" class="btn btn-primary btn-lg">Groß</button>
<button type="button" class="btn btn-primary">Standard</button>
<button type="button" class="btn btn-primary btn-sm">Klein</button>

Probieren Sie es selbst aus

Blockknöpfe

Um einen Blockknopf zu erstellen, der die gesamte Breite des übergeordneten Elements einnimmt, verwenden Sie auf dem übergeordneten Element: .d-grid "helper" Klasse:

Beispiel

<div class="d-grid">
  <button type="button" class="btn btn-primary btn-block">Volle Breite Button</button>
</div>

Probieren Sie es selbst aus

Wenn Sie viele blockartige Buttons haben, können Sie .gap-* Klasse kontrolliert den Abstand zwischen ihnen:

Beispiel

<div class="d-grid gap-3">
  <button type="button" class="btn btn-primary btn-block">Volle Breite Button</button>
  <button type="button" class="btn btn-primary btn-block">Volle Breite Button</button>
  <button type="button" class="btn btn-primary btn-block">Volle Breite Button</button>
</div>

Probieren Sie es selbst aus

Aktivierter/Deaktivierter Button

Der Button kann auf den Aktivierungs- (angezeigt als gedrückt) oder Deaktivierungsstatus (nicht klickbar) eingestellt werden:

Klasse .active den Button im gedrückten Zustand anzeigen, während disabled Das Attribut macht den Button nicht klickbar. Beachten Sie, dass das <a>-Element das disabled-Attribut nicht unterstützt, daher muss .disabled Klasse, um sie optisch als deaktiviert anzuzeigen.

Beispiel

<button type="button" class="btn btn-primary active">Aktiver Primär</button>
<button type="button" class="btn btn-primary" disabled>Deaktivierter Primär</button>
<a href="#" class="btn btn-primary disabled">Deaktivierter Link</a>

Probieren Sie es selbst aus

Ladeknopf

Sie können auch "spinner" zu den Buttons hinzufügen, Sie werden mehr über unsere BS5 Spinner-Anleitung lernen:

Beispiel

<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
  Lade..
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm"></span>
  Lade..
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-grow spinner-grow-sm"></span>
  Lade..
</button>

Probieren Sie es selbst aus