Sistèm griyaj

Sèvi ak kadriyaj pwisan flexbox mobil premye nou an pou konstwi tout fòm ak tout gwosè gras a yon sistèm douz kolòn, senk nivo repons default, varyab Sass ak mixin, ak plizyè douzèn klas predefini.

Ki jan li fonksyone

Sistèm kadriyaj Bootstrap la sèvi ak yon seri de resipyan, ranje, ak kolòn pou layout ak aliman kontni. Li bati ak flexbox epi li konplètman reponn. Anba a se yon egzanp ak yon gade an pwofondè sou ki jan kadriyaj la vini ansanm.

Nouvo oswa pa abitye ak flexbox? Li gid sa a CSS Tricks flexbox pou jan nou koumanse, tèminoloji, direktiv, ak fragments kòd.

Youn nan twa kolòn

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

Egzanp ki pi wo a kreye twa kolòn egal-lajè sou aparèy ti, mwayen, gwo ak gwo siplemantè lè l sèvi avèk klas griy predefini nou yo. Kolòn sa yo santre nan paj paran an .container.

Kraze li desann, men ki jan li fonksyone:

Kontenè yo bay yon mwayen pou santre ak orizontal pad sa ki nan sit ou a. Itilize .containerpou yon lajè pixel ki reponn oswa .container-fluidpou width: 100%tout gwosè vi ak aparèy.
Ranje yo se anbalaj pou kolòn. Chak kolòn gen orizontal padding(yo rele yon goutyè) pou kontwole espas ki genyen ant yo. Sa a paddingse Lè sa a, kontrekare sou ranje yo ak marges negatif. Nan fason sa a, tout kontni an nan kolòn ou yo vizyèlman aliyen sou bò gòch la.
Nan yon layout kadriyaj, kontni yo dwe mete nan kolòn epi sèlman kolòn yo ka pitit imedya nan ranje.
Mèsi a flexbox, kolòn kadriyaj san yon espesifye widthpral otomatikman layout kòm kolòn lajè egal. Pou egzanp, kat ka yo .col-smpral chak otomatikman gen 25% lajè soti nan ti breakpoint la ak moute. Gade seksyon kolòn oto-layout la pou plis egzanp.
Klas kolòn yo endike kantite kolòn ou ta renmen itilize nan 12 posib pou chak ranje. Se konsa, si ou vle twa kolòn egal-lajè atravè, ou ka itilize .col-4.
Kolòn widthyo mete nan pousantaj, kidonk yo toujou likid ak gwosè parapò ak eleman paran yo.
Kolòn yo gen orizontal paddingpou kreye goutyè yo ant kolòn endividyèl yo, sepandan, ou ka retire yo marginnan ranje ak paddingnan kolòn ak .no-gutterssou la .row.
Pou rann kadriyaj la reponn, gen senk pwen rupture kadriyaj, youn pou chak rupture reponn : tout pwen rupture (sipleman piti), ti, mwayen, gwo, ak gwo siplemantè.
Pwen kadriyaj yo baze sou demann medya ki lajè minimòm, sa vle di yo aplike nan yon sèl breakpoint ak tout sa yo ki anlè a (egzanp, .col-sm-4aplike a ti, mwayen, gwo, ak siplemantè aparèy, men se pa premye pwen an xs).
Ou ka itilize klas griy predefini (tankou .col-4) oswa Sass mixins pou plis maketing semantik.

Ou dwe konsyan de limit ak ensèk alantou flexbox , tankou enkapasite pou itilize kèk eleman HTML kòm resipyan flex .

Opsyon griyaj

Pandan ke Bootstrap itilize ems oswa rems pou defini pifò gwosè, pxs yo itilize pou pwen kadriyaj ak lajè veso. Sa a se paske lajè vi a se nan piksèl epi li pa chanje ak gwosè font la .

Gade ki jan aspè nan sistèm kadriyaj Bootstrap la ap travay sou plizyè aparèy ak yon tab sou la men.

	Siplemantè piti <576px	Ti ≥576px	Mwayen ≥768px	Gwo ≥992px	Siplemantè gwo ≥1200px
Lajè veso maksimòm	Okenn (oto)	540px	720 px	960 px	1140px
Prefiks klas la	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# nan kolòn	12
Lajè goutyè	30px (15px sou chak bò yon kolòn)
Nestable	Wi
Kòmann kolòn	Wi

Kolòn oto-layout

Sèvi ak klas kolòn espesifik pwen breakpoint pou gwosè kolòn fasil san yon klas nimewote klè tankou .col-sm-6.

Egal-lajè

Pou egzanp, isit la gen de layout kadriyaj ki aplike nan chak aparèy ak fenèt, soti xsnan xl. Ajoute nenpòt ki kantite inite-mwens klas pou chak breakpoint ou bezwen ak chak kolòn yo pral menm lajè a.

1 nan 2

2 nan 2

1 nan 3

2 nan 3

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

Egal-lajè milti-liy

Kreye kolòn egal-lajè ki kouvri plizyè liy lè w mete yon .w-100kote ou vle kolòn yo kraze nan yon nouvo liy. Fè repo yo reponn lè w melanje .w-100ak kèk itilite ekspozisyon ki reponn .

Te gen yon ensèk Safari flexbox ki anpeche sa a nan travay san yon eksplisit flex-basisoswa border. Gen solisyon pou vèsyon navigatè ki pi gran yo, men yo pa ta dwe nesesè si navigatè sib ou yo pa tonbe nan vèsyon buggy yo.

kol

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

Mete yon sèl lajè kolòn

Oto-layout pou kolòn kadriyaj flexbox vle di tou ou ka mete lajè yon kolòn epi gen kolòn frè ak sè yo otomatikman redimansyone alantou li. Ou ka itilize klas griy predefini (jan yo montre anba a), melanj griy, oswa lajè enline. Remake byen ke lòt kolòn yo pral redimansyone kèlkeswa lajè kolòn santral la.

1 nan 3

2 nan 3 (pi laj)

3 nan 3

1 nan 3

2 nan 3 (pi laj)

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

Kontni lajè varyab

Sèvi ak col-{breakpoint}-autoklas pou gwosè kolòn yo baze sou lajè natirèl kontni yo.

1 nan 3

Kontni lajè varyab

3 nan 3

1 nan 3

Kontni lajè varyab

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

Klas ki reponn

Kadriyaj Bootstrap a gen ladan senk nivo klas predefini pou bati konsepsyon konplèks reponn. Pèsonalize gwosè kolòn ou yo sou aparèy siplemantè piti, ti, mwayen, gwo oswa siplemantè, sepandan ou wè anfòm.

Tout breakpoints

Pou kadriyaj ki se menm bagay la soti nan pi piti a nan aparèy nan pi gwo a, sèvi .colak .col-*klas yo ak. Espesifye yon klas nimewote lè ou bezwen yon kolòn ki gen gwosè patikilyèman; otreman, santi yo lib pou rete sou .col.

kol

kol-8

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

Anpile sou orizontal

Sèvi ak yon sèl seri .col-sm-*klas, ou ka kreye yon sistèm kadriyaj debaz ki kòmanse anpile epi ki vin orizontal nan ti pwen an ( sm).

kol-sm-8

kol-sm-4

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

Melanje ak matche ak

Ou pa vle kolòn ou yo tou senpleman pile nan kèk nivo kadriyaj? Sèvi ak yon konbinezon de diferan klas pou chak nivo jan sa nesesè. Gade egzanp ki anba a pou yon pi bon lide sou fason tout bagay ap travay.

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

Goutyè yo

Goutyè yo ka ajiste yon fason ki reponn pa padding espesifik pwen breakpoint ak klas itilite maj negatif. Pou chanje goutyè yo nan yon ranje bay yo, pè yon sèvis piblik maj negatif sou sèvis piblik yo .rowak matche sèvis piblik yo sou .cols la. A .containeroswa .container-fluidparan yo ka bezwen ajiste tou pou evite debòde sipèfli, lè l sèvi avèk ankò matche sèvis piblik.

Men yon egzanp pou pèrsonalizasyon kadriyaj Bootstrap la nan gwo ( lg) breakpoint ak pi wo a. Nou te ogmante .colpadding a ak .px-lg-5, kontrekare ke ak .mx-lg-n5sou paran an .rowak Lè sa a, ajiste .containeranbalaj la ak .px-lg-5.

