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.

Yadda yake aiki

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.

Ɗaya daga cikin ginshiƙai uku

<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 .containerdon faɗin pixel mai amsa ko .container-fluiddon width: 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. Ana paddingfuskantar 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 widthba za su tsara ta atomatik azaman ginshiƙan faɗin faɗin daidai. Misali, lokuta hudu .col-smkowannensu 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 widthcikin kashi-kashi, don haka koyaushe suna da ruwa kuma suna da girma dangane da ɓangaren iyayensu.
ginshiƙai suna da a kwance paddingdon ƙirƙirar gutters tsakanin ginshiƙai ɗaya, duk da haka, zaku iya cire margindaga layuka kuma paddingdaga ginshiƙan tare da .no-gutterskan .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-4ya shafi ƙanana, matsakaita, manya, da ƙarin manyan na'urori, amma ba wurin hutu na farko ba xs).
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 .

Zaɓuɓɓukan Grid

Yayin da Bootstrap ke amfani emda s ko rems don ayyana yawancin masu girma dabam, pxs 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

ginshiƙan shimfidawa ta atomatik

Yi amfani da takamaiman azuzuwan ginshiƙa don sauƙin girman shafi ba tare da fayyace aji mai ƙididdiga kamar .col-sm-6.

Daidai-nisa

Misali, anan akwai shimfidar grid guda biyu waɗanda suka shafi kowace na'ura da tashar kallo, daga xszuwa xl. Ƙara kowane adadin azuzuwan marasa raka'a ga kowane wurin hutu da kuke buƙata kuma kowane shafi zai zama faɗi ɗaya.

1 cikin 2

2 cikin 2

1 cikin 3

2 cikin 3

3 cikin 3

<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>

Matsakaicin faɗin Multi-line

Ƙirƙirar ginshiƙai masu faɗi daidai-waɗanda waɗanda ke faɗin layika da yawa ta saka .w-100wurin da kuke son ginshiƙan su karya zuwa sabon layi. Sanya hutun ya zama mai amsawa ta hanyar haɗawa .w-100da wasu kayan aikin nuni masu amsawa .

Akwai kwaro na flexbox na Safari wanda ya hana wannan aiki ba tare da fayyace flex-basisko border. Akwai hanyoyin da za a bi don tsofaffin nau'ikan burauza, amma bai kamata su zama dole ba idan masu binciken da kuke nema ba su fada cikin nau'ikan buggy ba.

col

<div class="container">
  <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>
</div>

Saita faɗin shafi ɗaya

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.

1 cikin 3

2 cikin 3 (fadi)

3 cikin 3

1 cikin 3

2 cikin 3 (fadi)

3 cikin 3

<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>

Canjin abun ciki mai faɗi

Yi amfani col-{breakpoint}-autoda azuzuwan don girman ginshiƙai dangane da faɗin yanayin abun ciki.

1 cikin 3

Canjin abun ciki mai faɗi

3 cikin 3

1 cikin 3

Canjin abun ciki mai faɗi

3 cikin 3

<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>

Azuzuwan amsa

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.

Duk wuraren karyawa

Don grids iri ɗaya daga ƙananan na'urori zuwa manya, yi amfani .colda .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.

col

kwal-8

col-4

<div class="container">
  <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>
</div>

Tari zuwa kwance

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 ƙaramin madaidaicin wurin ( sm).

kul-sm-8

kul-sm-4

col-sm

<div class="container">
  <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>
</div>

Mix da daidaita

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.

.col-md-8

.col-6 .col-md-4

.kol-6

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.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>
</div>

Gutters

Za'a iya daidaita magudanar ruwa ta hanyar faifan takamammen manne da azuzuwan amfani mara kyau. Don canza gutters a cikin jeri da aka bayar, haɗa abin amfani mara kyau a gefe akan abubuwan .rowda suka dace da padding akan .cols. Iyaye .containerko .container-fluidiyaye na iya buƙatar gyara su ma don guje wa ambaliya maras so, ta yin amfani da madaidaicin abin amfani.

Ga misali na keɓance grid ɗin Bootstrap a babban wurin lgkarya ( ) da sama. Mun ƙara .colmashin ɗin tare da .px-lg-5, musanya hakan .mx-lg-n5akan iyaye .rowsannan mu gyara abin .containernaɗe da .px-lg-5.

Kunshin ginshiƙi na al'ada

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
  </div>
</div>

ginshiƙan layi

