Lista tal-grupp
Gruppi tal-lista huma komponent flessibbli u b'saħħtu għall-wiri ta 'serje ta' kontenut. Immodifika u estendihom biex jappoġġjaw kważi kull kontenut ġewwa.
Eżempju bażiku
L-aktar grupp ta 'lista bażika huwa lista mhux ordnata b'oġġetti tal-lista u l-klassijiet xierqa. Ibni fuqha bl-għażliet li jsegwu, jew bis-CSS tiegħek kif meħtieġ.
- Oġġett
- It-tieni oġġett
- It-tielet oġġett
- Ir-raba' oġġett
- U l-ħames waħda
<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>
Oġġetti attivi
Żid .active
ma 'a .list-group-item
biex tindika l-għażla attiva attwali.
- Oġġett attiv
- It-tieni oġġett
- It-tielet oġġett
- Ir-raba' oġġett
- U l-ħames waħda
<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>
Oġġetti b'diżabilità
Żid .disabled
ma ' .list-group-item
biex tidher b'diżabilità. Innota li xi elementi .disabled
b'se jeħtieġu wkoll JavaScript personalizzat biex jiskonnettjaw bis-sħiħ l-avvenimenti tal-ikklikkja tagħhom (eż., links).
- Oġġett b'diżabilità
- It-tieni oġġett
- It-tielet oġġett
- Ir-raba' oġġett
- U l-ħames waħda
<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>
Links u buttuni
Uża <a>
s jew <button>
s biex toħloq oġġetti ta' grupp ta' lista azzjonabbli bi stati hover, diżabilitati u attivi billi żżid .list-group-item-action
. Aħna nisseparaw dawn il-psewdo-klassijiet biex niżguraw li l-gruppi tal-lista magħmula minn elementi mhux interattivi (bħal <li>
s jew <div>
s) ma jipprovdux affordance ta' klikk jew vit.
Kun żgur li ma tużax il- .btn
klassijiet standard hawn .
<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>
B <button>
's, tista' wkoll tagħmel użu mill- disabled
attribut minflok il- .disabled
klassi. Sfortunatament, <a>
s ma jappoġġjawx l-attribut diżabbli.
<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>
Aħsel
Żid .list-group-flush
biex tneħħi xi fruntieri u kantunieri fit-tond biex tirrendi oġġetti tal-grupp tal-lista tarf sa tarf f'kontenitur prinċipali (eż. karti).
- Oġġett
- It-tieni oġġett
- It-tielet oġġett
- Ir-raba' oġġett
- U l-ħames waħda
<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>
Orizzontali
Żid .list-group-horizontal
biex tibdel it-tqassim tal-oġġetti tal-grupp tal-lista minn vertikali għal orizzontali fil-punti ta' waqfien kollha. Inkella, agħżel varjant li jirrispondu .list-group-horizontal-{sm|md|lg|xl}
biex tagħmel grupp ta' lista orizzontali li jibda minn dak il-punt ta' waqfien min-width
. Attwalment il-gruppi ta' lista orizzontali ma jistgħux jiġu kkombinati ma' gruppi ta' lista ta' flush.
ProTip: Trid oġġetti tal-grupp tal-lista ta 'wisa' ugwali meta orizzontali? Żid .flex-fill
ma' kull oġġett tal-grupp tal-lista.
- Oġġett
- It-tieni oġġett
- It-tielet oġġett
- Oġġett
- It-tieni oġġett
- It-tielet oġġett
- Oġġett
- It-tieni oġġett
- It-tielet oġġett
- Oġġett
- It-tieni oġġett
- It-tielet oġġett
- Oġġett
- It-tieni oġġett
- It-tielet oġġett
<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>
Klassijiet kuntestwali
Uża klassijiet kuntestwali biex tfassal oġġetti tal-lista bi sfond u kulur stateful.
- Oġġett sempliċi tal-grupp tal-lista default
- Oġġett sempliċi tal-grupp tal-lista primarja
- Oġġett sempliċi tal-grupp tal-lista sekondarja
- Oġġett sempliċi tal-grupp tal-lista tas-suċċess
- Oġġett sempliċi tal-grupp tal-lista tal-periklu
- Oġġett ta' grupp ta' lista ta' twissija sempliċi
- Oġġett sempliċi ta' grupp ta' lista ta' informazzjoni
- Oġġett sempliċi tal-grupp tal-lista tad-dawl
- Oġġett sempliċi tal-grupp tal-lista skura
<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>
Il-klassijiet kuntestwali jaħdmu wkoll ma' .list-group-item-action
. Innota ż-żieda tal-istili tal-hover hawn mhux preżenti fl-eżempju preċedenti. Sostnut ukoll l- .active
istat; applikaha biex tindika għażla attiva fuq oġġett tal-grupp tal-lista kuntestwali.
<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>
Twassal tifsira għal teknoloġiji ta' assistenza
L-użu tal-kulur biex iżżid it-tifsira jipprovdi biss indikazzjoni viżwali, li mhux se tingħata lill-utenti ta’ teknoloġiji ta’ assistenza – bħal screen readers. Kun żgur li l-informazzjoni indikata bil-kulur hija jew ovvja mill-kontenut innifsu (eż. it-test viżibbli), jew tkun inkluża permezz ta' mezzi alternattivi, bħal test addizzjonali moħbi mal- .sr-only
klassi.
Bil badges
Żid badges ma 'kwalunkwe oġġett tal-grupp tal-lista biex turi għadd mhux moqrija, attività, u aktar bl-għajnuna ta' xi utilitajiet .
- Oġġett tal-lista14
- It-tieni oġġett tal-lista2
- It-tielet oġġett tal-lista1
<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>
Kontenut apposta
Żid kważi kull HTML fi ħdan, anke għal gruppi ta 'lista konnessi bħal dak ta' hawn taħt, bl-għajnuna ta ' utilitajiet flexbox .
Elenka l-intestatura tal-oġġett tal-grupp
3 ijiem iluXi kontenut ta' placeholder f'paragrafu.
U xi stampa żgħira.Elenka l-intestatura tal-oġġett tal-grupp
3 ijiem iluXi kontenut ta' placeholder f'paragrafu.
U xi stampa żgħira siekta.Elenka l-intestatura tal-oġġett tal-grupp
3 ijiem iluXi kontenut ta' placeholder f'paragrafu.
U xi stampa żgħira siekta.<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>
Imġieba JavaScript
Uża t-tab JavaScript plugin—inkludih individwalment jew permezz tal- bootstrap.js
fajl ikkumpilat—biex testendi l-grupp tal-lista tagħna biex toħloq panewijiet tabbable ta' kontenut lokali.
<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>
L-użu ta' attributi tad-data
Tista' tattiva navigazzjoni ta' grupp ta' lista mingħajr ma tikteb JavaScript billi sempliċement tispeċifika data-toggle="list"
jew fuq element. Uża dawn l-attributi tad-dejta fuq .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>
Via JavaScript
Ippermetti l-oġġett tal-lista li jista' jittabx permezz ta' JavaScript (kull oġġett tal-lista jeħtieġ li jiġi attivat individwalment):
$('#myList a').on('click', function (event) {
event.preventDefault()
$(this).tab('show')
})
Tista' tattiva oġġett tal-lista individwali f'diversi modi:
$('#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
Effett fade
Biex tagħmel tabs panel fade in, żid .fade
ma 'kull .tab-pane
. L-ewwel pannell tat-tab irid ikollu wkoll .show
jagħmel il-kontenut inizjali viżibbli.
<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>
Metodi
$().tab
Jattiva element ta' oġġett tal-lista u kontenitur tal-kontenut. Tab għandu jkollha jew a data-target
jew href
node ta 'kontenitur fil-mira fid-DOM.
<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('turi')
Jagħżel l-oġġett tal-lista mogħtija u juri l-panew assoċjat tiegħu. Kwalunkwe oġġett ieħor tal-lista li kien magħżul qabel ma jintgħażel u l-ħġieġa assoċjata tagħha hija moħbija. Jirritorna lil min iċempel qabel ma l-panew tat-tab fil-fatt intwera (per eżempju, qabel ma shown.bs.tab
jseħħ l-avveniment).
$('#someListItem').tab('show')
Avvenimenti
Meta turi tab ġdida, l-avvenimenti jisparaw fl-ordni li ġejja:
hide.bs.tab
(fuq it-tab attiva attwali)show.bs.tab
(fuq it-tab li trid tintwera)hidden.bs.tab
(fuq it-tab attiva preċedenti, l-istess bħal għall-hide.bs.tab
avveniment)shown.bs.tab
(fuq it-tab li għadha kif intwera, l-istess bħal dik tal-show.bs.tab
avveniment)
Jekk l-ebda tab ma kienet diġà attiva, l- avvenimenti hide.bs.tab
u hidden.bs.tab
mhux se jiġu sparati.
Tip ta' avveniment | Deskrizzjoni |
---|---|
juru.bs.tab | Dan l-avveniment jispara fuq tab show, iżda qabel ma tkun intweriet it-tab il-ġdida. Uża event.target u event.relatedTarget biex timmira t-tab attiva u t-tab attiva preċedenti (jekk disponibbli) rispettivament. |
muri.bs.tab | Dan l-avveniment jispara fuq tab show wara li tkun intweriet tab. Uża event.target u event.relatedTarget biex timmira t-tab attiva u t-tab attiva preċedenti (jekk disponibbli) rispettivament. |
hide.bs.tab | Dan l-avveniment jispara meta trid tintwera tab ġdida (u għalhekk it-tab attiva preċedenti trid tinħeba). Uża event.target u event.relatedTarget biex timmira t-tab attiva attwali u t-tab il-ġdida li dalwaqt tkun attiva, rispettivament. |
moħbija.bs.tab | Dan l-avveniment jispara wara li tintwera tab ġdida (u għalhekk it-tab attiva preċedenti hija moħbija). Uża event.target u event.relatedTarget biex timmira t-tab attiva preċedenti u t-tab attiva l-ġdida, rispettivament. |
$('a[data-toggle="list"]').on('shown.bs.tab', function (event) {
event.target // newly activated tab
event.relatedTarget // previous active tab
})