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.
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>
Hozzáadás .active
az 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>
Adja hozzá .disabled
az a .list-group-item
-hoz, hogy letiltottnak tűnjön . Vegye figyelembe, hogy egyes elemekhez .disabled
egyé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 .btn
osztályokat .
<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 disabled
helyett . .disabled
Sajnos <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">
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>
Hozzáadás .list-group-flush
né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>
Használjon kontextus szerinti osztályokat állapotjelző háttérrel és színnel rendelkező listaelemek stílusozásához.
- Dapibus ac facilisis be
- 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">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>
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.
<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>
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-only
osztályba rejtett kiegészítő szöveggel szerepel.
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 .
- 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>
Szinte bármilyen HTML-kódot hozzáadhat a flexbox segédprogramok segítségével, még a linkelt listacsoportokhoz is, például az alábbihoz .
Listacsoport elem fejléce
3 napjaDonec 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 napjaDonec 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 napjaDonec 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>
Használja a lap JavaScript beépülő modulját (egyenként vagy a lefordított bootstrap.js
fájlon keresztül) a listacsoport kiterjesztéséhez helyi tartalom lapozható ablaktábláinak létrehozásához.
<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>
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
.
<!-- 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>
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
A lapok paneljének elhalványulásához adja hozzá .fade
mindegyikhez a .tab-pane
. Az első lappanelnek is .show
lá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>
Aktivál egy listaelem elemet és tartalomtárolót. A lapon egy data-target
vagy egy tárolócsomópontot kell href
cé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>
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.tab
esemény bekövetkezte előtt).
$('#someListItem').tab('show')
Új lap megjelenítésekor az események a következő sorrendben aktiválódnak:
hide.bs.tab
(az aktuális aktív lapon)show.bs.tab
(a megjelenítendő lapon)hidden.bs.tab
(az előző aktív lapon ugyanaz, mint azhide.bs.tab
eseménynél)shown.bs.tab
(az újonnan aktív, most megjelenő lapon ugyanaz, mint azshow.bs.tab
eseménynél)
Ha még nem volt aktív lap, a hide.bs.tab
és hidden.bs.tab
esemé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.relatedTarget az 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.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.relatedTarget az 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.relatedTarget az 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
})