Deutsch

Bootstrap-Tutorial

Bootstrap Layouts

Bootstrap-Inhalt

Bootstrap Komponenten

Bootstrap Formulare

Bootstrap-Hilfsfunktionen

Bootstrap Utilities

Bootstrap Demos

Bootstrap - Starter Template Demo

Hallo da, angehende Web-Entwickler! Heute tauchen wir in die wundervolle Welt von Bootstrap ein und erkunden deren Startervorlage. Als Ihr freundlicher Nachbarschaftsinformatiklehrer freue ich mich darauf, Sie auf dieser Reise zu führen. Also holen Sie sich Ihr lieblings Getränk, machen Sie es sich gemütlich und los geht's!

Bootstrap-Starter template Demo

Was ist eine Startervorlage?

Bevor wir uns den Details von Bootstraps Startervorlage zuwenden, lassen Sie uns verstehen, was eine Startervorlage eigentlich ist. Stellen Sie es sich wie ein vorgefertigtes Rezept für die Struktur Ihrer Webseite vor. Genau wie ein Rezept Ihnen die grundlegenden Zutaten und Anweisungen gibt, um ein leckeres Gericht zu zaubern, bietet eine Startervorlage die notwendigen HTML, CSS und JavaScript, um Ihr Webprojekt zu starten.

Im Kontext von Bootstrap ist eine Startervorlage eine einfache HTML-Datei, die alle notwendigen Bootstrap-Komponenten und Abhängigkeiten enthält. Es ist, als hätten Sie eine leere Leinwand mit allen Malkzeugen bereits aufgebaut und startklar!

Warum eine Startervorlage verwenden?

Vielleicht fragen Sie sich, "Warum sollte ich mir die Mühe mit einer Startervorlage machen? Kann ich nicht einfach alles von Grund auf schreiben?"Nun, das könnten Sie durchaus tun, aber lassen Sie mich Ihnen eine kleine Geschichte aus meinen frühen Lehrjahren erzählen.

Ich hatte einmal einen Schüler, der darauf bestand, alles von Grund auf zu bauen. Obwohl das bewundernswert ist, kämpfte er wochenlang mit grundlegenden Layoutproblemen, die Bootstrap in Minuten gelöst hätte. Seien Sie nicht wie dieser Schüler - arbeiten Sie klug, nicht hart!

Das Verwenden einer Startervorlage:

  1. Spart Zeit
  2. Stellt sicher, dass Sie alle notwendigen Abhängigkeiten haben
  3. Bietet einen konsistenten Ausgangspunkt
  4. Hilft Ihnen, sich auf tatsächlichen Inhalt und Funktionalität zu konzentrieren

Da wir jetzt den "Warum" verstehen, schauen wir uns das "Wie" an!

Die Bootstrap Startervorlage

So sieht eine grundlegende Bootstrap Startervorlage aus:

<!doctype html>
<html lang="de">
<head>
<!-- Erforderliche Meta-Tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<title>Hallo, Welt!</title>
</head>
<body>
<h1>Hallo, Welt!</h1>

<!-- Optional JavaScript; wählen Sie eine der beiden Optionen! -->

<!-- Option 1: Bootstrap Bundle mit Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<!-- Option 2: Separate Popper und Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>

Lassen Sie uns das Stück für Stück auseinandernehmen:

Die Dokumenttypdeklaration

<!doctype html>

Diese Zeile informiert den Browser, dass es sich um ein HTML5-Dokument handelt. Es ist, als würden Sie sich vor einer Unterhaltung vorstellen - es legt den Ton für alles, was folgt, fest.

Das HTML-Tag

<html lang="de">

Dies öffnet unser HTML-Dokument und gibt an, dass die Sprache Deutsch ist. Es ist, als würden Sie ein Buch öffnen und sehen, dass es auf Deutsch geschrieben ist.

Der Kopfbereich

<head>
<!-- Erforderliche Meta-Tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<title>Hallo, Welt!</title>
</head>

