Deutsch

Bootstrap-Tutorial

Bootstrap Layouts

Bootstrap-Inhalt

Bootstrap Komponenten

Bootstrap Formulare

Bootstrap-Hilfsfunktionen

Bootstrap Utilities

Bootstrap Demos

Bootstrap - Preispaket-Demo

Was ist Preisanalyse?

Bevor wir uns in die Erstellung einer Preispaket-Demo mit Bootstrap einarbeiten, lassen Sie uns einen Moment innehalten, um zu verstehen, was Preisanalyse im Kontext von Webdesign und Geschäftsleben tatsächlich bedeutet.

Bootstrap-Pricing Demo

Preisanalyse ist ein entscheidender Bestandteil jeder Produkt- oder Dienstleistungsanzeige. Es ist die Art und Weise, wie Unternehmen den Wert ihrer Angebote potenziellen Kunden kommunizieren. Im Webdesign ist ein Preisanalyseabschnitt oder eine -seite där Ort, an dem verschiedene Pläne oder Pakete präsentiert werden, typischerweise in einer klaren, vergleichenden Form.

Denken Sie daran wie eine Speisekarte in einem Restaurant. Sie möchten, dass Kunden leicht sehen können, was erhältlich ist und zu welchem Preis, damit sie eine informierte Entscheidung treffen können. Genau das werden wir mit Bootstrap erstellen!

Warum Bootstrap für Preisanalysen verwenden?

Bootstrap ist ein leistungsstarkes Frontend-Framework, das das Erstellen von responsiven, professionell aussehenden Websites zum Kinderspiel macht. Es ist besonders nützlich für Preisanalyseabschnitte, weil:

  1. Es vorgefertigte Komponenten bietet, die perfekt für die Darstellung von Preisanalyseinformationen sind.
  2. Es von Haus aus responsiv ist, was bedeutet, dass Ihr Preisanalyseabschnitt auf allen Geräten großartig aussieht.
  3. Es anpassungsfähig ist, allowing Ihnen, das Aussehen Ihrer Marke anzupassen.

Nun, lasSEN wir die Ärmel hochkrempeln und mit unserer Preispaket-Demo beginnen!

Einrichten der Bootstrap-Umgebung

Zuerst einmal, wir müssen unsere Bootstrap-Umgebung einrichten. Machen Sie sich keine Sorgen, wenn das kompliziert klingt - es ist actually quite einfach!

Erstellen Sie eine neue HTML-Datei und fügen Sie den folgenden Code ein:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Preispaket-Demo</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Ihr Inhalt wird hierhin kommen -->

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

Dies richtet eine grundlegende HTML-Struktur ein und includes Bootstrap's CSS- und JavaScript-Dateien von einem CDN (Content Delivery Network). Es ist, als legten wir das Fundament für unser Haus - jetzt sind wir bereit zum Bauen!

Erstellen des Preisanalyseabschnitts

Nun erstellen wir unseren Preisanalyseabschnitt. Wir verwenden Bootstrap's Kartenkomponente, um drei Preistufen zu erstellen: Basic, Pro und Enterprise.

Fügen Sie den folgenden Code innerhalb der <body>-Tags hinzu:

<div class="container py-5">
<h1 class="text-center mb-5">Unsere Preispakete</h1>
<div class="row row-cols-1 row-cols-md-3 mb-3 text-center">
<div class="col">
<div class="card mb-4 rounded-3 shadow-sm">
<div class="card-header py-3">
<h4 class="my-0 fw-normal">Basic</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">0€<small class="text-muted fw-light">/Monat</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>10 Benutzer enthalten</li>
<li>2 GB Speicher</li>
<li>Email-Support</li>
<li>Zugang zum Hilfzentrum</li>
</ul>
<button type="button" class="w-100 btn btn-lg btn-outline-primary">Kostenlos anmelden</button>
</div>
</div>
</div>
<!-- Wiederholen Sie diese Struktur für die Pro- und Enterprise-Pläne -->
</div>
</div>

