in English

Inkingi

Wige uburyo bwo guhindura inkingi hamwe nintoki zamahitamo yo guhuza, gutumiza, no guhagarika dukesha sisitemu ya flexbox grid sisitemu. Byongeye, reba uburyo wakoresha ibyiciro byinkingi kugirango ucunge ubugari bwibintu bitari grid.

Kuriyi page

Umutwe! Wemeze gusoma urupapuro rwa mbere mbere yo kwibira muburyo bwo guhindura no gutunganya gride yawe.

Uburyo bakora

Inkingi zubaka kuri gride ya flexbox yububiko. Flexbox isobanura ko dufite amahitamo yo guhindura inkingi kugiti cye no guhindura amatsinda yinkingi kurwego . Hitamo uburyo inkingi zikura, kugabanuka, cyangwa guhinduka.
Iyo wubaka imiterere ya gride, ibirimo byose bijya murinkingi. Inzego za gride ya Bootstrap iva mubintu kugeza kumurongo kugeza kumurongo kubintu byawe. Mubihe bidasanzwe, urashobora guhuza ibirimo ninkingi, ariko umenye ko hashobora kubaho ingaruka zitateganijwe.
Bootstrap ikubiyemo ibyiciro byateganijwe mbere yo gukora imiterere yihuse. Hamwe nibice bitandatu hamwe ninkingi icumi kuri buri cyiciro cya grid, dufite ibyiciro byinshi byamasomo bimaze kubakwa kugirango ukore imiterere wifuza. Ibi birashobora guhagarikwa ukoresheje Sass niba ubishaka.

Guhuza

Koresha flexbox ihuza ibikorwa kugirango uhagarike kandi utambitse.

Guhuza neza

Imwe mu nkingi eshatu

html

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

Imwe mu nkingi eshatu

html

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

Guhuza utambitse

Imwe mu nkingi ebyiri

html

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

Gupfunyika inkingi

Niba inkingi zirenga 12 zishyizwe mumurongo umwe, buri tsinda ryinyongera zinkingi, nkigice kimwe, zizingira kumurongo mushya.

.col-9

.col-4
Kuva 9 + 4 = 13> 12, iyi 4-inkingi-ubugari ya div irazenguruka kumurongo mushya nkigice kimwe gihuza.

.col-6
Inkingi zikurikira zirakomeza kumurongo mushya.

html

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

Ikiruhuko

Kumena inkingi kumurongo mushya muri flexbox bisaba hack ntoya: ongeramo ikintu hamwe width: 100%aho ushaka hose kuzinga inkingi kumurongo mushya. Mubisanzwe ibi birangizwa na .rows nyinshi, ariko ntabwo uburyo bwose bwo kubishyira mubikorwa bushobora kubara ibi.

.col-6 .col-sm-3

html

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

Urashobora kandi gushira kuruhuka kumwanya wihariye hamwe nibikorwa byacu byerekana neza .

.col-6 .col-sm-4

html

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

Kwandika

Tegeka amasomo

Koresha .order-amasomo yo kugenzura gahunda igaragara yibirimo. Aya masomo arasubiza, urashobora rero gushiraho kumurongo order(urugero, .order-1.order-md-2). Harimo inkunga yo 1kunyura 5muri gride zose uko ari esheshatu.

Icyambere muri DOM, nta tegeko ryakoreshejwe

Icyakabiri muri DOM, hamwe na gahunda nini

Icya gatatu muri DOM, hamwe na ordre ya 1

html

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

Hariho kandi ibisubizo .order-firstbyamasomo .order-lastbihindura ihinduka orderryikintu ukoresheje order: -1kandi order: 6, kimwe. Aya masomo arashobora kandi kuvangwa nibyiciro byateganijwe .order-*nkuko bikenewe.

Ubwa mbere muri DOM, byateganijwe nyuma

Icyakabiri muri DOM, idafite gahunda

Icya gatatu muri DOM, cyateganijwe mbere

html

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

Kureka inkingi

Urashobora guhagarika grid inkingi muburyo bubiri: .offset-ibyiciro bya gride byitabira hamwe nibikorwa byacu bya margin . Urwego rwa gride rufite ubunini bwo guhuza inkingi mugihe marge aringirakamaro cyane muburyo bwihuse aho ubugari bwa offset burahinduka.

Kureka amasomo

Himura inkingi iburyo ukoresheje .offset-md-*amasomo. Aya masomo yongerera ibumoso bwinkingi *yinkingi. Kurugero, .offset-md-4yimuka .col-md-4hejuru yinkingi enye.

.col-md-4

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

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

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

html

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

Usibye gusiba inkingi kumurongo wogusubiza, urashobora gukenera gusubiramo offsets. Reba ibi mubikorwa murugero rwa 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

html

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

Amafaranga yingirakamaro

Hamwe no kwimuka kuri flexbox muri v4, urashobora gukoresha margin yingirakamaro nko .me-autoguhatira abavandimwe inkingi kure yundi.

.col-md-4

.col-md-4 .ms-auto

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

.col-auto .me-auto

.col-auto

html

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

Ibyiciro byinkingi

Amasomo .col-*arashobora kandi gukoreshwa hanze a .rowkugirango atange ikintu ubugari bwihariye. Igihe cyose amasomo yinkingi akoreshwa nkabana batayobora umurongo, padi zirekuwe.

.col-3: ubugari bwa 25%

.col-sm-9: ubugari bwa 75% hejuru ya sm break point

html

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

Amasomo arashobora gukoreshwa hamwe nibikorwa byogukora amashusho areremba. Witondere kuzinga ibirimo .clearfixmubipfunyika kugirango usibe ikireremba niba inyandiko ari ngufi.

Igika cyinyandiko yumwanya. Turimo kuyikoresha hano kugirango twerekane ikoreshwa ryurwego rusobanutse. Twongeyeho interuro zitari zifite ubusobanuro hano kugirango twerekane uburyo inkingi zikorana hano hamwe nishusho ireremba.

Nkuko ushobora kubona paragarafu uzenguruke neza ishusho ireremba. Noneho tekereza uburyo ibi byasa nibirimo bifatika hano, aho kuba gusa iyi nyandiko irambiranye umwanya uhoraho ukomeza, ariko mubyukuri nta makuru afatika kuri. Ifata umwanya gusa kandi ntigomba gusomwa rwose.

Kandi ,, hano, uracyafite kwihangana mugusoma iyi nyandiko yumwanya, wizeye kubindi bisobanuro, cyangwa amagi ya pasika yihishe yibirimo. Urwenya, birashoboka. Kubwamahirwe, nta na kimwe muri ibyo hano.

html

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