Bootstrap - Einrichtung der Entwicklungsumgebung

Leon A. - July 19, 2024

Voraussetzungen

Bevor Sie mit Bootstrap beginnen, benötigen Sie grundlegende Kenntnisse in HTML und CSS. HTML strukturiert den Inhalt von Webseiten, während CSS den Inhalt gestaltet und anordnet. Diese Technologien zu kennen, wird Ihnen helfen, Bootstrap zu verstehen und damit zu arbeiten.

Um mit Bootstrap zu arbeiten, brauchen Sie einen Texteditor zum Schreiben und Bearbeiten Ihres HTML-, CSS- und JavaScript-Codes. Beliebte Texteditoren sind:

Texteditor	Funktionen
Visual Studio Code	Syntaxhervorhebung, Autovervollständigung, integriertes Terminal
Sublime Text	Syntaxhervorhebung, Autovervollständigung, integriertes Terminal
Atom	Syntaxhervorhebung, Autovervollständigung, integriertes Terminal

Sie benötigen auch einen Webbrowser, um Ihre Bootstrap-Seiten anzusehen und zu testen. Empfohlene moderne Webbrowser sind:

Google Chrome
Mozilla Firefox
Microsoft Edge

Diese Browser verfügen über Entwicklertools, die Ihnen beim Untersuchen und Debuggen Ihres Codes helfen. Sie unterstützen auch die neuesten Webtechnologien, sodass Ihre Bootstrap-Seiten korrekt angezeigt werden.

Mit einem Texteditor und einem Webbrowser haben Sie die Werkzeuge, um responsive und attraktive Webseiten mit Bootstrap zu erstellen. In diesem Tutorial lernen Sie, wie Sie Bootstrap in Ihrem Projekt einrichten und dessen leistungsstarke Funktionen nutzen können.

Setup-Methoden

Es gibt zwei Hauptmethoden, um Bootstrap in Ihrem Projekt einzurichten: die Verwendung eines Content Delivery Network (CDN) oder das Herunterladen der Bootstrap-Dateien.

Methode 1: Verwendung eines CDN

Ein CDN ist ein Netzwerk von Servern, das Inhalte basierend auf dem geografischen Standort der Nutzer bereitstellt. Wenn Sie ein CDN verwenden, um Bootstrap in Ihr Projekt einzubinden, verlinken Sie auf die Bootstrap-Dateien, die auf den Servern des CDN gehostet werden.

Um Bootstrap CSS über CDN hinzuzufügen, fügen Sie den folgenden Link-Tag im <head>-Bereich Ihrer HTML-Datei ein:

Beispiel: Bootstrap CSS über CDN hinzufügen

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

Um Bootstrap JavaScript über CDN hinzuzufügen, fügen Sie den folgenden Script-Tag am Ende des <body>-Bereichs ein:

Beispiel: Bootstrap JavaScript über CDN hinzufügen

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

Vorteile der Verwendung eines CDN	Nachteile der Verwendung eines CDN
Einfach einzurichten	Benötigt eine Internetverbindung
Spart Bandbreite auf Ihrem Server	Weniger Kontrolle über die verwendete Bootstrap-Version
Dateien werden vom Browser zwischengespeichert, was zu schnelleren Ladezeiten führt	Mögliche Sicherheitsrisiken, wenn das CDN kompromittiert wird

Methode 2: Bootstrap herunterladen

Das Herunterladen von Bootstrap beinhaltet das Herunterladen der kompilierten CSS- und JavaScript-Dateien und deren Einbindung in Ihr Projekt.

So laden Sie Bootstrap herunter:

Besuchen Sie die Bootstrap-Website
Klicken Sie auf den "Download"-Button
Wählen Sie die gewünschte Bootstrap-Version aus
Klicken Sie auf "Download", um die kompilierten CSS- und JavaScript-Dateien zu erhalten

Nach dem Herunterladen des Pakets extrahieren Sie die Dateien in ein Verzeichnis in Ihrem Projekt. Verlinken Sie dann die lokale Bootstrap-CSS-Datei im <head>-Bereich Ihrer HTML-Datei:

Beispiel: Lokale Bootstrap-CSS-Datei verlinken

<link rel="stylesheet" href="pfad/zu/bootstrap.min.css">

Verlinken Sie die lokale Bootstrap-JavaScript-Datei am Ende des <body>-Bereichs:

Beispiel: Lokale Bootstrap-JavaScript-Datei verlinken

<script src="pfad/zu/bootstrap.bundle.min.js"></script>

Vorteile des Herunterladens von Bootstrap	Nachteile des Herunterladens von Bootstrap
Funktioniert offline	Erfordert manuelle Updates der Bootstrap-Dateien
Volle Kontrolle über die verwendete Bootstrap-Version	Benötigt Speicherplatz auf Ihrem Server
Kann vor der Einbindung ins Projekt angepasst werden	Längere anfängliche Ladezeit, wenn Dateien nicht zwischengespeichert sind

