Tsarin Grid
Yi amfani da grid ɗin mu ta hannu-farko mai ƙarfi don gina shimfidu na kowane nau'i da masu girma dabam godiya ga tsarin ginshiƙi goma sha biyu, tsoffin matakan amsawa guda biyar, masu canji na Sass da mixins, da yawa na azuzuwan da aka ƙayyade.
Tsarin grid na Bootstrap yana amfani da jerin kwantena, layuka, da ginshiƙai don tsarawa da daidaita abun ciki. An gina shi da flexbox kuma yana da cikakkiyar amsa. Da ke ƙasa akwai misali da zurfin kallon yadda grid ya taru.
Sabo zuwa ko wanda ba a saba da flexbox? Karanta wannan jagorar CSS Tricks flexbox jagora don bango, kalmomi, jagorori, da snippets na lamba.
Misalin da ke sama yana ƙirƙira ginshiƙai daidai-daidai guda uku akan kanana, matsakaita, manya, da ƙarin manyan na'urori ta amfani da ƙayyadaddun azuzuwan grid ɗinmu. Waɗannan ginshiƙan suna tsakiya a cikin shafi tare da iyaye .container
.
Karyar da shi, ga yadda yake aiki:
- Kwantena suna samar da hanyar tsakiya da kwance abubuwan da ke cikin rukunin yanar gizon ku. Yi amfani
.container
don faɗin pixel mai amsa ko.container-fluid
donwidth: 100%
duk girman kallo da girman na'ura. - Layuka sune nade-nade don ginshiƙai. Kowane ginshiƙi yana da a kwance
padding
(wanda ake kira gutter) don sarrafa sarari tsakanin su. Anapadding
fuskantar wannan a kan layuka tare da margin mara kyau. Ta wannan hanyar, duk abubuwan da ke cikin ginshiƙan ku an daidaita su da gani zuwa gefen hagu. - A cikin shimfidar grid, abun ciki dole ne a sanya shi a cikin ginshiƙai kuma ginshiƙai kawai na iya zama yaran layuka.
- Godiya ga flexbox, ginshiƙan grid ba tare da ƙayyadadden ƙayyadaddun bayanai
width
ba za su tsara ta atomatik azaman ginshiƙan faɗin faɗin daidai. Misali, lokuta hudu.col-sm
kowannensu zai kasance mai faɗi 25% kai tsaye daga ƙaramin madaidaicin wuri da sama. Dubi sashin ginshiƙan-tsarin kai don ƙarin misalai. - Azuzuwan ginshiƙi suna nuna adadin ginshiƙan da kuke son amfani da su daga cikin yuwuwar 12 a kowane jere. Don haka, idan kuna son ginshiƙai daidai-da-ƙasa guda uku a faɗin, kuna iya amfani da
.col-4
. - An saita ginshiƙan
width
cikin kashi-kashi, don haka koyaushe suna da ruwa kuma suna da girma dangane da ɓangaren iyayensu. - ginshiƙai suna da a kwance
padding
don ƙirƙirar gutters tsakanin ginshiƙai ɗaya, duk da haka, zaku iya ciremargin
daga layuka kumapadding
daga ginshiƙan tare da.no-gutters
kan.row
. - Don sanya grid mai amsawa, akwai wuraren karya grid guda biyar, ɗaya don kowane wurin hutu mai amsawa : duk wuraren karya (ƙananan ƙarami), ƙarami, matsakaici, babba, da ƙari babba.
- Matsakaicin grid suna dogara ne akan mafi ƙarancin tambayoyin kafofin watsa labarai mai faɗi, ma'ana suna aiki akan waccan wurin hutu ɗaya da duk waɗanda ke sama (misali,
.col-sm-4
ya shafi ƙanana, matsakaita, manya, da ƙarin manyan na'urori, amma ba wurin hutu na farko baxs
). - Kuna iya amfani da azuzuwan grid da aka riga aka ayyana (kamar
.col-4
) ko Sass mixins don ƙarin alamar ma'ana.
Yi hankali da iyakoki da kwari a kusa da flexbox , kamar rashin iya amfani da wasu abubuwan HTML azaman kwantena masu sassauƙa .
Yayin da Bootstrap ke amfani em
da s ko rem
s don ayyana yawancin masu girma dabam, px
s ana amfani da su don wuraren karya grid da faɗin akwati. Wannan saboda faɗin wurin kallo yana cikin pixels kuma baya canzawa tare da girman font .
Dubi yadda sassan tsarin grid na Bootstrap ke aiki a cikin na'urori da yawa tare da tebur mai amfani.
Ƙarin ƙarami <576px |
Ƙananan ≥576px |
Matsakaici ≥768px |
Babban ≥992px |
Babban girma ≥1200px |
|
---|---|---|---|---|---|
Matsakaicin faɗin kwantena | Babu (atomatik) | 540px ku | 720px ku | 960px ku | 1140px |
Gabatarwar aji | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
# na ginshiƙai | 12 | ||||
Faɗin gutter | 30px (15px a kowane gefen shafi) | ||||
Nestable | Ee | ||||
Yin odar ginshiƙi | Ee |
Yi amfani da takamaiman azuzuwan ginshiƙa don sauƙin girman shafi ba tare da fayyace aji mai ƙididdiga kamar .col-sm-6
.
Misali, anan akwai shimfidar grid guda biyu waɗanda suka shafi kowace na'ura da tashar kallo, daga xs
zuwa xl
. Ƙara kowane adadin azuzuwan marasa raka'a ga kowane wurin hutu da kuke buƙata kuma kowane shafi zai zama faɗi ɗaya.
Za a iya karya ginshiƙan faɗin daidai-wani zuwa layuka da yawa, amma akwai bug ɗin flexbox na Safari wanda ya hana wannan aiki ba tare da bayyananne flex-basis
ko border
. Akwai hanyoyin da za a bi don tsofaffin nau'ikan burauza, amma bai kamata su zama dole ba idan kun saba.
Tsaya ta atomatik don ginshiƙan grid na flexbox shima yana nufin zaku iya saita faɗin shafi ɗaya kuma ku sa ginshiƙan ƴan uwan su yi girma ta atomatik kewaye da shi. Kuna iya amfani da azuzuwan grid da aka riga aka ƙayyade (kamar yadda aka nuna a ƙasa), grid mixins, ko faɗin layi. Lura cewa sauran ginshiƙan za su sake girma komai faɗin ginshiƙin tsakiya.
Yi amfani col-{breakpoint}-auto
da azuzuwan don girman ginshiƙai dangane da faɗin yanayin abun ciki.
Ƙirƙirar ginshiƙai masu faɗi daidai-waɗanda waɗanda ke faɗin layuka da yawa ta hanyar saka .w-100
inda kake son ginshiƙan su karya zuwa sabon layi. Sanya hutun ya zama mai amsawa ta hanyar haɗawa .w-100
da wasu kayan aikin nuni masu amsawa .
Gudun Bootstrap ya ƙunshi matakai biyar na azuzuwan ƙayyadaddun ƙayyadaddun ƙayyadaddun tsari don gina ƙaƙƙarfan shimfidu masu amsawa. Keɓance girman ginshiƙan ku akan ƙarin ƙanana, ƙanana, matsakaici, manya, ko ƙarin manyan na'urori duk da haka kun ga sun dace.
Don grid waɗanda suke ɗaya daga ƙarami na na'urori zuwa babba, yi amfani .col
da .col-*
darussa. Ƙayyade aji mai lamba lokacin da kuke buƙatar ginshiƙi mai girma na musamman; in ba haka ba, jin kyauta don tsayawa .col
.
Yin amfani da saitin .col-sm-*
azuzuwan guda ɗaya, zaku iya ƙirƙirar tsarin grid na asali wanda ke farawa a tsaye kuma ya zama a kwance a ƙaramar madaidaicin wurin ( sm
).
Ba sa son ginshiƙan ku su taru a cikin wasu matakan grid? Yi amfani da haɗin azuzuwan daban-daban don kowane matakin kamar yadda ake buƙata. Dubi misalin da ke ƙasa don kyakkyawan ra'ayi na yadda duk yake aiki.
Yi amfani da kayan aikin jeri na flexbox don daidaita ginshiƙai a tsaye da a kwance.
Za a iya cire magudanar ruwa tsakanin ginshiƙai a cikin azuzuwan grid ɗin da aka riga aka ayyana tare da .no-gutters
. Wannan yana kawar da mummunan margin
s daga .row
da kuma kwance padding
daga duk ginshiƙan yara nan da nan.
Ga lambar tushe don ƙirƙirar waɗannan salon. Lura cewa tsallakewar ginshiƙi an keɓance shi zuwa ginshiƙan yara na farko kawai kuma an yi niyya ta hanyar zaɓin sifa . Duk da yake wannan yana haifar da ƙarin takamaiman zaɓi, ginshiƙan ginshiƙan har yanzu ana iya ƙera shi tare da abubuwan amfani tazara .
Kuna buƙatar ƙirar gefe-zuwa-baki? Sauke iyaye .container
ko .container-fluid
.
A aikace, ga yadda yake kama. Lura za ku iya ci gaba da amfani da wannan tare da duk wasu azuzuwan grid da aka ƙirƙira (ciki har da faɗin shafi, matakan amsawa, sake yin oda, da ƙari).
Idan an sanya fiye da ginshiƙai 12 a cikin jeri ɗaya, kowane rukunin ƙarin ginshiƙai, a matsayin raka'a ɗaya, za su naɗe kan sabon layi.
Tun daga 9 + 4 = 13> 12, wannan div mai faɗin 4-column yana lulluɓe akan sabon layi azaman ɗaya mai jujjuyawa.
ginshiƙai na gaba suna ci gaba tare da sabon layi.
Karye ginshiƙai zuwa sabon layi a cikin flexbox yana buƙatar ƙaramin hack: ƙara wani yanki tare da width: 100%
duk inda kake son naɗa ginshiƙan zuwa sabon layi. Yawanci ana yin wannan tare da .row
s da yawa, amma ba kowace hanyar aiwatarwa ba ce zata iya yin lissafin wannan.
Hakanan kuna iya amfani da wannan hutun a takamaiman wuraren hutu tare da kayan aikin nuninmu masu amsawa .
Yi amfani .order-
da azuzuwan don sarrafa tsari na gani na abun cikin ku. Waɗannan azuzuwan suna amsawa, saboda haka zaku iya saita ta order
wurin hutu (misali, .order-1.order-md-2
). Ya haɗa da goyan bayan 1
duk 12
matakan grid biyar.
Hakanan akwai masu amsawa .order-first
da .order-last
azuzuwan waɗanda ke canza order
nau'in kashi ta amfani order: -1
da order: 13
( order: $columns + 1
), bi da bi. Hakanan ana iya haɗa waɗannan azuzuwan tare da .order-*
azuzuwan ƙididdiga kamar yadda ake buƙata.
Kuna iya daidaita ginshiƙan grid ta hanyoyi biyu: .offset-
azuzuwan grid ɗinmu masu amsawa da abubuwan amfaninmu na gefe . An daidaita azuzuwan grid don dacewa da ginshiƙai yayin da gefe ke da amfani ga shimfidu masu sauri inda faɗin kashewa ke canzawa.
Matsar da ginshiƙai zuwa dama ta amfani .offset-md-*
da azuzuwan. Waɗannan azuzuwan suna ƙara gefen hagu na shafi ta *
ginshiƙai. Misali, .offset-md-4
yana motsawa .col-md-4
sama da ginshiƙai huɗu.
Baya ga share ginshiƙi a wuraren karya masu amsawa, ƙila za ku buƙaci sake saita gyare-gyare. Dubi wannan a aikace a cikin misalin grid .
Tare da matsawa zuwa flexbox a cikin v4, zaku iya amfani da abubuwan amfani da gefe kamar .mr-auto
tilasta ginshiƙan 'yan uwan juna daga juna.
Don shigar da abun cikin ku tare da tsoho grid, ƙara sabon .row
da saitin .col-sm-*
ginshiƙai a cikin .col-sm-*
ginshiƙi da ke akwai. Layukan da aka kafa yakamata su haɗa da saitin ginshiƙai waɗanda suka haɗa har zuwa 12 ko ƙasa da haka (ba a buƙatar ku yi amfani da duk ginshiƙai 12 da ake da su ba).
Lokacin amfani da fayilolin Sass tushen Bootstrap, kuna da zaɓi na amfani da masu canji na Sass da haɗe-haɗe don ƙirƙirar shimfidar shafi na al'ada, ma'ana, da amsawa. Ƙididdigan azuzuwan grid ɗinmu suna amfani da waɗannan masu canji iri ɗaya da haɗe-haɗe don samar da gabaɗayan azuzuwan shirye-shiryen amfani don shimfidu masu saurin amsawa.
Maɓalli da taswirori suna ƙayyade adadin ginshiƙai, faɗin gutter, da wurin tambayar kafofin watsa labarai inda za a fara ginshiƙai masu iyo. Muna amfani da waɗannan don samar da azuzuwan grid da aka riga aka rubuta a sama, da kuma ga mahaɗin al'ada da aka jera a ƙasa.
Ana amfani da Mixins tare da masu canjin grid don samar da CSS na ma'ana don ginshiƙan grid ɗaya ɗaya.
Kuna iya canza masu canji zuwa ƙimar al'ada naku, ko kawai amfani da mixins tare da tsoffin ƙimar su. Ga misali na amfani da saitunan tsoho don ƙirƙirar shimfidar ginshiƙi biyu tare da tazara tsakanin.
Amfani da ginanniyar grid ɗin mu na Sass masu canji da taswira, yana yiwuwa a keɓance azuzuwan grid gaba ɗaya. Canja adadin tiers, girman tambayar kafofin watsa labarai, da faɗin akwati-sannan a sake tarawa.
Ana iya canza adadin ginshiƙan grid ta hanyar masu canjin Sass. $grid-columns
ana amfani da shi don samar da nisa (a cikin kashi) na kowane ginshiƙi yayin da yake $grid-gutter-width
saita faɗin magudanar ruwa.
Matsar da ginshiƙan da kansu, kuna iya tsara adadin matakan grid. Idan kuna son matakan grid guda huɗu kawai, zaku sabunta $grid-breakpoints
kuma $container-max-widths
zuwa wani abu kamar haka:
Lokacin yin kowane canje-canje ga masu canjin Sass ko taswira, kuna buƙatar adana canje-canjenku kuma ku sake tarawa. Yin hakan zai fitar da sabon saiti na azuzuwan grid da aka riga aka ƙayyade don faɗin shafi, daidaitawa, da oda. Hakanan za'a sabunta kayan aikin gani mai amsawa don amfani da wuraren karya na al'ada. Tabbatar da saita ƙimar grid a px
(ba rem
, em
, ko %
).