Skip to main content

Aufgabe 1: Buttons in HTML vs Bootstrap

  1. Öffne die Website https://codeply.com/
  2. Klicke in der linken Seite auf 'Bootstrap 5'
  3. Lösche den vorhanden Code.
  4. Füge den folgenden Code ein um einen Button zu erstellen:
<button>Klick mich!</button>
  1. Klicke auf 'Run' um die Website zu starten.

Du siehst, dass der Button nicht gestyled ist. Das liegt daran, dass wir noch keine CSS Datei eingebunden haben. Wir können aber auch einfach die vorgefertigten Bootstrap Klassen verwenden.

  1. Gehe auf die Bootstrap Dokumentation und suche nach 'Buttons'. Dort findest du die vorgefertigten Bootstrap Klassen für Buttons. Suche dir eine Klasse aus und füge sie dem Button hinzu:
Beispiel
<button class="btn btn-dark">Klick mich!</button>
  1. Klicke auf 'Run' um die Website zu starten.

Du siehst, dass der Button jetzt gestyled ist. Das liegt daran, dass wir die vorgefertigten Bootstrap Klassen verwendet haben.