SourceLembani gulu
Magulu amndandanda ndi gawo losinthika komanso lamphamvu powonetsa mndandanda wazinthu. Sinthani ndi kukulitsa kuti zithandizire chilichonse mkati.
Chitsanzo choyambirira
Gulu la mndandanda wofunikira kwambiri ndi mndandanda wosasankhidwa wokhala ndi mndandanda wazinthu ndi makalasi oyenera. Mangani pa izo ndi zosankha zomwe zikutsatira, kapena ndi CSS yanu ngati pakufunika.
Cras justo odio
Dapibus ac facilisis in
Mowa lero
Porta ac consectetur ac
Vestibulum ndi eros
Koperani
<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>
Zinthu zogwira ntchito
Onjezani .active
ku a .list-group-item
kuti muwonetse zomwe zasankhidwa.
Cras justo odio
Dapibus ac facilisis in
Mowa lero
Porta ac consectetur ac
Vestibulum ndi eros
Koperani
<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>
Zinthu zolemala
Onjezani .disabled
ku a .list-group-item
kuti iwoneke ngati yoyimitsa. Dziwani kuti zinthu zina zomwe zili nazo .disabled
zidzafunikanso JavaScript yokhazikika kuti izimitsa zochitika zawo zongodina (mwachitsanzo, maulalo).
Cras justo odio
Dapibus ac facilisis in
Mowa lero
Porta ac consectetur ac
Vestibulum ndi eros
Koperani
<ul class= "list-group" >
<li class= "list-group-item disabled" aria-disabled= "true" > 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>
Gwiritsani ntchito <a>
s kapena <button>
s kuti mupange mndandanda wazinthu zomwe zingachitike m'magulu okhala ndi ma hover, olemala, ndi omwe akugwira ntchito powonjezera .list-group-item-action
. Timalekanitsa magulu abodzawa kuti tiwonetsetse kuti magulu opangidwa ndi zinthu zosagwirizana (monga <li>
s kapena <div>
s) sapereka kudina kapena kukwanitsa.
Onetsetsani kuti musagwiritse ntchito .btn
makalasi okhazikika apa .
Koperani
<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" tabindex= "-1" aria-disabled= "true" > Vestibulum at eros</a>
</div>
Ndi <button>
s, mutha kugwiritsanso ntchito mawonekedwe disabled
m'malo mwa .disabled
kalasi. Zachisoni, <a>
s sizigwirizana ndi zomwe olumala.
Cras justo odio
Dapibus ac facilisis in
Mowa lero
Porta ac consectetur ac
Vestibulum ndi eros
Koperani
<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>
Flush
Onjezani .list-group-flush
kuti muchotse malire ndi ngodya zozungulira kuti mupereke mndandanda wazinthu zamagulu m'mphepete mwa chidebe cha makolo (mwachitsanzo, makadi).
Cras justo odio
Dapibus ac facilisis in
Mowa lero
Porta ac consectetur ac
Vestibulum ndi eros
Koperani
<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>
Chopingasa
Onjezani .list-group-horizontal
kuti musinthe masanjidwe a mndandanda wazinthu zamagulu kuchokera kumayendedwe mpaka opingasa pamagawo onse. Kapenanso, sankhani mtundu wotsatira .list-group-horizontal-{sm|md|lg|xl}
kuti gulu la mndandanda likhale lopingasa kuyambira pa breakpoint's min-width
. Panopa magulu a mndandanda wopingasa sangathe kuphatikizidwa ndi magulu a mndandanda wa flush.
ProTip: Mukufuna mndandanda wamagulu amtundu wofanana mukakhala yopingasa? Onjezani .flex-fill
ku gulu lililonse la gulu.
Cras justo odio
Dapibus ac facilisis in
Mowa lero
Koperani
<ul class= "list-group list-group-horizontal" >
<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>
</ul>
Cras justo odio
Dapibus ac facilisis in
Mowa lero
Koperani
<ul class= "list-group list-group-horizontal-sm" >
<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>
</ul>
Cras justo odio
Dapibus ac facilisis in
Mowa lero
Koperani
<ul class= "list-group list-group-horizontal-md" >
<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>
</ul>
Cras justo odio
Dapibus ac facilisis in
Mowa lero
Koperani
<ul class= "list-group list-group-horizontal-lg" >
<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>
</ul>
Cras justo odio
Dapibus ac facilisis in
Mowa lero
Koperani
<ul class= "list-group list-group-horizontal-xl" >
<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>
</ul>
Maphunziro a Contextual
Gwiritsani ntchito makalasi okhazikika kuti musinthe mndandanda wazinthu zokhala ndi mbiri yabwino komanso mtundu.
Dapibus ac facilisis in
Chinthu chosavuta chamagulu agulu
Chinthu chosavuta cha gulu lachiwiri
Chinthu chosavuta cha mndandanda wamagulu
Gulu losavuta la mndandanda wazowopsa
Gulu losavuta la mndandanda wazinthu
Chidziwitso chosavuta cha gulu lazinthu
Gulu losavuta la mndandanda wazinthu
Chinthu chosavuta cha gulu lakuda
Koperani
<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>
Maphunziro a Contextual amagwiranso ntchito ndi .list-group-item-action
. Zindikirani kuwonjezera kwa masitaelo a hover pano omwe sakupezeka mu chitsanzo chapitacho. Komanso kuthandizidwa ndi .active
boma; igwiritseni ntchito kusonyeza kusankha komwe kukuchitika pagulu lachinthu.
Koperani
<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>
Kupereka tanthauzo ku matekinoloje othandizira
Kugwiritsa ntchito utoto kuti muwonjezere tanthauzo kumangopereka chithunzithunzi, chomwe sichidzaperekedwa kwa ogwiritsa ntchito matekinoloje othandizira - monga owerenga pazenera. Onetsetsani kuti zomwe zatchulidwa ndi mtunduwo zikuwonekera kuchokera pazomwe zili (monga zolemba zowonekera), kapena zikuphatikizidwa ndi njira zina, monga zolemba zina zobisika ndi .sr-only
kalasi.
Ndi mabaji
Onjezani mabaji pagulu lililonse kuti muwonetse mawerengedwe osawerengeka, zochitika, ndi zina mothandizidwa ndi zina .
Cras justo odio14
Dapibus ac facilisis in2
Mowa lero1
Koperani
<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>
Zomwe zili mwamakonda
Onjezani pafupifupi ma HTML aliwonse mkati, ngakhale pamndandanda wamagulu olumikizidwa monga pansipa, mothandizidwa ndi flexbox utilities .
Koperani
<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" > 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" >
<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" >
<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>
Makhalidwe a JavaScript
Gwiritsani ntchito pulogalamu yowonjezera ya JavaScript-iphatikizepo payekhapayekha kapena kudzera pa bootstrap.js
fayilo yophatikizidwa-kuti muwonjezere gulu lathu la mndandanda kuti mupange mapanelo azomwe zili m'deralo.
Yesetsani kuchita masewera olimbitsa thupi kuti mukhale osangalala. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecaecaecaecaecaecat ad non minim tempor sunt vouptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nim not enim eu nstrud 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.
Koperani
<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>
Kugwiritsa ntchito mawonekedwe a data
Mutha kuyambitsa kusanja kwamagulu osalemba JavaScript pongotchula data-toggle="list"
kapena pa chinthu. Gwiritsani ntchito ma data awa pa .list-group-item
.
Koperani
<!-- 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>
Kudzera pa JavaScript
Yambitsani chinthu chamndandanda kudzera pa JavaScript (chinthu chilichonse pamndandanda chikuyenera kutsegulidwa pachokha):
Koperani
$ ( ' #myList a ' ). on ( ' click ' , function ( e ) {
e . preventDefault ()
$ ( this ). tab ( ' show ' )
})
Mutha kuyambitsa chinthu chamndandanda m'njira zingapo:
Koperani
$ ( ' #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
Kuzimiririka
Kuti ma tabo azitha kuzimiririka, onjezani .fade
chilichonse .tab-pane
. Gawo loyamba la tabu liyeneranso .show
kupangitsa kuti zomwe zili zoyamba ziwonekere.
Koperani
<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>
Njira
$().tabu
Imayatsa chinthu chamndandanda komanso chidebe chazinthu. Tabu iyenera kukhala ndi imodzi data-target
kapena href
yolunjika ku chidebe mu DOM.
Koperani
<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')
Imasankha chinthu chamndandanda ndikuwonetsa gawo lomwe likugwirizana nalo. Zina zilizonse pamndandanda zomwe zidasankhidwa kale zimakhala zosasankhidwa ndipo gawo lomwe likugwirizana nalo limabisika. Imabwerera kwa woyimbirayo tsamba lisanasonyezedwe (mwachitsanzo, shown.bs.tab
chochitikacho chisanachitike).
Koperani
$ ( ' #someListItem ' ). tab ( ' show ' )
Zochitika
Mukawonetsa tabu yatsopano, zochitika zimayaka motere:
hide.bs.tab
(pa tabu yomwe ikugwira ntchito pano)
show.bs.tab
(pa tabu yomwe ikuyenera kuwonetsedwa)
hidden.bs.tab
(pa tabu yogwira kale, yofanana ndi ya hide.bs.tab
chochitikacho)
shown.bs.tab
(pa tabu yomwe yangowonetsedwa kumene, yofanana ndi ya show.bs.tab
chochitikacho)
Ngati palibe tabu yomwe idayamba kale, hide.bs.tab
ndi hidden.bs.tab
zochitika sizidzachotsedwa.
Mtundu wa chochitika
Kufotokozera
onetsani.bs.tab
Chochitikachi chikuyaka pa tabu chiwonetsero, koma tabu yatsopano isanasonyezedwe. Gwiritsani ntchito event.target
ndikuwongolera event.relatedTarget
tabu yomwe ikugwira ntchito ndi tabu yogwira kale (ngati ilipo) motsatana.
chiwonetsero.bs.tab
Chochitika ichi chikuwonekera pa tabu pambuyo poti tabu yawonetsedwa. Gwiritsani ntchito event.target
ndikuwongolera event.relatedTarget
tabu yomwe ikugwira ntchito ndi tabu yogwira kale (ngati ilipo) motsatana.
bisa.bs.tab
Chochitika ichi chimayaka pomwe tabu yatsopano iyenera kuwonetsedwa (ndipo chifukwa chake tabu yogwira kale iyenera kubisika). Gwiritsani ntchito event.target
ndi event.relatedTarget
kulunjika tabu yomwe ikugwira ntchito komanso tsamba lomwe lizigwira ntchito posachedwa, motsatana.
chobisika.bs.tab
Chochitikachi chimayaka pambuyo poti tabu yatsopano yawonetsedwa (ndipo chifukwa chake tabu yogwira kale yabisika). Gwiritsani event.target
ntchito event.relatedTarget
ndikulunjika tabu yomwe idagwira kale ndi tabu yatsopano, motsatana.
Koperani
$ ( ' a[data-toggle="list"] ' ). on ( ' shown.bs.tab ' , function ( e ) {
e . target // newly activated tab
e . relatedTarget // previous active tab
})