Bootstrap Code Play

Lerne responsives Webdesign mit Bootstrap-Lektionen, die du bearbeiten und in der Vorschau ansehen kannst. Bootstrap Code Play verbindet Erklärungen, Beispielcode und eine interaktive Umgebung, sodass du erkunden kannst, wie sich Änderungen im Markup auf eine Seite auswirken.

LESEN, ÄNDERN, VORSCHAU ANSEHEN

Wähle ein Thema, lies die Funktionsweise und tippe dann auf „Ausprobieren“, um das Beispiel im Editor zu öffnen. Ändere eine Klasse, passe den Inhalt an oder füge ein Element hinzu. Öffne die Vorschau, um das Ergebnis zu überprüfen, und kehre dann zu „Code“ zurück, um ein weiteres Experiment durchzuführen.

LERNE DIE GRUNDLAGEN

Übe responsive Raster, Typografie, Schaltflächen, Benachrichtigungen, Tabellen und Formulare. Entdecke Komponenten wie Karten, Navigationsleisten, Akkordeons und Dialoge in den entsprechenden Lernpfaden. Geführte Lektionen enthalten Schritte, Herausforderungen und Hinweise zu häufigen Fehlern, damit du den Code verstehst, anstatt ihn nur zu kopieren. Projektlektionen veranschaulichen Konzepte anhand von Beispielen wie einem Preisbereich und einem kompakten Dashboard.

WÄHLEN SIE EINEN LERNPFAD

Studieren Sie den mitgelieferten Bootstrap 5.3.8-Pfad oder erkunden Sie Bootstrap 4.6.2 und 3.4.1 für ältere Projekte. Die älteren Pfade werden nicht mehr unterstützt und dienen nur noch Lern- und Migrationszwecken. Ein separater Bootstrap 6 Alpha-Pfad ist experimentell; für die Vorschau benötigen Sie Internetzugang und eine moderne WebView.

ÜBEN SIE WEITER

Suchen Sie nach Themen oder stöbern Sie in den Kategorien. Markieren Sie abgeschlossene Lektionen und sehen Sie Ihren Fortschritt für jede Version. Öffnen Sie den Playground für Ihre eigenen HTML-Experimente, speichern Sie eine Datei und greifen Sie über „Gespeicherte Dateien“ darauf zu.

BEARBEITEN SIE MIT NÜTZLICHEN TOOLS

Nutzen Sie Syntaxhervorhebung, Rückgängig und Wiederherstellen, Suchen und Ersetzen sowie die Funktion „Gehe zu Zeile“, während Sie an Beispielen arbeiten. „Speichern unter“ erstellt eine separate Kopie, und „Code teilen“ sendet den Editor-Text über die verfügbaren Freigabeoptionen.

Für Studierende, Selbstlerner und Entwickler, die sich erneut mit responsiven Layouts beschäftigen, bietet die App einen praktischen Ablauf: Lesen Sie eine Erklärung, nehmen Sie eine kleine Änderung vor und überprüfen Sie das Ergebnis.

Die App enthält Werbung. Beispiele, die auf externe Ressourcen verweisen, benötigen eine Internetverbindung; die Verfügbarkeit externer Ressourcen kann variieren.