in English

Sisitemu ya sisitemu

Koresha imbaraga zacu zigendanwa-yambere flexbox grid kugirango wubake imiterere yuburyo bwose nubunini dukesha sisitemu cumi na zibiri, ibice bitanu byitondewe byitabira, Sass variable na mixins, hamwe nibyiciro byinshi byateganijwe mbere.

Uburyo ikora

Sisitemu ya Bootstrap ikoresha urukurikirane rwibikoresho, umurongo, hamwe ninkingi kugirango uhuze kandi uhuze ibirimo. Yubatswe na flexbox kandi irasubiza rwose. Hasi nurugero hamwe nuburyo bwimbitse reba uburyo gride ihurira hamwe.

Gishya kuri cyangwa utamenyereye flexbox? Soma iyi CSS Amayeri ya flexbox yubuyobozi bwa background, terminologiya, umurongo ngenderwaho, hamwe nibice bya kode.

Imwe mu nkingi eshatu

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

Urugero ruvuzwe haruguru rurema inkingi eshatu zingana-ubugari kumurongo muto, uringaniye, nini, nibindi bikoresho binini ukoresheje ibyiciro byateganijwe mbere ya gride. Izo nkingi zegeranye kurupapuro hamwe nababyeyi .container.

Kumena, dore uko ikora:

Ibirimwo bitanga uburyo bwo gushira hamwe no gutambutsa ibirimo kurubuga rwawe. Koresha .containerubugari bwa pigiseli isubiza cyangwa .container-fluidkuri width: 100%byose byerekanwe hamwe nubunini bwibikoresho.
Imirongo ni ibipfunyika byinkingi. Buri nkingi ifite horizontal padding(bita gutter) yo kugenzura umwanya hagati yabo. Ibi paddingnoneho birwanya kumurongo hamwe nintera mbi. Ubu buryo, ibikubiye mu nkingi zawe byose bigaragara neza kuruhande rwibumoso.
Imiterere ya gride, ibirimo bigomba gushyirwa mumirongo kandi inkingi gusa zishobora kuba abana b'imirongo.
Turashimira flexbox, grid inkingi idafite isobanura widthizahita itondekanya nkubugari bungana. Kurugero, ingero enye zubushake .col-smburiwese izahita iba 25% mugari uhereye kumurongo muto no hejuru. Reba auto-layout inkingi igice cyizindi ngero.
Ibyiciro byinkingi byerekana umubare winkingi wifuza gukoresha muri 12 zishoboka kumurongo. Noneho, niba ushaka inkingi eshatu zingana-ubugari hejuru, urashobora gukoresha .col-4.
Inkingi widths zashyizwe ku ijanisha, nuko zihora zitemba kandi zingana ugereranije nibintu byababyeyi.
Inkingi zifite horizontal paddingkugirango zireme imiyoboro hagati yinkingi kugiti cye, icyakora, urashobora gukuraho umurongo kumurongo marginno kumurongo paddinghamwe .no-guttersna .row.
Kugirango urusobemiyoboro rusubizwe, hariho ibice bitanu bya gride, imwe kuri buri cyerekezo gisubiza : ibice byose (byoroheje bito), bito, bito, binini, binini cyane.
Imiyoboro ya gride ishingiye kubugari ntarengwa bwibibazo byitangazamakuru, bivuze ko bikoreshwa kuri iyo ngingo imwe hamwe nibiri hejuru yayo (urugero, .col-sm-4ikoreshwa kubito, bito, binini, nibindi bikoresho binini, ariko ntabwo byambere xs).
Urashobora gukoresha ibyiciro bya grid byateganijwe mbere (nka .col-4) cyangwa Sass ivanga kubisobanuro byinshi.

Menya aho ugarukira hamwe nudukosa dukikije flexbox , nkudashobora gukoresha ibintu bimwe na bimwe bya HTML nkibikoresho bya flex .

Amahitamo ya gride

Mugihe Bootstrap ikoresha ems cyangwa rems mugusobanura ingano nini, pxs zikoreshwa kuri grid break point hamwe nubugari bwa kontineri. Ibi ni ukubera ko ubugari bwa viewport buri muri pigiseli kandi ntabwo ihinduka hamwe nubunini bwimyandikire .

Reba uburyo ibintu bya sisitemu ya Bootstrap ikora mubikoresho byinshi hamwe nameza meza.

	Gitoya <576px	Gitoya ≥576px	Hagati ≥768px	Kinini ≥992px	Kinini kinini ≥1200px
