in English

Listacsoport

A listacsoportok rugalmas és hatékony összetevők egy sor tartalom megjelenítéséhez. Módosítsa és bővítse őket, hogy szinte bármilyen tartalmat támogassanak.

Alap példa

A legalapvetőbb listacsoport egy rendezetlen lista listaelemekkel és a megfelelő osztályokkal. Építsen rá a következő opciókkal, vagy szükség szerint saját CSS-jével.

  • Elem
  • Egy második tétel
  • Egy harmadik tétel
  • Egy negyedik tétel
  • És egy ötödik
<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>

Aktív elemek

Hozzáadás .activeaz a .list-group-item-hoz az aktuális aktív kijelölés jelzéséhez.

  • Aktív elem
  • Egy második tétel
  • Egy harmadik tétel
  • Egy negyedik tétel
  • És egy ötödik
<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>

Letiltott elemek

Adja hozzá .disabledaz a .list-group-item-hoz, hogy letiltottnak tűnjön . Vegye figyelembe, hogy egyes elemekhez .disabledegyéni JavaScriptre is szükség van a kattintási események (pl. linkek) teljes letiltásához.

  • Letiltott elem
  • Egy második tétel
  • Egy harmadik tétel
  • Egy negyedik tétel
  • És egy ötödik
<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>

Használja az <a>s vagy <button>s billentyűket, hogy hozzon létre használható listaelemeket lebegtető, letiltott és aktív állapotú hozzáadásával .list-group-item-action. Elválasztjuk ezeket a pszeudoosztályokat annak biztosítására, hogy a nem interaktív elemekből (például <li>s vagy <div>s) álló listacsoportok ne biztosítsanak kattintási vagy koppintási lehetőséget.

Ügyeljen arra, hogy itt ne használja a szabványos .btnosztályokat .

Az aktuális linkelem Egy második linkelem Egy harmadik linkelem Negyedik linkelem Letiltott linkelem 
<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>

Az <button>s segítségével az attribútumot is használhatja az osztály disabledhelyett . .disabledSajnos <a>s nem támogatja a letiltott attribútumot.

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

Öblítés

Hozzáadás .list-group-flushnéhány szegély és lekerekített sarkok eltávolításához, hogy a listacsoport elemeit egy szülőtárolóban (pl. kártyák) éltől szélig jelenítse meg.

  • Elem
  • Egy második tétel
  • Egy harmadik tétel
  • Egy negyedik tétel
  • És egy ötödik
<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>

Vízszintes

A Hozzáadás .list-group-horizontalgombbal módosíthatja a listacsoport elemeinek elrendezését függőlegesről vízszintesre az összes törésponton. Alternatív megoldásként válasszon egy adaptív változatot .list-group-horizontal-{sm|md|lg|xl}, hogy egy listacsoportot vízszintessé tegye az adott törésponttól kezdve min-width. Jelenleg a vízszintes listacsoportok nem kombinálhatók öblítési listacsoportokkal.

ProTip: Egyenlő szélességű listaelemeket szeretne vízszintesen? Adjon .flex-fillhozzá minden listacsoport elemet.

  • Elem
  • Egy második tétel
  • Egy harmadik tétel
  • Elem
  • Egy második tétel
  • Egy harmadik tétel
  • Elem
  • Egy második tétel
  • Egy harmadik tétel
  • Elem
  • Egy második tétel
  • Egy harmadik tétel
  • Elem
  • Egy második tétel
  • Egy harmadik tétel
<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>

Kontextuális osztályok

Használjon kontextus szerinti osztályokat állapotjelző háttérrel és színnel rendelkező listaelemek stílusozásához.

  • Egy egyszerű alapértelmezett listacsoport elem
  • Egy egyszerű elsődleges listacsoport elem
  • Egy egyszerű másodlagos listacsoport elem
  • Egy egyszerű sikerlista-csoport elem
  • Egy egyszerű veszélylista-csoport elem
  • Egy egyszerű figyelmeztető listaelem
  • Egy egyszerű információs listaelem
  • Egy egyszerű könnyű lista csoport elem
  • Egy egyszerű sötét lista elem
<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>

A kontextuális osztályok a -val is működnek .list-group-item-action. Vegye figyelembe a lebegtetési stílusok hozzáadását, amelyek az előző példában nem szerepeltek. Az állam is támogatott .active; Alkalmazza egy aktív kijelölés jelzésére egy kontextus szerinti listacsoport elemen.

Egy egyszerű alapértelmezett listacsoport elem Egy egyszerű elsődleges listacsoport elem Egy egyszerű másodlagos listacsoport elem Egy egyszerű sikerlista-csoport elem Egy egyszerű veszélylista-csoport elem Egy egyszerű figyelmeztető listaelem Egy egyszerű információs listaelem Egy egyszerű könnyű lista csoport elem Egy egyszerű sötét lista elem 
<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>
Jelentést adni a kisegítő technológiáknak

