Listengruppenstyling in Bootstrap 5 auflisten

Listen Sie Gruppen in einer Website zusammen, die miteinander verbundene Inhalte zusammenstellen, damit der Benutzer einfacher durch den Webinhalt navigieren kann. Das Hinzufügen von einfachen Listengruppen kann etwas langweilig sein, aber das Stylen von ihnen auf verschiedene Weise wird die Schönheit des Webdesigns verbessern. In diesem Blog wurde von der Erstellung einer grundlegenden Listengruppe zum Styling auf verschiedene Weise diskutiert. Halten Sie sich am Ende, um sich mehr über das Styling der Listengruppen in Bootstrap 5 zu erfahren.

So erstellen Sie eine Listengruppe

Um eine Liste zu erstellen, erstellen Sie eine ungeordnete Liste und weisen Sie die zu, die zuzuweisen

Element der .Listengruppe Klasse und zuweisen jedes Listenelement die .Listengruppe Klasse.

Html



• Gegenstand 1


• Punkt 2


• Punkt 3



Der obige Code generiert eine Listengruppe, die aus drei Listenelementen besteht.

Ausgang

Die obige Ausgabe zeigt eine grundlegende Listengruppe.

So weisen Sie einer Listengruppe aktive und deaktivierte Zustände zu

Wenn Sie den aktiven Status für ein aktuelles Listenelement und einen deaktivierten Zustand für ein nicht unklettiger Element definieren möchten, weisen Sie einfach dem jeweiligen Listenelement die aktiven und deaktivierten Zustände zu.

Html



• Gegenstand 1


• Punkt 2


• Punkt 3



Hier haben wir dem ersten Element einen aktiven Zustand und einen behinderten Zustand dem dritten Element zugewiesen. Der behinderte Zustand macht ein verknüpftes Element einfach nicht unklettig, sondern beseitigt auch den Schwebeffekt.

Ausgang

Auf diese Weise weisen Sie aktive und deaktivierte Zustände der Auflistung der Elemente in einer Listengruppe zu.

So weisen Sie Links zum Listenelemente in einer Listengruppe zu

Wenn Sie Ihren Benutzer zu einer anderen Webseite oder Quelle mit Elementen in einer Listengruppe umleiten möchten, dann erstellen .Listengruppe Klasse und Nest Alle Links, die in den Anker -Tags in dieser Div vorhanden sind. Darüber hinaus weisen Sie die zu .Listengruppe, Und .List-Gruppen-Element-Aktion Klassen zu den Ankertags, die im Div vorhanden sind.

Html


Gegenstand 1
Punkt 2
Punkt 3


Die Listengruppe, die erstellt wird, wenn der obige Code ausgeführt wird.

Ausgang

Listenelemente wurden erfolgreich verknüpft.

So erstellen Sie eine grenzlose Listengruppe

Wenn Sie die Grenzen aus einer Listengruppe entfernen möchten, weisen Sie die einfach die zu, die .Listengruppe-Flush Klasse zum

Element zusammen mit dem .Listengruppe Klasse.

Html



• Gegenstand 1


• Punkt 2


• Punkt 3



Der obige Code generiert eine Listengruppe mit keinen Grenzen.

Ausgang

So erstellen Sie eine grenzlose Listengruppe.

So zählen Sie Elemente in einer Listengruppe

Zum Zwecke der Nummerierung der Elemente in einer Listengruppe verwenden Sie die .Listengruppenzahlen Klasse.

Html



• Gegenstand 1


• Punkt 2


• Punkt 3



Der oben angegebene Code -Snippet gibt Zahlen zu jedem der in der DIV vorhandenen Elemente.

Ausgang

Die Listenelemente wurden nummeriert.

So richten Sie eine Listengruppe horizontal aus

Eine Listengruppe standardmäßig ist vertikal ausgerichtet, aber wenn Sie es vorziehen, sie horizontal auszurichten, verwenden Sie die .Listengruppe-Horizontal Klasse.

Html



• Gegenstand 1


• Punkt 2


• Punkt 3



Der .Die Listengruppe-Horizontale Klasse wurde dem zugewiesen

Element zusammen mit dem .Listengruppenklasse, daher wird die als Ergebnis generierte Listengruppe horizontal ausgerichtet.

Ausgang

Die Ausgabe zeigt eine horizontale Listengruppe an.

So färben Sie Listenelemente in einer Listengruppe

Eine lustige Sache, die Sie tun, um Ihre Listengruppe stilvoll zu gestalten.

Html



• Gegenstand 1


• Punkt 2


• Punkt 3


• Punkt 4


• Punkt 5



Im obigen Code werden insgesamt 5 Listenelemente generiert, und jeder dieser Elemente wurde eine andere Farbe unter Verwendung des .Listengruppe-Element-Primary, .List-Gruppen-Element-Warnung, .List-Gruppen-Item-Info, .List-Gruppen-Element-SUCCESS, Und .Listengruppe-Element-Danger Klassen jeweils.

Ausgang

Die Ausgabe zeigt farbige Listenelemente.

Wenn Sie verknüpfte Listenelemente erstellen und ihnen auch Farben angeben möchten, folgen Sie dem Code -Snippet unten.

Html


Gegenstand 1
Punkt 2
Punkt 3
Punkt 4
Punkt 5


Um die Listenelemente zu verknüpfen. Darüber hinaus wurde jeder Link eine andere Farbe zur Verfügung gestellt.

Ausgang

Die oben gezeigte Listengruppe hat Listenelemente gefärbt und verknüpft.

Abschluss

Eine Listengruppe kann beispielsweise mit verschiedenen Bootstrap 5 -Klassen gestylt werden .Listengruppe-Flush Erstellt eine grenzlose Listengruppe, .Listengruppenzahlen gibt eine Nummer zu den Elementen der Listengruppe, und .Listengruppe-Horizontal richtet eine Listengruppe horizontal aus. Darüber hinaus verwenden Sie Farben für die Elemente einer Listengruppe, um die Farbklassen zu verwenden, die mit Listengruppen zugeordnet sind, wie z. B .Listengruppe-Element-Primary, .List-Gruppen-Item-Info, .Listengruppe-Element-Danger, usw. Dies und vieles mehr über die Erstellung und das Styling der Listengruppe wurde in diesem Blog diskutiert.