Ubugari bwa kontineri nini	Nta na kimwe (auto)	540px	720px	960px	1140px
Icyiciro cyambere	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# yinkingi	12
Ubugari	30px (15px kuri buri ruhande rw'inkingi)
Nestable	Yego
Gutumiza inkingi	Yego

Imashini-yimiterere

Koresha ibice-byihariye byinkingi ibyiciro kugirango byoroshye inkingi zingana nta numero igaragara ifite nka .col-sm-6.

Ubugari bungana

Kurugero, hano hari grid grid ebyiri zikoreshwa kuri buri gikoresho no kureba, kuva xskuri xl. Ongeraho umubare uwo ariwo wose wibice-bitari bike kuri buri cyiciro ukeneye kandi buri nkingi izaba ubugari bumwe.

1 of 2

2 of 2

1 of 3

2 of 3

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

Uburinganire-buringaniye-umurongo

Kora ubugari buringaniye bwinkingi zingana imirongo myinshi ushiramo .w-100aho ushaka ko inkingi zimeneka kumurongo mushya. Kora ibiruhuko byitabiriwe no kuvanga .w-100hamwe nibikorwa byingirakamaro byerekana .

Hariho Safari flexbox ya bugari yabujije gukora gukora bidasobanutse flex-basiscyangwa border. Hano hari akazi gakoreshwa kuri verisiyo ishaje ya mushakisha, ariko ntibigomba kuba ngombwa mugihe mushakisha yawe itaguye muri verisiyo ya buggy.

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>

Gushiraho ubugari bumwe

Auto-layout ya flexbox grid inkingi nayo isobanura ko ushobora gushiraho ubugari bwinkingi imwe hanyuma inkingi zabavandimwe zihita zihinduranya. Urashobora gukoresha ibyiciro bya grid byateganijwe mbere (nkuko bigaragara hano), imiyoboro ya gride, cyangwa ubugari bwumurongo. Menya ko izindi nkingi zizahinduka ntakibazo ubugari bwikigo hagati.

1 of 3

2 kuri 3 (mugari)

3 of 3

1 of 3

2 kuri 3 (mugari)

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

Ibirimo ubugari butandukanye

Koresha col-{breakpoint}-autoamasomo kugirango ubunini bw'inkingi ukurikije ubugari busanzwe bwibirimo.

1 of 3

Ibirimo ubugari butandukanye

3 of 3

1 of 3

Ibirimo ubugari butandukanye

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

Amasomo ashubije

Imiyoboro ya Bootstrap ikubiyemo ibyiciro bitanu byateganijwe mbere yo kubaka imiterere igoye. Hindura ingano yinkingi zawe hejuru yinyongera ntoya, ntoya, iringaniye, nini, cyangwa ibikoresho binini cyane ariko ubona bikwiye.

Ibice byose

Kuri gride imwe nimwe kuva mubikoresho bito kugeza binini, koresha i .colhamwe .col-*namasomo. Kugaragaza icyiciro cyumubare mugihe ukeneye inkingi nini cyane; bitabaye ibyo, umva neza .col.

col

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

Bishyizwe kuri horizontal

Ukoresheje icyiciro kimwe .col-sm-*cyamasomo, urashobora gukora sisitemu shingiro ya gride itangira gutondekanya hanyuma igahinduka horizontal kumurongo muto ( sm).

col-sm-8

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

Kuvanga no guhuza

Ntushaka ko inkingi zawe zishira gusa murwego runaka? Koresha guhuza ibyiciro bitandukanye kuri buri cyiciro nkuko bikenewe. Reba urugero rukurikira kugirango ubone igitekerezo cyiza cyukuntu byose bikora.

.col-md-8

.col-6 .col-md-4

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

Gutera

Imyanda irashobora guhindurwa muburyo bwitondewe bwa padi hamwe na margin yingirakamaro. Guhindura imyanda mumurongo watanzwe, jya uhuza margin yingirakamaro kumurongo .rowhamwe no guhuza padi yingirakamaro kuri .cols. Umubyeyi .containercyangwa .container-fluidumubyeyi arashobora gukenera guhindurwa kugirango yirinde gutemba kurenze, ukoresheje kongera guhuza padi yingirakamaro.

Dore urugero rwo gutunganya Bootstrap grid kumurongo munini ( lg) uciye hejuru. Twongereye .colpadi hamwe .px-lg-5, turwanya ibyo hamwe .mx-lg-n5nababyeyi .rowhanyuma duhindura .containerimpuzu hamwe .px-lg-5.

Koresha inkingi

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

Inkingi

Koresha .row-cols-*ibyiciro byitabira kugirango ushireho vuba umubare winkingi zitanga neza ibikubiyemo hamwe nimiterere. Mugihe .col-*ibyiciro bisanzwe bikurikizwa kumurongo wihariye (urugero, .col-md-4), umurongo winkingi ibyiciro byashyizwe kubabyeyi .rownkumuhigo.

Koresha iyi mirongo yinkingi ibyiciro kugirango wihute gukora imiterere shingiro ya gride cyangwa kugenzura ikarita yawe.

Inkingi

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

Inkingi

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

Inkingi

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

Inkingi

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

Inkingi

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

Urashobora kandi gukoresha Sass ivanze iherekejwe , 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);
  }
}

Guhuza

Koresha flexbox ihuza ibikorwa kugirango uhagarike kandi utambitse. Internet Explorer 10-11 ntabwo ishigikira guhuza vertike yibintu bya flex mugihe kontineri ya flex ifite min-heightnkuko bigaragara hano hepfo. Reba Flexbugs # 3 kugirango ubone ibisobanuro birambuye.