A szín használata a jelentés hozzáadására csak vizuális jelzést ad, amelyet nem közvetítenek a kisegítő technológiák – például a képernyőolvasók – felhasználói számára. Győződjön meg arról, hogy a színnel jelölt információ vagy magából a tartalomból (pl. a látható szövegből) nyilvánvaló, vagy alternatív módon, például az .sr-onlyosztályba rejtett kiegészítő szöveggel szerepel.

Jelvényekkel

Adjon hozzá jelvényeket a listacsoport bármely eleméhez az olvasatlan számok, tevékenységek és egyebek megjelenítéséhez bizonyos segédprogramok segítségével .

  • Egy listaelem14
  • Egy második listaelem2
  • Egy harmadik listaelem1 
<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>

Egyedi tartalom

A flexbox segédprogramok segítségével szinte bármilyen HTML-kódot hozzáadhat, még az alábbihoz hasonló hivatkozásos listacsoportokhoz is .

Listacsoport elem fejléce
3 napja

Néhány helyőrző tartalom egy bekezdésben.

És kis betűkkel.
Listacsoport elem fejléce
3 napja

Néhány helyőrző tartalom egy bekezdésben.

És némi tompa kisbetűs.
Listacsoport elem fejléce
3 napja

Néhány helyőrző tartalom egy bekezdésben.

És némi tompa kisbetűs. 
<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 viselkedés

Használja a lap JavaScript beépülő modulját (egyenként vagy a lefordított bootstrap.jsfájlon keresztül) a listacsoport kiterjesztéséhez helyi tartalom lapozható ablaktábláinak létrehozásához.

Néhány helyőrző tartalom a „Kezdőlap”-hoz kapcsolódó bekezdésben. És még néhány tartalom, amelyet itt csak a lappanel kitöltésére és kitöltésére használunk. A gyártásban itt nyilván több valódi tartalom lenne. És nem csak szöveges. Tényleg bármi lehet. Szöveg, képek, űrlapok.

Some placeholder content in a paragraph relating to "Profile". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Messages". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Settings". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

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

Adatattribútumok használata

A listacsoportos navigációt JavaScript írása nélkül is aktiválhatja, ha egyszerűen megad data-toggle="list"egy elemet vagy egy elemen. Használja ezeket az adatattribútumokat itt: .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>

JavaScripten keresztül

Lapozható listaelem engedélyezése JavaScripten keresztül (minden listaelemet külön kell aktiválni):

$('#myList a').on('click', function (event) {
  event.preventDefault()
  $(this).tab('show')
})

Az egyes listaelemeket többféleképpen is aktiválhatja:

$('#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

Fade hatás

A lapok paneljének elhalványulásához adja hozzá .fademindegyikhez a .tab-pane. Az első lappanelnek is .showláthatóvá kell tennie a kezdeti tartalmat.

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

Mód

$().tab

Aktivál egy listaelem elemet és tartalomtárolót. A lapon egy data-targetvagy egy tárolócsomópontot kell hrefcélozni a DOM-ban.

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

Kijelöli az adott listaelemet, és megjeleníti a hozzá tartozó panelt. A korábban kiválasztott egyéb listaelemek kijelölése megszűnik, és a hozzá tartozó panel elrejtődik. A lappanel tényleges megjelenítése előtt visszatér a hívóhoz (például az shown.bs.tabesemény bekövetkezte előtt).

$('#someListItem').tab('show')

Események

Új lap megjelenítésekor az események a következő sorrendben aktiválódnak:

  1. hide.bs.tab(az aktuális aktív lapon)
  2. show.bs.tab(a megjelenítendő lapon)
  3. hidden.bs.tab(az előző aktív lapon ugyanaz, mint az hide.bs.tabeseménynél)
  4. shown.bs.tab(az újonnan aktív, most megjelenő lapon ugyanaz, mint az show.bs.tabeseménynél)

Ha még nem volt aktív lap, a hide.bs.tabés hidden.bs.tabesemények nem aktiválódnak.

Esemény típus Leírás
show.bs.tab Ez az esemény a lap megjelenítésekor aktiválódik, de az új lap megjelenítése előtt. Használja a event.targetés event.relatedTargetaz aktív lapot, illetve az előző aktív lapot (ha elérhető) célozza meg.
show.bs.tab Ez az esemény lapmegjelenítéskor aktiválódik, miután egy lap megjelenik. Használja a event.targetés event.relatedTargetaz aktív lapot, illetve az előző aktív lapot (ha elérhető) célozza meg.
hide.bs.tab Ez az esemény akkor aktiválódik, amikor új lapot kell megjeleníteni (és így az előző aktív lapot el kell rejteni). Használja a event.targetés event.relatedTargetaz aktuális aktív lapot, illetve a hamarosan aktívvá váló új lapot.
rejtett.bs.tab Ez az esemény egy új lap megjelenítése után aktiválódik (és így az előző aktív lap el van rejtve). Használja a event.targetés event.relatedTargetaz előző aktív lapot, illetve az új aktív lapot. 
$('a[data-toggle="list"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})