Lassen Sie uns das auseinandernehmen:

  • Wir verwenden einen Behälter, um unseren Inhalt zu zentrieren und etwas Abstand hinzuzufügen.
  • Die row- und col-Klassen erstellen ein responsives Rastersystem.
  • Jede Preistufe wird durch eine card-Komponente repräsentiert.
  • Wir verwenden Bootstrap's Utility-Klassen wie text-center, mb-4, etc., um unsere Elemente zu stylen, ohne benutzerdefiniertes CSS schreiben zu müssen.

Anpassung des Erscheinungsbildes

Bootstrap ist großartig aus der Box, aber lassen Sie uns einige individuelle Anpassungen vornehmen, um unsere Preisanalyse-Demo zu verschönern!

Fügen Sie diesen <style>-Tag in den <head>-Bereich ein:

<style>
.pricing-card-title {
font-size: 2.5rem;
}
.card-header {
background-color: #f8f9fa;
}
.btn-outline-primary:hover {
background-color: #007bff;
color: white;
}
</style>

Dieses benutzerdefinierte CSS wird:

  • Die Preisgröße vergrößern
  • Der Karteikopf einen leichten Hintergrund haben
  • Die Schaltflächengröße bei Hover ändern

Hinzufügen von Interaktivität

Lassen Sie uns ein wenig Interaktivität in unsere Preisanalyse-Demo einfügen. Wir werden die "Pro"-Karte hervorheben, wenn sie Hovered wird.

Fügen Sie dieses JavaScript am Ende Ihres <body>-Tags hinzu:

<script>
document.addEventListener('DOMContentLoaded', function() {
const proCard = document.querySelectorAll('.card')[1];
proCard.addEventListener('mouseover', function() {
this.style.transform = 'scale(1.05)';
this.style.transition = 'transform 0.3s ease';
});
proCard.addEventListener('mouseout', function() {
this.style.transform = 'scale(1)';
});
});
</script>

Dieses Skript wird die "Pro"-Karte leicht vergrößern, wenn die Maus darüber schwebt, was eine subtile aber ansprechende Wirkung erzeugt.

Responsives Design

Eine der besten Eigenschaften von Bootstrap ist seine eingebaute Responsivität. Unsere Preisanalyse-Demo wird automatisch anpassen, um auf allen Bildschirmgrößen großartig auszusehen. Allerdings können wir dies weiter verbessern.

Fügen Sie diese Klassen zu Ihrem row-Div hinzu:

<div class="row row-cols-1 row-cols-md-3 mb-3 text-center g-4">

Die g-4-Klasse fügt Abstände zwischen unseren Spalten hinzu, und row-cols-1 row-cols-md-3 stellt sicher, dass auf kleinen Bildschirmen unsere Karten vertikal gestapelt und auf mittelgroßen und größeren Bildschirmen in drei Spalten angezeigt werden.

Schlussfolgerung

Glückwunsch! Sie haben gerade eine professionell aussehende Preisanalyse-Demo mit Bootstrap erstellt. Lassen Sie uns zusammenfassen, was wir gelernt haben:

  1. Wir haben eine Bootstrap-Umgebung eingerichtet.
  2. Wir haben einen responsiven Preisanalyseabschnitt mit Bootstrap's Raster- und Kartenkomponenten erstellt.
  3. Wir haben das Erscheinungsbild mit etwas einfachem CSS angepasst.
  4. Wir haben Interaktivität mit JavaScript hinzugefügt.
  5. Wir haben sicherzustellen, dass unser Design responsiv ist und auf allen Geräten großartig aussieht.

Erinnern Sie sich daran, Übung macht den Meister. Versuchen Sie, diese Demo zu ändern - ändern Sie Farben, fügen Sie mehr Stufen hinzu oder inkludieren Sie verschiedene Funktionen. Je mehr Sie mit Bootstrap experimentieren, desto bequemer werden Sie mit seinen leistungsstarken Funktionen.

Frohes Coden und möge Ihre Preisanalyse-Demos stets konvertieren!

Credits: Image by storyset

Vorheriges Tutorial:
Bootstrap-Anmelde-Demo
Nächstes Tutorial:
Bootstrap-Checkout Demo