Bootstrap - Blog-Demo
Was ist ein Blog?
Hallo dort, ambitionierte Web-Entwickler! Heute tauchen wir in die aufregende Welt des Bloggens mit Bootstrap ein. Bevor wir jedoch mit dem Code anfangen, lassen Sie uns einen Moment innehalten, um zu verstehen, was ein Blog eigentlich ist.
Ein Blog, kurz für "Weblog", ist eine regelmäßig aktualisierte Website oder Webseite, die typischerweise von einer Einzelperson oder einer kleinen Gruppe betrieben wird und in einem informellen oder Gesprächsstil geschrieben wird. Es ist wie ein Online-Tagebuch, in dem Menschen ihre Gedanken, Erfahrungen oder Fachkenntnisse zu verschiedenen Themen teilen.
Ich erinnere mich, als ich zum ersten Mal Anfang der 2000er Jahre begonnen habe, zu bloggen. Es war eine revolutionäre Möglichkeit, mit Menschen auf der ganzen Welt, die ähnliche Interessen teilen, in Kontakt zu treten. Lassen Sie uns nun sehen, wie wir unseren eigenen Blog mit Bootstrap erstellen können!
Einrichten unseres Bootstrap Blog-Demos
Schritt 1: Grundlegende HTML-Struktur
Lassen Sie uns mit der grundlegenden HTML-Struktur für unseren Blog beginnen. Erstellen Sie eine neue Datei namens index.html und fügen Sie den folgenden Code hinzu:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mein toller Blog</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Unser Blog-Inhalt wird hier hin kommen -->
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Dies richtet unsere grundlegende HTML-Struktur ein und includes die notwendigen Bootstrap CSS- und JavaScript-Dateien. Denken Sie daran wie ein Skelett unseres Blogs – wir werden später die Muskeln und das Fleisch (Inhalt und Styling) hinzufügen!
Schritt 2: Hinzufügen der Navigationsleiste
Fügen wir nun eine Navigationsleiste zu unserem Blog hinzu. Fügen Sie den folgenden Code direkt nach dem <body>-Tag ein:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Mein toller Blog</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Navigation umschalten">
<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="#">Über mich</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kontakt</a>
</li>
</ul>
</div>
</div>
</nav>Dieser Code erstellt eine responsive Navigationsleiste mit Links zu den Seiten Startseite, Über mich und Kontakt. Die navbar-expand-lg-Klasse stellt sicher, dass die Navigationsleiste auf größeren Bildschirmen erweitert und auf kleineren Bildschirmen in ein Hamburger-Menü umgewandelt wird. Es ist wie ein Navigationsgerät für Ihren Blog – es hilft Lesern, durch Ihren Inhalt zu navigieren!
Schritt 3: Hinzufügen des Hauptinhaltsbereichs
Als nächstes erstellen wir den Hauptinhaltsbereich für unsere Blog-Posts. Fügen Sie diesen Code nach der Navigationsleiste ein:
<div class="container mt-4">
<div class="row">
<div class="col-md-8">
<!-- Blog-Posts werden hier hin kommen -->
</div>
<div class="col-md-4">
<!-- Sidebar-Inhalt wird hier hin kommen -->
</div>
</div>
</div>Dies erstellt einen Container mit zwei Spalten: eine für unsere Blog-Posts (8 Spalten breit) und eine für die Seitenleiste (4 Spalten breit). Es ist wie das Teilen Ihres Schlafzimmers in einen Arbeitsbereich und einen Entspannungsbereich – jeder dient einem spezifischen Zweck!
Schritt 4: Erstellen eines Blog-Posts
Nun fügen wir einen Beispiel-Blog-Post hinzu. Fügen Sie diesen Code an der Stelle ein, wo wir den Kommentar für Blog-Posts gelassen haben:
<article class="blog-post">
<h2 class="blog-post-title">Beispiel-Blog-Post</h2>
<p class="blog-post-meta">1. Januar 2023 von <a href="#">Mark</a></p>
<p>Dies ist einige zusätzliche Absatz-Platzhalter-Inhalte. Es wurde geschrieben, um den verfügbaren Raum zu füllen und zu zeigen, wie ein längerer Text-Snippet den umgebenden Inhalt beeinflusst. Wir werden es oft wiederholen, um die Demonstration fließen zu lassen, also achten Sie auf diese exakt gleiche Textkette.</p>
<h3>Unterüberschrift</h3>
<p>Dies ist einige zusätzliche Absatz-Platzhalter-Inhalte. Es wurde geschrieben, um den verfügbaren Raum zu füllen und zu zeigen, wie ein längerer Text-Snippet den umgebenden Inhalt beeinflusst. Wir werden es oft wiederholen, um die Demonstration fließen zu lassen, also achten Sie auf diese exakt gleiche Textkette.</p>
<a href="#" class="btn btn-primary">Mehr lesen</a>
</article>Dies erstellt einen einfachen Blog-Post mit einer Überschrift, Meta-Informationen, Absätzen und einem "Mehr lesen"-Button. Es ist wie das Schreiben eines Briefes an Ihre Leser, Ihre Gedanken und Ideen zu teilen!
Schritt 5: Hinzufügen von Sidebar-Inhalt
Schließlich fügen wir einige Inhalte zur Seitenleiste hinzu. Fügen Sie diesen Code an der Stelle ein, wo wir den Kommentar für Sidebar-Inhalt gelassen haben:
<div class="p-4 mb-3 bg-light rounded">
<h4 class="font-italic">Über mich</h4>
<p class="mb-0">Willkommen auf Meinem tollen Blog! Hier teile ich meine Gedanken zu Technologie, Programmierung und dem Leben als Entwickler.</p>
</div>
<div class="p-4">
<h4 class="font-italic">Archive</h4>
<ol class="list-unstyled mb-0">
<li><a href="#">März 2023</a></li>
<li><a href="#">Februar 2023</a></li>
<li><a href="#">Januar 2023</a></li>
</ol>
</div>
<div class="p-4">
<h4 class="font-italic">Andere Orte</h4>
<ol class="list-unstyled">
<li><a href="#">GitHub</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ol>
</div>Dies fügt eine "Über mich"-Sektion, ein Archiv von alten Posts und Links zu sozialen Medienprofilen hinzu. Es ist wie das Hinzufügen eines persönlichen Touchs zu Ihrem Blog, indem Sie Ihren Lesern einen Einblick in wer Sie sind und was Sie sonst noch geschrieben haben!
Fazit
Und das war's – eine grundlegende Struktur für einen Bootstrap-Blog! Natürlich ist das erst der Anfang. Sie können die Farben anpassen, mehr Posts hinzufügen, Bilder einfügen und vieles mehr. Der Schlüssel ist, einfach zu beginnen und von dort aus zu wachsen.
Denken Sie daran, dass das Erstellen eines Blogs nicht nur um den Code geht – es geht darum, Ihre Stimme der Welt zu teilen. Also haben Sie keine Angst, zu experimentieren, Fehler zu machen und vor allem, Spaß dabei zu haben!
Frohes Coden und möge Ihr Blog mit großartigem Inhalt gefüllt sein, der inspiriert und anderen hilft!
Credits: Image by storyset