Grupa liste
Grupe lista su fleksibilna i moćna komponenta za prikazivanje niza sadržaja. Izmijenite ih i proširite kako bi podržali gotovo svaki sadržaj unutar.
Najosnovnija grupa lista je neuređena lista sa stavkama liste i odgovarajućim klasama. Nadogradite ga s opcijama koje slijede ili sa svojim vlastitim CSS-om po potrebi.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum u erosu
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
Dodajte .active
u a .list-group-item
da biste označili trenutni aktivni odabir.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum u erosu
<ul class="list-group">
<li class="list-group-item active">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
Dodajte .disabled
u a .list-group-item
da bi izgledalo onemogućeno. Imajte na umu da će neki elementi sa .disabled
takođe zahtevati prilagođeni JavaScript da bi u potpunosti onemogućili svoje klikove (npr. veze).
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum u erosu
<ul class="list-group">
<li class="list-group-item disabled">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
Koristite <a>
s ili <button>
s za kreiranje aktivnih stavki grupe sa lebdećim, onemogućenim i aktivnim stanjima dodavanjem .list-group-item-action
. Odvajamo ove pseudo-klase kako bismo osigurali da grupe lista napravljene od neinteraktivnih elemenata (poput <li>
s ili <div>
s) ne pružaju mogućnost klika ili dodira.
Budite sigurni da ovdje ne koristite standardne .btn
klase .
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">
Cras justo odio
</a>
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
<a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
</div>
Sa <button>
s, također možete koristiti disabled
atribut umjesto .disabled
klase. Nažalost, <a>
s ne podržavaju disabled atribut.
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action active">
Cras justo odio
</button>
<button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
<button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
<button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
<button type="button" class="list-group-item list-group-item-action" disabled>Vestibulum at eros</button>
</div>
Dodajte .list-group-flush
da biste uklonili neke ivice i zaobljene uglove da biste prikazali stavke grupe liste od ivice do ivice u roditeljskom kontejneru (npr. kartice).
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum u erosu
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
Koristite kontekstualne klase za stiliziranje stavki liste s pozadinom i bojom koja sadrži stanje.
- Dapibus ac facilisis in
- Ovo je primarna stavka grupe liste
- Ovo je sekundarna stavka grupe
- Ovo je grupna stavka liste uspjeha
- Ovo je stavka grupe opasnosti
- Ovo je stavka grupe upozorenja
- Ovo je stavka grupe informacija
- Ovo je stavka grupe svjetla
- Ovo je grupna stavka tamne liste
<ul class="list-group">
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-primary">This is a primary list group item</li>
<li class="list-group-item list-group-item-secondary">This is a secondary list group item</li>
<li class="list-group-item list-group-item-success">This is a success list group item</li>
<li class="list-group-item list-group-item-danger">This is a danger list group item</li>
<li class="list-group-item list-group-item-warning">This is a warning list group item</li>
<li class="list-group-item list-group-item-info">This is a info list group item</li>
<li class="list-group-item list-group-item-light">This is a light list group item</li>
<li class="list-group-item list-group-item-dark">This is a dark list group item</li>
</ul>
Kontekstualne klase također rade sa .list-group-item-action
. Obratite pažnju na dodavanje stilova lebdenja koji ovdje nije prisutan u prethodnom primjeru. Podržava i .active
država; primijeniti ga da označite aktivan odabir na kontekstualnoj grupi stavki liste.
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">This is a primary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">This is a secondary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">This is a success list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">This is a danger list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">This is a warning list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">This is a info list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">This is a light list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">This is a dark list group item</a>
</div>
Prenošenje značenja pomoćnim tehnologijama
Korištenje boje za dodavanje značenja pruža samo vizualnu indikaciju, koja se neće prenijeti korisnicima pomoćnih tehnologija – kao što su čitači ekrana. Osigurajte da su informacije označene bojom ili očigledne iz samog sadržaja (npr. vidljivi tekst), ili su uključene putem alternativnih sredstava, kao što je dodatni tekst skriven .sr-only
klasom.
Dodajte značke bilo kojoj grupi liste da prikažete nepročitane brojeve, aktivnost i još mnogo toga uz pomoć nekih uslužnih programa .
- Cras justo odio14
- Dapibus ac facilisis in2
- Morbi leo risus1
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Cras justo odio
<span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Dapibus ac facilisis in
<span class="badge badge-primary badge-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Morbi leo risus
<span class="badge badge-primary badge-pill">1</span>
</li>
</ul>
Dodajte gotovo bilo koji HTML unutar, čak i za grupe povezanih lista poput one ispod, uz pomoć flexbox uslužnih programa .
Naslov stavke grupe
prije 3 danaDonec id elit non mi porta gravida at eget metus. Mecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.Naslov stavke grupe
prije 3 danaDonec id elit non mi porta gravida at eget metus. Mecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.Naslov stavke grupe
prije 3 danaDonec id elit non mi porta gravida at eget metus. Mecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.<div class="list-group">
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small>Donec id elit non mi porta.</small>
</a>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small class="text-muted">Donec id elit non mi porta.</small>
</a>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small class="text-muted">Donec id elit non mi porta.</small>
</a>
</div>
Koristite JavaScript dodatak kartice – uključite ga pojedinačno ili kroz kompajliranu bootstrap.js
datoteku – da proširite našu grupu liste da kreirate okna lokalnog sadržaja sa tabulatorima.
Možete aktivirati navigaciju grupe liste bez pisanja JavaScripta jednostavnim navođenjem data-toggle="list"
ili na elementu. Koristite ove atribute podataka na .list-group-item
.
Omogućite tabulatorsku stavku liste putem JavaScripta (svaka stavka liste mora biti aktivirana pojedinačno):
Pojedinačnu stavku liste možete aktivirati na nekoliko načina:
Da bi se tabla s karticama smanjila, dodajte .fade
svakom .tab-pane
. Prvo okno kartica također mora imati .show
da početni sadržaj bude vidljiv.
Aktivira element stavke liste i kontejner sadržaja. Tab bi trebao imati ili data-target
ciljni href
čvor kontejnera u DOM-u.
Odabire datu stavku liste i prikazuje njeno povezano okno. Bilo koja druga stavka liste koja je prethodno odabrana postaje poništena, a njeno povezano okno je skriveno. Vraća se pozivaocu prije nego što je okno kartica zapravo prikazano (na primjer, prije nego što se shown.bs.tab
dogodi događaj).
Kada se prikaže nova kartica, događaji se aktiviraju sljedećim redoslijedom:
hide.bs.tab
(na trenutno aktivnoj kartici)show.bs.tab
(na kartici za prikaz)hidden.bs.tab
(na prethodnoj aktivnoj kartici, ista kao i zahide.bs.tab
događaj)shown.bs.tab
(na novo-aktivnoj upravo prikazanoj kartici, ista kao i zashow.bs.tab
događaj)
Ako nijedna kartica već nije bila aktivna, događaji hide.bs.tab
i hidden.bs.tab
neće se pokrenuti.
Vrsta događaja | Opis |
---|---|
show.bs.tab | Ovaj događaj se pokreće u prikazu kartice, ali prije nego što se nova kartica prikaže. Koristite event.target i event.relatedTarget za ciljanje aktivne kartice i prethodne aktivne kartice (ako je dostupna). |
prikazano.bs.tab | Ovaj događaj se pokreće u prikazu kartice nakon što je kartica prikazana. Koristite event.target i event.relatedTarget za ciljanje aktivne kartice i prethodne aktivne kartice (ako je dostupna). |
hide.bs.tab | Ovaj događaj se pokreće kada se nova kartica treba prikazati (a samim tim i prethodna aktivna kartica treba biti skrivena). Koristite event.target i event.relatedTarget za ciljanje trenutne aktivne kartice i nove kartice koja će uskoro biti aktivna. |
hidden.bs.tab | Ovaj događaj se pokreće nakon što se prikaže nova kartica (i stoga je prethodna aktivna kartica skrivena). Koristite event.target i event.relatedTarget za ciljanje prethodne aktivne kartice, odnosno nove aktivne kartice. |