Custom kolòn padding

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

Kolòn ranje

Sèvi ak .row-cols-*klas yo reponn byen vit mete kantite kolòn ki pi byen rann kontni ou ak layout. Tandiske klas nòmal .col-*yo aplike nan kolòn endividyèl yo (eg, .col-md-4), klas kolòn ranje yo mete sou paran an .rowkòm yon chemen kout.

Sèvi ak klas kolòn ranje sa yo pou kreye byen vit fòm griy debaz oswa pou kontwole fòm kat ou.

Kolòn

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

Kolòn

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

Kolòn

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

Kolòn

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

Kolòn

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

Ou ka itilize tou Sass mixin ki akonpaye la 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);
  }
}

Aliyman

Sèvi ak sèvis piblik aliyman flexbox pou aliman kolòn vètikal ak orizontal. Internet Explorer 10-11 pa sipòte aliyman vètikal nan atik flex lè veso flex la gen yon min-heightjan yo montre anba a. Gade Flexbugs #3 pou plis detay.

Aliyman vètikal

Youn nan twa kolòn

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

Youn nan twa kolòn

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

Aliyman orizontal

Youn nan de kolòn

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

Pa gen goutyè

Goutyè ki genyen ant kolòn nan klas griy predefini nou yo ka retire ak .no-gutters. Sa a retire negatif marginyo nan .rowak orizontal la paddingnan tout kolòn timoun imedya.

Men kòd sous pou kreye estil sa yo. Remake byen ke ranvwa kolòn yo aplike sèlman nan premye kolòn timoun yo epi yo vize atravè seleksyon atribi . Pandan ke sa a jenere yon seleksyon ki pi espesifik, padding kolòn yo ka toujou Customized ak sèvis piblik espas .

Bezwen yon konsepsyon kwen-a-bò? Lage paran an .containeroswa .container-fluid.

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

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

Nan pratik, men ki jan li sanble. Remake byen ou ka kontinye itilize sa a ak tout lòt klas griy predefini (ki gen ladan lajè kolòn, nivo ki reponn, rekòmande, ak plis ankò).

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

Anbalaj kolòn

Si plis pase 12 kolòn yo mete nan yon sèl ranje, chak gwoup kolòn siplemantè pral, kòm yon sèl inite, vlope sou yon nouvo liy.

.col-9

.col-4
Depi 9 + 4 = 13 > 12, div 4 kolòn lajè sa a vin vlope sou yon nouvo liy kòm yon sèl inite kontigu.

.col-6
Kolòn ki vin apre yo kontinye sou nouvo liy lan.

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

Kolòn kraze

Kraze kolòn nan yon nouvo liy nan flexbox mande pou yon ti Hack: ajoute yon eleman ak width: 100%tout kote ou vle vlope kolòn ou nan yon nouvo liy. Nòmalman sa a se akonpli ak plizyè .rows, men se pa tout metòd aplikasyon ka kont pou sa.

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

Ou ka aplike repo sa a tou nan pwen pause espesifik ak sèvis piblik ekspozisyon sansib nou yo .

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

Rekòmande

Lòd klas yo

Sèvi ak .order-klas pou kontwole lòd vizyèl kontni ou. Klas sa yo reponn, kidonk ou ka fikse orderpa pwen rupture (egzanp, .order-1.order-md-2). Gen ladan sipò pou 1atravè 12tout senk nivo kadriyaj.

Premye nan DOM, pa gen okenn lòd aplike

Dezyèm nan DOM, ak yon pi gwo lòd

Twazyèm nan DOM, ak yon lòd 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>

Genyen tou responsive .order-firstak .order-lastklas ki chanje ordernan yon eleman lè yo aplike order: -1ak order: 13( order: $columns + 1), respektivman. Klas sa yo kapab tou melanje ak klas nimewote .order-*yo jan sa nesesè.

Premye nan DOM, kòmande dènye

Dezyèm nan DOM, san lòd

Twazyèm nan DOM, kòmande an premye

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

