ginshiƙai

Koyi yadda ake canza ginshiƙai tare da ɗimbin zaɓuɓɓuka don daidaitawa, oda, da kashewa godiya ga tsarin grid ɗin mu na flexbox. Ƙari ga haka, duba yadda ake amfani da azuzuwan ginshiƙi don sarrafa faɗin abubuwan da ba na grid ba.

A wannan shafi

A kula! Tabbatar karanta shafin Grid da farko kafin nutsewa cikin yadda ake gyarawa da keɓance ginshiƙan grid ɗinku.

Yadda suke aiki

ginshiƙai suna ginawa akan ginin grid's flexbox. Flexbox yana nufin muna da zaɓuɓɓuka don canza ginshiƙai ɗaya da gyara ƙungiyoyin ginshiƙai a matakin jere . Kuna zaɓi yadda ginshiƙai ke girma, raguwa, ko kuma canza su.
Lokacin gina shimfidar grid, duk abun ciki yana tafiya cikin ginshiƙai. Matsayin grid na Bootstrap yana tafiya daga akwati zuwa jere zuwa shafi zuwa abun cikin ku. A lokuta da ba kasafai ba, kuna iya haɗa abun ciki da ginshiƙi, amma ku sani za a iya samun sakamakon da ba a yi niyya ba.
Bootstrap ya ƙunshi azuzuwan da aka ƙirƙira don ƙirƙira sauri, shimfidu masu amsawa. Tare da wuraren hutu shida da dozin ginshiƙai a kowane matakin grid, muna da azuzuwan da yawa da aka riga aka gina muku don ƙirƙirar shimfidar da kuke so. Ana iya kashe wannan ta hanyar Sass idan kuna so.

Daidaitawa

Yi amfani da kayan aikin jeri na flexbox don daidaita ginshiƙai a tsaye da a kwance.

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 class="row justify-content-evenly">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </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 5matakan grid shida.

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-5">
      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: 6, 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 .me-autotilasta ginshiƙan 'yan uwan juna daga juna.

.col-md-4

.col-md-4 .ms-auto

.col-md-3 .ms-md-auto

.col-auto .ni-auto

.col-auto

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto me-auto">.col-auto .me-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

Azuzuwan ginshiƙan tsaye

Hakanan .col-*za'a iya amfani da azuzuwan a waje .rowdon ba da wani yanki takamaiman faɗin. A duk lokacin da aka yi amfani da azuzuwan ginshiƙi azaman yaran jere ba kai tsaye ba, ana barin mashin ɗin.

.col-3: nisa na 25%

.col-sm-9: Nisa na 75% sama da sm breakpoint

<div class="col-3 bg-light p-3 border">
  .col-3: width of 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
  .col-sm-9: width of 75% above sm breakpoint
</div>

Ana iya amfani da azuzuwan tare da abubuwan amfani don ƙirƙirar hotuna masu iyo. Tabbatar ku nannade abun ciki a cikin .clearfixmurfi don share ruwa idan rubutun ya fi guntu.

Sakin layi na rubutun majigi. Muna amfani da shi anan don nuna amfani da ajin clearfix. Muna ƙara ƴan jimloli marasa ma'ana anan don nuna yadda ginshiƙan ke hulɗa a nan tare da hoton da ke iyo.

Kamar yadda kuke gani sakin layi da kyau sun zagaye hoton da ke iyo. Yanzu yi tunanin yadda wannan zai yi kama da wasu ainihin abun ciki a nan, maimakon kawai wannan rubutu mai ban sha'awa wanda ke ci gaba da ci gaba, amma a zahiri ba ya isar da wani bayani na gaske a. Yana ɗaukar sarari kawai kuma bai kamata a karanta da gaske ba.

Amma duk da haka, ga ku, har yanzu kuna dagewa wajen karanta wannan rubutu mai riƙe da wuri, kuna fatan samun ƙarin fahimta, ko wasu ɓoyayyun kwai na busassun abun ciki. Abin dariya, watakila. Abin takaici, babu ko ɗaya a nan.

<div class="clearfix">
  <img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">

  <p>
    A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
  </p>

  <p>
    As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
  </p>

  <p>
    And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
  </p>
</div>