Ƙungiyoyin jeri sassa ne masu sassauƙa da ƙarfi don nuna jerin abubuwan ciki. Gyara kuma ƙara su don tallafawa kusan kowane abun ciki a ciki.
Misali na asali
Ƙungiya mafi mahimmanci shine jerin da ba a ba da oda ba tare da abubuwan jeri da kuma azuzuwan da suka dace. Gina shi tare da zaɓuɓɓukan da suka biyo baya, ko tare da CSS ɗin ku kamar yadda ake buƙata.
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum da eros
Abubuwa masu aiki
Ƙara .activezuwa .list-group-itemdon nuna zaɓin aiki na yanzu.
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum da eros
Abubuwan da aka kashe
Ƙara .disabledzuwa .list-group-itemdon ganin an kashe shi . Lura cewa wasu abubuwa tare da .disabledsu kuma za su buƙaci JavaScript na al'ada don musaki cikakken abubuwan latsa su (misali, hanyoyin haɗin gwiwa).
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum da eros
Hanyoyin haɗi da maɓalli
Yi amfani <a>da s ko <button>s don ƙirƙirar abubuwan ƙungiyar masu aiki tare da matsawa, naƙasasshe, da jihohi masu aiki ta ƙara .list-group-item-action. Mun ware waɗannan azuzuwan-zurfin don tabbatar da jerin ƙungiyoyin da aka yi daga abubuwan da ba su da alaƙa (kamar <li>s ko <div>s) ba su ba da damar dannawa ko taɓawa ba.
Tabbatar kada kuyi amfani da daidaitattun .btnazuzuwan nan .
Tare da <button>s, zaku iya amfani da disabledsifa maimakon .disabledaji. Abin baƙin ciki, <a>s ba sa goyan bayan sifa na naƙasassu.
Fitowa
Ƙara .list-group-flushdon cire wasu iyakoki da sasanninta masu zagaye don sanya jerin abubuwan rukuni daga gefe zuwa-bashi a cikin akwati na iyaye (misali, katunan).
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum da eros
A kwance
Ƙara .list-group-horizontaldon canza shimfidar jerin abubuwan ƙungiyar daga tsaye zuwa kwance a duk wuraren karya. A madadin, zaɓi bambance-bambancen amsawa .list-group-horizontal-{sm|md|lg|xl}don sanya jerin rukuni a kwance farawa daga wurin hutun min-width. A halin yanzu ƙungiyoyin jeri a kwance ba za a iya haɗa su da ƙungiyoyin jeri ba.
ProTip: Kuna son abubuwan rukuni masu faɗi daidai lokacin da a kwance? Ƙara .flex-fillzuwa kowane abu rukuni na jeri.
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Azuzuwan yanayi
Yi amfani da azuzuwan mahallin don salon jerin abubuwa tare da kyakkyawan yanayi da launi.
Dapibus ac facilisis in
Abun rukuni mai sauƙi na farko
Abun rukuni mai sauƙi na sakandare
Abun rukuni mai sauƙi na nasara
Abun rukuni mai sauƙi na jerin haɗari
Abun rukuni mai sauƙi na faɗakarwa
Abun rukuni mai sauƙi na jerin bayanai
Abun jerin haske mai sauƙi
Abun rukuni mai sauƙi mai duhu
Hakanan azuzuwan yanayi suna aiki tare da .list-group-item-action. Lura da ƙari na salon shawagi anan ba a cikin misalin da ya gabata. Har ila yau ana tallafawa ita ce .activejihar; yi amfani da shi don nuna zaɓi mai aiki akan abun rukunin mahallin mahallin.
Yin amfani da launi don ƙara ma'ana kawai yana ba da alamar gani, wanda ba za a isar da shi ga masu amfani da fasahar taimako ba - kamar masu karanta allo. Tabbatar cewa bayanin da launi ke nunawa ko dai a bayyane yake daga abun cikin kanta (misali rubutun bayyane), ko kuma an haɗa shi ta hanyar madadin, kamar ƙarin rubutu da aka ɓoye tare da .sr-onlyajin.
Tare da baji
Ƙara bajoji zuwa kowane abu na rukuni don nuna ƙididdiga marasa karantawa, ayyuka, da ƙari tare da taimakon wasu kayan aiki .
Cras justo odio14
Dapibus ac facilisis in2
Morbi leo risus1
Abun ciki na al'ada
Ƙara kusan kowane HTML a ciki, har ma don ƙungiyoyin jeri masu alaƙa kamar wanda ke ƙasa, tare da taimakon kayan aikin flexbox .
Yi amfani da shafin JavaScript plugin-haɗa shi ɗaiɗaiku ko ta hanyar bootstrap.jsfayil ɗin da aka haɗe-don tsawaita rukunin jerin mu don ƙirƙirar fakitin abun ciki na gida.
Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ko kadan lokaci sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididdunt consectetur culpa aliquip 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.
Amfani da bayanan halayen
Kuna iya kunna jerin kewayawa na rukuni ba tare da rubuta kowane JavaScript ba ta hanyar ƙididdigewa kawai data-toggle="list"ko akan wani abu. Yi amfani da waɗannan halayen bayanan akan .list-group-item.
Ta hanyar JavaScript
Kunna jerin abubuwan da za a iya amfani da su ta hanyar JavaScript (kowane abu na lissafin yana buƙatar kunna shi daban):
Kuna iya kunna abin jeri ɗaya ta hanyoyi da yawa:
Fade sakamako
Don sanya rukunin shafuka su shuɗe, ƙara .fadezuwa kowane .tab-pane. Rukunin shafin farko kuma dole ne ya .showsanya abun cikin farko a bayyane.
Hanyoyin
$().taba
Yana kunna abun jeri da kwandon abun ciki. Tab ya kamata ya kasance yana da ko dai data-targetko wani hrefkumburin kwantena mai niyya a cikin DOM.
.tab('show')
Yana zaɓar abin lissafin da aka bayar kuma yana nuna aikin haɗin gwiwa. Duk wani jerin abubuwan da aka zaɓa a baya ya zama ba zaɓaɓɓu ba kuma ana ɓoye abin da ke tattare da shi. Komawa ga mai kira kafin a nuna ainihin ɓangaren shafin (misali, kafin shown.bs.tababin ya faru).
Abubuwan da suka faru
Lokacin nuna sabon shafin, abubuwan da suka faru sun yi wuta a cikin tsari mai zuwa:
hide.bs.tab(a kan shafin mai aiki na yanzu)
show.bs.tab(a kan shafin da za a nuna)
hidden.bs.tab(akan shafin da ya gabata mai aiki, iri ɗaya da na hide.bs.tabtaron)
shown.bs.tab(akan sabon shafin da aka nuna, iri ɗaya da na show.bs.tabtaron)
Idan babu shafin da ya riga ya fara aiki, ba za a kori abubuwan hide.bs.tabda abubuwan da suka faru ba.hidden.bs.tab
Nau'in taron
Bayani
nuna.bs.tab
Wannan taron yana gobara akan nunin shafin, amma kafin a nuna sabon shafin. Yi amfani event.targetda event.relatedTargetniyya shafi mai aiki da shafin da ya gabata (idan akwai) bi da bi.
nuna.bs.tab
Wannan taron yana gobara akan nunin shafin bayan an nuna shafin. Yi amfani event.targetda event.relatedTargetniyya shafi mai aiki da shafin da ya gabata (idan akwai) bi da bi.
boye.bs.tab
Wannan taron yana kunna wuta lokacin da za a nuna sabon shafin (don haka za a ɓoye shafin da ya gabata). Yi amfani event.targetda event.relatedTargetniyya shafi mai aiki na yanzu da sabon shafin da za a yi aiki nan ba da jimawa ba, bi da bi.
boye.bs.tab
Wannan taron yana gobara bayan an nuna sabon shafin (saboda haka shafin da ya gabata yana ɓoye). Yi amfani event.targetda event.relatedTargetniyya shafi na baya mai aiki da sabon shafin mai aiki, bi da bi.