Lista stylizacji grupy w Bootstrap 5

Wymień grupy w witrynie, łączą ze sobą powiązane treści, aby użytkownikowi łatwiej było poruszać się po treści internetowej. Dodanie grupy gładkich list może być nieco nudne, jednak stylizacja ich na różne sposoby zwiększy piękno projektowania stron internetowych. Od utworzenia podstawowej grupy listy po stylizację jej na wiele sposobów zostały omówione na tym blogu. Trzymaj się końca, aby dowiedzieć się o stylizacji grupy listy w Bootstrap 5.

Jak utworzyć grupę list

Aby utworzyć listę, zrób listę nieuporządkowaną i przypisz

element .grupa listy klasa i przypisz każdą pozycję listy .Item listy klasa.

Html



• Przedmiot 1


• Pozycja 2


• Pozycja 3



Powyższy kod wygeneruje grupę list, która składa się z trzech elementów listy.

Wyjście

Powyższe dane wyjściowe pokazuje podstawową grupę list.

Jak przypisać stany aktywne i niepełnosprawne do grupy listy

Jeśli chcesz zdefiniować stan aktywny dla bieżącego elementu listy i stanu wyłączonego dla elementu Unclickable, po prostu przypisz odpowiedni element listy, stany aktywne i wyłączone.

Html



• Przedmiot 1


• Pozycja 2


• Pozycja 3



Tutaj przypisaliśmy stan aktywny do pierwszego elementu i stanu niepełnosprawnego do trzeciego elementu. Stan niepełnosprawny po prostu nie powoduje, że połączony element jest nieskromny, ale także eliminuje efekt zawisowywania.

Wyjście

W ten sposób przypisujesz stany aktywne i niepełnosprawne do wymienienia elementów w grupie listy.

Jak przypisać linki do listy elementów w grupie listy

Jeśli chcesz przekierować swojego użytkownika na inną stronę internetową lub źródło za pomocą elementów w grupie listy, zamiast tworzenia listy nieopisanej, zrób div i przypisz ją .grupa listy klasa i gniazduj wszystkie linki obecne w znacznikach kotwicznych w tym Div. Ponadto przypisz .Item grupy listy, I .działanie z grupy listy Zajęcia do tagów kotwicznych obecnych w Div.

Html


Przedmiot 1
Pozycja 2
Pozycja 3


Grupa listy utworzona po wykonywaniu powyższego kodu będzie się najeździć, a każda pozycja grupy będzie powiązana z innym źródłem.

Wyjście

Elementy listy zostały pomyślnie powiązane.

Jak utworzyć grupę listy bez granic

Jeśli chcesz usunąć granice z grupy listy, po prostu przypisz .Flush z grupa listy klasa do

element wraz z .grupa listy klasa.

Html



• Przedmiot 1


• Pozycja 2


• Pozycja 3



Powyższy kod wygeneruje grupę list nie mającą granic.

Wyjście

W ten sposób tworzysz grupę listy bez granic.

Jak numerem pozycje w grupie listy

W celu numerowania elementów w grupie listy Użyj .Grupa listy klasa.

Html



• Przedmiot 1


• Pozycja 2


• Pozycja 3



Podany powyżej fragment kodu podał liczby każdemu z elementów obecnych w Div.

Wyjście

Elementy listy zostały ponumerowane.

Jak wyrównać listę listy poziomo

Grupa listy domyślnie jest wyrównana w pionie, ale jeśli wolisz ją wyrównać poziomo, użyj .List-Grupa-horyzontalna klasa.

Html



• Przedmiot 1


• Pozycja 2


• Pozycja 3



.Klasa listy-grupa-horyzontalna została przypisana do

element wraz z .Klasa grupy listy zatem grupa listy wygenerowana w wyniku zostanie wyrównana poziomo.

Wyjście

Wyjście wyświetla grupę listy poziomej.

Jak kolorystyczne elementy w grupie listy

Zabawną rzeczą, którą robisz, aby Twoja lista była stylowa, jest użycie kolorowych klas narzędzi, aby podać kolory do listy elementów grupy listy.

Html



• Przedmiot 1


• Pozycja 2


• Pozycja 3


• Pozycja 4


• Pozycja 5



W powyższym kodzie jest generowane 5 elementów listy, a każdy z tych elementów przypisano inny kolor za pomocą .List-Group-Itemary-Primary, .Warnowanie z grupy listy, .List-Group-Item-info, .Usukcja z grupy listy, I .Niebezpieczeństwo grupy listy zajęcia odpowiednio.

Wyjście

Wyjście pokazuje kolorowe elementy listy.

Jeśli chcesz utworzyć połączone elementy listy i podać im również kolory, postępuj zgodnie z poniższym fragmentem kodu.

Html


Przedmiot 1
Pozycja 2
Pozycja 3
Pozycja 4
Pozycja 5


Aby połączyć elementy listy, po prostu tworzymy kontener DIV i gniazdujemy różne znaczniki kotwiczne w tym kontenerze, który połączy elementy listy. Ponadto każdy link został dostarczany inny kolor.

Wyjście

Pokazana powyższa grupa listy ma kolorowe i połączone elementy listy.

Wniosek

Grupa listy można na przykład zaprojektować przy użyciu różnych klas Bootstrap 5 .Flush z grupa listy tworzy grupę listy bez granic, .Grupa listy podaje liczbę pozycji grupy listy i .List-Grupa-horyzontalna wyrównuje listę listy poziomo. Ponadto, aby dostarczyć kolory elementom grupy listy, użyj klas kolorów powiązanych z grupami listy, takimi jak .List-Group-Itemary-Primary, .List-Group-Item-info, .Niebezpieczeństwo grupy listy, itp. To i wiele więcej o tworzeniu i stylizacji grupy listy zostało omówione na tym blogu.