Sąrašo grupė
Sąrašų grupės yra lankstus ir galingas komponentas, skirtas rodyti turinio seriją. Modifikuokite ir išplėskite juos, kad palaikytumėte beveik bet kokį turinį.
Pagrindinis pavyzdys
Paprasčiausia sąrašų grupė yra netvarkingas sąrašas su sąrašo elementais ir tinkamomis klasėmis. Kurkite jį naudodami toliau pateiktas parinktis arba, jei reikia, naudodami savo CSS.
- Daiktas
- Antras elementas
- Trečias daiktas
- Ketvirtas elementas
- Ir penktą
<ul class="list-group">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
Aktyvūs elementai
Pridėti .active
prie a .list-group-item
, kad nurodytumėte dabartinį aktyvų pasirinkimą.
- Aktyvus elementas
- Antras elementas
- Trečias daiktas
- Ketvirtas elementas
- Ir penktą
<ul class="list-group">
<li class="list-group-item active" aria-current="true">An active item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
Išjungti elementai
Pridėkite .disabled
prie a .list-group-item
, kad jis atrodytų išjungtas. Atminkite, kad kai kuriems elementams .disabled
taip pat reikės tinkinto „JavaScript“, kad būtų visiškai išjungti jų paspaudimų įvykiai (pvz., nuorodos).
- Išjungtas daiktas
- Antras elementas
- Trečias daiktas
- Ketvirtas elementas
- Ir penktą
<ul class="list-group">
<li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
Nuorodos ir mygtukai
Naudokite <a>
s arba <button>
s, kad sukurtumėte veiksmingus sąrašo grupės elementus su užvedimo žymekliu, išjungta ir aktyvia būsena, pridėdami .list-group-item-action
. Atskiriame šias pseudoklases, kad užtikrintume, jog sąrašų grupės, sudarytos iš neinteraktyvių elementų (pvz., <li>
s arba <div>
s), nesuteiktų paspaudimų ar bakstelėjimo galimybių.
Įsitikinkite, kad čia nenaudokite standartinių .btn
klasių .
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
The current link item
</a>
<a href="#" class="list-group-item list-group-item-action">A second link item</a>
<a href="#" class="list-group-item list-group-item-action">A third link item</a>
<a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
<a class="list-group-item list-group-item-action disabled">A disabled link item</a>
</div>
Naudodami <button>
s taip pat galite naudoti disabled
atributą, o ne .disabled
klasę. Deja, <a>
jis nepalaiko neįgaliojo atributo.
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action active" aria-current="true">
The current button
</button>
<button type="button" class="list-group-item list-group-item-action">A second item</button>
<button type="button" class="list-group-item list-group-item-action">A third button item</button>
<button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
<button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</button>
</div>
Nuplaukite
Pridėti .list-group-flush
, kad pašalintumėte kai kurias kraštines ir suapvalintus kampus, kad sąrašo grupės elementai būtų pateikti nuo krašto iki krašto pirminiame konteineryje (pvz., kortelėse).
- Daiktas
- Antras elementas
- Trečias daiktas
- Ketvirtas elementas
- Ir penktą
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
Horizontaliai
Pridėti .list-group-horizontal
, kad pakeistumėte sąrašo grupės elementų išdėstymą iš vertikalaus į horizontalų visuose lūžio taškuose. Arba pasirinkite interaktyvų variantą .list-group-horizontal-{sm|md|lg|xl}
, kad sąrašo grupė būtų horizontali, pradedant nuo tos pertraukos taško min-width
. Šiuo metu horizontalių sąrašų grupės negali būti derinamos su įprastomis sąrašo grupėmis.
ProTip: Norite vienodo pločio sąrašo elementų grupavimo horizontaliai? Pridėti .flex-fill
prie kiekvieno sąrašo grupės elemento.
- Daiktas
- Antras elementas
- Trečias daiktas
- Daiktas
- Antras elementas
- Trečias daiktas
- Daiktas
- Antras elementas
- Trečias daiktas
- Daiktas
- Antras elementas
- Trečias daiktas
- Daiktas
- Antras elementas
- Trečias daiktas
<ul class="list-group list-group-horizontal">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-sm">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-md">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-lg">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xl">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
Kontekstinės klasės
Naudokite kontekstines klases, kad sudarytumėte stilių sąrašo elementus, turinčius būseną ir spalvą.
- Paprastas numatytasis sąrašo grupės elementas
- Paprastas pirminio sąrašo grupės elementas
- Paprastas antrinio sąrašo grupės elementas
- Paprastas sėkmės sąrašo grupės elementas
- Paprastas pavojų sąrašo grupės elementas
- Paprastas įspėjimų sąrašo grupės elementas
- Paprastas informacijos sąrašo grupės elementas
- Paprastas lengvas sąrašo grupės elementas
- Paprastas tamsaus sąrašo grupės elementas
<ul class="list-group">
<li class="list-group-item">A simple default list group item</li>
<li class="list-group-item list-group-item-primary">A simple primary list group item</li>
<li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
<li class="list-group-item list-group-item-success">A simple success list group item</li>
<li class="list-group-item list-group-item-danger">A simple danger list group item</li>
<li class="list-group-item list-group-item-warning">A simple warning list group item</li>
<li class="list-group-item list-group-item-info">A simple info list group item</li>
<li class="list-group-item list-group-item-light">A simple light list group item</li>
<li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>
Kontekstinės klasės taip pat veikia su .list-group-item-action
. Atkreipkite dėmesį į tai, kad čia pridedami užvedimo stiliai, kurių ankstesniame pavyzdyje nėra. Taip pat remiama .active
valstybė; pritaikykite jį norėdami nurodyti aktyvų pasirinkimą kontekstinio sąrašo grupės elemente.
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">A simple default list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
</div>
Pagalbinių technologijų prasmės perteikimas
Spalvų naudojimas reikšmei pridėti suteikia tik vaizdinę nuorodą, kuri nebus perduota pagalbinių technologijų, pvz., ekrano skaitytuvų, naudotojams. Užtikrinkite, kad informacija, pažymėta spalva, būtų akivaizdi iš paties turinio (pvz., matomas tekstas), arba būtų įtraukta naudojant alternatyvias priemones, pvz., papildomą tekstą, paslėptą .sr-only
klasėje.
Su ženkleliais
Pridėkite ženklelių prie bet kurio sąrašo grupės elemento, kad parodytumėte neskaitytų skaičių, veiklą ir daugiau, naudodami kai kurias priemones .
- Sąrašo elementas14
- Antras sąrašo elementas2
- Trečias sąrašo elementas1
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
A list item
<span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
A second list item
<span class="badge badge-primary badge-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
A third list item
<span class="badge badge-primary badge-pill">1</span>
</li>
</ul>
Pasirinktinis turinys
Naudodami „ flexbox “ priemones, pridėkite beveik bet kokį HTML, net ir susietose sąrašų grupėse, kaip nurodyta toliau .
Sąrašo grupės elemento antraštė
prieš 3 dienasTam tikras rezervuotos vietos turinys pastraipoje.
Ir šiek tiek smulkaus šrifto.Sąrašo grupės elemento antraštė
prieš 3 dienasTam tikras rezervuotos vietos turinys pastraipoje.
Ir šiek tiek nutildyto mažo šrifto.Sąrašo grupės elemento antraštė
prieš 3 dienasTam tikras rezervuotos vietos turinys pastraipoje.
Ir šiek tiek nutildyto mažo šrifto.<div class="list-group">
<a href="#" class="list-group-item list-group-item-action 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">Some placeholder content in a paragraph.</p>
<small>And some small print.</small>
</a>
<a href="#" class="list-group-item list-group-item-action">
<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">Some placeholder content in a paragraph.</p>
<small class="text-muted">And some muted small print.</small>
</a>
<a href="#" class="list-group-item list-group-item-action">
<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">Some placeholder content in a paragraph.</p>
<small class="text-muted">And some muted small print.</small>
</a>
</div>
JavaScript elgesys
Naudokite skirtuko „JavaScript“ papildinį (įtraukite jį atskirai arba per sudarytą bootstrap.js
failą), kad išplėstumėte sąrašo grupę ir sukurtumėte vietinio turinio skirtukų sritis.
<div class="row">
<div class="col-4">
<div class="list-group" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
<a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
<a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
<a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
<div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
<div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
<div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
</div>
</div>
</div>
Duomenų atributų naudojimas
Galite suaktyvinti sąrašo grupės naršymą neįrašydami jokio „JavaScript“, tiesiog nurodydami data-toggle="list"
elementą arba ant jo. Naudokite šiuos duomenų atributus .list-group-item
.
<div role="tabpanel">
<!-- List group -->
<div class="list-group" id="myList" role="tablist">
<a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a>
</div>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">...</div>
<div class="tab-pane" id="profile" role="tabpanel">...</div>
<div class="tab-pane" id="messages" role="tabpanel">...</div>
<div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>
</div>
Per JavaScript
Įgalinti skirtukų sąrašo elementą naudojant „JavaScript“ (kiekvieną sąrašo elementą reikia suaktyvinti atskirai):
$('#myList a').on('click', function (event) {
event.preventDefault()
$(this).tab('show')
})
Galite suaktyvinti atskirą sąrašo elementą keliais būdais:
$('#myList a[href="#profile"]').tab('show') // Select tab by name
$('#myList a:first-child').tab('show') // Select first tab
$('#myList a:last-child').tab('show') // Select last tab
$('#myList a:nth-child(3)').tab('show') // Select third tab
Išblukimo efektas
Jei norite, kad skirtukų skydelis išnyktų, pridėkite .fade
prie kiekvieno .tab-pane
. Pirmojo skirtuko srityje taip pat turi būti .show
matomas pradinis turinys.
<div class="tab-content">
<div class="tab-pane fade show active" id="home" role="tabpanel">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel">...</div>
<div class="tab-pane fade" id="messages" role="tabpanel">...</div>
<div class="tab-pane fade" id="settings" role="tabpanel">...</div>
</div>
Metodai
$().tab
Suaktyvina sąrašo elemento elementą ir turinio konteinerį. Skirtuko lape turi būti a data-target
arba href
DOM sudėtinio rodinio mazgas.
<div class="list-group" id="myList" role="tablist">
<a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a>
</div>
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">...</div>
<div class="tab-pane" id="profile" role="tabpanel">...</div>
<div class="tab-pane" id="messages" role="tabpanel">...</div>
<div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>
<script>
$(function () {
$('#myList a:last-child').tab('show')
})
</script>
.tab('show')
Parenka nurodytą sąrašo elementą ir parodo su juo susijusią sritį. Bet koks kitas sąrašo elementas, kuris buvo anksčiau pasirinktas, bus nepažymėtas ir su juo susijusi sritis paslėpta. Grįžta į skambinantįjį, kol skirtuko sritis iš tikrųjų nebuvo parodyta (pavyzdžiui, prieš shown.bs.tab
įvykį).
$('#someListItem').tab('show')
Renginiai
Kai rodomas naujas skirtukas, įvykiai suaktyvinami tokia tvarka:
hide.bs.tab
(dabartiniame aktyviame skirtuke)show.bs.tab
(skirtuke, kurį reikia rodyti)hidden.bs.tab
(ankstesniame aktyviame skirtuke tas pats, kaip irhide.bs.tab
įvykio)shown.bs.tab
(naujai suaktyvintame, ką tik parodytame skirtuke, tas pats kaip irshow.bs.tab
įvykio)
Jei joks skirtukas dar nebuvo aktyvus, hide.bs.tab
ir hidden.bs.tab
įvykiai nebus suaktyvinti.
Renginio tipas | apibūdinimas |
---|---|
Rodyti.bs.tab | Šis įvykis suaktyvinamas rodant skirtuką, bet anksčiau nei rodomas naujas skirtukas. Naudokite event.target ir event.relatedTarget , kad nukreiptumėte atitinkamai į aktyvų skirtuką ir ankstesnį aktyvų skirtuką (jei yra). |
parodyta.bs.tab | Šis įvykis suaktyvinamas rodant skirtuką, kai rodomas skirtukas. Naudokite event.target ir event.relatedTarget , kad nukreiptumėte atitinkamai į aktyvų skirtuką ir ankstesnį aktyvų skirtuką (jei yra). |
hide.bs.tab | Šis įvykis suaktyvinamas, kai turi būti rodomas naujas skirtukas (taigi, ankstesnis aktyvus skirtukas turi būti paslėptas). Naudokite event.target ir event.relatedTarget , kad nukreiptumėte atitinkamai į dabartinį aktyvų skirtuką ir į naują, kuris netrukus bus aktyvus. |
paslėptas.bs.tab | Šis įvykis suaktyvinamas, kai parodomas naujas skirtukas (taigi ankstesnis aktyvus skirtukas yra paslėptas). Naudokite event.target ir event.relatedTarget , kad nukreiptumėte atitinkamai į ankstesnį aktyvų skirtuką ir naują aktyvų skirtuką. |
$('a[data-toggle="list"]').on('shown.bs.tab', function (event) {
event.target // newly activated tab
event.relatedTarget // previous active tab
})