TechBlogSD - Alles für WordPress und WEB-Entwicklung
WEB- und WordPress-Anleitungen, Neuigkeiten, Rezensionen zu Themes und Plugins

Wie erstelle ich Schaltflächen in Bootstrap 5?

14

Schaltflächen sind eines der Grundelemente jedes UI-Frameworks. In unserem anderen Artikel haben wir viele Beispiele für Bootstrap 3-Tasten gesehen. In Bootstrap 4 gibt es kleinere Änderungen an den Schaltflächenklassen, um die Benutzerfreundlichkeit zu verbessern. Zum Beispiel wird die Standard-Schaltflächenklasse „.btn-dafault” in eine sekundäre Schaltfläche mit der Klasse „.btn-sekundär” geändert und die extra kleine Schaltflächenklasse „.btn-xs” wird entfernt. Es gibt nicht viel Änderungen zu Schaltflächen in Bootstrap 5. In diesem Tutorial erfahren Sie mehr über das Erstellen verschiedener Arten von Schaltflächen mit Bootstrap 5.

Grundlagen der Bootstrap-Buttons

Denken Sie vor dem Erstellen von Schaltflächen an die folgenden Punkte:

  • Um ein Element als Schaltfläche zu identifizieren, müssen Sie mindestens die Klasse „.btn” einschließen.
  • Zusätzliche Klassen bestimmen nur das weitere Design der Schaltfläche zusätzlich zur Klasse „.btn”.
  • Die Klasse „.btn” kann zu HTML- Elementen hinzugefügt werden wie
  • Sie benötigen die Bootstrap-Skriptdateien nur für den Abschnitt „Bootstrap Plugins”, um einen Umschalteffekt zu erzeugen, andere Schaltflächen funktionieren einfach mit dem CSS. Weitere Informationen finden Sie in der Bootstrap 5-Starter-Vorlage.

Grundlegende Standardtasten

Sie können verschiedene Farben von Schaltflächen erstellen, indem Sie Hintergrunddienstprogrammklassen bis zur Klasse ".btn" verwenden.

  • Primär – Dies ist die primäre oder Haupttaste, die mit blauer Farbe verwendet wird.
  • Sekundär – Die weiße Farbtaste ist eine sekundäre oder alternative Taste.
  • Erfolg – grüner Knopf für positive Aktionen.
  • Info – Hellblaue Taste zum Anzeigen von Informationen.
  • Warnung – gelbe Schaltfläche für Warnaktionen.
  • Gefahr – Rote Taste für Fehleraktionen.
  • Licht – Taste mit hellgrauer Farbe.
  • Dunkel – Schaltfläche mit dunklem Hintergrund.
  • Link – Neben Hintergrundfarben können Sie auch eine Link-Schaltfläche ohne Hintergrund erstellen.

Der primäre Tastencode sollte so aussehen

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap 5 CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <!-- Start of Button --> <button type="button" class="btn btn-primary">Primary</button> <!-- End of Button --> <!-- Bootstrap 5 Scripts --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> </body> </html>

Wie erklärt, identifiziert die Klasse „.btn” das Element als Schaltfläche und die Klasse „.btn-primary” wird verwendet, um die Schaltfläche mit primärer (blauer) Farbe zu erstellen. In ähnlicher Weise sind unten weitere Tastencodes angegeben:

<button type="button" class="btn btn-secondary">Secondary</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-light">Light Button</button> <button type="button" class="btn btn-dark">Dark Button</button> <button type="button" class="btn btn-link">Link</button>

Das letzte Element ist eine Link-Schaltfläche, die auf dem Display wie ein Textlink aussieht, sich jedoch wie eine Schaltfläche verhält, wenn sie angeklickt oder mit der Maus darüber bewegt wird. Die Standardschaltflächen sehen im Browser wie folgt aus:

Wie erstelle ich Schaltflächen in Bootstrap 5?

Button-Tags – Verwenden von Button-Klassen mit unterschiedlichen Tags

Schaltflächenklassen werden unterstützt in

Aufnahmequelle: www.webnots.com
Hinterlasse eine Antwort

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen