Lernen Sie Bootstrap 4 in diesem kostenlosen 10-teiligen Kurs

Bootstrap 4 stellt eine vollständige Neufassung der gesamten Bibliothek dar und bringt mehrere neue Funktionen und Konzepte mit sich, um Ihren Kopf herumzureißen. Es kann sich also überwältigend anfühlen, mit dem Kopf voran in die Dokumentation zu springen, um sie zu lernen.

Aus diesem Grund haben wir uns mit Neil Rowe (früher bekannt als CodersGuide) zusammengetan und einen kostenlosen Kurs in voller Länge für Bootstrap 4 erstellt. Neil hat zuvor einen der beliebtesten Bootstrap 3-Kurse auf YouTube erstellt. Wir freuen uns sehr, dass er dies ist wählte Scrimba für seinen Folgekurs.

Sie können den Kurs heute belegen. Gehen Sie einfach zur Kursseite und Sie werden innerhalb einer Stunde ein Bootstrap 4-Master.

Schauen wir uns jetzt genauer an, was Sie lernen werden!

# 1 Kurseinführung

Im ersten Screencast erhalten Sie einen Überblick über Bootstrap selbst und die damit verbundenen Dienstprogramme und Komponenten. Neil geht auch auf die Hauptvorteile von v4 ein.

# 2 Das Responsive Grid System

Der Kurs folgt dann mit einer der wichtigsten Komponenten von Bootstrap, dem Responsive Grid-System. Neil erklärt, wie verschiedene Gitter mit unterschiedlichen Haltepunkten, Spaltengrößen und Offsets erstellt werden.

# 3 Responsive Navbars

Die Navbar-Komponente ist ein wichtiger Grund dafür, dass viele Benutzer Bootstrap verwenden. In dieser Vorlesung lernen Sie, wie Sie eine reaktionsfähige Navigationsleiste erstellen, die auf kleinen Bildschirmen zu einem Hamburger-Menü zusammenfällt.

# 4 Modalitäten

Bootstrap macht es auch super einfach, Modals zu erstellen, was oft nützlich ist. In dieser Vorlesung lernen Sie Schritt für Schritt, wie Sie sie erstellen.

# 5 Formulare

Formulare sind für die meisten Websites von entscheidender Bedeutung. Daher ist es gut zu wissen, wie sie erstellt werden. In dieser Vorlesung erfahren Sie, wie Sie ein ansprechendes Anmeldeformular erstellen. Hier werden auch Ihre Fähigkeiten aus der Responsive Grid-Vorlesung nützlich sein.

# 6 Gruppen auflisten

Listengruppen können für viele verschiedene Zwecke verwendet werden. Sie können beispielsweise als Seitenleiste, Menü, Artikelliste oder im Grunde genommen als beliebiges Element verwendet werden.

# 7 Karten

Bootstrap 4 führt eine völlig neue Komponente namens Karten ein, die Panels, Wells und Thumbnails ersetzt. Eine Karte ist ein flexibler und erweiterbarer Inhaltscontainer. In dieser Vorlesung lernen Sie, wie Sie eine mit verschiedenen Komponenten erstellen, aus denen normalerweise eine Karte besteht.

# 8 Tabellen

Bootstrap 4 enthält auch eine Reihe von Klassen zum Ändern von Tabellen. In dieser Vorlesung werden die meisten von ihnen vorgeführt. Sie sind aktiviert, dh Sie müssen aktiv eine Tabellenklasse hinzufügen, um eine Tabelle in eine Bootstrap-Tabelle umzuwandeln. Dies ist anders als früher, als reguläre HTML-Tabellen automatisch in Bootstrap-Tabellen umgewandelt wurden.

# 9 Warnungen

Warnungen sind nicht besonders aufregend und es gibt nicht zu viele Änderungen gegenüber früheren Versionen der Bibliothek. Wenn Sie also Bootstrap 2 oder 3 verwendet haben, sollten Sie mit all dem ziemlich vertraut sein. Es ist jedoch wichtig, diese kennenzulernen, da das Versenden von Nachrichten und Benachrichtigungen Ihrer Benutzer über Warnungen dazu beitragen kann, Ihre Website benutzerfreundlicher zu gestalten.

# 10 Navigationsoptionen

Schließlich schließt der Kurs mit dem Beginn ab, indem Sie mehr Werkzeuge in Ihrem Gürtel haben, wenn es um Navigationsleisten wie Registerkarten und Dropdown-Listen geht. Dies ist praktisch zu wissen, aber nicht so wichtig wie das Material in Vorlesung zwei, weshalb es am Ende des Kurses erscheint.

Wenn Sie all diese Vorlesungen hintereinander verfolgen, sollten Sie in der Lage sein, Websites mit Bootstrap 4 zu erstellen. Wenn Sie nicht weiterkommen, sind Sie gut gerüstet, um in die Dokumente einzutauchen und eventuelle Probleme zu lösen.

Das Scrimba-Format

Lassen Sie uns zum Schluss noch einen kurzen Blick auf die Technologie hinter dem Kurs werfen. Es wurde mit Scrimba erstellt, einem interaktiven Codierungs-Screencast-Tool. Ein "Scrim" sieht aus wie ein normales Video, ist jedoch vollständig interaktiv. Dies bedeutet, dass Sie den Code im Screencast bearbeiten können.

Hier ist ein GIF, das das Konzept erklärt:

Screencast anhalten → Code bearbeiten → Ausführen!  → Sehen Sie Ihre Änderungen

Screencast anhalten → Code bearbeiten → Ausführen! → Sehen Sie Ihre Änderungen

Dies ist ideal, wenn Sie das Gefühl haben, mit dem Code experimentieren zu müssen, um ihn richtig zu verstehen, oder wenn Sie einfach einen Teil des Codes kopieren möchten.

Also, worauf wartest Du? Machen Sie noch heute den Kurs!

Danke fürs Lesen! Mein Name ist Per, ich bin Mitbegründer von Scrimba und ich liebe es, Menschen dabei zu helfen, neue Fähigkeiten zu erlernen. Folgen Sie mir auf Twitter, wenn Sie über neue Artikel und Ressourcen informiert werden möchten.

Danke fürs Lesen! Mein Name ist Per Borgen, ich bin Mitbegründer von Scrimba - der einfachste Weg, das Codieren zu lernen. Sie sollten sich unser Responsive Web Design Bootcamp ansehen, wenn Sie lernen möchten, moderne Websites auf professioneller Ebene zu erstellen.