Yi amfani da .row-cols-*azuzuwan amsa don saita adadin ginshiƙan da suka fi dacewa da abun ciki da shimfidar wuri. Ganin cewa .col-*azuzuwan al'ada sun shafi ginshiƙai ɗaya (misali, .col-md-4), ana saita azuzuwan ginshiƙan layi akan iyaye .rowazaman gajeriyar hanya.

Yi amfani da waɗannan azuzuwan ginshiƙai don ƙirƙirar shimfidu na grid da sauri ko don sarrafa shimfiɗan katin ku.

Rukunin

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Rukunin

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Rukunin

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Rukunin

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Rukunin

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Hakanan zaka iya amfani da rakiyar Sass mixin, row-cols():

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

Daidaitawa

Yi amfani da kayan aikin jeri na flexbox don daidaita ginshiƙai a tsaye da a kwance. Internet Explorer 10-11 baya goyan bayan daidaitawar abubuwa masu sassauƙa a tsaye lokacin da kwandon sassauƙa yana da min-heightkamar yadda aka nuna a ƙasa. Dubi Flexbugs #3 don ƙarin cikakkun bayanai.

Daidaita tsaye

Ɗaya daga cikin ginshiƙai uku

<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>

Ɗaya daga cikin ginshiƙai uku

<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>

Daidaito a kwance

Ɗaya daga cikin ginshiƙai biyu

<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>

Babu gutters

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 margins daga .rowda kuma kwance paddingdaga 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 .containerko .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

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).

.col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Kundin ginshiƙi

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.

.kol-9

.col-4
Tun daga 9 + 4 = 13> 12, wannan div mai faɗin 4-column yana lulluɓe akan sabon layi azaman ɗaya mai jujjuyawa.

.col-6
ginshiƙai na gaba suna ci gaba tare da sabon layi.

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 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>
</div>

Rushewar ginshiƙi

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 .rows da yawa, amma ba kowace hanyar aiwatarwa ba ce zata iya yin lissafin wannan.

.col-6 .col-sm-3

<div class="container">
  <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>
</div>

Hakanan kuna iya amfani da wannan hutun a takamaiman wuraren hutu tare da kayan aikin nuninmu masu amsawa .

.col-6 .col-sm-4

<div class="container">
  <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>
</div>

Ana sake yin oda

oda azuzuwan

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 orderwurin hutu (misali, .order-1.order-md-2). Ya haɗa da goyan bayan 1duk 12matakan grid biyar.

Na farko a cikin DOM, ba a aiwatar da oda ba

Na biyu a cikin DOM, tare da tsari mafi girma

Na uku a cikin DOM, tare da tsari na 1

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-12">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

Hakanan akwai masu amsawa .order-firstda .order-lastazuzuwan waɗanda ke canza ordernau'in kashi ta amfani order: -1da 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.

Na farko a cikin DOM, an yi oda a ƙarshe

Na biyu a cikin DOM, ba a ba da oda ba

Na uku a DOM, an fara oda

<div class="container">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered first
    </div>
  </div>
</div>

ginshiƙan kashewa

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.

Azuzuwan kashewa

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-4yana motsawa .col-md-4sama da ginshiƙai huɗu.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<div class="container">
  <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>
</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 .

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<div class="container">
  <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>
</div>

Ƙarfafa abubuwan amfani

Tare da matsawa zuwa flexbox a cikin v4, zaku iya amfani da abubuwan amfani da gefe kamar .mr-autotilasta ginshiƙan 'yan uwan juna daga juna.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

<div class="container">
  <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>
</div>

Gurasa

Don shigar da abun cikin ku tare da tsoho grid, ƙara sabon .rowda 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).

Mataki na 1: .col-sm-9

Mataki na 2: .col-8 .col-sm-6

Mataki na 2: .col-4 .col-sm-6

<div class="container">
  <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>
</div>

Sass mixins

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.

Masu canji

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.

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

Mixins

Ana amfani da Mixins tare da masu canjin grid don samar da CSS na ma'ana don ginshiƙan grid ɗaya ɗaya.

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

Misali amfani

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.

.example-container {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

Babban abun ciki

Abu na biyu

<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>

Keɓance grid

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.

ginshiƙai da gutters

Ana iya canza adadin ginshiƙan grid ta hanyar masu canjin Sass. $grid-columnsana amfani da shi don samar da nisa (a cikin kashi) na kowane ginshiƙi yayin da yake $grid-gutter-widthsaita faɗin magudanar ruwa.

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

Grid matakin

Matsar da ginshiƙan da kansu, kuna iya tsara adadin matakan grid. Idan kuna son matakan grid guda huɗu kawai, zaku sabunta $grid-breakpointskuma $container-max-widthszuwa wani abu kamar haka:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

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 %).