List grup na wan fleksibul ɛn pawaful kɔmpɔnɛnt fɔ sho wan siriɔs kɔntinyu. Modify ɛn ɛkstɛnd dɛn fɔ sɔpɔt jɔs lɛk ɛni kɔntinyu insay.
Besik ɛgzampul
Di list grup we impɔtant pas ɔl na wan list we nɔ ɔda wit di tin dɛn we de na di list ɛn di rayt klas dɛn. Bil pan am wit di opshɔn dɛn we de kam, ɔ wit yu yon CSS as nid de.
Kras jɔsto odio
Dapibus ac fasilisis in
Morbi leo risus
Porta ac konsectetur wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan
Vestibulum na di eros
Di tin dɛn we de wok
Ad .activeto a .list-group-itemfɔ sho di aktif sɛlɛkshɔn we de naw.
Kras jɔsto odio
Dapibus ac fasilisis in
Morbi leo risus
Porta ac konsectetur wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan
Vestibulum na di eros
Di tin dɛn we dɛn dɔn disable
Ad .disabledto a .list-group-itemfɔ mek i tan lɛk se i nɔ ebul fɔ wok. Notis se sɔm ɛlimɛnt dɛn wit .disabledgo nid bak kɔstɔm JavaSkript fɔ fulɔp fɔ disable dɛn klik ivin dɛn (ɛgz., link dɛn).
Kras jɔsto odio
Dapibus ac fasilisis in
Morbi leo risus
Porta ac konsectetur wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan
Vestibulum na di eros
Links ɛn bɔtin dɛn
Yuz <a>s ɔ <button>s fɔ mek akshɔnable list grup aytem dɛn wit hova, disabled, ɛn aktiv stet dɛn bay we yu ad .list-group-item-action. Wi de separet dɛn pseudo-klas ya fɔ mek shɔ se list grup dɛn we dɛn mek wit nɔ-intaraktiv ɛlimɛnt dɛn (lɛk <li>s ɔ <div>s) nɔ de gi klik ɔ tap afɔdans.
Mek shɔ se yu nɔ yuz di standad .btnklas dɛn we de ya .
Wit <button>s, yu kin mek yus bak to di disabledatribyut insted of di .disabledklas. I sɔri fɔ no se <a>s nɔ de sɔpɔt di disabled atribyut.
Flush fɔ yuz am
Ad .list-group-flushfɔ pul sɔm bɔda dɛn ɛn rawnd kɔna dɛn fɔ rɛnd list grup aytem dɛn ed-to-ɛj insay wan mama kɔntena (ɛgz., kad dɛn).
Kras jɔsto odio
Dapibus ac fasilisis in
Morbi leo risus
Porta ac konsectetur wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan
Vestibulum na di eros
Bifo ɛn biɛn
Ad .list-group-horizontalfɔ chenj di layout fɔ di list grup aytem dɛn frɔm vertikal to ɔrizɔntal akɔdin to ɔl di brekpɔynt dɛn. Ɔda we de fɔ du dat, pik wan rispɔnsiv vayriɔnt .list-group-horizontal-{sm|md|lg|xl}fɔ mek wan list grup ɔrizɔntal stat na da brekpɔynt de in min-width. Naw, ɔrizɔntal list grup dɛn nɔ kin jɔyn wit flush list grup dɛn.
ProTip: Yu want ikwal-wid list grup aytem dɛn we yu ɔrizɔntal? Ad .flex-fillto ɛni list grup aytem.
Kras jɔsto odio
Dapibus ac fasilisis in
Morbi leo risus
Kras jɔsto odio
Dapibus ac fasilisis in
Morbi leo risus
Kras jɔsto odio
Dapibus ac fasilisis in
Morbi leo risus
Kras jɔsto odio
Dapibus ac fasilisis in
Morbi leo risus
Kras jɔsto odio
Dapibus ac fasilisis in
Morbi leo risus
Klas dɛn we de tɔk bɔt di kɔntɛks
Yuz kɔntɛkstual klas fɔ stayl list aytem dɛn wit stetful bakgrɔn ɛn kɔlɔ.
Dapibus ac fasilisis in
Wan simpul praymari list grup aytem
Wan simpul sɛkɔndari list grup aytem
Wan simpul sakses list grup aytem
Wan simpul denja list grup aytem
Wan simpul wɔnin list grup aytem
Wan simpul info list grup aytem
Wan simpul layt list grup aytem
Wan simpul dak list grup aytem
Kɔntɛkstual klas dɛn kin wok bak wit .list-group-item-action. Notis di addɛshɔn fɔ di hova stayl dɛn ya we nɔ de na di ɛgzampul we bin dɔn pas. Di .activestet de sɔpɔt bak; aplay am fɔ sho wan aktif sɛlɛkshɔn pan wan kɔntɛkstual list grup aytem.
Yuz kala fɔ ad minin de jɔs gi wan vijual indikashɔn, we dɛn nɔ go gi to di wan dɛn we de yuz ɛtɛknɔlɔji dɛn we de ɛp – lɛk skrin rida dɛn. Mek shɔ se di infɔmeshɔn we dɛn sho wit di kɔlɔ de sho klia wan frɔm di tin we de insay insɛf (ɛgz. di tɛks we yu de si), ɔ dɛn put am insay ɔda we dɛn, lɛk ɔda tɛks we dɛn ayd wit di .sr-onlyklas.
Wit badge dɛn
Ad badge dɛn to ɛni list grup aytem fɔ sho di kɔnt dɛn we dɛn nɔ rid, di tin dɛn we dɛn de du, ɛn ɔda tin dɛn wit di ɛp we sɔm yutiliti dɛn de gi .
Kras jɔsto odio14 we de tɔk bɔt
Dapibus ac fasilisis in2. Di wan dɛn we de
Morbi leo risus1. Di wan dɛn we de
Kɔstɔm kɔntinyu
Ad klos to ɛni HTML insay, ivin fɔ link list grup dɛn lɛk di wan we de dɔŋ ya, wit di ɛp fɔ flexbox utilities .
Yuz di tab JavaSkript plɔgin—inklud am wan wan ɔ tru di bootstrap.jsfayl we dɛn dɔn kɔmpilayt—fɔ ɛkstɛnd wi list grup fɔ mek tabbul pan dɛn fɔ lokal kɔntinyu.
Velit aute mollit ipsum ad dolor konsectetur nula ofisia kulpa adipisisin eksasaiz fugiat tempor. Voluptate deserunt sidon sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt voluptate konsektetur eksasaiz id ut nulla. Ea ɛn fugiat aliquip nostrud sunt incididunt kɔnsɛkt kulpa alikwip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud 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.
Yuz data atribyut dɛn
Yu kin aktiv wan list grup nevigishɔn we yu nɔ rayt ɛni JavaSkript bay we yu jɔs spɛsifa data-toggle="list"ɔ pan wan ɛlimɛnt. Yuz dɛn data atribyut dɛn ya na .list-group-item.
Yu kin yuz JavaSkript fɔ yuz am
Enable tabbable list item via JavaScript (ɛni list aytem nid fɔ aktiv wan wan):
Yu kin aktiv wan wan list aytem insay sɔm we dɛn:
Fade effekt we yu de du
Fɔ mek tab dɛn panɛl fayn insay, ad .fadeto ɛni wan pan dɛn .tab-pane. Di fɔs tab pan fɔ gɛt bak .showfɔ mek di fɔs tin dɛn we de insay de sho.
Di we aw dɛn de du am
$().tab fɔ di wan dɛn
Aktiv wan list aytem ɛlimɛnt ɛn kɔntinyu kɔntena. Tab fɔ gɛt ɛni wan pan wan data-targetɔ wan hrefwe de tɔch wan kɔntena node na di DOM.
.tab('sho') .
Pik di list aytem we dɛn gi ɛn sho di pan we gɛt fɔ du wit am. Ɛni ɔda list aytem we dɛn bin dɔn pik bifo tɛm nɔ kin pik ɛn di pan we gɛt fɔ du wit am kin ayd. Ritɔn to di pɔsin we kɔl bifo dɛn rili sho di tab pan (fɔ ɛgzampul, bifo di shown.bs.tabtin apin).
Di tin dɛn we kin apin
We yu de sho nyu tab, di tin dɛn we de apin de faya insay di ɔda we we de dɔŋ ya:
hide.bs.tab(na di tab we de wok naw)
show.bs.tab(na di tab we dɛn go sho)
hidden.bs.tab(na di fɔs aktif tab, di sem wan we bin de fɔ di hide.bs.tabivin)
shown.bs.tab(na di nyu-aktiv tab we jɔs sho, di sem wan we de fɔ di show.bs.tabivin)
If no tab nɔ bin dɔn ɔlrɛdi aktif, di hide.bs.tabɛn hidden.bs.tabivin dɛn nɔ go faya.
Di kayn tin we apin
Tɔk bɔt
sho.bs.tab fɔ sho
Dis ivent de faya pan tab sho, bɔt bifo dɛn dɔn sho di nyu tab. Yuz event.targetɛn event.relatedTargetfɔ tɔch di aktiv tab ɛn di aktiv tab we bin de bifo (if i de) rispɛktful wan.
we dɛn sho.bs.tab
Dis ivent de faya pan tab sho afta dɛn dɔn sho wan tab. Yuz event.targetɛn event.relatedTargetfɔ tɔch di aktiv tab ɛn di aktiv tab we bin de bifo (if i de) rispɛktful wan.
ayd.bs.tab fɔ di wan dɛn we de
Dis ivent de faya we dɛn fɔ sho nyu tab (ɛn so di fɔs aktif tab fɔ ayd). Yuz event.targetɛn event.relatedTargetfɔ tɔch di tab we de wok naw ɛn di nyu tab we go aktiv jisnɔ, rispɛktful wan.
di tab we dɛn ayd.bs
Dis ivent de faya afta dɛn dɔn sho nyu tab (ɛn so di fɔs aktif tab de ayd). Yuz event.targetɛn event.relatedTargetfɔ tɔch di fɔs aktif tab ɛn di nyu aktif tab, rispɛktful wan.