Deutsch

Bootstrap-Tutorial

Bootstrap Layouts

Bootstrap-Inhalt

Bootstrap Komponenten

Bootstrap Formulare

Bootstrap-Hilfsfunktionen

Bootstrap Utilities

Bootstrap Demos

Bootstrap - Checkout Demo

Überblick

Hallo, zukünftige Web-Entwickler! Heute werden wir eine aufregende Reise antreten, um eine Checkout-Seite mit Bootstrap zu erstellen. Als dein freundlicher Nachbarschafts-Computerlehrer bin ich begeistert, dich durch diesen Prozess zu führen. Keine Sorge, wenn du neu im Programmieren bist - wir gehen das Schritt für Schritt durch, und am Ende wirst du ein professionell aussehendes Checkout-Formular haben, auf das du stolz sein kannst!

Bootstrap-Checkout Demo

Was ist Bootstrap?

Bevor wir loslegen, lassen Sie uns über Bootstrap sprechen. Stell dir vor, du baust ein Haus. Würdest du nicht gerne vorgefertigte Wände und Dächer haben, anstatt jedes Steinchen selbst zu erstellen? Genau das ist Bootstrap für die Webentwicklung - eine Sammlung von vorgefertigten Komponenten und Stilen, die das Erstellen schöner Websites viel einfacher und schneller machen.

Einrichtung unseres Projekts

Schritt 1: Bootstrap einbinden

Zuerst müssen wir Bootstrap in unser Projekt einbinden. Das ist wie das Packen unserer Werkzeugkiste vor der Arbeit. Füge diese Zeilen in den <head> deiner HTML-Datei ein:

<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>

Diese Zeilen holen die Stile und Skripte von Bootstrap aus dem Internet, sodass wir nichts herunterladen müssen.

Schritt 2: Grundlegende HTML-Struktur

Nun erstellen wir unsere grundlegende HTML-Struktur:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkout Demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Checkout-Formular</h1>
<!-- Unser Formular kommt hier hin -->
</div>

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

Dies erstellt eine grundlegende Webseite mit einer Überschrift und einem Container für unser Formular. Die container-Klasse ist eine Bootstrap-Klasse, die unseren Inhalt zentriert und ihm etwas Abstand verleiht.

Erstellung des Checkout-Formulars

Schritt 3: Erstellung des Formulars

Nun fügen wir unser Formular innerhalb des Containers hinzu:

<form>
<div class="row">
<div class="col-md-6 mb-3">
<label for="firstName" class="form-label">Vorname</label>
<input type="text" class="form-control" id="firstName" required>
</div>
<div class="col-md-6 mb-3">
<label for="lastName" class="form-label">Nachname</label>
<input type="text" class="form-control" id="lastName" required>
</div>
</div>

<div class="mb-3">
<label for="email" class="form-label">E-Mail</label>
<input type="email" class="form-control" id="email" placeholder="[email protected]" required>
</div>

<div class="mb-3">
<label for="address" class="form-label">Adresse</label>
<input type="text" class="form-control" id="address" placeholder="1234 Hauptstraße" required>
</div>

<button class="btn btn-primary btn-lg" type="submit">Bestellung aufgeben</button>
</form>

Lassen Sie uns das einmal durchgehen:

  1. Wir verwenden Bootstrap's Rastersystem mit row und col-md-6, um zwei Spalten für Vor- und Nachname zu erstellen.
  2. Die mb-3-Klasse fügt jedem Formulargruppe eine Abstand nach unten hinzu.
  3. form-label und form-control sind Bootstrap-Klassen, die unsere Labels und Eingaben stylen.
  4. Die btn-Klassen stylen unsere Sendeschaltfläche.

Schritt 4: Hinzufügen von Zahlungsangaben

Fügen wir eine Sektion für Zahlungsangaben hinzu:

