Der große Bootstrap 4 Komplettkurs
4.2 (202 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,338 students enrolled

Der große Bootstrap 4 Komplettkurs

Bootstrap 4 mit allen Komponenten und Funktionen. Praxisnahe Umsetzung von modernen Beispielen aus dem Agenturalltag.
4.2 (202 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,338 students enrolled
Last updated 5/2018
German
Current price: $48.99 Original price: $94.99 Discount: 48% off
30-Day Money-Back Guarantee
This course includes
  • 4.5 hours on-demand video
  • 8 articles
  • 15 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Assignments
  • Certificate of Completion
Training 5 or more people?

Get your team access to Udemy's top 3,000+ courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Alle Komponenten und Funktionen von Bootstrap in der neuen Version 4.0.
  • Tolle Praxisbeispiele und Lösungen mit Bootstrap aus dem Agenturalltag.

  • Webseiten für jedes Endgerät mittels Responsive Webdesign umsetzen.

  • Tolle Effekte und Erweiterungen mit Bootstrap und jQuery.
  • Praxisnahe Umsetzung mit moderner und vollständiger Beispielwebseite auf Bootstrap-4-Basis.
  • Bootstrap-Komponenten mit Individualisierungen nach Kundenwunsch und eigenem Design.
  • Einführung in die JavaScript- / jQuery-Basics.
  • Übersichtliche Referenzkarte mit hilfreichen Bootstrap-Helper-Klassen zum Ausdrucken oder als digitale Gedankenstütze.
Course content
Expand all 47 lectures 04:26:15
+ Einleitung in Bootstrap
9 lectures 32:38

Erfahre mehr über uns als Trainer und bekomme einen ersten Eindruck von dem, was dich in unserem Bootstrap-4-Komplettkurs erwartet. 

Preview 01:54

In dieser Einführung erfährst du die Basics zum Thema Frontend-Frameworks und welchen Ursprung Bootstrap hat.

Preview 05:32

Hier erhältst du einen ersten Eindruck vom Umfang von Bootstrap und kannst dich bereit s mit einigen wichtigen Elementen ver traut machen, die später auch für die Weiterarbeit nützlich sind.

Funktionsumfang von Bootstrap
04:57

In diesem Video möchte ich dir kurz unsere Entwicklungsumgebung für die kommenden Lektionen vorstellen.

Entwicklungsumgebung
02:00
Entwicklungsumgebung - Links und Infos
00:10

Du erfährst hier welche Dateien du benötigst, was in diesen Dateien enthalten ist und auf welche wir in diesem Videokurs zurückgreifen, um die Beispielwebseite zu erstellen.

Download und Erklärung der Dateien
04:24

Wir erklären dir, wann es Sinn ergibt, Bootstrap-Dateien lokal zu nutzen und wann das Bootstrap-CDN. Außerdem bekommst du nützliche Hinweise zu den weiteren Downloadoptionen.

Bootstrap Download & CDN
04:22

Lerne, wie du Bootstrap einrichtest, was es mit den CDN-Links auf sich hat und wie du dir Bootstrap als Grundgerüst für einen erfolgreichen Webseitenaufbau einrichtest.

Einrichtung und Installation
08:39
Infos zum Download und unserer Beispielwebseite
00:40
+ Layout und Grid
1 lecture 07:39

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.

Das Grid von Bootstrap
07:39
Das Grid ist in Bootstrap eine der wichtigsten Basiskomponenten. Du solltest dich daher auf jeden Fall mit den Grundlagen vertraut machen und einige Übungen damit durchführen.
Mach dich mit dem Bootstrap-Grid vertraut
3 questions
+ Content-Elemente
6 lectures 28:51

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/

Reboot
02:57

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

Typografie - die Schriftoptionen
05:12

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.

Code
05:47

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

Images - mehr als nur Bilder
02:21

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.

Tables
11:25

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.

Figures - kleine Bildzusätze
01:09
+ Layoutelemente / Components
17 lectures 01:31:24

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.

Alerts - individuelle Hinweise
02:34

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.

Preview 04:59

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.

Breadcrumb - leichte Orientierung im Content
04:26

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.

Buttons - Grundelemente von Bootstrap
04:03

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.

Card - die Universal-Komponente
06:06

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.

Carousel - moderne Slideshow
04:06

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.

Collapse - Accordion-Beispiel
10:22

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.

Forms - Formulare für Logins und vieles mehr
06:32

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.

Jumbotron - stylische UI-Elemente
03:29

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.

Modal - die schnelle und einfache Popup Lösung
02:23

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.

Navs (Pills with Dropdowns) - kreative Navigationssysteme
14:06

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!

Navs (Tabs) - supereinfach Tab-Inhalt mit Bootstrap erzeugen
05:14

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.

Pagination - Seitenanzahl für Blogs und Artikel
05:29

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.

Popovers - Klick-Alternative mit Mehrinhalt
05:28

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.

Progressbar - optisch ansprechende Inhaltsdiagramme
03:50

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.

Scrollspy - Inhalt dynamisch scrollen
04:15

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.

Tooltips - Ein must have für viele Webseiten
04:02
Teste dein frisch erlangtes Wissen über die Komponenten in Bootstrap. Hierzu stellen wir dir ein paar Fragen, damit du selber das Wissen aus den vorangegangenen Videos selbst testen kannst.
Selbsttest für die Komponenten in Bootstrap
3 questions
+ Bootstrap und jQuery
12 lectures 01:44:29

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 und jQuery - Teil 1
14:27

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 und jQuery - Teil 2
11:05
Einführung und Ressourcen zu jQuery
00:26

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.

jQuery-Carousel-Funktionen - Teil 1
19:54

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.

jQuery-Carousel-Funktionen - Teil 2
09:15
jQuery Carousel Beispiel Scripte
00:53

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.

Bootstrap-Collapse-Funktionen in jQuery
16:22

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.

Bootstrap-Alert-Funktionen in jQuery
09:38

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.

Bootstrap jQuery- / JavaScript-Events
06:13
Beispiel für Events in Bootstrap
00:14

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.

Preview 15:44

jQuery-Local-Scroll-Script-Vorlage

Local Scroll - Script
00:18

Mit diesem kleinen Quiz kannst du deinen Lernfortschritt zu Bootstrap und jQuery testen. Stelle dein erlerntes Wissen direkt auf die Probe!

Bootstrap- und jQuery-Quiz
4 questions
Requirements
  • Du solltest Grundlagenwissen in HTML und CSS mitbringen.
  • Grundlegender Umgang mit Computern sollte kein Problem sein.
  • KEINE Vorkenntnisse in Bootstrap 3 oder anderen Versionen notwendig.
Description

+++ Der umfangreichste auf Bootstrap 4 fokussierte deutschsprachige Kurs mit Bootstrap-Referenzkarte und Aktualitätsgarantie (siehe unten) +++

Möchtest du lernen, großartige Webseiten mit Bootstrap 4 zu erstellen? In diesem Komplettkurs lernst du praxisnah die Schritt-für-Schritt-Umsetzung einer vollständigen Webseite mit Bootstrap 4 und allen dazugehörigen Komponenten. Dabei zeigen wir dir nur das, was du brauchst, um schnell Ergebnisse zu erzielen und sofort loszulegen.

Wir erklären dir anhand der Dokumentation von Bootstrap alle Funktionen und die gesamte Umsetzung an einer modernen Beispielwebseite, von der du natürlich auch den gesamten Code für deine eigene Übung erhältst. Du lernst die Umsetzung von der Photoshop- / PSD-Datei hin zur fertigen Webseite auf Bootstrap-Basis.

Du lernst also den kompletten Erstellungsprozess mit vielen Tipps und Tricks aus dem Agenturalltag. Wir arbeiten bereits seit über 5 Jahren erfolgreich mit Bootstrap im Agentureinsatz und möchten dir unsere Erfahrungen mit diesem Kurs praxisnah und mit vielen Beispielen näherbringen.

Das Rezept für die erfolgreiche Webseite mit Bootstrap
Ein Frontend-Framework ist dann gut und erfolgreich, wenn man der Webseite nicht mehr sofort ansieht, dass sie auf einem Framework basiert. Vielleicht kennst du sogar die eine oder andere Webseite, bei der du sofort Bootstrap als Basis erkennst? 

Bei uns lernst du, Webseiten mit Bootstrap so zu erstellen, dass der Besucher diese Grundlage nicht direkt erkennt. Wir werden gemeinsam eine umfangreiche Beispielwebseite umsetzen, die vollständig auf Bootstrap basiert. Aber genau das werden wir gut kaschieren und die Seite vollständig individualisieren!

Los geht’s mit den Grundlagen
Wir zeigen dir die Grundlagen von Bootstrap. Lerne das flexible Grid und die Helper kennen. Weiterhin lernst du die Dateistruktur kennen und welche Dateien für welchen Anwendungsfall verwendet werden können.

Die komplette Umsetzung Schritt für Schritt – von der PSD-Datei zur fertigen Webseite!
In unserem Kurs lassen wir keinen Schritt aus! Das beginnt bereits bei dem Design der geplanten Webseite. Wir haben eine moderne Webseite in Photoshop vorbereitet und setzen diese aus der PSD-Datei heraus um. Du lernst den kompletten Umsetzungsprozess aus einer Designvorlage heraus.

Dabei lernst du also nicht nur die Verwendung der Bootstrap-Komponenten, sondern auch deren Individualisierung nach Kundenwunsch und eigenem Design.

Alle Komponenten von Bootstrap. Alle Komponenten? Alle!
Bootstrap ist eines der umfangreichsten Frontend-Frameworks unserer Zeit. Wir zeigen dir alle verfügbaren Komponenten, die Bootstrap zur Verfügung stellt, mit entsprechenden Beispielen.

Entwickle lebendige Webseiten
Bootstrap bietet viele Komponenten, die der Webseite eine gewisse Dynamik und Leben einhauchen. Du erfährst bei uns, wie du diese sinnvoll nutzen kannst und welche Anwendungsfälle damit umgesetzt werden können.

Bootstrap und jQuery
Um dem Kurs die sprichwörtliche Krone aufzusetzen, lernst du zum Schluss die Königsdisziplin: Bootstrap-Methoden und jQuery. Dank der jQuery-Implementierung kannst du jede Bootstrap-Komponente vollständig individualisieren. Eigene Steuerelemente für das Carousel / die Slideshow oder die Verbindung von Komponenten – dank der jQuery-Funktionen alles kein Problem.

Wäre es nicht cool, wenn die Webseite automatisch Informationen über die Öffnungszeiten anzeigt, wenn ein Nutzer diese über ein Kontaktformular mit freier Texteingabe anfragen möchte? Ja, das wäre definitiv ein cooles Beispiel, und wir zeigen dir, wie etwas in der Art realisiert werden kann.

Bootstrap-Referenzkarte
Wir haben für dich eine übersichtliche Referenzkarte mit wichtigen Helper-Klassen und Schnellreferenz zu wichtigen Layout-Bestandteilen wie z. B. dem Grid-System erstellt. Diese mehrseitige PDF-Referenzkarte kannst du entweder ausdrucken oder als digitale Gedankenstütze verwenden.

***** Unsere Aktualitätsgarantie für Bootstrap 4 ***** 
Bootstrap 4 befindet sich derzeit noch in einer Beta-Version. Wir garantieren: Sollte es zwischen der Beta-Version und der kommenden finalen Version von Bootstrap 4.0.0 noch Änderungen geben, so werden wir den Kurs entsprechend aktualisieren und Informationen nachreichen. Du kannst in jedem Fall sicher sein, dass du in diesem Kurs nur die aktuellsten Informationen zu Bootstrap 4 bekommst.

Worauf wartest du also noch, starte jetzt gemeinsam mit Bootstrap 4 durch!

Auszug und Beispiele für Bootstrap Komponenten, welche wir dir im Kurs vorstellen:

  • Alerts - Warn- bzw. Erfolgsmeldungen
  • Badges - Badges für Texte und Buttons, klein aber fein
  • Breadcrumb - Leichte Orientierung im Content
  • Buttons - Grundelemente von Bootstrap 4
  • Card - Die Universal-Komponente 
  • Carousel - Moderne Slideshow
  • Collapse / Accordion
  • Forms - Formulare für Login oder Kontakt
  • Jumbotron / Hero Header - Stylische UI-Elemente
  • Modal - Content-Overlay-Box bzw. Popup Lösung von Bootstrap
  • Navigation - Kreative Navigationssysteme
  • Pagination - Seitenzahlen für Blogs und Artikel
  • Popovers - Klick-Alternative mit mehr Inhalt
  • Tooltips - Ein must-have für viele Webseiten oder Apps
  • Progressbar - Optisch ansprechende Ladebalken oder Diagramme
  • Scrollspy - Inhalte dynamisch scrollen


Content Komponenten:

  • Reboot
  • Typografie
  • Code
  • Images
  • Tables
  • Figure


So wie viele weitere Tipps & Tricks rund um Bootstrap 4. Schau dir direkt die kostenlosen Vorschau-Videos an und starte sofort mit Bootstrap 4 durch.

Falls du im Verlauf des Online-Kurses Fragen oder Probleme hast, stehen wir dir selbstverständlich auch persönlich zur Seite. Im Fragen & Antworten Bereich des Kurses kannst du jederzeit mit uns und allen anderen Teilnehmern in Kontakt treten.

Wir freuen uns auf dich!

Who this course is for:
  • Du möchtest die Vorzüge von Bootstrap kennenlernen? Hier lernst du alle Funktionen Schritt für Schritt kennen.
  • Du weißt nicht, wo du bei Bootstrap anfangen sollst? Kein Problem wir zeigen dir jedes Detail mit praktischen Beispielen.
  • Du möchtest praxisorientiert und nicht nur theoretisch lernen? Wir arbeiten ausschließlich mit gut nachvollziehbaren Beispielen aus der Praxis.