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 Dabarun flexbox don bango, ƙamus, jagorori, da snippets na lamba.
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
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 ne 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 mafi yawan 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 |
Gaban 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.
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
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.
<div class="container">
<div class="row">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="w-100"></div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
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.
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Yi amfani col-{breakpoint}-auto
da azuzuwan don girman ginshiƙai dangane da faɗin yanayin abun ciki.
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
Ƙ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 .
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</div>
</div>
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 grids iri ɗaya daga ƙananan na'urori zuwa manya, yi amfani .col
da .col-*
darussa. Ƙayyade aji mai ƙididdiga lokacin da kuke buƙatar ginshiƙi mai girma na musamman; in ba haka ba, jin kyauta don tsayawa .col
.
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
Yin amfani da saitin .col-sm-*
azuzuwan guda ɗaya, zaku iya ƙirƙirar tsarin grid na asali wanda ke farawa a jere kafin ya zama a kwance tare da ƙarami ( sm
).
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
Ba sa son ginshiƙan ku su taru 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.
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-12 col-md-8">.col-12 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
Yi amfani da kayan aikin jeri na flexbox don daidaita ginshiƙai a tsaye da a kwance.
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
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 (gami da faɗin shafi, matakan amsawa, sake yin oda, da ƙari).
<div class="row no-gutters">
<div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
Idan an sanya fiye da ginshiƙai 12 a cikin jere ɗaya, kowane rukuni na ƙ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.
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>
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.
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<!-- Force next columns to break to new line -->
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
Hakanan kuna iya amfani da wannan hutun a takamaiman wuraren hutu tare da kayan aikin nuninmu masu amsawa .
<div class="row">
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<!-- Force next columns to break to new line at md breakpoint and up -->
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>
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.
<div class="container">
<div class="row">
<div class="col">
First, but unordered
</div>
<div class="col order-12">
Second, but last
</div>
<div class="col order-1">
Third, but first
</div>
</div>
</div>
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.
<div class="container">
<div class="row">
<div class="col order-last">
First, but last
</div>
<div class="col">
Second, but unordered
</div>
<div class="col order-first">
Third, but first
</div>
</div>
</div>
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.
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
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 .
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>
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.
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>
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).
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
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. Ƙididdigar azuzuwan grid ɗinmu na amfani da waɗannan masu canji iri ɗaya da masu gauraya 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 dabi'un al'ada na ku, ko kawai amfani da mixins tare da tsoffin ƙimar su. Anan ga misalin amfani da saitunan tsoho don ƙirƙirar shimfidar ginshiƙi biyu tare da tazara tsakanin.
<div class="example-container">
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>
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 ɗaya yayin da ke ba da $grid-gutter-width
damar takamaiman nisa waɗanda aka raba daidai da magudanar ruwa.padding-left
padding-right
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 %
).