Der große Bootstrap 4 Komplettkurs

In diesem Video lernst du das Grid (Raster) von Bootstrap kennen. Dieses dient als essenzieller Bestandteil und stellt die Basis von Bootstrap dar. Die Layout-PSD-Datei liegt anbei, damit du genau nachvollziehen kannst, welche Elemente wir in unserem Kurs ansprechen.

Der Reboot in Bootstrap ist als CSS-Reset zu verstehen. In diesem Video erfährst du, was das ist und was du zu diesem Thema wissen musst.

https://getbootstrap.com/docs/4.0/content/reboot/

Lerne die verschiedenen Textformatierungen sowie Überschriften oder Schriftschnitte von Bootstrap kennen. Erfahre mehr über die umfassende Dokumentation der Bootstrap-Typografie.

Bootstrap bietet für die inhaltliche Darstellung von Code oder Keyboard-Shortcuts bereits vordefinierte Content-Elemente. Diese Elemente und Stylings wirst du in dieser Lektion kennenlernen.

Von responsiven Bildern über abgerundete Ecken und kleine Bildrahmen lernst du hier ganz bequem die vielfältigen Klassen für Bilder in Bootstrap kennen.

Tabellen sind für viele Webdesigner Fluch und Segen zugleich. Gut, um viele Daten übersichtlich darzustellen, aber schwierig im Bereich Responsive für alle Geräte. In diesem Video erfährst du, was Bootstrap im Bereich Tabellen und natürlich auch Responsive Webdesign zu bieten hat.

Die Standardelemente in HTML5 bieten bereits eine große Auswahl an Möglichkeiten. Zusammen mit speziellen Bootstrap-Klassen, werden auch <figure> und Co. optisch angepasst.

Neben dem Grid bilden die Buttons ein weiteres großes und wichtiges Zahnrad im hervorragend funktionierenden Bootstrap-Uhrwerk. Wie du Buttons anpasst und eigene Klassen darauf anwendest, zeigen wir dir hier.

Unter allen Komponenten ist Navs eine der größten. Wir haben uns hier eins der üblichen Elemente herausgepickt und für dich erklärt. Erfahre, wie du Dropdown-Navigationen ganz bequem mit Bootstrap löst.

Die im Deutschen sogenannte Brotkrümelnavigation ist aus modernen Seiten kaum noch wegzudenken. Erlerne, wie du sie ganz unkompliziert einbaust und über CSS komplett anpassen kannst.

Kaum noch eine Seite verzichtet heute auf Teaser und gut sichtbare Informationen auf den jeweiligen Startseiten. In unserem Beispiel erklären wir dir, wie du Cards einbaust und für deine Seite als Teaserelemente nutzt, ohne viele Änderungen durchführen zu müssen.

Die "Alerts" bieten einen großen Mehrwert in Bootstrap. Neben der Funktion, wofür sie stehen, nämlich als Info- und Hinweisfeld, gibt es natürlich auch die Möglichkeit, die farbigen Boxen anderweitig zu benutzen. Wie wir das anstellen, erfährst du hier.

Ganz egal ob Preisinformation oder nur ein "Neu"-Hinweis. Die Badges von Bootstrap sind in vielerlei Hinsicht ideal für kleinere Hinweise. Wir zeigen dir, wofür du sie noch verwenden kannst und wie du sie optisch anpasst.

Für viele Blogs ist die Pagination fast nicht mehr wegzudenken. Wir zeigen dir, wie du die Bootstrap-Pagination nutzen und individuell anpassen kannst. Dazu lernst du die verschiedenen Paginationslösungen kennen, die Bootstrap bietet.

Die hauseigene Slideshow von Bootstrap ist universell anpassbar und ebenso kinderleicht in die Seite implementiert. Erfahre hier, wie du sie einbaust, nutzt und individuell gestaltest.

Mit dem Scrollspy lernst du eine weitere alternative kennen, den Inhalt deiner Seite geschickt zu kürzen und ihn dabei auch noch gut aussehen zu lassen. Wir erklären dir die Basis von Bootstrap und geben dir Tipps und Tricks für einen Reibungslosen einbau.

Sowohl als Stilelement als auch als Seitentrenner ist der Jumbotron das ideale Werkzeug und eine super Komponente, mit der du mehr aus deinem Inhaltsbereich oder deinem Header der Seite herausholen kannst.

Die Collapse-Komponente von Bootstrap bietet dir diverse Möglichkeiten, Inhalt platzsparend auf der Webseite anzeigen zu können. Wir haben uns für das Accordion entschieden und erklären dir, wie du dieses optimieren und optisch an deine Wünsche anpassen kannst.