Guhuza neza

Imwe mu nkingi eshatu

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

Imwe mu nkingi eshatu

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

Guhuza utambitse

Imwe mu nkingi ebyiri

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

Nta miyoboro

Imyanda iri hagati yinkingi mubyiciro byateganijwe mbere ya grid irashobora gukurwaho hamwe .no-gutters. Ibi bivanaho ibintu bibi marginbiva kuri .rowna horizontal paddingkuva abana bose bahita.

Hano hari code yinkomoko yo gukora ubu buryo. Menya ko inkingi zirengerwa zashyizwe kumurongo wambere wabana inkingi kandi zigenewe binyuze mubiranga ibiranga . Mugihe ibi bibyara amahitamo yihariye, inkingi ya padi irashobora gukomeza gutegurwa hamwe nibikorwa byingenzi .

Ukeneye igishushanyo mbonera? Kureka ababyeyi .containercyangwa .container-fluid.

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

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

Mu myitozo, dore uko isa. Icyitonderwa urashobora gukomeza gukoresha ibi hamwe nibindi byose byateganijwe mbere ya gride (harimo ubugari bwinkingi, urwego rwitabira, reorders, nibindi byinshi).

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

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.

<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

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

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

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

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 murwego rwa 12gride zose uko ari eshanu.

Icyambere muri DOM, nta tegeko ryakoreshejwe

Icyakabiri muri DOM, hamwe na gahunda nini

Icya gatatu muri DOM, hamwe na ordre ya 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>

Hariho kandi ibisubizo .order-firstbyamasomo .order-lastbihindura ihinduka orderryikintu ukoresheje order: -1na order: 13( order: $columns + 1), 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

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

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

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

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

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

Amafaranga yingirakamaro

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

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

Icyari

Kugirango ushire ibikubiyemo hamwe na gride isanzwe, ongeramo ibishya .rowkandi ushireho .col-sm-*inkingi muburyo buriho .col-sm-*. Imirongo yatoranijwe igomba gushiramo urutonde rwinkingi ziyongera kuri 12 cyangwa nkeya (ntibisabwa ko ukoresha inkingi 12 zose ziboneka).

Urwego 1: .col-sm-9

Urwego 2: .col-8 .col-sm-6

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

Iyo ukoresheje inkomoko ya Bootstrap ya Sass dosiye, ufite amahitamo yo gukoresha Sass variable hamwe na mixin kugirango ukore imiterere, ibisobanuro, nibisubizo byurupapuro. Ibyiciro byateganijwe mbere ya gride ikoresha ibyo bihinduka hamwe na mixin kugirango itange suite yose yiteguye-gukoresha-amasomo yihuse.

Ibihinduka

Ibihinduka n'amakarita bigena umubare winkingi, ubugari bwamazi, hamwe nibibazo byitangazamakuru aho byatangirira kureremba inkingi. Dukoresha ibi kugirango tubyare ibyiciro byateganijwe byateganijwe hejuru, kimwe no kuvanga ibicuruzwa byavuzwe haruguru.

$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
);

Imvange

Imvange zikoreshwa zifatanije na gride ihindagurika kugirango itange ibisobanuro bya CSS kubisobanuro bya grid inkingi.

// 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);

Urugero

Urashobora guhindura ibihinduka kubiciro byawe bwite, cyangwa ugakoresha gusa ivanga nagaciro kabo gasanzwe. Dore urugero rwo gukoresha igenamiterere risanzwe kugirango ukore imiterere-inkingi ebyiri hamwe nu cyuho hagati.

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

Ibirimo

Ibiri mucyiciro cya kabiri

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

Guhindura gride

Ukoresheje ibyubatswe muri gride Sass ihinduka namakarita, birashoboka guhitamo byimazeyo ibyiciro byateganijwe mbere. Hindura umubare w'ibyiciro, ibipimo by'ibibazo by'itangazamakuru, n'ubugari bwa kontineri - hanyuma usubiremo.

Inkingi

Umubare wa grid inkingi urashobora guhindurwa ukoresheje Sass variable. $grid-columnsni Byakoreshejwe Kuri Kubyara Ubugari (ku ijana) ya buri nkingi ku giti cye mugihe $grid-gutter-widthishyiraho ubugari bwinkingi.

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

Urwego

Kwimuka kurenga inkingi ubwazo, urashobora kandi guhitamo umubare wa grid tiers. Niba ushaka ibice bine bya gride gusa, wavugurura i $grid-breakpointsno $container-max-widthskubintu nkibi:

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

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

Mugihe uhinduye ibintu byose byahinduwe na Sass, uzakenera kubika impinduka zawe no kwisubiraho. Kubikora bizasohoka ibishya bishya byateganijwe mbere ya grid ibyiciro kubugari bwinkingi, offsets, no gutumiza. Ibisubizo byingirakamaro byingirakamaro nabyo bizavugururwa kugirango ukoreshe ibicuruzwa byacitse. Witondere gushiraho indangagaciro muri px(ntabwo rem, emcyangwa, %).