Katunan Bootstrap suna ba da kwandon abun ciki mai sassauƙa kuma mai yuwuwa tare da bambance-bambancen karatu da zaɓuɓɓuka.
Game da
Kati wani kwandon abun ciki mai sassauƙa ne kuma mai yuwuwa. Ya ƙunshi zaɓuɓɓuka don masu kai da ƙafafu, nau'in abun ciki iri-iri, launuka na mahallin mahallin, da zaɓuɓɓukan nuni masu ƙarfi. Idan kun saba da Bootstrap 3, katunan suna maye gurbin tsoffin fafuna, rijiyoyi, da thumbnails. Ana samun ayyuka iri ɗaya ga waɗannan abubuwan haɗin gwiwa azaman azuzuwan masu gyara don katunan.
Misali
An gina katunan tare da ƙaramin alama da salo sosai gwargwadon yiwuwa, amma har yanzu suna sarrafa don isar da ton na sarrafawa da keɓancewa. Gina tare da flexbox, suna ba da jeri mai sauƙi kuma suna haɗuwa da kyau tare da sauran abubuwan Bootstrap. Ba su da marginta tsohuwa, don haka yi amfani da kayan aikin tazarar yadda ake buƙata.
Da ke ƙasa akwai misalin katin asali tare da abun ciki mai gauraya da tsayayyen faɗi. Katuna ba su da tsayayyen faɗin da za su fara, don haka a zahiri za su cika cikakken faɗin ɓangaren mahaifa. Wannan yana da sauƙin keɓancewa tare da zaɓin girman mu daban-daban .
Taken katin
Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.
Katuna suna tallafawa nau'ikan abun ciki iri-iri, gami da hotuna, rubutu, ƙungiyoyin jeri, hanyoyin haɗin gwiwa, da ƙari. A ƙasa akwai misalan abin da ake tallafawa.
Jiki
Tushen ginin kati shine .card-body. Yi amfani da shi a duk lokacin da kuke buƙatar sashe mai santsi a cikin kati.
Wannan wasu rubutu ne a jikin katin.
Laƙabi, rubutu, da hanyoyin haɗin gwiwa
Ana amfani da taken katin ta ƙara .card-titlezuwa <h*>alama. Hakazalika, ana ƙara hanyoyin haɗin gwiwa a sanya su kusa da juna ta hanyar ƙara .card-linkzuwa <a>tag.
Ana amfani da rubutun kalmomi ta ƙara alama .card-subtitlezuwa <h*>alama. Idan an sanya abubuwan .card-titleda .card-subtitleabubuwan a cikin wani .card-bodyabu, taken katin da ƙaramin taken suna daidaitawa da kyau.
Taken katin
Rubutun kati
Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.
.card-img-topsanya hoto zuwa saman katin. Tare da .card-text, ana iya ƙara rubutu zuwa katin. Hakanan za'a iya tsara rubutu a .card-textciki tare da daidaitattun alamun HTML.
Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.
Jerin ƙungiyoyi
Ƙirƙirar lissafin abun ciki a cikin kati tare da ƙungiyar jeri.
Cras justo odio
Dapibus ac facilisis in
Vestibulum da eros
Fitattu
Cras justo odio
Dapibus ac facilisis in
Vestibulum da eros
Cras justo odio
Dapibus ac facilisis in
Vestibulum da eros
Kitchen nutse
Haɗa ku daidaita nau'ikan abun ciki da yawa don ƙirƙirar katin da kuke buƙata, ko jefa komai a ciki. Ana nunawa a ƙasa salon hoto, tubalan, salon rubutu, da rukunin jeri-duk an nannade su cikin ƙayyadaddun kati mai faɗi.
Taken katin
Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.
Katuna suna ɗauka babu takamaiman widthdon farawa, don haka za su yi faɗin 100% sai dai in an faɗi. Kuna iya canza wannan kamar yadda ake buƙata tare da CSS na al'ada, azuzuwan grid, grid Sass mixins, ko abubuwan amfani.
Yin amfani da alamar grid
Amfani da grid, kunsa katunan cikin ginshiƙai da layuka kamar yadda ake buƙata.
Magani na musamman
Tare da rubutu mai goyan baya a matsayin jagorar halitta zuwa ƙarin abun ciki.
Katuna sun haɗa da ƴan zaɓuɓɓuka don aiki tare da hotuna. Zaɓi daga sanya “mafi girman hoto” a kowane ƙarshen katin, lulluɓe hotuna tare da abun cikin katin, ko kawai saka hoton a cikin katin.
Maƙallan hoto
Hakazalika da masu kai da ƙafa, katunan na iya haɗawa da sama da ƙasa “manyan hoto”—hotuna a saman ko kasan katin.
Taken katin
Wannan babban kati ne tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.
An sabunta ta ƙarshe mintuna 3 da suka gabata
Taken katin
Wannan babban kati ne tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.
An sabunta ta ƙarshe mintuna 3 da suka gabata
Hoto mai rufi
Juya hoto zuwa bangon katin kuma rufe rubutun katin ku. Dangane da hoton, ƙila ko ƙila kuna buƙatar ƙarin salo ko kayan aiki.
Taken katin
Wannan babban kati ne tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.
An sabunta ta ƙarshe mintuna 3 da suka gabata
Lura cewa abun ciki bai kamata ya fi tsayin hoton girma ba. Idan abun ciki ya fi hoton girma za a nuna abun cikin a wajen hoton.
A kwance
Yin amfani da haɗin grid da azuzuwan masu amfani, ana iya yin katunan a kwance ta hanyar sada zumunci ta wayar hannu da amsawa. A cikin misalin da ke ƙasa, muna cire grid gutters tare .no-guttersda amfani .col-md-*da azuzuwan don sanya katin a kwance a wurin mdhutu. Ana iya buƙatar ƙarin gyare-gyare dangane da abun cikin katin ku.
Taken katin
Wannan babban kati ne tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.
An sabunta ta ƙarshe mintuna 3 da suka gabata
Salon katin
Katuna sun haɗa da zaɓuɓɓuka daban-daban don keɓance asalinsu, iyakoki, da launi.
Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.
Kai
Taken katin sakandare
Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.
Kai
Taken katin nasara
Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.
Kai
Taken katin haɗari
Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.
Kai
Taken katin gargadi
Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.
Kai
Taken katin bayanai
Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.
Kai
Take katin haske
Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.
Kai
Taken katin duhu
Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.
Isar da ma'ana ga fasahar taimako
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.
Iyaka
Yi amfani da abubuwan amfani kan iyaka don canza kawai border-colorkatin. Lura cewa zaku iya sanya .text-{color}azuzuwan akan iyaye .cardko juzu'in abubuwan da ke cikin katin kamar yadda aka nuna a ƙasa.
Kai
Taken katin farko
Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.
Kai
Taken katin sakandare
Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.
Kai
Taken katin nasara
Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.
Kai
Taken katin haɗari
Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.
Kai
Taken katin gargadi
Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.
Kai
Taken katin bayanai
Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.
Kai
Take katin haske
Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.
Kai
Taken katin duhu
Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.
Mixins utilities
Hakanan zaka iya canza iyakoki akan taken katin da ƙafa kamar yadda ake buƙata, har ma da cire su background-colortare da .bg-transparent.
Kai
Taken katin nasara
Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.
Tsarin katin
Baya ga salo abun ciki a cikin katunan, Bootstrap ya haɗa da ƴan zaɓuɓɓuka don shimfida jerin katunan. A halin yanzu, waɗannan zaɓuɓɓukan shimfidar wuri ba su da amsa .
Kungiyoyin katin
Yi amfani da ƙungiyoyin kati don yin katunan azaman guda ɗaya, abin da aka haɗe tare da faɗin faɗi da ginshiƙan tsayi daidai. Ƙungiyoyin kati suna farawa a jere kuma suna amfani da display: flex;su don haɗawa tare da nau'ikan nau'ikan da ke farawa daga wurin smkarya.
Taken katin
Wannan babban kati ne tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.
An sabunta ta ƙarshe mintuna 3 da suka gabata
Taken katin
Wannan katin yana da rubutu mai goyan baya a ƙasa azaman jagorar halitta zuwa ƙarin abun ciki.
An sabunta ta ƙarshe mintuna 3 da suka gabata
Taken katin
Wannan babban kati ne tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan katin yana da ma fiye da abun ciki mafi tsayi fiye da na farko don nuna daidai tsayin aikin.
An sabunta ta ƙarshe mintuna 3 da suka gabata
Lokacin amfani da ƙungiyoyin kati tare da ƙafafu, abun cikin su zai yi layi ta atomatik.
Taken katin
Wannan babban kati ne tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.
Taken katin
Wannan katin yana da rubutu mai goyan baya a ƙasa azaman jagorar halitta zuwa ƙarin abun ciki.
Taken katin
Wannan babban kati ne tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan katin yana da ma fiye da abun ciki mafi tsayi fiye da na farko don nuna daidai tsayin aikin.
Katin bene
Kuna buƙatar saitin daidai girman nisa da katunan tsayi waɗanda ba a haɗa su da juna ba? Yi amfani da benen kati.
Taken katin
Wannan kati ne mai tsayi tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.
An sabunta ta ƙarshe mintuna 3 da suka gabata
Taken katin
Wannan katin yana da rubutu mai goyan baya a ƙasa azaman jagorar halitta zuwa ƙarin abun ciki.
An sabunta ta ƙarshe mintuna 3 da suka gabata
Taken katin
Wannan babban kati ne tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan katin yana da ma fiye da abun ciki mafi tsayi fiye da na farko don nuna daidai tsayin aikin.
An sabunta ta ƙarshe mintuna 3 da suka gabata
Kamar dai tare da ƙungiyoyin katin, ƙafafun katin a cikin bene za su yi layi ta atomatik.
Taken katin
Wannan babban kati ne tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.
Taken katin
Wannan katin yana da rubutu mai goyan baya a ƙasa azaman jagorar halitta zuwa ƙarin abun ciki.
Taken katin
Wannan babban kati ne tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan katin yana da ma fiye da abun ciki mafi tsayi fiye da na farko don nuna daidai tsayin aikin.
Katunan Grid
Yi amfani da tsarin grid na Bootstrap da .row-colsazuzuwan sa don sarrafa ginshiƙan grid nawa (wanda aka nannade kewaye da katunan ku) da kuke nunawa kowane jere. Misali, anan shine .row-cols-1shimfida katunan akan ginshiƙi ɗaya, da .row-cols-md-2raba katunan huɗu zuwa daidai da faɗin layuka masu yawa, daga matsakaiciyar tsinkewa sama.
Taken katin
Wannan kati ne mai tsayi tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.
Taken katin
Wannan kati ne mai tsayi tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.
Taken katin
Wannan kati ne mai tsayi tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki.
Taken katin
Wannan kati ne mai tsayi tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.
Canza shi .row-cols-3kuma za ku ga kundi na huɗu na kati.
Taken katin
Wannan kati ne mai tsayi tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.
Taken katin
Wannan kati ne mai tsayi tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.
Taken katin
Wannan kati ne mai tsayi tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki.
Taken katin
Wannan kati ne mai tsayi tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.
Lokacin da kuke buƙatar tsayi daidai, ƙara .h-100zuwa katunan. Idan kuna son tsayin tsayi daidai ta tsohuwa, zaku iya saita $card-height: 100%a cikin Sass.
Taken katin
Wannan kati ne mai tsayi tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.
Taken katin
Wannan gajeren kati ne.
Taken katin
Wannan kati ne mai tsayi tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki.
Taken katin
Wannan kati ne mai tsayi tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.
ginshiƙan katin
Ana iya tsara katunan zuwa ginshiƙai irin na Masonry tare da CSS kawai ta hanyar naɗe su a cikin .card-columns. An gina katunan tare da columnkaddarorin CSS maimakon flexbox don sauƙin daidaitawa. Ana yin odar katunan daga sama zuwa ƙasa da hagu zuwa dama.
A kula! Nisan mil ɗin ku tare da ginshiƙan katin na iya bambanta. Don hana karyewar katuna a cikin ginshiƙai, dole ne mu saita su display: inline-blockkamar yadda column-break-inside: avoidba shine mafita ba tukuna.
Taken katin da ke lulluɓe zuwa sabon layi
Wannan kati ne mai tsayi tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ƙididdigar ƙididdiga ta ƙididdigewa.
Taken katin
Wannan katin yana da rubutu mai goyan baya a ƙasa azaman jagorar halitta zuwa ƙarin abun ciki.
An sabunta ta ƙarshe mintuna 3 da suka gabata
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.
Taken katin
Wannan katin yana da take na yau da kullun da gajeriyar sakin layi na rubutu a ƙasansa.
An sabunta ta ƙarshe mintuna 3 da suka gabata
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ƙididdigar ƙididdiga ta ƙididdigewa.
Taken katin
Wannan wani katin ne mai take da rubutu mai goyan baya a ƙasa. Wannan katin yana da wasu ƙarin abun ciki don sanya shi ɗan tsayi gabaɗaya.
An sabunta ta ƙarshe mintuna 3 da suka gabata
Hakanan ana iya tsawaita ginshiƙan katin da keɓancewa tare da wasu ƙarin lamba. Wanda aka nuna a ƙasa shine faɗaɗa .card-columnsajin ta amfani da CSS iri ɗaya da muke amfani da su — ginshiƙan CSS - don samar da saiti na matakan amsawa don canza adadin ginshiƙan.