Source

Listacsoport

A listacsoportok rugalmas és hatékony komponensek 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.

  • Cras justo odio
  • Dapibus ac facilisis be
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum és eros
<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>

Aktív elemek

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

  • Cras justo odio
  • Dapibus ac facilisis be
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum és eros
<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>

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.

  • Cras justo odio
  • Dapibus ac facilisis be
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum és eros
<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>

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 .

Cras justo odio Dapibus ac facilisis be Morbi leo risus Porta ac consectetur ac Vestibulum és eros 
<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>

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

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

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

  • Cras justo odio
  • Dapibus ac facilisis be
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum és eros
<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>

Kontextuális osztályok

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

  • Dapibus ac facilisis be
  • Ez a listacsoport elsődleges eleme
  • Ez egy másodlagos listacsoport elem
  • Ez a sikerlista csoport eleme
  • Ez a veszélylista csoport eleme
  • Ez egy figyelmeztető listaelem
  • Ez egy információs listaelem
  • Ez egy könnyű listacsoport elem
  • Ez egy sötét lista csoporteleme
<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>

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.

Dapibus ac facilisis be Ez a listacsoport elsődleges eleme Ez egy másodlagos listacsoport elem Ez a sikerlista csoport eleme Ez a veszélylista csoport eleme Ez egy figyelmeztető listaelem Ez egy információs listaelem Ez egy könnyű listacsoport elem Ez egy sötét lista csoporteleme 
<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>
Jelentést adni a kisegítő technológiáknak

A színek jelentése 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, hogy bizonyos segédprogramok segítségével megjelenítse az olvasatlanok számát, tevékenységét és egyebeket .

  • Cras justo odio14
  • Dapibus ac facilisis be2
  • 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>

Egyedi tartalom

Szinte bármilyen HTML-kódot hozzáadhat a flexbox segédprogramok segítségével, még az alábbi linkelt listacsoportokhoz is .

Listacsoport elem fejléce
3 napja

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

Donec id elit non mi porta.
Listacsoport elem fejléce
3 napja

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

Donec id elit non mi porta.
Listacsoport elem fejléce
3 napja

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

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.

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>

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. Használja ezeket az adatattribútumokat itt: .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>

JavaScripten keresztül

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

$('#myList a').on('click', function (e) {
  e.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 event.targetésevent.relatedTarget az 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 (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})