Bootstrap - Overview

Hallo, angehende Web-Entwickler! Ich freue mich sehr, Ihr Guide auf dieser aufregenden Reise in die Welt von Bootstrap zu sein. Als jemand, der already für Jahre Informatik unterrichtet hat, kann ich Ihnen sagen, dass Bootstrap eines der leistungsstärksten Tools ist, das Sie in Ihrem Abenteuer der Web-Entwicklung antreffen werden. Also, tauchen wir ein!

Was ist Bootstrap?

Bootstrap ist wie ein Schweizer Taschenmesser für Web-Entwickler. Es ist ein kostenloser, quelloffener Frontend-Framework, das das Erstellen von responsiven, mobilfreundlichen Websites zum Kinderspiel macht. Stellen Sie es sich als Sammlung von vorab geschriebenen CSS-Styles und JavaScript-Plugins vor, die Sie verwenden können, um schöne, funktionale Websites zu erstellen, ohne von Grund auf zu beginnen.

Eine kurze Analogie

Stellen Sie sich vor, Sie bauen ein Haus. Ohne Bootstrap müssten Sie jedes Stück Holz selbst sägen, den Zement selbst mischen und jede Nägel selbst formen. Mit Bootstrap ist es, als hätten Sie ein Lager voller vorgefertigter Teile. Sie müssen nur die auswählen, die Sie wollen, und sie zusammenbauen. Viel schneller, oder?

Geschichte von Bootstrap

Bootstrap war nicht immer die Powerhouse, die es heute ist. Lassen Sie uns einen kurzen Rückblick machen:

2010: Die Twitter-Ingenieure Mark Otto und Jacob Thornton haben Bootstrap als internes Tool erstellt, um die Konsistenz in ihren Projekten zu gewährleisten.
2011: Bootstrap wurde als Open-Source-Projekt der Öffentlichkeit zugänglich gemacht.
2013: Bootstrap 3 führte einen mobilfreundlichen Ansatz ein.
2018: Bootstrap 4 brachte bedeutende Verbesserungen und neue Funktionen.
2021: Bootstrap 5 wurde veröffentlicht, die Abhängigkeit von jQuery aufgab und neue Komponenten einführte.

Wichtige Punkte in Bootstrap 5 und späteren Versionen

Bootstrap 5 und seine folgenden Updates brachten einige spielverändernde Funktionen:

jQuery entfernt: Dies reduzierte die Größe des Frameworks und verbesserte die Leistung.
Erweiterte Rastersystem: Mehr Flexibilität bei der Erstellung von responsiven Layouts.
Neue Utilities: Zusätzliche Utilitätsklassen für eine einfache Anpassung.
Verbesserte Dokumentation: Noch einfacher für Anfänger zu lernen.
Dunkelmodus: Eingebaute Unterstützung für die Erstellung von dunkelthematischen Websites.

Bootstrap - Vorteile

Warum sollten Sie Bootstrap verwenden? Hier sind einige überzeugende Gründe:

Responsives Design: Bootstrap macht Ihre Website auf allen Geräten großartig aussehen.
Konsistenz: Stellt sicher, dass Ihre Website across verschiedenen Browsern einheitlich aussieht.
Anpassungsfähig: Sie können Bootstrap leicht an Ihre Bedürfnisse anpassen.
Zeitersparnis: Vorgefertigte Komponenten beschleunigen die Entwicklung.
Große Community: Tons von Ressourcen und Unterstützung online verfügbar.

Bootstrap - WichtigeGlobals

Bevor wir mit dem Coden beginnen, schauen wir uns einige wichtige globale Einstellungen in Bootstrap an:

HTML5 Doctype: Bootstrap erfordert die Verwendung von HTML5 doctype.
Responsive Meta Tag: Stellt sicher, dass die Seite auf mobilen Geräten korrekt dargestellt wird.
Box-sizing: Bootstrap setzt box-sizing: border-box global.
Reboot: Bietet eine konsistente Grundlage across Browsern.

