Deutsch

Bootstrap-Tutorial

Bootstrap Layouts

Bootstrap-Inhalt

Bootstrap Komponenten

Bootstrap Formulare

Bootstrap-Hilfsfunktionen

Bootstrap Utilities

Bootstrap Demos

Bootstrap - Dashboard RTL Demo

Einführung in das Bootstrap Dashboard RTL

Hallo, ambitionierte Web-Entwickler! Heute machen wir uns auf eine aufregende Reise in die Welt des Bootstrap Dashboard RTL. Als dein freundlicher Nachbarschafts-Computerlehrer freue ich mich darauf, dich durch dieses Thema zu führen, selbst wenn du noch nie einezeile Code geschrieben hast. Keine Sorge; wir gehen Schritt für Schritt vor, und bevor du es merkst, wirst du wunderschöne, responsive Dashboards erstellen!

Bootstrap-Dashboard RTL Demo

Was ist Bootstrap Dashboard RTL?

Bevor wir tiefer einsteigen, lassen wir uns die Begriffe ein wenig genauer ansehen:

  1. Bootstrap: Ein beliebtes Frontend-Framework, das die Web-Entwicklung schneller und einfacher macht.
  2. Dashboard: Eine Benutzeroberfläche, die wichtige Informationen auf einen Blick anzeigt.
  3. RTL: Steht für "Rechts-nach-Links", eine Textrichtung, die in Sprachen wie Arabisch und Hebräisch verwendet wird.

Zusammengefasst ist ein Bootstrap Dashboard RTL eine vordesinierte Vorlage zur Erstellung von Dashboards, die die Recht-nach-Links-Sprachen mit dem Bootstrap-Framework unterstützen.

Erste Schritte mit Bootstrap Dashboard RTL

Einrichtung Ihrer Entwicklungsumgebung

Zuerst einmal, lassen Sie uns unsere Entwicklungsumgebung einrichten. Keine Sorge, es ist einfacher, als es aussieht!

  1. Erstellen Sie auf Ihrem Computer einen neuen Ordner für Ihr Projekt.
  2. Innerhalb dieses Ordners erstellen Sie eine HTML-Datei namens index.html.
  3. Öffnen Sie diese Datei in Ihrem bevorzugten Texteditor (ich empfehle Visual Studio Code für Anfänger).

Nun fügen wir die grundlegende HTML-Struktur hinzu:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mein RTL Dashboard</title>
<!-- Bootstrap RTL CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css">
</head>
<body>
<h1>مرحبا بالعالم!</h1>

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

Lassen Sie uns das ein wenig auseinandernehmen:

  • <html lang="ar" dir="rtl">: Dies setzt die Sprache auf Arabisch und die Textrichtung auf Rechts-nach-Links.
  • Wir verknüpfen die Bootstrap RTL CSS-Datei im <head>-Bereich.
  • Wir haben einen einfachen "Hallo Welt" in Arabisch (مرحبا بالعالم!) hinzugefügt, um unsere RTL-Konfiguration zu testen.
  • Unten includeden wir das Bootstrap JavaScript Bundle.

Aufbau der Dashboard-Struktur

Nun, da wir unsere grundlegende Einrichtung haben, lassen Sie uns mit dem Aufbau unseres Dashboards beginnen!

Erstellung der Navigationsleiste

Jedes gute Dashboard braucht eine Navigationsleiste. Lassen Sie uns eine hinzufügen:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Dashboard</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<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" aria-current="page" href="#">Startseite</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Berichte</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Einstellungen</a>
</li>
</ul>
</div>
</div>
</nav>

Dieser Code erstellt eine responsive Navigationsleiste mit einem Markenname und drei Menüpunkten. Beachten Sie, dass wir arabischen Text verwenden, um die RTL-Natur unseres Dashboards beizubehalten.

Hinzufügen von Dashboard-Widgets

Nun fügen wir einige Widgets zu unserem Dashboard hinzu. Wir erstellen eine einfache Anordnung mit zwei Reihen von Karten:

<div class="container mt-4">
<div class="row">
<div class="col-md-4 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Verkäufe</h5>
<p class="card-text">Gesamtverkäufe: 10.000 Dollar</p>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Besucher</h5>
<p class="card-text">Heutige Besucherzahl: 1.234</p>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Bestellungen</h5>
<p class="card-text">Neue Bestellungen: 56</p>
</div>
</div>
</div>
</div>
</div>

Dieser Code erstellt drei Karten-Widgets, die Verkaufs-, Besucher- und Bestellinformationen anzeigen. Die col-md-4-Klasse stellt sicher, dass diese Karten auf mittelgroßen Bildschirmen und darüber nebeneinander in einer Reihe von drei sitzen.

Verbesserung des Dashboards

Hinzufügen eines Diagramms

Kein Dashboard ist vollständig ohne ein Diagramm! Lassen Sie uns ein einfaches Balkendiagramm mit Chart.js hinzufügen:

Zuerst fügen Sie die Chart.js-Bibliothek zu Ihrer HTML-Datei hinzu, kurz bevor das schließende </body>-Tag:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Nun fügen wir ein Canvas für unser Diagramm hinzu und den JavaScript-Code, um es zu erstellen:

<div class="container mt-4">
<div class="row">
<div class="col-md-8 offset-md-2">
<canvas id="myChart"></canvas>
</div>
</div>
</div>

<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni'],
datasets: [{
label: 'Monatliche Verkäufe',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>

Dieser Code erstellt ein Balkendiagramm, das monatliche Verkaufsdaten anzeigt. Die Beschriftungen sind in Arabisch, um unser RTL-Thema beizubehalten.

Schlussfolgerung

Glückwunsch! Sie haben gerade Ihr erstes Bootstrap Dashboard RTL erstellt. Wir haben die Grundlagen für die Einrichtung einer RTL-Ansicht, die Erstellung einer Navigationsleiste, das Hinzufügen von Widget-Karten und sogar das Einbetten eines Diagramms behandelt. Dies ist erst der Anfang – es gibt so viel mehr, was Sie mit Bootstrap und Dashboards machen können!

Denken Sie daran, der Schlüssel zum Beherrschen der Web-Entwicklung ist die Übung. Versuchen Sie, dieses Dashboard zu ändern, neue Funktionen hinzuzufügen oder完全 neue Layouts zu erstellen. Die Möglichkeiten sind endlos!

Hier ist eine Tabelle, die die Hauptkomponenten zusammenfasst, die wir verwendet haben:

Komponente Zweck
Navbar Navigation und Markenname
Karten Anzeige von wichtigen Informationen
Diagramm Daten visualisieren
Bootstrap Grid Layoutstruktur
RTL CSS Rechts-nach-Links Textrichtung

Weitersuchen, weiter codieren und vor allem: Spaß haben! Frohes Coden, zukünftige Web-Entwickler!

Credits: Image by storyset

Vorheriges Tutorial:
Bootstrap-Blog RTL Demo