List groups yɛ ade a ɛyɛ mmerɛw na ɛwɔ tumi a wɔde da nsɛm a ɛtoatoa so adi. Sesa na trɛw mu ma ɛboa ɛkame ayɛ sɛ nsɛm biara a ɛwɔ mu no.
Nhwɛso titiriw
List kuw a ɛho hia sen biara ne list a wɔanhyehyɛ no yiye a list nneɛma ne adesua ahorow a ɛfata wom. Fa akwan horow a edi hɔ no si so, anaasɛ fa w’ankasa CSS sɛnea ɛho hia.
Cras justo odio na ɔyɛ
Dapibus ac adwumayɛbea a ɛwɔ
Morbi leo a ɛwɔ soro no
Porta ac a wɔde hyɛ mu
Vestibulum a ɛwɔ eros no
Nneɛma a ɛyɛ nnam
Fa ka .activea ho .list-group-itemna kyerɛ mprempren a woapaw a ɛreyɛ adwuma no.
Cras justo odio na ɔyɛ
Dapibus ac adwumayɛbea a ɛwɔ
Morbi leo a ɛwɔ soro no
Porta ac a wɔde hyɛ mu
Vestibulum a ɛwɔ eros no
Nneɛma a wɔadi dɛm
Fa ka .disableda ho .list-group-itemna ama ayɛ te sɛ nea wɔagyae. Hyɛ no nsow sɛ elements bi a ɛwɔ .disablednso bɛhwehwɛ JavaScript a wɔahyɛ da ayɛ no na ama wɔn click events no ayɛ adwuma koraa (sɛ nhwɛso no, links).
Cras justo odio na ɔyɛ
Dapibus ac adwumayɛbea a ɛwɔ
Morbi leo a ɛwɔ soro no
Porta ac a wɔde hyɛ mu
Vestibulum a ɛwɔ eros no
Links ne bɔtɔn ahorow
Fa <a>s anaa <button>s yɛ list kuw nneɛma a wotumi yɛ ho adwuma a ɛwɔ hover, disabled, ne active states denam .list-group-item-action. Yɛtetew saa pseudo-classes yi mu de hwɛ hu sɛ list akuw a wɔde nneɛma a ɛnyɛ nkitahodi (te sɛ <li>s anaa <div>s) ayɛ no remma click anaa tap affordance.
Hwɛ hu sɛ woremfa .btnadesua ahorow a ɛwɔ hɔ no nni dwuma wɔ ha .
Sɛ wode <button>s di dwuma a, wubetumi nso de disabledsu no adi dwuma sen sɛ wode .disabledadesuakuw no bedi dwuma. Awerɛhosɛm ne sɛ, <a>s ntumi mmoa su a wɔadi dɛm no.
Flush a wɔde hyɛ mu
Fa ka .list-group-flushho na yi ahyeɛ binom ne ntwea a ɛyɛ kurukuruwa de kyerɛ list kuw nneɛma ase-kɔ-ano wɔ ɔwofoɔ ahina mu (sɛ nhwɛsoɔ, kaad).
Cras justo odio na ɔyɛ
Dapibus ac adwumayɛbea a ɛwɔ
Morbi leo a ɛwɔ soro no
Porta ac a wɔde hyɛ mu
Vestibulum a ɛwɔ eros no
Ne tɛtrɛtɛ mu
Fa ka .list-group-horizontalho na sesa list group nneɛma no nhyehyɛe fi vertical kɔ horizontal wɔ breakpoints nyinaa so. Sɛnea ɛbɛyɛ a, paw mmuae variant .list-group-horizontal-{sm|md|lg|xl}na ama list kuw bi ayɛ horizontal a efi ase wɔ saa breakpoint no min-width. Mprempren wontumi mfa horizontal list akuw no nka flush list akuw ho.
ProTip: Wopɛ list kuw nneɛma a ne tɛtrɛtɛ yɛ pɛ bere a ɛwɔ soro no? Fa ka .flex-filllist kuw ade biara ho.
Cras justo odio na ɔyɛ
Dapibus ac adwumayɛbea a ɛwɔ
Morbi leo a ɛwɔ soro no
Cras justo odio na ɔyɛ
Dapibus ac adwumayɛbea a ɛwɔ
Morbi leo a ɛwɔ soro no
Cras justo odio na ɔyɛ
Dapibus ac adwumayɛbea a ɛwɔ
Morbi leo a ɛwɔ soro no
Cras justo odio na ɔyɛ
Dapibus ac adwumayɛbea a ɛwɔ
Morbi leo a ɛwɔ soro no
Cras justo odio na ɔyɛ
Dapibus ac adwumayɛbea a ɛwɔ
Morbi leo a ɛwɔ soro no
Adesua ahorow a ɛfa nsɛm a ɛfa ho
Fa contextual classes di dwuma fa style list nneɛma a ɛwɔ stateful akyi ne kɔla.
Dapibus ac adwumayɛbea a ɛwɔ
Mfitiase list kuw ade a ɛnyɛ den
Asɛm a ɛnyɛ den a ɛto so abien list kuw ade
A simple nkonimdi list kuw ade
Asiane list kuw ade a ɛnyɛ den
Kɔkɔbɔ list kuw ade a ɛnyɛ den
A simple info list kuw ade
Hann list kuw ade a ɛnyɛ den
Esum list kuw ade a ɛnyɛ den
Nsɛm a ɛfa ho adesua ahorow nso ne .list-group-item-action. Hyɛ hover styles a ɛwɔ ha a enni nhwɛso a atwam no mu no nsow. Ɔman no nso boa .active; fa di dwuma de kyerɛ nea wɔapaw a ɛyɛ nnam wɔ nsɛm a ɛfa ho list kuw ade bi so.
Kɔla a wɔde di dwuma de ntease ka ho no ma wonya sɛnkyerɛnne a wotumi hu nkutoo, a wɔremfa nkɔma wɔn a wɔde mfiridwuma a ɛboa di dwuma – te sɛ screen akenkanfo. Hwɛ sɛ nsɛm a wɔde kɔla no kyerɛ no da adi pefee fi emu nsɛm no ankasa mu (sɛ nhwɛso no, nsɛm a wotumi hu no), anaasɛ wɔde bɛka ho denam akwan foforo so, te sɛ nsɛm foforo a wɔde asie ne .sr-onlyadesuakuw no mu.
Wɔde badge ahorow ahyɛ mu
Fa badge ahorow ka list kuw ade biara ho de kyerɛ akontaabu a wonkenkanee, dwumadi, ne nea ɛkeka ho denam utilities binom mmoa so .
Cras justo odio na ɔyɛ14. 15
Dapibus ac adwumayɛbea a ɛwɔ2. 2.
Morbi leo a ɛwɔ soro no1. 1.
Nsɛm a wɔahyehyɛ a wɔahyɛ da ayɛ
Ɛkame ayɛ sɛ fa HTML biara ka ho wɔ mu, mpo ma linked list groups te sɛ nea ɛwɔ ase ha no, denam flexbox utilities mmoa so .
Fa tab JavaScript plugin no di dwuma—fa ka ho mmiako mmiako anaa fa bootstrap.jsfael a wɔaboaboa ano no so—na trɛw yɛn list kuw no mu ma yɛ tabbable panes a ɛwɔ mpɔtam hɔ nsɛm no mu.
Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing apɔw-mu-teɛteɛ guan bere tiaa bi. Voluptate deserunt tena sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim bere tiaa mu sunt voluptate consectetur apɔw-mu-teɛteɛ id ut nulla. Ea ne fugiat aliquip nostrud sunt incididunt consectetur culpa afiri a wɔde yɛ aduane eiusmod dolor. Anim ad Lorem aliqua wɔ cupidat nisi eu eu nostrud yɛ 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.
Data su ahorow a wɔde bedi dwuma
data-toggle="list"Wubetumi ama list group navigation ayɛ adwuma a worenkyerɛw JavaScript biara denam element bi a wobɛkyerɛ kɛkɛ anaasɛ wobɛda so. Fa saa data su ahorow yi di dwuma wɔ .list-group-item.
Ɛdenam JavaScript so
Ma tabbable list item no nyɛ adwuma denam JavaScript so (ɛsɛ sɛ wode list item biara yɛ adwuma mmiako mmiako):
Wubetumi ama ankorankoro list item no ayɛ adwuma wɔ akwan horow pii so:
Fade nkɛntɛnso
Sɛ wopɛ sɛ tabs panel no bɛyera a, fa ka .fadeemu biara ho .tab-pane. Ɛsɛ sɛ tab pane a edi kan no nso .showma nsɛm a edi kan no da adi.
Akwan a wɔfa so yɛ
$().tab no ho nsɛm
Ɛma list item element ne content container bi yɛ adwuma. Ɛsɛ sɛ tab nya a data-targetanaasɛ hreftargeting a container node wɔ DOM no mu.
.tab('kyerɛ') .
Paw list ade a wɔde ama no na ɛkyerɛ ne pane a ɛbata ho. List adeɛ foforɔ biara a wɔadi kan apaw no bɛyɛ nea wɔanpaw na ne pane a ɛbata ho no sie. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔakyerɛ tab pane no ankasa (sɛ nhwɛso no, ansa na shown.bs.tabasɛm no asi).
Nsɛm a esisi
Sɛ worekyerɛ tab foforo a, nsɛm a esisi no bɛtow nnidiso nnidiso a edidi so yi:
hide.bs.tab(wɔ tab a ɛreyɛ adwuma mprempren no so)
show.bs.tab(wɔ tab a wɔrebɛkyerɛ no so)
hidden.bs.tab(wɔ active tab a atwam no so no, nea ɛwɔ hide.bs.tabadeyɛ no ho no ara)
shown.bs.tab(wɔ tab a wɔakyerɛ seesei ara a ɛyɛ adwuma foforo no so no, nea ɛwɔ show.bs.tabadeyɛ no ho no ara)
Sɛ na tab biara nni hɔ a ɛyɛ adwuma dedaw a, wɔrentow hide.bs.tabne hidden.bs.tabnsɛm a esisi no.
Adeyɛ no su
Nkyerɛmu
kyerɛ.bs.tab no
Saa adeyɛ yi tow wɔ tab show so, nanso ansa na wɔakyerɛ tab foforo no. Fa event.targetne di dwuma event.relatedTargetfa w’ani si active tab ne active tab a atwam no so (sɛ ɛwɔ hɔ a) sɛnea ɛte biara.
wɔakyerɛ.bs.tab
Saa adeyɛ yi tow wɔ tab show so bere a wɔakyerɛ tab bi akyi. Fa event.targetne di dwuma event.relatedTargetfa w’ani si active tab ne active tab a atwam no so (sɛ ɛwɔ hɔ a) sɛnea ɛte biara.
hide.bs.tab no ho nsɛm
Saa adeyɛ yi tow bere a ɛsɛ sɛ wɔkyerɛ tab foforo (na ɛnam saa kwan yi so no ɛsɛ sɛ wɔde tab a ɛyɛ adwuma a atwam no sie). Fa event.targetne di dwuma event.relatedTargetfa w’ani si tab a ɛreyɛ adwuma mprempren ne tab foforo a ɛrenkyɛ na ɛreyɛ adwuma no so, sɛnea ɛte biara.
ahintaw.bs.tab no
Saa adeyɛ yi tow bere a wɔakyerɛ tab foforo akyi (na ɛnam saa kwan yi so no wɔde tab a ɛyɛ adwuma a atwam no asie). Fa event.targetne di dwuma event.relatedTargetfa w’ani si tab a ɛreyɛ adwuma a atwam no ne tab a ɛreyɛ adwuma foforo no so, sɛnea ɛte biara.