<h4 class="mb-3">Zahlung</h4>
<div class="my-3">
<div class="form-check">
<input id="credit" name="paymentMethod" type="radio" class="form-check-input" checked required>
<label class="form-check-label" for="credit">Kreditkarte</label>
</div>
<div class="form-check">
<input id="debit" name="paymentMethod" type="radio" class="form-check-input" required>
<label class="form-check-label" for="debit">Debitkarte</label>
</div>
</div>
<div class="row gy-3">
<div class="col-md-6">
<label for="cc-name" class="form-label">Name auf Karte</label>
<input type="text" class="form-control" id="cc-name" required>
</div>
<div class="col-md-6">
<label for="cc-number" class="form-label">Kreditkartennummer</label>
<input type="text" class="form-control" id="cc-number" required>
</div>
<div class="col-md-3">
<label for="cc-expiration" class="form-label">Ablaufdatum</label>
<input type="text" class="form-control" id="cc-expiration" required>
</div>
<div class="col-md-3">
<label for="cc-cvv" class="form-label">CVV</label>
<input type="text" class="form-control" id="cc-cvv" required>
</div>
</div>

Hier haben wir eine Auswahl für die Zahlungsart hinzugefügt und Felder für Kartenangaben hinzugefügt. Die gy-3-Klasse fügt vertikale Abstände zwischen den Zeilen hinzu.

Verbesserung des Benutzererlebnisses

Schritt 5: Hinzufügen von Validierungsfeedback

Bootstrap bietet Klassen für Formularvalidierungsfeedback. Fügen wir einige zu unserer Vornameingabe hinzu:

<div class="col-md-6 mb-3">
<label for="firstName" class="form-label">Vorname</label>
<input type="text" class="form-control" id="firstName" required>
<div class="valid-feedback">
Sieht gut aus!
</div>
<div class="invalid-feedback">
Bitte gib deinen Vornamen ein.
</div>
</div>

Um dies zu aktivieren, müssen wir etwas JavaScript hinzufügen:

<script>
(function () {
'use strict'
var forms = document.querySelectorAll('.needs-validation')
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
</script>

Dieses Skript fügt der Formular auf Übermittlung die Klasse was-validated hinzu, was das Anzeigen des Validierungsfeedbacks auslöst.

Schlussfolgerung

Glückwunsch! Du hast gerade ein professionell aussehendes Checkout-Formular mit Bootstrap erstellt. Lassen Sie uns zusammenfassen, was wir gelernt haben:

  1. Wie man Bootstrap in unser Projekt einbindet
  2. Die Verwendung des Bootstrap-Rastersystems für das Layout
  3. Das Styling von Formularelementen mit Bootstrap-Klassen
  4. Hinzufügen von Validierungsfeedback

Denke daran, Übung macht den Meister. Versuche, dieses Formular zu verändern, füge neue Felder hinzu oder ändere das Styling. Je mehr du experimentierst, desto besser wirst du!

Hier ist eine Tabelle der Haupt-Bootstrap-Klassen, die wir verwendet haben:

Klasse Zweck
container Zentriert den Inhalt und fügt Abstand hinzu
row Erstellt eine horizontale Gruppe von Spalten
col-md-6 Erstellt eine Spalte, die auf mittleren Bildschirmen 50% breit ist
form-label Stylt Formularlabels
form-control Stylt Formularingaben
btn Grundlegender Button-Stil
btn-primary Gibt dem Button eine blaue Farbe
btn-lg Macht den Button größer
form-check Stylt Kästchen und Radiobuttons
valid-feedback Zeigt Feedback für gültige Eingaben an
invalid-feedback Zeigt Feedback für ungültige Eingaben an

Frohes Coden und denke daran - jeder Experte war einmal ein Anfänger. Übe weiter, und du wirst erstaunt sein, was du schaffen kannst!

Credits: Image by storyset

Vorheriges Tutorial:
Bootstrap-Preisgestaltung Demo
Nächstes Tutorial:
Bootstrap-Produkt-Demo