Deutsch

Bootstrap-Tutorial

Bootstrap Layouts

Bootstrap-Inhalt

Bootstrap Komponenten

Bootstrap Formulare

Bootstrap-Hilfsfunktionen

Bootstrap Utilities

Bootstrap Demos

Bootstrap - Checkout RTL Demo

Überblick

Hallo, angehende Web-Entwickler! Heute tauchen wir in die aufregende Welt von Bootstrap ein und erstellen eine wunderschöne Checkout-Seite mit RTL (Recht-zu-Links)-Unterstützung. Machen Sie sich keine Sorgen, wenn Sie neu hier sind – ich werde Sie bei jedem Schritt mit der Geduld eines erfahrenden Lehrers führen, der schon unzähligen Schülern wie Ihnen geholfen hat.

Bootstrap-Checkout RTL Demo

Was ist Bootstrap?

Bevor wir uns unserer Checkout-Demo widmen, lassen Sie uns einen Moment innehalten, um zu verstehen, was Bootstrap ist. Stellen Sie sich vor, Sie bauen ein Haus. Bootstrap ist wie ein vorgefertigtes Bausatz, der Ihnen alle grundlegenden Strukturelemente bietet, die Sie benötigen. Es ist ein kostenloser, quelloffener CSS-Framework, das Ihnen hilft, responsive, mobil-erste Websites schnell und einfach zu erstellen.

Warum Bootstrap verwenden?

  1. Spart Zeit
  2. Stellt Konsistenz sicher
  3. Responsives Design aus der Box
  4. Große Community und Unterstützung

Einrichtung unseres Projekts

Lassen Sie uns mit der Einrichtung unseres Projekts beginnen. Wir müssen Bootstrap in unsere HTML-Datei einbinden. So machen wir das:

<!DOCTYPE html>
<html lang="de" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Checkout RTL Demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" rel="stylesheet">
</head>
<body>
<!-- Unser Inhalt kommt hier hin -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

In dieser Einrichtung beinhalten wir sowohl die reguläre Bootstrap CSS als auch die RTL-Version. Das Attribut dir="rtl" im <html>-Tag weist den Browser an, die Seite in Richtung von rechts nach links darzustellen.

Erstellung des Checkout-Formulars

Jetzt erstellen wir unser Checkout-Formular. Wir verwenden Bootstrap's Rastersystem und FormularKomponenten, um ein responsives Layout zu erstellen.

<div class="container mt-5">
<h1 class="mb-4">Checkout</h1>
<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>
<!-- Weitere Formularfelder kommen hier hin -->
</form>
</div>

Lassen Sie uns das auseinandernehmen:

  • Die Klasse container erstellt einen zentrierten Container für unseren Inhalt.
  • Die Klassen row und col-md-6 erstellen ein responsives Zweispaltenlayout.
  • Die Klassen form-label und form-control gestalten unsere Beschriftungen und Eingaben.

Hinzufügen weiterer Formularfelder

Fügen wir unserem Formular einige weitere Felder hinzu:

<div class="mb-3">
<label for="email" class="form-label">E-Mail</label>
<input type="email" class="form-control" id="email" required>
</div>
<div class="mb-3">
<label for="address" class="form-label">Adresse</label>
<input type="text" class="form-control" id="address" required>
</div>
<div class="row">
<div class="col-md-5 mb-3">
<label for="country" class="form-label">Land</label>
<select class="form-select" id="country" required>
<option value="">Wählen...</option>
<option>Deutschland</option>
<option>Österreich</option>
<option> Schweiz</option>
</select>
</div>
<div class="col-md-4 mb-3">
<label for="state" class="form-label">Bundesland</label>
<select class="form-select" id="state" required>
<option value="">Wählen...</option>
<option>Bayern</option>
<option>Baden-Württemberg</option>
<option>Nordrhein-Westfalen</option>
</select>
</div>
<div class="col-md-3 mb-3">
<label for="zip" class="form-label">PLZ</label>
<input type="text" class="form-control" id="zip" required>
</div>
</div>

Hier haben wir Felder für E-Mail, Adresse, Land, Bundesland und Postleitzahlen hinzugefügt. Beachten Sie, wie wir form-select für Dropdown-Menüs verwenden.

Zahlungsinfos

Jetzt fügen wir einen Abschnitt für Zahlungsinfos hinzu:

<h3 class="mb-3">Zahlung</h3>
<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 class="form-check">
<input id="paypal" name="paymentMethod" type="radio" class="form-check-input" required>
<label class="form-check-label" for="paypal">PayPal</label>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<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 mb-3">
<label for="cc-number" class="form-label">Kreditkartennummer</label>
<input type="text" class="form-control" id="cc-number" required>
</div>
</div>
<div class="row">
<div class="col-md-3 mb-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 mb-3">
<label for="cc-cvv" class="form-label">CVV</label>
<input type="text" class="form-control" id="cc-cvv" required>
</div>
</div>

Dieser Abschnitt enthält Optionsfelder für die Zahlungsart und Felder für Kartendetails.

Hinzufügen der Senden-Schaltfläche

Schließlich fügen wir eine Senden-Schaltfläche zu unserem Formular hinzu:

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

Die Klassen btn, btn-primary, und btn-lg gestalten unsere Schaltfläche als große, primaryfarbene Schaltfläche.

RTL-Überlegungen

Wenn Sie mit RTL-Layouts arbeiten, beachten Sie folgende Punkte:

  1. Textausrichtung: In RTL-Layouts wird der Text typischerweise nach rechts ausgerichtet.
  2. Formularlayout: Formularbeschriftungen sollten rechts neben ihren Eingaben appearieren.
  3. Symbole: Richtungsbezogene Symbole (wie Pfeile) sollten gespiegelt werden.

Bootstrap's RTL-CSS kümmert sich automatisch um die meisten dieser Überlegungen!

Fazit

Glückwunsch! Sie haben gerade eine responsive, RTL-freundliche Checkout-Seite mit Bootstrap erstellt. Denken Sie daran, Übung macht den Meister. Versuchen Sie, dieses Formular zu verändern, neue Felder hinzuzufügen oder das Styling zu ändern, um es zu Ihrem eigenen zu machen.

Hier ist eine Tabelle, die die wichtigsten Bootstrap-Klassen, die wir verwendet haben, zusammenfasst:

Klasse Zweck
container Erstellt einen zentrierten Container für Inhalt
row Erstellt eine horizontale Gruppe von Spalten
col-md-* Erstellt Spalten mit verschiedenen Breiten
form-label Stylt Formularbeschriftungen
form-control Stylt Formularingaben
form-select Stylt Dropdown-Menüs
form-check Stylt Kästchen und Optionsfelder
btn Grundlegende Button-Styling
btn-primary Wendet die primary Farbe auf den Button an
btn-lg Macht den Button groß

Frohes Coden und denken Sie daran – jeder Experte war einmal ein Anfänger. Üben Sie weiter, und Sie werden很快 ein Bootstrap-Profi!

Credits: Image by storyset

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