In diesem Beispiel wird ein button-Element verwendet, um den Button darzustellen. Das type-Attribut "button" gibt an, dass es sich um einen standardmäßigen Button handelt. Das class-Attribut "btn" gibt an, dass es sich um einen Bootstrap-Button handelt. Das class-Attribut "btn-primary" gibt die Farbe des Buttons an. In diesem Fall ist es blau, was anzeigt, dass es ein wichtiger Button ist. Der Text innerhalb des button-Elements ist der Text, der auf dem Button angezeigt wird.
Bootstrap 5 bietet auch eine Vielzahl von Klassen, um die Größe, Schriftart, Rundung und andere Eigenschaften des Buttons anzupassen. Beispielsweise kannst du die Klasse "btn-lg" verwenden, um den Button größer darzustellen oder die Klasse "btn-block" verwenden, um den Button vollständig auf die Breite seines Containers auszudehnen.
<button type="button" class="btn btn-primary">Primary</button>
<!-- Blauer Button - wichtige Aktionen hervorheben -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Grauer Button - sekundäre Aktionen hervorheben -->
<button type="button" class="btn btn-secondary">Secondary</button>
<!-- Grüner Button - erfolgreiche Aktionen hervorheben -->
<button type="button" class="btn btn-success">Success</button>
<!-- Roter Button - fehlerhafte Aktionen hervorheben -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Gelber Button - Aktionen hervorheben, die Vorsicht erfordern -->
<button type="button" class="btn btn-warning">Warning</button
<!-- Hellblauer Button - zusätzliche Informationen oder Hilfe anzuzeigen -->
<button type="button" class="btn btn-info">Info</button>
<!-- Grauer Button mit heller Farbe -->
<button type="button" class="btn btn-light">Light</button
<!-- Schwarzer Button mit dunkler Farbe -->
<button type="button" class="btn btn-dark">Dark</button>