Bootstrap - Dashboard Demo
Willkommen, ambitionierte Entwickler! Heute machen wir uns auf eine aufregende Reise in die Welt von Bootstrap und erstellen eine beeindruckende Dashboard-Demo. Als Ihr freundlicher Nachbarschaftsinformatiklehrer bin ich begeistert, Sie durch diesen Prozess zu führen, selbst wenn Sie noch nie eine Zeile Code geschrieben haben. Also, schnallen Sie sich an und tauchen wir ein!
Was ist Bootstrap?
Bevor wir mit dem Aufbau unseres Dashboards beginnen, lassen Sie uns einen Moment innehalten, um zu verstehen, was Bootstrap ist. Stellen Sie sich vor, Sie versuchen, ein Haus zu bauen. Bootstrap ist wie ein vorgefertigtes Kit, das bereits entworfene Wände, Türen und Fenster enthält. Es ist ein leistungsstarkes Frontend-Framework, das vorgefertigte Komponenten und Stile bietet, was den Aufbau responsiver und visuell ansprechender Websites einfacher macht.
Einrichten unseres Projekts
Schritt 1: Bootstrap einbinden
Zuerst müssen wir Bootstrap in unser Projekt einbinden. Wir tun dies, indem wir die folgenden Zeilen in den <head>-Bereich unserer HTML-Datei einfügen:
<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 sind so, als lädt man Bootstrap zu unserer Codierparty ein. Sie bringen alle Styles und interaktiven Funktionen mit, die wir benötigen.
Schritt 2: Grundlegende HTML-Struktur
Nun richten wir die grundlegende Struktur unseres Dashboards ein:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mein großartiges Dashboard</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<!-- Unser Dashboard-Inhalt kommt hier hin -->
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Dies ist wie das Legen des Fundaments unseres Hauses. Die container-fluid-Klasse stellt sicher, dass unser Inhalt die volle Breite des Bildschirms einnimmt.
Dashboard erstellen
Schritt 3: Erstellen der Navigationsleiste
Lassen Sie uns mit der Hinzufügung einer Navigationsleiste zu unserem Dashboard beginnen:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Mein Dashboard</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Startseite</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Analytics</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Einstellungen</a>
</li>
</ul>
</div>
</div>
</nav>Dieser Code erstellt eine responsive Navigationsleiste. Es ist wie die Beschilderung unseres Dashboards, die den Benutzern hilft, durch verschiedene Abschnitte zu navigieren.
Schritt 4: Hinzufügen einer Seitenleiste
Als nächstes fügen wir eine Seitenleiste hinzu, um zusätzliche Navigationsoptionen zu bieten:
<div class="row">
<nav id="sidebar" class="col-md-3 col-lg-2 d-md-block bg-light sidebar">
<div class="position-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">
Dashboard
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Bestellungen
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Produkte
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Kunden
</a>
</li>
</ul>
</div>
</nav>
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<!-- Hauptinhalt kommt hier hin -->
</main>
</div>Diese Seitenleiste funktioniert wie ein Menü in einem Restaurant, das schnellen Zugang zu verschiedenen Abschnitten unseres Dashboards bietet.
Schritt 5: Erstellen von Dashboard-Widgets
Nun fügen wir einige Widgets zu unserem Hauptinhaltbereich hinzu:
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">Dashboard</h1>
</div>
<div class="row">
<div class="col-md-4 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Gesamtumsatz</h5>
<p class="card-text display-4">$15.000</p>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Neue Kunden</h5>
<p class="card-text display-4">250</p>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Ausstehende Bestellungen</h5>
<p class="card-text display-4">18</p>
</div>
</div>
</div>
</div>
</main>Diese Widgets sind wie die Räume in unserem Dashboard-Haus, jeder mit einem spezifischen Zweck und der Anzeige wichtiger Informationen.
Verbessern unseres Dashboards
Schritt 6: Hinzufügen eines Diagramms
Fügen wir ein Diagramm hinzu, um unser Dashboard dynamischer zu gestalten. Wir verwenden Chart.js, eine beliebte Diagrammbibliothek:
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div class="row mt-4">
<div class="col-md-8">
<canvas id="salesChart"></canvas>
</div>
</div>
<script>
var ctx = document.getElementById('salesChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun'],
datasets: [{
label: 'Umsätze',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>Dieses Diagramm ist wie ein Fenster in unserem Dashboard-Haus, das eine Ansicht der Umsatztrends über die Zeit bietet.
Schritt 7: Hinzufügen einer Tabelle
Schließlich fügen wir eine Tabelle hinzu, um detaillierte Daten anzuzeigen:
<div class="row mt-4">
<div class="col-md-12">
<h3>Letzte Bestellungen</h3>
<table class="table table-striped">
<thead>
<tr>
<th>Bestell-ID</th>
<th>Kunde</th>
<th>Produkt</th>
<th>Betrag</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>Max Mustermann</td>
<td>Widget A</td>
<td>$100</td>
<td><span class="badge bg-success">Abgeschlossen</span></td>
</tr>
<tr>
<td>002</td>
<td>Anna Schmid</td>
<td>Widget B</td>
<td>$75</td>
<td><span class="badge bg-warning">Ausstehend</span></td>
</tr>
<!-- Fügen Sie weitere Zeilen hinzu, falls erforderlich -->
</tbody>
</table>
</div>
</div>Diese Tabelle ist wie ein Aktenkasten in unserem Dashboard, der wichtige Daten sauber und organisiert anzeigt.
Fazit
Glückwunsch! Sie haben gerade ein wunderschönes Bootstrap-Dashboard erstellt. Bedenken Sie, dass jede Fähigkeit mit der Übung besser wird. Lassen Sie sich nicht entmutigen, wenn Dinge beim ersten Mal nicht perfekt funktionieren - selbst erfahrene Entwickler verbringen Zeit damit, ihren Code zu debuggen und zu verbessern.
Hier ist eine kurze Referenztabelle der Bootstrap-Klassen, die wir verwendet haben:
| Klasse | Zweck |
|---|---|
| container-fluid | Erstellt einen container mit voller Breite |
| navbar | Erstellt eine Navigationsleiste |
| row | Erstellt eine horizontale Gruppe von Spalten |
| col-md-* | Erstellt responsive Spalten |
| card | Erstellt einen flexiblen Inhaltscontainer |
| table | Stylisiert eine HTML-Tabelle |
| badge | Erstellt ein kleines.Counter- und Etikettenkomponente |
Weitersuchen, weitercodieren und vor allem: Spaß haben! Ihre Reise im Web-Entwicklungsgebiet hat gerade begonnen, und es gibt eine ganze Welt voller aufregender Möglichkeiten vor Ihnen.
Credits: Image by storyset