Bootstrap - Platzhalter: Ein Anfängerleitfaden

Hallo da draußen, ambitionierte Web-Entwickler! Heute tauchen wir ein in die faszinierende Welt der Bootstrap-Platzhalter. Als dein freundlicher Nachbar-Computerlehrer werde ich dich Schritt für Schritt durch dieses Thema führen, damit du jedes kleinste Detail verstehst. Also hole dir dein lieblingsgetränk, setze dich zurück und lassen wir gemeinsam diese aufregende Reise antreten!

Wie es funktioniert

Stell dir vor, du baust ein Haus. Bevor du die richtige Möbel einrichtest, könntest du Kartons verwenden, um darzustellen, wo die Dinge hingehen werden. Genau das machen Platzhalter im Webdesign! Sie sind temporäre Vertreter für Inhalte, die noch geladen werden oder noch nicht verfügbar sind.

Bootstrap-Platzhalter sind eine schlaue Funktion, die hilft, ein reibungsloses, fesselndes Benutzererlebnis zu schaffen. Sie geben deinen Nutzern eine visuelle Anleitung, dass Inhalte unterwegs sind, anstatt sie auf einer leeren Seite anstarren zu lassen.

Platzhalter erstellen

Lass uns mit den Grundlagen beginnen. Das Erstellen eines Platzhalters in Bootstrap ist so einfach wie Pie! Hier ist ein einfaches Beispiel:

<p class="placeholder-glow">
<span class="placeholder col-12"></span>
</p>

Dieser Code erstellt einen Platzhalter in ganzer Breite, der sich über die gesamte Seite erstreckt. Die Klasse placeholder-glow fügt eine subtile Animation hinzu, die zeigt, dass etwas im Hintergrund passiert.

Platzhalter - Breite

Genau wie du in unserer Hausbau-Analogie kein Königsbett verwenden würdest, um einen kleinen Kaffeetisch darzustellen, kannst du die Breite deiner Platzhalter anpassen, um die Inhalte zu entsprechen, die sie vertreten. Bootstrap verwendet ein 12-Spalten-Raster-System, sodass du die Breite deiner Platzhalter leicht einstellen kannst.

Hier ist ein Beispiel:

<p class="placeholder-glow">
<span class="placeholder col-6"></span>
</p>
<p class="placeholder-glow">
<span class="placeholder col-4"></span>
</p>
<p class="placeholder-glow">
<span class="placeholder col-8"></span>
</p>

In diesem Code erstellen wir drei Platzhalter mit unterschiedlichen Breiten. Der erste nimmt die Hälfte der Breite ein (6 Spalten), der zweite ein Drittel (4 Spalten) und der dritte zwei Drittel (8 Spalten).

Platzhalter - Farbe

Nun fügen wir unseren Platzhaltern etwas Farbe hinzu! Genau wie du unterschiedliche farbige Kisten verwenden könntest, um verschiedene Möbeltypen darzustellen, können wir unterschiedliche Farben für unsere Platzhalter verwenden.

Hier ist, wie du das machst:

<p class="placeholder-glow">
<span class="placeholder col-12 bg-primary"></span>
</p>
<p class="placeholder-glow">
<span class="placeholder col-12 bg-secondary"></span>
</p>
<p class="placeholder-glow">
<span class="placeholder col-12 bg-success"></span>
</p>

In diesem Beispiel erstellen wir drei vollständige Platzhalter mit unterschiedlichen Farben. Die Klassen bg-primary, bg-secondary und bg-success geben uns blaue, graue und grüne Platzhalter respectively.

Platzhalter - Größenanpassung

Genau wie Möbel in verschiedenen Größen erhältlich sind, können unsere Platzhalter auch verschiedene Größen haben! Bootstrap ermöglicht es uns, die Größe unserer Platzhalter mit vordefinierten Klassen leicht anzupassen.

Schau dir diesen Code an:

<span class="placeholder col-12 placeholder-lg"></span>
<span class="placeholder col-12"></span>
<span class="placeholder col-12 placeholder-sm"></span>
<span class="placeholder col-12 placeholder-xs"></span>

Hier erstellen wir vier Platzhalter in unterschiedlichen Größen. Die Klasse placeholder-lg erstellt einen großen Platzhalter, während placeholder-sm und placeholder-xs kleinere erstellen. Derjenige ohne Größe-Klasse ist die Standardgröße.

Platzhalter - Animation

Last but not least, fügen wir unseren Platzhaltern Leben mit Animationen hinzu! Das ist wie das Hinzufügen eines "Demnächst verfügbar"-Schildes zu unserer Kartonmöbel-Ausstellung - es lässt die Nutzer wissen, dass etwas passiert.

Hier ist, wie du deine Platzhalter animierst:

<p class="placeholder-glow">
<span class="placeholder col-12"></span>
</p>
<p class="placeholder-wave">
<span class="placeholder col-12"></span>
</p>

In diesem Beispiel verwenden wir zwei unterschiedliche Animationen. Die Klasse placeholder-glow erzeugt eine subtile Pulsationswirkung, während placeholder-wave eine Wellenanimation von links nach rechts erstellt.

Alles zusammenfügen

Nun, da wir all diese großartigen Platzhalterfunktionen gelernt haben, lassen wir sie in einem Superbeispiel verschmelzen:

<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top placeholder-glow" alt="...">
<div class="card-body">
<h5 class="card-title placeholder-glow">
<span class="placeholder col-6"></span>
</h5>
<p class="card-text placeholder-glow">
<span class="placeholder col-7"></span>
<span class="placeholder col-4"></span>
<span class="placeholder col-4"></span>
<span class="placeholder col-6"></span>
<span class="placeholder col-8"></span>
</p>
<a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
</div>
</div>

Dieser Code erstellt eine Karte mit Platzhaltern für ein Bild, eine Überschrift, Text und einen Button. Es ist, als ob wir eine Ausstellung in unserem Kartonmöbelgeschäft einrichten!

Fazit

Und das war's, Leute! Du hast gerade gelernt, wie man Bootstrap-Platzhalter wie ein Profi verwendet. Denke daran, Platzhalter sind wie die Eröffnungsact eines Konzerts - sie bereiten die Bühne vor und bauen Vorfreude auf das Hauptereignis (deinen tatsächlichen Inhalt) auf.

Während du deine Reise im Webdesign fortsetzt, wirst du unzählige kreative Möglichkeiten finden, Platzhalter zu verwenden. Sie sind nicht nur funktional; sie können eine unterhaltsame Möglichkeit sein, deinen Ladebildschirmen Persönlichkeit zu verleihen.

Halte dich an das Üben, experimentiere weiter und vor allem, habe Spaß dabei. Bevor du es weißt, wirst du Websites erstellen, die selbst vor dem vollständigen Laden großartig aussehen!

Methode	Beschreibung
Platzhalter erstellen	Verwende <span class="placeholder"></span> innerhalb von <p class="placeholder-glow"> oder <p class="placeholder-wave">
Breite einstellen	Verwende Bootstrap's Spaltenklassen, z.B. col-6 für halbe Breite
Farbe ändern	Wende Hintergrundfarbenklassen wie bg-primary, bg-secondary, etc. an
Größe anpassen	Verwende placeholder-lg, placeholder-sm, oder placeholder-xs Klassen
Animation hinzufügen	Wrappe Platzhalter in <p class="placeholder-glow"> oder <p class="placeholder-wave">

Frohes Coden und möge deine Platzhalter immer perfekt platziert sein!

Credits: Image by storyset