Beide Methoden haben ihre Vor- und Nachteile. Wählen Sie die Methode, die am besten zu den Anforderungen und Einschränkungen Ihres Projekts passt.

Erstellung Ihrer ersten Bootstrap-Seite

Um Ihre erste Bootstrap-Seite zu erstellen, müssen Sie die grundlegende HTML-Struktur aufbauen und Bootstrap-Klassen zu den HTML-Elementen hinzufügen.

Beginnen Sie mit einer einfachen HTML-Vorlage:

Beispiel: Einfache HTML-Vorlage

<!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>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
  <!-- Ihr Inhalt hier -->

  <!-- Bootstrap JavaScript -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

In dieser Vorlage fügen wir die Bootstrap-CSS-Datei im <head>-Bereich über einen CDN-Link ein. Wir fügen auch die Bootstrap-JavaScript-Datei am Ende des <body>-Bereichs hinzu.

Als Nächstes fügen Sie Ihren Inhalt innerhalb des <body>-Tags ein und wenden Bootstrap-Klassen auf die HTML-Elemente an. Bootstrap verwendet ein klassenbasiertes System, um Elemente zu gestalten und anzuordnen.

Um eine responsive Navigationsleiste zu erstellen:

Beispiel: Responsive Navigationsleiste

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Meine Website</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Navigation umschalten">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Startseite</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Über uns</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Kontakt</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Wir verwenden Klassen wie navbar, navbar-expand-lg, navbar-light und bg-light, um eine responsive Navigationsleiste mit einer hellen Hintergrundfarbe zu erstellen.

Hier ist eine grundlegende Vorlage für eine Bootstrap-Seite:

Beispiel: Bootstrap-Seitenvorlage

<!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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <!-- Inhalt der Navigationsleiste -->
  </nav>

  <div class="container mt-5">
    <h1>Willkommen auf meiner Bootstrap-Seite</h1>
    <p>Dies ist eine einfache Vorlage für eine Bootstrap-Seite.</p>
    <button type="button" class="btn btn-primary">Klick mich!</button>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Diese Vorlage enthält eine Navigationsleiste, einen Container mit einer Überschrift, einem Absatz und einer Schaltfläche. Die Klasse container fügt dem Inhalt Polsterung hinzu, während mt-5 einen Abstand zur Oberseite des Containers hinzufügt. Die Klassen btn und btn-primary gestalten die Schaltfläche.

Durch die Verwendung von Bootstrap-Klassen können Sie schnell responsive und gut aussehende Webseiten erstellen, ohne komplexes CSS schreiben zu müssen.

Bootstrap anpassen

Bootstrap bietet zwar eine Reihe von Standardstilen, Sie möchten jedoch möglicherweise das Aussehen Ihrer Website ändern, um es an Ihre Marke oder Designvorlieben anzupassen. Bootstrap ermöglicht es Ihnen, die Standardstile zu überschreiben und eigenes CSS mit dem Framework zu verwenden.

Um die Standardstile von Bootstrap zu überschreiben, erstellen Sie eine eigene CSS-Datei und verlinken Sie diese nach der Bootstrap CSS-Datei in Ihrem HTML:

Beispiel: Eigene CSS-Datei verlinken

<link rel="stylesheet" href="path/to/bootstrap.min.css">
<link rel="stylesheet" href="path/to/custom.css">

In Ihrer eigenen CSS-Datei können Sie Bootstrap-Klassen ansprechen und deren Eigenschaften überschreiben. Um beispielsweise die Farbe des primären Buttons zu ändern:

Beispiel: Farbe des primären Buttons überschreiben

.btn-primary {
  background-color: #ff0000;
  border-color: #ff0000;
}

.btn-primary:hover {
  background-color: #cc0000;
  border-color: #cc0000;
}

Dieser Code ändert die Hintergrundfarbe und Rahmenfarbe von Buttons mit der Klasse btn-primary zu Rot (#ff0000) und einem dunkleren Rot (#cc0000) beim Hover-Effekt.

Bei der Verwendung von eigenem CSS mit Bootstrap ist es wichtig, die Funktionsweise der Spezifität zu verstehen. Die Spezifität bestimmt, welche Stile Vorrang haben, wenn es widersprüchliche Regeln gibt. Bootstrap verwendet spezifische Klassennamen, um Stile anzuwenden. Daher sollten Ihre eigenen Stile genauso spezifisch oder spezifischer sein, um sie zu überschreiben.

Beispiel: Bootstrap CSS-Variablen überschreiben

:root {
  --primary: #ff0000;
  --secondary: #00ff00;
  --font-family-base: "Arial", sans-serif;
}