Kolòn konpanse

Ou ka konpanse kolòn kadriyaj yo nan de fason: .offset-klas griy ki reponn ak sèvis piblik Marge nou yo . Klas kadriyaj yo gwosè pou matche ak kolòn pandan y ap maj yo pi itil pou layouts rapid kote lajè konpanse a varyab.

Klas konpanse

Deplase kolòn sou bò dwat yo lè l sèvi avèk .offset-md-*klas yo. Klas sa yo ogmante maj gòch yon kolòn pa *kolòn. Pou egzanp, .offset-md-4deplase .col-md-4sou kat kolòn.

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

Anplis netwayaj kolòn nan pwen rupture ki reponn, ou ka bezwen reset konpanse yo. Gade sa an aksyon nan egzanp kadriyaj la .

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

Marge sèvis piblik

Avèk mouvman flexbox nan v4, ou ka itilize sèvis piblik Marge tankou .mr-autofòse kolòn frè ak sè yo lwen youn ak lòt.

.col-md-4

.col-md-4 .ml-oto

.col-md-3 .ml-md-oto

.col-oto .mr-oto

.col-oto

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

Nidifikasyon

Pou fè nich kontni ou a ak kadriyaj default la, ajoute yon nouvo .rowak seri .col-sm-*kolòn nan yon .col-sm-*kolòn ki deja egziste. Ranje nich yo ta dwe gen ladan yon seri kolòn ki ajoute jiska 12 oswa mwens (li pa obligatwa pou w itilize tout 12 kolòn ki disponib).

Nivo 1: .col-sm-9

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

Nivo 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

Lè w ap itilize dosye Sass sous Bootstrap yo, ou gen opsyon pou w sèvi ak varyab Sass ak mixin pou kreye fòm paj koutim, semantik ak reponn. Klas kadriyaj predefini nou yo itilize menm varyab ak mixin sa yo pou bay tout yon seri klas ki pare pou itilize pou kouman yo reponn rapid.

Varyab

Varyab ak kat detèmine kantite kolòn yo, lajè goutyè yo, ak pwen rechèch medya yo kote yo kòmanse kolòn k ap flote. Nou itilize sa yo pou jenere klas griy predefini dokimante pi wo a, osi byen ke pou mixin koutim ki nan lis anba a.

$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

Mixins yo itilize ansanm ak varyab kadriyaj yo pou jenere CSS semantik pou kolòn kadriyaj endividyèl yo.

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

Egzanp itilizasyon

Ou ka modifye varyab yo nan pwòp valè koutim ou, oswa jis itilize mixin yo ak valè default yo. Men yon egzanp lè w sèvi ak anviwònman default yo pou kreye yon layout de kolòn ak yon espas ant.

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

Kontni prensipal

Kontni segondè

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

Pèrsonalizasyon kadriyaj la

Sèvi ak varyab ak kat Sass kadriyaj entegre nou an, li posib pou konplètman pèsonalize klas griy predefini yo. Chanje kantite nivo, dimansyon rechèch medya yo, ak lajè veso a—apresa rekonpile.

Kolòn ak goutyè

Nimewo a nan kolòn kadriyaj ka modifye atravè varyab Sass. $grid-columnsyo itilize pou jenere lajè yo (an pousan) nan chak kolòn endividyèl pandan y ap $grid-gutter-widthmete lajè a pou goutyè yo kolòn.

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

Nivo kadriyaj

Deplase pi lwen pase kolòn yo tèt yo, ou ka tou Customize kantite nivo kadriyaj la. Si ou te vle jis kat nivo gri, ou ta mete ajou $grid-breakpointsak $container-max-widthsnan yon bagay tankou sa a:

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

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

Lè w ap fè nenpòt chanjman nan varyab oswa kat Sass yo, w ap bezwen sove chanjman ou yo epi rekonpile. Lè w fè sa, sa pral bay yon nouvo seri klas griy predefini pou lajè kolòn, konpanse, ak lòd. Yo pral mete ajou sèvis piblik vizibilite yo tou pou yo sèvi ak pwen koutim yo. Asire w ke ou mete valè kadriyaj nan px(pa rem, em, oswa %).