Bootstrap - Umgebungseinrichtung

Hallo, angehende Web-Entwickler! Ich freue mich sehr, Ihr Guide auf dieser aufregenden Reise in die Welt von Bootstrap zu sein. Als Informatiklehrer mit jahrelanger Erfahrung habe ich unzählige Schüler gesehen, die aufleuchten, wenn sie erkennen, wie Bootstrap ihre Web-Entwicklungsfähigkeiten transformieren kann. Also, tauchen wir ein und richten unsere Bootstrap-Umgebung ein!

Bootstrap - Environment Setup

Was ist Bootstrap?

Bevor wir beginnen, lassen Sie uns schnell zusammenfassen, was Bootstrap ist. Stellen Sie sich vor, Sie bauen ein Haus. Bootstrap ist wie ein vorgefertigtes Kit, das Ihnen alle notwendigen Teile gibt, um schnell ein robustes, gut aussehendes Haus zu bauen. In Begriffen der Web-Entwicklung ist es ein leistungsstarkes Frontend-Framework, das vorgefertigte Komponenten und Stile bietet, um responsive, mobilfreundliche Websites mit Leichtigkeit zu erstellen.

Kompilierte CSS und JS

Der einfachste Weg, Bootstrap zu verwenden, besteht darin, seine kompilierten CSS- und JavaScript-Dateien in Ihr Projekt einzubinden. Es ist, als bekämen Sie ein готово к использованию toolkit – Sie müssen die Werkzeuge selbst nicht zusammenbauen!

Hier ist, wie Sie Bootstrap in Ihrer HTML-Datei einbinden können:

<!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>
<!-- Ihr Inhalt kommt hier hin -->

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

In diesem Beispiel verknüpfen wir die Bootstrap-CSS-Datei im <head>-Bereich und binden die JavaScript-Datei direkt vor dem schließenden </body>-Tag ein. Dies stellt sicher, dass die Stile zuerst geladen werden und das JavaScript nach dem Laden des Seiteninhaltes ausgeführt wird.

Quelldateien

Für diejenigen von Ihnen, die gerne herum experimentieren und anpassen (ich sehe euch, zukünftige Entwickler!), bietet Bootstrap auch Quelldateien an. Diese sind die rohen Zutaten, aus denen Bootstrap besteht, geschrieben in Sass und JavaScript.

Um die Quelldateien zu verwenden, müssen Sie einen Build-Prozess mit einem Task-Runner wie Gulp oder Webpack einrichten. Das ist etwas fortgeschrittener,also werden wir das für eine zukünftige Lektion aufheben. Denken Sie daran, es ist wie das haben eines Rezepts und der Zutaten, um einen Kuchen von Grund auf zu backen, anstatt einen fertigen zu kaufen!

CDN über jsDelivr

CDN steht für Content Delivery Network. Es ist wie das haben von mehreren Kopien eines Buches in Bibliotheken auf der ganzen Welt – Benutzer können die nächstgelegene Kopie schnell abrufen. jsDelivr ist ein kostenloser, quelloffener CDN, der Bootstrap-Dateien hostet.

So verwenden Sie Bootstrap über jsDelivr:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

Die integrity- und crossorigin-Attribute sind für die Sicherheit. Sie sind wie ein geheimes Handshake, das sicherstellt, dass Sie die exakt gleichen Dateien erhalten, die Sie erwarten.

Paketmanager

Für fortgeschrittene Projekte könnten Sie möglicherweise einen Paketmanager wie npm oder yarn verwenden. Diese sind Tools, die Ihnen helfen, die Abhängigkeiten Ihres Projekts zu verwalten. Denken Sie daran als persönlichen Assistenten, der alle Zutaten für Ihre Web-Entwicklungsrezepte im Auge behält.

Um Bootstrap mit npm zu installieren, öffnen Sie Ihre Konsole und geben Sie Folgendes ein:

npm install bootstrap

Dann können Sie Bootstrap in Ihrer JavaScript-Datei如此 importieren:

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap';

HTML-Vorlage

Nun, lassen Sie uns alles in eine einfache HTML-Vorlage zusammenfassen:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap-Demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>
<body>
<h1>Hello, Bootstrap World!</h1>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
</body>
</html>

Diese Vorlage enthält die notwendigen Meta-Tags, Verknüpfungen zu den Bootstrap-CSS- und JS-Dateien über CDN und eine einfache "Hello, Bootstrap World!"-Überschrift, um Ihnen den Einstieg zu erleichtern.

Fazit

Glückwunsch! Sie haben gerade Ihre Bootstrap-Umgebung eingerichtet. Es ist, als hätten Sie gerade Ihr Werkzeugkasten ausgepackt und alle Ihre Werkzeuge ausgelegt. Jetzt sind Sie bereit, erstaunliche, responsive Websites zu bauen.

Denken Sie daran, der Schlüssel zum Beherrschen von Bootstrap (oder jeder anderen Technologie) ist die Übung. Haben Sie keine Angst, zu experimentieren und Fehler zu machen – das ist, wie wir alle lernen. In meinen Jahren des Unterrichtens habe ich Schüler gesehen, die von complete Anfängern bis zur Erstellung atemberaubender Websites mit Bootstrap in kürzester Zeit gegangen sind.

In unserer nächsten Lektion werden wir in die Verwendung von Bootstrap's Rastersystem zur Erstellung von Layouts eintauchen. Es wird aufregend sein, also bleiben Sie dran!

Happy Coding, und mögen Ihre Websites immer responsive sein! ??

Methode	Beschreibung	Benutzerfreundlichkeit	Anpassungsfähigkeit
Kompilierte CSS und JS	Verwenden Sie vor-kompilierte Bootstrap-Dateien	Einfach	Begrenzt
Quelldateien	Verwenden Sie rohe Bootstrap-Quelldateien	Fortgeschritten	Hoch
CDN über jsDelivr	Verknüpfen Sie zu Bootstrap-Dateien, die auf einem CDN gehostet werden	Sehr einfach	Begrenzt
Paketmanager	Installieren Sie Bootstrap mit npm oder yarn	Moderate	Moderate

Credits: Image by storyset

Vorheriges Tutorial:

Bootstrap - Überblick

Nächstes Tutorial:

Bootstrap - RTL