Bereits fertig formatierte Formulare warten auf dich in der Bootstrap-Dokumentation. Egal ob für Logins, Newsletter oder Kontaktformulare. Im Handumdrehen sind diese eingebaut und an die Notwendigkeiten deiner Webseite angepasst.

Zeig mithilfe der Progressbar wie weit zum Beispiel dein Fortschritt beim lesen eines Buches ist, oder deine Erfahrung in einem Programm. Kurz erklärt und optisch kinderleicht angepasst, bietet sie einen echten Mehrwert für den Inhalt.

Ein Wort ist unklar oder muss erklärt werden? Abhilfe schaffen die sogenannten Tooltips. Auch Bootstrap bietet eine schöne Lösung, dies darzustellen. Mithilfe dieses Videos, weißt du, wie du sie einbaust und gestaltest.

Kurze Infoboxen mitten im Inhaltsbereich? Dann sind die Popovers genau das Richtige für dich. Damit du diese auch richtig verwendest, haben wir für dich dieses Video erstellt. Bekomme von den Stärken der Tooltip-Alternative einen ersten Eindruck.

Komplizierte Inhalts-Tab-Scripte gehören der Vergangenheit an. Mit den Tabs von Bootstrap bekommst du langen Inhalt ganz easy in deine Seite eingebunden. Lerne, wie schnell du das Grundgerüst aufbauen und optisch anpassen kannst in nur 5 Minuten!

Popups mag zwar niemand mehr, aber manchmal braucht man diese doch, vor allem wenn sie nichts mit Werbung, sondern mit wichtigen Informationen zu tun haben. Erlerne hier, wie spielend leicht du sie einbauen und nach deinen Ideen gestalten kannst.

Bootstrap bietet über entsprechende jQuery-Methoden einen mächtigen Zugang zu allen wichtigen Funktionen und Konfigurationen. Damit lassen sich die bestehenden Scripte bis in die letzte "Ecke" individualisieren. In den folgenden Lektionen zeige ich dir die Basics sowie einige interessante Beispiele.

Bootstrap bietet über entsprechende jQuery-Methoden einen mächtigen Zugang zu allen wichtigen Funktionen und Konfigurationen. Damit lassen sich die bestehenden Scripte bis in die letzte "Ecke" individualisieren. In den folgenden Lektionen zeige ich dir die Basics sowie einige interessante Beispiele.

Am Beispiel des jQuery-Carousel möchte ich dir zeigen, wie du die von Bootstrap zur Verfügung gestellten Methoden in jQuery verwenden kannst. Dazu zählen z. B. die grundlegende Konfiguration ebenso wie die Erstellung eigener Steuerelemente für das Carousel. Zusätzlich vergleichen wir die Konfiguration via "data"-Attributen und der Konfiguration über jQuery.

Am Beispiel des jQuery-Carousel möchte ich dir zeigen, wie du die von Bootstrap zur Verfügung gestellten Methoden in jQuery verwenden kannst. Dazu zählen z. B. die grundlegende Konfiguration ebenso wie die Erstellung eigener Steuerelemente für das Carousel. Zusätzlich vergleichen wir die Konfiguration via "data"-Attributen und der Konfiguration über jQuery.

Wir erstellen komplexere Funktionen und Steuerelemente mit gewissen Logiken und Abhängigkeiten.

Ein weiteres Beispiel für die Verwendung der jQuery-Methoden, welche von Bootstrap zur Verfügung gestellt werden. In diesem Fall verwenden wir die jQuery- / Bootstrap-Funktionen um das Akkordeon bei der Eingabe bestimmter Wörter im Formular auszuklappen. So realisieren wir eine automatische Darstellung der Öffnungszeiten, wenn ein Nutzer diese über das Kontaktformular erfragen möchte. Ein tolles Beispiel, um unnötige Support-Anfragen zu reduzieren.

Verwende die Bootstrap Alerts um beim Absenden eines Kontaktformulars entsprechende Erfolgsmeldungen anzuzeigen und diese automatisch nach ein paar Sekunden wieder auszublenden. Alternativ kann der Nutzer die Alert-Meldung selbst wieder schließen.

Die JavaScript-Events, welche von Bootstrap zur Verfügung gestellt werden, bieten eine großartige Möglichkeit, um zwischen verschiedenen Komponenten oder anderen Scripten zu interagieren. In diesem Video zeige ich dir, wie du mit den Events arbeiten kannst und diese in jQuery für eigene Funktionen abfängst.

Ein schön animierter Local Scroll oder Ankersprung ist typisch für das moderne Web. In diesem Video zeige ich dir, wie ein entsprechendes Script auf jQuery-Basis entwickelt wird.

jQuery-Local-Scroll-Script-Vorlage