Bootstrap - List Groups Demo

Hallo zusammen, angehende Web-Entwickler! Heute tauchen wir in die wundervolle Welt der Bootstrap-Listen groups ein. Als dein freundlicher Nachbarschafts-Computerlehrer bin ich aufgeregt, dich auf dieser Reise zu führen. Also hol dir dein lieblingsgetränk, setz dich bequem hin und lassen wir gemeinsam dieses Coding-Abenteuer starten!

Was ist eine List Group?

Bevor wir ins Detail gehen, lassen Sie uns mit den Grundlagen beginnen. Eine Liste gruppiert ist ein flexibles und leistungsstarkes Komponent in Bootstrap für die Anzeige einer Reihe von Inhalten. Denk daran als eine stilvolle Möglichkeit, Listen von Elementen darzustellen, sei es einfacher Text, Links oder sogar benutzerdefinierte Inhalte. Es ist so, als würde man deiner langweiligen alten Liste einen schicken Aufguss geben!

Warum Listen Groups verwenden?

Listen groups sind unglaublich vielseitig. Sie können verwendet werden, um:

• Einfache Listen anzuzeigen
• Navigationsmenüs zu erstellen
• Benutzerbenachrichtigungen anzuzeigen
• Inhalte strukturiert darzustellen

Nun, da wir wissen, was Listen groups sind und warum sie großartig sind, rollen wir die Ärmel hoch und fangen an zu codieren!

Basic List Group

Lassen Sie mit einem einfachen Beispiel für eine Liste group beginnen:

<ul class="list-group">
<li class="list-group-item">Erstes Element</li>
<li class="list-group-item">Zweites Element</li>
<li class="list-group-item">Drittes Element</li>
</ul>

In diesem Beispiel verwenden wir eine ungeordnete Liste (<ul>) mit der Klasse list-group. Jedes Listen-element (<li>) hat die Klasse list-group-item. Dies erstellt eine saubere, gerahmte Liste mit gleichmäßig abständigen Elementen.

Aktive Elemente

Manchmal möchtest du ein bestimmtes Element in deiner Liste hervorheben. Bootstrap macht das einfach mit der active Klasse:

<ul class="list-group">
<li class="list-group-item active">Aktives Element</li>
<li class="list-group-item">Zweites Element</li>
<li class="list-group-item">Drittes Element</li>
</ul>

Die active Klasse gibt dem Element eine andere Hintergrundfarbe, sodass es hervorsticht. Es ist, als würde man diesem Element ein kleines Spotlight geben!

Deaktivierte Elemente

Was ist, wenn du ein Element anzeigen, aber es nicht klickbar machen möchtest? Hier kommt die disabled Klasse ins Spiel:

<ul class="list-group">
<li class="list-group-item">Erstes Element</li>
<li class="list-group-item disabled">Deaktivierte Element</li>
<li class="list-group-item">Drittes Element</li>
</ul>

Das disabled Element wird ausgegraut dargestellt, was darauf hinweist, dass es nicht interaktiv ist. Es ist, als würde man auf dieses bestimmte Element ein "Nicht berühren" Schild setzen.

Listen Group mit Links

Listen groups sind nicht nur für statische Listen. Du kannst sie in klickbare Navigationsmenüs verwandeln, indem du <a> Tags anstelle von <li> verwendest:

<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">Startseite</a>
<a href="#" class="list-group-item list-group-item-action">Profil</a>
<a href="#" class="list-group-item list-group-item-action">Nachrichten</a>
</div>

Hier verwenden wir <a> Tags mit den Klassen list-group-item und list-group-item-action. Die list-group-item-action Klasse fügt Hover- und Aktionszustände zu den Links hinzu.

Flush Listen Group

Möchtest du die äußeren Ränder und abgerundeten Ecken entfernen? Verwende die list-group-flush Klasse:

<ul class="list-group list-group-flush">
<li class="list-group-item">Erstes Element</li>
<li class="list-group-item">Zweites Element</li>
<li class="list-group-item">Drittes Element</li>
</ul>

Dies erstellt eine saubere, randlose Liste, die nahtlos mit anderen Elementen auf deiner Seite verschmelzen kann.

Horizontale Listen Group

Listen groups können auch horizontal dargestellt werden. Dies ist großartig für die Erstellung von Registerkarten-ähnlichen Oberflächen:

<ul class="list-group list-group-horizontal">
<li class="list-group-item">Erstes Element</li>
<li class="list-group-item">Zweites Element</li>
<li class="list-group-item">Drittes Element</li>
</ul>

Die list-group-horizontal Klasse verwandelt die vertikale Liste in eine horizontale. Es ist, als würde deine Liste den Limbo tanzen – wie tief kann sie gehen?

Kontextuelle Klassen

Bootstrap bietet kontextuelle Klassen, um deinen Listen-elementen Farbe hinzuzufügen, was dabei hilft, Bedeutung zu vermitteln:

<ul class="list-group">
<li class="list-group-item">Standard-element</li>
<li class="list-group-item list-group-item-primary">Primäres Element</li>
<li class="list-group-item list-group-item-secondary">Sekundäres Element</li>
<li class="list-group-item list-group-item-success">Erfolgs-element</li>
<li class="list-group-item list-group-item-danger">Gefahren-element</li>
<li class="list-group-item list-group-item-warning">Warnungs-element</li>
<li class="list-group-item list-group-item-info">Informations-element</li>
<li class="list-group-item list-group-item-light">Helles Element</li>
<li class="list-group-item list-group-item-dark">Dunkles Element</li>
</ul>

Diese kontextuellen Klassen fügen deinen Listen-elementen einen Farbtupfer hinzu, machen sie visueller ansprechender und informativer.

Benutzerdefinierte Inhalte

Listen groups können mehr als nur Text enthalten. Du kannst benutzerdefinierte Inhalte hinzufügen, um komplexere Listen-elemente zu erstellen:

<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Listen-group-Element-Überschrift</h5>
<small>Vor 3 Tagen</small>
</div>
<p class="mb-1">Einige placeholder Inhalte in einem Absatz.</p>
<small>Und einige kleine gedruckte Informationen.</small>
</a>
</div>

Dieses Beispiel zeigt, wie du ein Listen-element mit einer Überschrift, einem Absatz und zusätzlichen kleinen Texten erstellen kannst. Es ist, als würdest du deine Listen-elemente in Mini-Artikel verwandeln!

Abzeichen in Listen Groups

Du kannst auch Abzeichen zu deinen Listen-elementen hinzufügen, um zusätzliche Informationen anzuzeigen:

<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Posteingang
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Spam
<span class="badge bg-warning rounded-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Gesendet
<span class="badge bg-secondary rounded-pill">99+</span>
</li>
</ul>

Dies erstellt eine Liste mit Abzeichen auf der rechten Seite, perfekt für die Anzeige von Counts oder Statusindikatoren.

Schlussfolgerung

Und вот es ist, Leute! Wir haben die Welt der Bootstrap-Listen groups durchquert, von einfachen Listen bis hin zu komplexen benutzerdefinierten Inhalten. Denke daran, Übung macht den Meister,also habe keine Angst, diese Beispiele auszuprobieren und deine eigenen einzigartigen Listen groups zu erstellen.

Listen groups sind wie die Schweizer Army knives des Webdesigns – vielseitig, praktisch und immer Griffbereit in deinem Werkzeugkasten. Also los, und liste los! Wer weiß? Vielleicht wirst du ja der Michelangelo der Listen groups!

Frohes coden, und möge deine Listen immer perfekt gruppiert sein!

Credits: Image by storyset