Bootstrap 4 Schnellstart – Willkommen

Herzlich Willkommen. In diesem Schnellstart in Bootstrap 4, bekommst du einen ausführlichen Einblick, in das beliebte Framework "Bootstrap" von Twitter.

Klären wir zunächst, was Bootstrap überhaupt ist und welche Vorteile es bietet.

Was ist Bootstrap?

Die Hauptmerkmale von Bootstrap lassen sich in drei einfachen Sätzen erklären:

Bootstrap ist ein kostenloses Frontend-Framework für eine schnellere und einfachere Webentwicklung.
Bootstrap enthält HTML- und CSS-basierte Designvorlagen für Typografie, Formulare, Schaltflächen, Tabellen, Navigation, Modelle und viele andere, sowie optionale JavaScript-Plugins.
Bootstrap gibt dir die Möglichkeit, einfache responsive Designs zu erstellen, ohne sich in CSS zu verlieren.

Was sind die Vorteile von Bootstrap und warum solltest du es verwenden?

Einfach zu bedienen: Jeder, der über grundlegende Kenntnisse in HTML und CSS verfügt, kann mit Bootstrap anfangen.
Responsiveness: Das responsive CSS von Bootstrap passt sich an Smartphones, Tablets und PCs an.
Mobile-First: In Bootstrap sind Mobile-First-Styles Teil des Haupt-Frameworks.
Browser-Kompatibilität: Bootstrap 4 ist mit allen gängigen Browsern kompatibel (Chrome, Firefox, Internet Explorer 10+, Edge, Safari und Opera).

Beispiel eines responsive Dashboards, welches mit Bootstrap erstellt wurde:

Woher bekomme ich Bootstrap 4?

Es gibt zwei Möglichkeiten, Bootstrap 4 auf deiner eigenen Website zu verwenden. Grundsätzlich musst du die CSS-Datei sowie die JavaScript-Datei von Bootstrap einbinden. Außerdem benötigt Bootstrap folgende Bibliotheken: jQuery und optional Popper.js.

Du kannst:

Den kostenlosen CDN von Bootstrap 4 einbinden.
Oder Bootstrap 4 auf getbootstrap.com kostenlos downloaden.

1. Kostenlosen CDN von Bootstrap 4 einbinden

Wenn du Bootstrap 4 nicht selbst herunterladen und hosten möchtest, kannst du es über ein CDN (Content Delivery Network) einbinden.

&lt;!-- Neuestes und komprimiertes Bootstrap CSS --&gt;
&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"&gt;

&lt;!-- jQuery Bibliothek --&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;!-- Popper JS (optional) --&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"&gt;&lt;/script&gt;

&lt;!-- Neuestes und komprimiertes Bootstrap JavaScript --&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"&gt;&lt;/script&gt;

2. Bootstrap 4 Download

Wenn du Bootstrap 4 selbst herunterladen und hosten möchtest, gehe auf getbootstrap.com und folge den Anweisungen dort.

Kurze Zusammenfassung:

Jetzt hast du einen schnellen Einstieg dazu bekommen, was Bootstrap (Version 4) ist, welche Vorteile das Framework besitzt und woher du es kostenlos beziehen kannst.

In der nächsten Lektion lernst du, wie du deine erste Website mit Bootstrap erstellen kannst.