Der <head>-Bereich enthält Metadaten über unsere Datei. Lassen Sie uns das auseinandernehmen:

  1. <meta charset="utf-8">: Dies gibt die Zeichencodierung für das HTML-Dokument an. UTF-8 ist eine universelle Zeichencodierung, die jeden Zeichentyp darstellen kann.

  2. <meta name="viewport" content="width=device-width, initial-scale=1">: Dies stellt sicher, dass die Webseite responsive ist und auf allen Geräten gut aussieht.

  3. Der <link>-Tag importiert die CSS-Datei von Bootstrap von einem Content Delivery Network (CDN). Das ist, als ob Sie ein Stylingführer für Ihre Webseite importieren würden.

  4. <title>: Dies setzt den Titel Ihrer Webseite, der in der Browserleiste angezeigt wird.

Der Body-Bereich

<body>
<h1>Hallo, Welt!</h1>

<!-- Optional JavaScript; wählen Sie eine der beiden Optionen! -->

<!-- Option 1: Bootstrap Bundle mit Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<!-- Option 2: Separate Popper und Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>

Der <body>-Bereich ist, wo der Hauptinhalt Ihrer Webseite geht. In dieser Startervorlage enthält er:

  1. Eine einfache "Hallo, Welt!"-Überschrift, um Ihnen den Einstieg zu erleichtern.
  2. JavaScript-Dateien für Bootstrap-Funktionalität. Sie haben zwei Optionen:
  • Option 1: Eine einzelne gebündelte Datei, die sowohl Bootstrap als auch Popper.js enthält.
  • Option 2: Separate Dateien für Popper.js und Bootstrap (standardmäßig ausgeblendet).

Verwendung der Startervorlage

Nun, da wir unsere Startervorlage auseinandergenommen haben, lassen Sie uns sie nutzen! Hier ist ein einfaches Beispiel, wie wir diese Vorlage erweitern können:

<!doctype html>
<html lang="de">
<head>
<!-- Erforderliche Meta-Tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<title>Meine erste Bootstrap-Seite</title>
</head>
<body>
<div class="container">
<h1 class="mt-5">Willkommen auf meiner Webseite!</h1>
<p class="lead">Dies ist eine einfache Hero-Einheit, ein einfaches Jumbotron-ähnliches@Component, das extra Aufmerksamkeit auf hervorgehobene Inhalte oder Informationen lenkt.</p>
<hr class="my-4">
<p>Es verwendet Utility-Klassen für Typografie und Abstand, um den Inhalt 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" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>

In diesem Beispiel haben wir eine einfache Hero-Einheit (eine prominent positionierte Nachrichteneinheit) mit Bootstrap-Klassen hinzugefügt. Lassen Sie uns das auseinandernehmen, was wir hinzugefügt haben:

  1. <div class="container">: Dies erstellt einen responsive festen Breitenbehälter.
  2. <h1 class="mt-5">: Die mt-5-Klasse fügt oben Abstand zur Überschrift hinzu.
  3. <p class="lead">: Die lead-Klasse lässt diesen Absatz hervorstechen.
  4. <hr class="my-4">: Dies erstellt einen horizontalen Strich mit Abstand auf der y-Achse.
  5. <a class="btn btn-primary btn-lg">: Dies erstellt eine große, primary-farbene Schaltfläche.

Schlussfolgerung

Und das war's, Leute! Wir haben die Welt der Bootstrap Startervorlagen erkundet, von deren Bedeutung bis hin zur Erstellung einer einfachen Webseite mit einer. Denken Sie daran, das ist erst der Anfang. Bootstrap bietet eine Fülle von Komponenten und Utilities, die Sie verwenden können, um atemberaubende, responsive Webseiten zu erstellen.

Als wir uns abschließen, erinnere ich mich an einen anderen Schüler, den ich hatte. Sie begann mit dieser gleichen Vorlage und hatte bis zum Ende des Semesters eine Portfolio-Website erstellt, die ihr ein Praktikum einbrachte. Wer weiß? Vielleicht ist das auch bald bei Ihnen der Fall!

Weiter üben, weiter erkunden und vor allem: haben Sie Spaß daran! Webentwicklung ist genauso sehr Kunst wie Wissenschaft,also lassen Sie Ihre Kreativität leuchten. Bis zum nächsten Mal, fröhliches Coden!

Credits: Image by storyset

Vorheriges Tutorial:
Bootstrap-Masonry-Demo
Nächstes Tutorial:
Bootstrap-Album RTL Demo