Hier ist eine grundlegende HTML-Vorlage mit diesen Globals:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meine Bootstrap-Seite</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello, Bootstrap!</h1>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Diese Vorlage erstellt eine grundlegende HTML-Struktur mit Bootstrap enthalten. Das viewport Meta-Tag stellt sicher, dass die Seite auf mobilen Geräten korrekt dargestellt wird, und wir haben die Bootstrap CSS- und JavaScript-Dateien verlinkt.

Verwendung von CDN

Nun, lassen Sie uns darüber sprechen, wie Sie Bootstrap actually in Ihr Projekt einbeziehen. Einer der einfachsten Wege ist die Verwendung eines CDN (Content Delivery Network).

Was ist ein CDN?

Stellen Sie sich vor, Sie müssten jedes Mal, wenn Sie ein Buch lesen wollen, in eine zentrale Bibliothek gehen. Das wäre langsam, oder? Ein CDN ist wie das haben von mehreren Bibliotheken, die geografisch verteilt sind. Es liefert die Bootstrap-Dateien vom Server, der dem Benutzer am nächsten ist, was Ihre Website schneller laden lässt.

So beziehen Sie Bootstrap über CDN ein:

<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- JavaScript (optional) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Fügen Sie diese Zeilen in den <head>-Abschnitt Ihrer HTML-Datei ein, und Sie sind bereit, Bootstrap zu verwenden!

Ein einfaches Bootstrap-Beispiel

Lassen Sie uns alles mit einem einfachen Beispiel zusammenbringen:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meine erste Bootstrap-Seite</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="mt-5">Willkommen bei Bootstrap!</h1>
<p class="lead">Dies ist eine einfache Hero-Einheit, ein einfaches Jumbotron-Style-Komponente, um besondere Inhalte oder Informationen hinzuweisen.</p>
<hr class="my-4">
<p>Es verwendet Utilitätsklassen für Typografie und Abstand, um Inhalte im größeren Behälter zu platzieren.</p>
<a class="btn btn-primary btn-lg" href="#" role="button">Mehr erfahren</a>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Dieses Beispiel erstellt eine einfache "Hero"-Section mit einer Überschrift, etwas Text und einem Button. Lassen Sie uns das aufschlüsseln:

<div class="container">: Dies erstellt einen responsiven Behälter, der den Inhalt zentriert.
class="mt-5": Fügt dem Überschrift oben Abstand hinzu.
class="lead": Macht den Absatz mit einer größeren Schriftgröße hervorstechen.
class="my-4": Fügt dem horizontalen Strich oben und unten Abstand hinzu.
class="btn btn-primary btn-lg": Erstellt eine große, primaryfarbene Schaltfläche.

Schlussfolgerung

Herzlichen Glückwunsch! Sie haben gerade Ihre ersten Schritte in die Welt von Bootstrap unternommen. Wir haben die Grundlagen abgedeckt, von was Bootstrap ist und seiner Geschichte, bis hin zu dessen Einbindung in Ihr Projekt und der Erstellung einer einfachen Seite.

Erinnern Sie sich daran, dass das Lernen der Web-Entwicklung wie das Kochen lernen ist. Am Anfang folgen Sie möglicherweise genau den Rezepten (wie unseren Beispielen). Aber je bequemer Sie werden, desto mehr werden Sie experimentieren und Ihre eigenen einzigartigen "Gerichte" erstellen. Also fürchten Sie sich nicht, Bootstrap zu erkunden und zu sehen, was Sie erschaffen können!

In unserer nächsten Lektion tauchen wir tiefer in Bootstrap's Rastersystem ein und sehen, wie es responsive Design zum Kinderspiel macht. Bis dahin, viel Spaß beim Coden!

Credits: Image by storyset

Vorheriges Tutorial:

Bootstrap - Startseite

Nächstes Tutorial:

Bootstrap - Umgebungssetup