jQuery Schnellstart – Bootstrap

In dieser Lektion bekommst du einen Crashkurs in Bootstrap 4. Mit Bootstrap erstellst du interaktive Webanwendungen und sparst viel Zeit beim Coden in jQuery und JavaScript.

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 oder in deiner Web-App zu verwenden. Grundsätzlich musst du die CSS-Datei sowie die JavaScript-Datei von Bootstrap einbinden. Außerdem benötigt Bootstrap die jQuery-Bibliothek (die du schon in diesem Schnellstart kennengelernt hast).

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.