Najlepszy samouczek Bootstrap grupy list W 2024 r. W tym samouczku możesz dowiedzieć się
Przykłady,Dodaj odznakę do listy grup,Przykłady,Dodaj link do listy grup,Przykłady,Dodaj zawartość niestandardową do listy grup,Przykłady,
Bootstrap grupy list
W tym rozdziale omówimy listę grup. Lista składników stosowanych w liście przedstawionej w postaci złożonej i niestandardowej zawartości. Utwórz podstawową listę grup, co następuje:
- Element <ul> Dodajklasę .list grupy.
- Do <li> Dodajklasę .list-group-przedmiot.
Poniższy przykład ilustruje ten punkt:
Przykłady
<ul class = "list-grupa">
<Li class = "list-group-item "> darmowa rejestracja nazwy domeny </ li>
<Li class = "list-group-item "> wolna przestrzeń hosting Okno </ li>
<Li class = "list-group-item "> Liczba zdjęć </ li>
<Li class = "list-group-item "> 24 * 7 support </ li>
<Li class = "list-group-item "> Aktualizacja roczny koszt </ li>
</ Ul>
Spróbuj » Wyniki przedstawiają się następująco:
Dodaj odznakę do listy grup
Możemy dodać elementy znaczek do dowolnego elementu listy, jest on automatycznie umieszczony po prawej stronie. Tylko trzeba dodać<span class = "odznakę"> do <li> elementu.Poniższy przykład ilustruje ten punkt:
Przykłady
<ul class = "list-grupa">
<Li class = "list-group-item "> darmowa rejestracja nazwy domeny </ li>
<Li class = "list-group-item "> wolna przestrzeń hosting Okno </ li>
<Li class = "list-group-item "> Liczba zdjęć </ li>
<Li class = "list-group-item ">
<span class = "znaczek"> nowy <span> 24 * 7 support / </ li>
<Li class = "list-group-item "> Aktualizacja roczny koszt </ li>
<Li class = "list-group-item ">
<span class = "znaczek"> nowy </ span> rabat </ li>
</ Ul>
Spróbuj » Wyniki przedstawiają się następująco:
Dodaj link do listy grup
Za pomocą znacznika zakotwiczenia zamiast listę elementów, możemy dodać link do listy grup. Musimy wykorzystać <div> zamiast <ul> elementu. Poniższy przykład ilustruje ten punkt:
Przykłady
<a href = "#" class = "list-item grupy aktywne"> Nazwa darmowe domeny Rejestracja </ a>
<a href = "#" class = "list-group-item "> 24 * 7 support </ a>
<a href = "#" class = "list-group-item "> darmowy hosting przestrzeń okno </ a>
<a href = "#" class = "list-group-item "> Liczba zdjęć </ a>
<a href = "#" class = "list-group-item "> Aktualizacja roczny koszt </ a>
Spróbuj » Wyniki przedstawiają się następująco:
Dodaj zawartość niestandardową do listy grup
Dodaliśmy linki do górnej części listy grup, aby dodać dowolną zawartość HTML. Poniższy przykład ilustruje ten punkt:
Przykłady
<div class = "list-grupa">
<a href = "#" class = "list-item grupy aktywne">
<H4 class = "list-group-poz -heading"> Pakiet Portal </ h4>
</ A>
<a href = "#" class = "list-group-item ">
<H4 class = "list-group-poz -heading"> darmowe rejestracja domen </ h4>
<P class = "list-group-poz -text"> Będziesz wolna rejestracja domen za pośrednictwem strony internetowej. </ P>
</ A>
<a href = "#" class = "list-group-item ">
<H4 class = "list-group-poz -heading"> 24 * 7 support </ h4>
<P class = "list-group-poz -text"> Oferujemy 24 * 7 wsparcie. </ P>
</ A>
</ Div>
<div class = "list-grupa">
<a href = "#" class = "list-item grupy aktywne">
<H4 class = "list-group-poz -heading"> Pakiet strona biznesu </ h4>
</ A>
<a href = "#" class = "list-group-item ">
<H4 class = "list-group-poz -heading"> darmowe rejestracja domen </ h4>
<P class = "list-group-poz -text"> Będziesz wolna rejestracja domen za pośrednictwem strony internetowej. </ P>
</ A>
<a href = "#" class = "list-group-item ">
<H4 class = "list-group-poz -heading"> 24 * 7 support </ h4>
<P class = "list-group-poz -text"> Oferujemy 24 * 7 wsparcie. </ P>
</ A>
</ Div>
Spróbuj » Wyniki przedstawiają się następująco: