Bootstrap - Anmelde-Demo

Überblick

Hallo da draußen, ambitionierte Web-Entwickler! Heute machen wir uns auf eine aufregende Reise, um eine schöne und funktionale Anmelde-Seite mit Bootstrap zu erstellen. Als dein freundlicher Nachbarschafts-Computerlehrer bin ich hier, um dich Schritt für Schritt durch diesen Prozess zu führen. Keine Sorge, wenn du noch nie eine Zeile Code geschrieben hast – wir beginnen mit den Grundlagen und arbeiten uns hoch. Am Ende dieses Tutorials wirst du eine professionell aussehende Anmelde-Seite haben, die du stolz sein kannst!

Bootstrap-Sign In Demo

Was ist Bootstrap?

Bevor wir uns in den Code stürzen, lassen wir uns über Bootstrap unterhalten. Stell dir vor, du baust ein Haus. Du könntest jeden Ziegelstein von Grund auf machen oder vorgefertigte Materialien verwenden, um den Prozess zu beschleunigen. Bootstrap ist wie diese vorgefertigten Materialien für die Web-Entwicklung. Es ist ein kostenloses und quelloffenes CSS-Framework, das uns dabei hilft, responsive und mobil-erste Websites schnell und einfach zu erstellen.

Einrichtung unseres Projekts

Schritt 1: Erstellen der HTML-Datei

Zuerst einmal, lassen wir uns unsere HTML-Datei erstellen. Öffne deinen favorisierten Texteditor (ich liebe persönlich Visual Studio Code, aber Notepad reicht完全 aus für Anfänger) und erstelle eine neue Datei namens index.html. Dies wird die Grundlage unserer Anmelde-Seite.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Anmelde-Demo</title>
</head>
<body>

</body>
</html>

Dies ist unsere grundlegende HTML-Struktur. Denke daran als das Skelett unserer Webseite. Der <head>-Bereich ist där wir Informationen über unsere Seite platzieren, und der <body> ist där der gesamte sichtbare Inhalt hingeht.

Schritt 2: Bootstrap einbinden

Nun, lassen wir uns unserem Skelett etwas Muskeln hinzufügen, indem wir Bootstrap einbinden. Wir tun dies, indem wir einige Links in den <head>-Bereich unserer HTML-Datei einfügen:

<head>
<!-- ... vorheriger Code ... -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>

Diese Zeilen sind so, als würde unsere Webseite ein Superheldenkostüm tragen. Sie verlinken zu den Bootstrap CSS- und JavaScript-Dateien, die uns den Zugang zu all den vorgefertigten Komponenten und Stilen von Bootstrap geben.

Erstellen des Anmelde-Formulars

Schritt 1: Grundlegende Formularstruktur

Lassen wir uns anfangen, unser Anmelde-Formular zu bauen. Füge den folgenden Code innerhalb der <body>-Tags ein:

<body>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6">
<form>
<h2 class="mb-3">Anmelden</h2>
<!-- Formularfelder kommen hier hin -->
</form>
</div>
</div>
</div>
</body>

Lassen wir das auseinanderbrechen:

container: Diese Bootstrap-Klasse erstellt einen responsive festen Breitenauf container.
mt-5: Fügt oben Abstand hinzu (denke daran als etwas, das alles nach unten schiebt).
row und col-md-6: Diese erstellen eine zentrierte Spalte, die auf mittelgroßen Bildschirmen und größer die Hälfte der Breite einnimmt.

Schritt 2: Hinzufügen der Formularfelder

Nun fügen wir unsere Formularfelder hinzu. Ersetze den Kommentar im Formular mit:

<div class="mb-3">
<label for="email" class="form-label">E-Mail-Adresse</label>
<input type="email" class="form-control" id="email" required>
</div>
<div class="mb-3">
<label for="password" class="form-label">Passwort</label>
<input type="password" class="form-control" id="password" required>
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="remember">
<label class="form-check-label" for="remember">Merken</label>
</div>
<button type="submit" class="btn btn-primary">Anmelden</button>

Hier ist, was jeder Teil macht:

mb-3: Fügt unten Abstand hinzu, um Platz zu schaffen.
form-label: Stylt die Beschriftungen unserer Eingaben.
form-control: Macht unsere Eingaben schön und konsistent.
form-check und form-check-input: Stylt die Kästchen und Radiobuttons.
btn btn-primary: Erstellt eine schöne blaue Schaltfläche.

Hinzufügen eines Stils

Lassen uns unsere Anmelde-Seite mit etwas eigenem CSS schöner gestalten. Füge dies zu deinem <head>-Bereich hinzu:

<style>
body {
background-color: #f8f9fa;
}
.container {
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h2 {
color: #007bff;
}
</style>

Dieses CSS gibt unserer Seite einen hellgrauen Hintergrund, eine weiße Box mit einem leichten Schatten für unser Formular und eine blaue Farbe für unsere Überschrift, um das Bootstrap-Thema zu ergänzen.

Der letzte Schliff: Responsives Design

Eine der großartigen Eigenschaften von Bootstrap ist, dass es standardmäßig responsiv ist. Das bedeutet, unsere Anmelde-Seite wird sowohl auf Desktop- als auch auf mobilen Geräten gut aussehen. Lassen uns jedoch eine zusätzliche Anpassung vornehmen, um sie perfekt zu machen:

<div class="col-md-6 col-sm-8 col-10">

Ersetze die col-md-6 in deinem Formular-Container mit dieser Zeile. Jetzt wird das Formular auf kleinen Geräten 8 Spalten und auf extra-kleinen Geräten 10 Spalten einnehmen, sodass es stets leicht lesbar und benutzbar ist.

Fazit

Und daar hast du es! Du hast gerade eine schöne, responsive Anmelde-Seite mit Bootstrap erstellt. Hier ist eine Tabelle, die die wichtigsten Bootstrap-Klassen zusammenfasst, die wir verwendet haben:

Klasse	Zweck
container	Erstellt einen responsive festen Breitenauf container
row	Erstellt eine horizontale Gruppe von Spalten
col-*	Definiert die Breite der Spalten für verschiedene Bildschirmgrößen
form-control	Stylt Formularingaben
form-label	Stylt Formularbeschriftungen
form-check	Stylt Kästchen und Radiobuttons
btn	Erstellt eine Schaltfläche
btn-primary	Stylt eine Schaltfläche mit der primary Farbe
mt-*	Fügt oben Abstand hinzu
mb-*	Fügt unten Abstand hinzu

Denke daran, Web-Entwicklung ist alles über Übung und Kreativität. Habe keine Angst, verschiedene Farben, Layouts und Bootstrap-Komponenten auszuprobieren. Wer weiß? Dein nächstes Projekt könnte die nächste große Sache im Internet sein!

Happy Coding, zukünftige Web-Zauberer!

Credits: Image by storyset

Vorheriges Tutorial:

Bootstrap-Album Demo

Nächstes Tutorial:

Bootstrap-Preisgestaltung Demo