Latest web development tutorials

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:

Podstawowa lista grup

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:

Wykaz grup odznaki

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:

Lista grup linki

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:

Wykaz grup niestandardowych treści