Source

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.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulumas ir erosas
<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>

Aktyvūs elementai

Pridėti .activeprie a .list-group-item, kad nurodytumėte dabartinį aktyvų pasirinkimą.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulumas ir erosas
<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>

Išjungti elementai

Pridėkite .disabledprie a .list-group-item, kad jis atrodytų išjungtas. Atminkite, kad kai kuriems elementams .disabledtaip pat reikės tinkinto „JavaScript“, kad būtų visiškai išjungti jų paspaudimų įvykiai (pvz., nuorodos).

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulumas ir erosas
<ul class="list-group">
  <li class="list-group-item disabled" aria-disabled="true">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>

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 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ų .btnklasių .

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulumas ir erosas 
<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" tabindex="-1" aria-disabled="true">Vestibulum at eros</a>
</div>

Naudodami <button>s taip pat galite naudoti disabledatributą, o ne .disabledklasę. Deja, <a>jis nepalaiko neįgaliojo atributo.

<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>

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).

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulumas ir erosas
<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>

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ėkite .flex-fillprie kiekvieno sąrašo grupės elemento.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul class="list-group list-group-horizontal">
  <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>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul class="list-group list-group-horizontal-sm">
  <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>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul class="list-group list-group-horizontal-md">
  <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>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul class="list-group list-group-horizontal-lg">
  <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>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul class="list-group list-group-horizontal-xl">
  <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>
</ul>

Kontekstinės klasės

Naudokite kontekstines klases, kad sudarytumėte stilių sąrašo elementus, turinčius būseną ir spalvą.

  • Dapibus ac facilisis in
  • 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 šviesos sąrašo grupės elementas
  • Paprastas tamsaus sąrašo grupės elementas
<ul class="list-group">
  <li class="list-group-item">Dapibus ac facilisis in</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 žymeklio stiliai, kurių ankstesniame pavyzdyje nėra. Taip pat remiama .activevalstybė; pritaikykite jį norėdami nurodyti aktyvų pasirinkimą kontekstinio sąrašo grupės elemente.

Dapibus ac facilisis in 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 šviesos sąrašo grupės elementas Paprastas tamsaus sąrašo grupės elementas 
<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">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-onlyklasė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 .

  • 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>

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 dienas

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.
Sąrašo grupės elemento antraštė
prieš 3 dienas

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.
Sąrašo grupės elemento antraštė
prieš 3 dienas

Donec id elit non mi porta gravida at eget metus. Maecenas 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 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">
    <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">
    <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>

JavaScript elgesys

Naudokite skirtuko „JavaScript“ papildinį (įtraukite jį atskirai arba per sudarytą bootstrap.jsfailą), kad išplėstumėte sąrašo grupę ir sukurtumėte vietinio turinio skirtukų sritis.

Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.

Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.

Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.

Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.

<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.

<!-- 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>

Per JavaScript

Įgalinti skirtukų sąrašo elementą naudojant „JavaScript“ (kiekvieną sąrašo elementą reikia suaktyvinti atskirai):

$('#myList a').on('click', function (e) {
  e.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 .fadeprie kiekvieno .tab-pane. Pirmojo skirtuko srityje taip pat turi būti .showmatomas 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-targetarba hrefDOM 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:

  1. hide.bs.tab(dabartiniame aktyviame skirtuke)
  2. show.bs.tab(skirtuke, kurį reikia rodyti)
  3. hidden.bs.tab(ankstesniame aktyviame skirtuke tas pats, kaip ir hide.bs.tabįvykio)
  4. shown.bs.tab(naujai suaktyvintame, ką tik parodytame skirtuke, tas pats kaip ir show.bs.tabįvykio)

Jei joks skirtukas dar nebuvo aktyvus, hide.bs.tabir 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.targetir event.relatedTarget, kad nukreiptumėte atitinkamai į aktyvų skirtuką ir ankstesnį aktyvų skirtuką (jei yra).
rodomas.bs.tab Šis įvykis suaktyvinamas rodant skirtuką, kai rodomas skirtukas. Naudokite event.targetir 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.targetir 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.targetir event.relatedTarget, kad nukreiptumėte atitinkamai į ankstesnį aktyvų skirtuką ir naują aktyvų skirtuką. 
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})