Buidheann liosta
Tha buidhnean liosta nam pàirt sùbailte is cumhachdach airson sreath de shusbaint a thaisbeanadh. Atharraich agus leudaich iad gus taic a thoirt do cha mhòr susbaint sam bith a-staigh.
Is e am buidheann liosta as bunaitiche liosta gun òrdugh le nithean liosta agus na clasaichean ceart. Tog air leis na roghainnean a leanas, no leis an CSS agad fhèin mar a dh’ fheumar.
- Dìreach odio
- Dapibus agus facilisis ann an
- Morbi leo risus
- Porta agus consectetur ac
- Vestbulum aig 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>
Cuir .active
ri a .list-group-item
gus an taghadh gnìomhach làithreach a chomharrachadh.
- Dìreach odio
- Dapibus agus facilisis ann an
- Morbi leo risus
- Porta agus consectetur ac
- Vestbulum aig 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>
Cuir .disabled
ri a .list-group-item
gus am bi e ciorramach . Thoir an aire gum feum cuid de na h-eileamaidean le .disabled
JavaScript àbhaisteach gus na tachartasan cliog aca a chuir dheth gu tur (me, ceanglaichean).
- Dìreach odio
- Dapibus agus facilisis ann an
- Morbi leo risus
- Porta agus consectetur ac
- Vestbulum aig 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>
Cleachd <a>
s no <button>
s gus nithean buidhne liosta gnìomh a chruthachadh le hover , ciorramach, agus stàitean gnìomhach le bhith a’ cur .list-group-item-action
. Bidh sinn a’ sgaradh nan clasaichean meallta sin gus dèanamh cinnteach nach toir buidhnean liosta air an dèanamh le eileamaidean neo-eadar-ghnìomhach (mar <li>
s no <div>
s) cosgais cliog no tap.
Dèan cinnteach nach cleachd thu na .btn
clasaichean àbhaisteach an seo .
<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>
Le <button>
s, faodaidh tu cuideachd am disabled
feart a chleachdadh an àite a’ .disabled
chlas. Gu mì-fhortanach, <a>
chan eil s a’ toirt taic don fheart ciorramach.
<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>
Cuir .list-group-flush
ris gus cuid de chrìochan agus oiseanan cruinn a thoirt air falbh gus liosta de nithean buidhne a thoirt seachad oir ri oir ann an soitheach pàrant (me, cairtean).
- Dìreach odio
- Dapibus agus facilisis ann an
- Morbi leo risus
- Porta agus consectetur ac
- Vestbulum aig 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>
Cleachd clasaichean co-theacsail gus rudan a liostadh le cùl-fhiosrachadh agus dath stàiteil.
- Dapibus agus facilisis ann an
- Is e seo prìomh nì buidhne liosta
- Is e seo cuspair buidheann liosta dàrnach
- Is e seo nì buidhne liosta soirbheachais
- Is e seo liosta buidheann cunnairt
- Is e seo nì buidheann liosta rabhaidh
- 'S e seo buidheann liosta fiosrachaidh
- Is e seo nì buidheann liosta aotrom
- Is e seo nì buidhne liosta dorcha
<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>
Bidh clasaichean co-theacsa cuideachd ag obair le .list-group-item-action
. Thoir an aire gu bheil na stoidhlichean hover air an cur ris an seo nach eil an làthair san eisimpleir roimhe. Cuideachd a 'faighinn taic tha an .active
stàit; cuir an sàs e gus taghadh gnìomhach a chomharrachadh air nì buidheann liosta co-theacsail.
<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>
A’ toirt brìgh do theicneòlasan cuideachail
Chan eil a bhith a’ cleachdadh dath gus brìgh a chur ris ach a’ toirt seachad sealladh lèirsinneach, nach tèid a thoirt do luchd-cleachdaidh theicneòlasan taice - leithid leughadairean sgrion. Dèan cinnteach gu bheil fiosrachadh air a chomharrachadh leis an dath an dàrna cuid follaiseach bhon t-susbaint fhèin (me an teacsa faicsinneach), no air a thoirt a-steach tro dhòighean eile, leithid teacsa a bharrachd falaichte leis a’ .sr-only
chlas.
Cuir bràistean ri nì buidhne liosta sam bith gus cunntasan gun leughadh, gnìomhachd agus barrachd a shealltainn le cuideachadh bho chuid de ghoireasan .
- Dìreach odio14
- Dapibus agus facilisis ann an2
- 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>
Cuir cha mhòr HTML sam bith a-staigh, eadhon airson buidhnean liosta ceangailte mar an tè gu h-ìosal, le cuideachadh bho ghoireasan flexbox .
Dèan liosta de cheann nan nithean buidhne
3 làithean air aisDonec id elit non mi porta gravida agus eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.Dèan liosta de cheann nan nithean buidhne
3 làithean air aisDonec id elit non mi porta gravida agus eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.Dèan liosta de cheann nan nithean buidhne
3 làithean air aisDonec id elit non mi porta gravida agus 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>
Cleachd am plugan tab JavaScript - cuir a-steach e leotha fhèin no tron bootstrap.js
fhaidhle cruinnichte - gus ar buidheann liosta a leudachadh gus panaichean tabable de shusbaint ionadail a chruthachadh.
Faodaidh tu seòladh buidhne liosta a chuir an gnìomh gun JavaScript sam bith a sgrìobhadh le bhith dìreach a’ sònrachadh data-toggle="list"
no air eileamaid. Cleachd na feartan dàta seo air .list-group-item
.
Dèan comas air nì liosta tabbable tro JavaScript (feumaidh gach nì liosta a chuir an gnìomh leotha fhèin):
Faodaidh tu nì liosta fa leth a chuir an gnìomh ann an grunn dhòighean:
Gus am bi am pannal tabaichean a’ seargadh a-steach, cuir .fade
ris gach faidhle .tab-pane
. Feumaidh a’ chiad phana taba cuideachd .show
an susbaint tùsail a dhèanamh follaiseach.
Cuir an gnìomh eileamaid nì liosta agus inneal susbaint. Bu chòir gum biodh an dàrna cuid data-target
no href
nòta targaideach aig tab anns an DOM.
Tagh an nì liosta a chaidh a thoirt seachad agus seallaidh e am pana co-cheangailte ris. Bidh nì liosta sam bith eile a chaidh a thaghadh roimhe gun a bhith air a thaghadh agus tha am pana co-cheangailte ris falaichte. Tillidh e chun neach-fios mus deach am pana taba a shealltainn (mar eisimpleir, mus tachair an shown.bs.tab
tachartas).
Nuair a sheallas tu taba ùr, bidh na tachartasan a’ losgadh san òrdugh a leanas:
hide.bs.tab
(air an taba gnìomhach làithreach)show.bs.tab
(air an taba a tha ri fhaicinn)hidden.bs.tab
(air an taba gnìomhach roimhe, an aon fhear ris anhide.bs.tab
tachartas)shown.bs.tab
(air an taba a tha dìreach air a thaisbeanadh gu gnìomhach, an aon fhear ris anshow.bs.tab
tachartas)
Mura robh taba gnìomhach mu thràth, cha tèid na tachartasan hide.bs.tab
agus na tachartasan a chuir às.hidden.bs.tab
Seòrsa tachartas | Tuairisgeul |
---|---|
seall.bs.tab | Bidh an tachartas seo a’ losgadh air taisbeanadh tab, ach mus deach an taba ùr a shealltainn. Cleachd event.target agus event.relatedTarget gus cuimseachadh air an taba gnìomhach agus an taba gnìomhach roimhe (ma tha sin ri fhaighinn) fa leth. |
air a shealltainn.bs.tab | Bidh an tachartas seo a’ losgadh air taisbeanadh tabaichean às deidh taba a bhith air a shealltainn. Cleachd event.target agus event.relatedTarget gus cuimseachadh air an taba gnìomhach agus an taba gnìomhach roimhe (ma tha sin ri fhaighinn) fa leth. |
seiche.bs.tab | Bidh an tachartas seo a’ losgadh nuair a tha taba ùr gu bhith air a shealltainn (agus mar sin tha an taba gnìomhach roimhe gu bhith falaichte). Cleachd event.target agus event.relatedTarget gus cuimseachadh air an taba gnìomhach gnàthach agus an taba ùr a dh’ aithghearr gu bhith gnìomhach, fa leth. |
falaichte.bs.tab | Bidh an tachartas seo a’ losgadh às deidh taba ùr a nochdadh (agus mar sin tha an taba gnìomhach roimhe falaichte). Cleachd event.target agus event.relatedTarget gus cuimseachadh air an taba gnìomhach roimhe agus an taba gnìomhach ùr, fa leth. |