Système ya grille

Salelá grille na biso ya nguya ya mobile-first flexbox mpo na kotonga ba layouts ya ba shapes mpe bonene nyonso grâce na système ya ba colonnes zomi na mibale, ba niveaux mitano ya réponse par défaut, ba variables ya Sass mpe ba mixins, mpe ba douzaines ya ba classes oyo esili ko définir.

Ndenge oyo esalaka

Système ya grille ya Bootstrap esalela série ya ba conteneurs, ba lignes, na ba colonnes pona ko layout pe ko aligner ba contenus. Etongami na flexbox mpe ezali na boyokani mobimba. Awa na nse ezali na ndakisa mpe botali na bozindo lolenge nini grille esanganaka.

Ozali ya sika to oyebi te flexbox? Tanga buku oyo ya flexbox ya CSS Tricks mpo na koyeba makambo ya nsima, maloba, malako, mpe biteni ya code.

Moko ya makonzí misato

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

Ndakisa oyo ezali likolo esali ba colonnes misato ya bonene ekokani na ba dispositifs ya mike, ya monene, ya minene, mpe ya minene mingi koleka na kosalelaka ba classes na biso ya grille oyo esili kolimbolama liboso. Makonzí yango ezali na katikati ya lokasa oyo ezali na moboti .container.

Kobuka yango, tala ndenge esalaka:

Ba conteneurs epesaka moyen ya ko centrer pe ko pad horizontalement ba contenus ya site na yo. Salelá .containermpo na bonene ya pixel oyo ezali koyanola to .container-fluidmpo na na width: 100%kati ya bonene nyonso ya esika ya kotala mpe ya aparɛyi.
Milɔngɔ́ ezali ba enveloppes mpo na makonzí. Kolona mokomoko ezali na horizontal padding(oyo babengaka gouttière) mpo na kotambwisa esika oyo ezali kati na yango. Na paddingnsima, bazongisaka yango na milɔngɔ oyo ezali na ba marges négatifs. Na ndenge yango, makambo nyonso oyo ezali na makonzí na yo ezali na molɔngɔ na miso na nse na ngámbo ya lobɔkɔ ya mwasi.
Na bobongisi ya grille, esengeli kotia makambo na kati ya makonzí mpe kaka makonzí ekoki kozala bana ya mbala moko ya milɔngɔ.
Grâce na flexbox, ba colonnes ya grille sans un précisé widtheko layout automatiquement lokola ba colonnes ya largeur égale. Ndakisa, ba instances minei ya .col-smekozala automatiquement 25% ya largeur depuis le petit point de rupture et haut. Tala eteni ya ba colonnes auto-layout mpo na bandakisa mosusu.
Ba kelasi ya makonzí emonisaka motángo ya makonzí oyo olingi kosalela na kati ya 12 oyo ekoki kozala na molɔngɔ moko. Na yango, soki olingi makonzí misato ya bonene ekokani na ngámbo mosusu, okoki kosalela .col-4.
Ba colonnes widths etiamaki na ba pourcentages, yango wana ezalaka toujours fluide mpe na taille par rapport na élément parent na yango.
Makonzí ezali na horizontal paddingmpo na kosala ba gouttières kati na makonzí mokomoko, nzokande, okoki kolongola marginna milɔngɔ́ mpe paddinguta na makonzí na .no-gutterslikoló na .row.
Mpo na kosala ete grille ezala na eyano, ezali na ba points de rupture ya grille mitano, moko mpo na point de rupture moko na moko oyo ezo répondre : ba points de rupture nionso (extra petit), ya mike, ya monene, ya monene, mpe ya monene mingi.
Ba points de rupture ya grille esalemi na ba requêtes ya media ya largeur minimum, elingi koloba esalemaka na point de rupture moko wana mpe nionso oyo ezali likolo na yango (ndakisa, .col-sm-4etali ba dispositifs ya mike, ya moyenne, ya minene, mpe ya monene mingi, kasi point ya xsrupture ya liboso te).
Okoki kosalela ba classes ya grille oyo esili ko définir (lokola .col-4) to ba mixins ya Sass pona marquage sémantique mingi.

Yeba ba limitations na ba bugs zinga zinga ya flexbox , lokola incapacité ya kosalela ba éléments mosusu ya HTML lokola ba conteneurs flex .

Ba options ya grille

Atako Bootstrap esalela ems to rems mpo na kolimbola bonene mingi, pxs esalelamaka mpo na ba points de rupture ya grille mpe bonene ya ba conteneurs. Yango ezali mpo ete bonene ya esika ya kotala ezali na ba pixels mpe ebongwanaka te na bonene ya makomi .

Tala ndenge nini makambo ya système ya grille ya Bootstrap esalaka na kati ya ba dispositifs ebele na tableau ya maboko.

	Extra ya moke <576px	Moke ≥576px	Moyenne ≥768px	Monene ≥992px	Extra ya monene ≥1200px
Max largeur ya récipient	Moko te (auto) .	540px na yango	720px ezali	960px ezali	1140px na yango
Prefixe ya kelasi	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# ya makonzí	12
Largeur ya gouttière	30px (15px na ngambo moko na moko ya colonne)
Esika ya kofanda	Iyo
Kosala komande ya makonzí	Iyo

Ba colonnes ya kosala automatiquement

Salelá bakelasi ya makonzí oyo etali esika ya kobuka mpo na kosala bonene ya makonzí na pɛtɛɛ nyonso kozanga kelasi oyo ezali na nimero ya polele lokola .col-sm-6.

Bonene ya ndenge moko

Ndakisa, awa ezali na ba layouts mibale ya grille oyo etali appareil nionso mpe na esika ya kotala, kobanda xsna xl. Bakisa nombre nionso ya ba classes sans unité pona point de rupture moko na moko oyo esengeli pe colonne nionso ekozala na largeur moko.

1 ya 2

2 ya 2

1 ya 3

2 ya 3

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

Line ebele ya bonene ekokani

Salá makonzí ya bonene ekokani oyo ezali na milɔngɔ mingi na kokɔtisáká .w-100esika oyo olingi ete makonzí ekabwana na molɔngɔ ya sika. Salá ete ba pauses ezala na boyokani na kosangisáká .w-100na mwa ba utilitaires ya kolakisa oyo ezali koyanola .

Ezalaki na bug ya flexbox ya Safari oyo epekisaki oyo esala sans explicit flex-basisto border. Ezali na ba workarounds mpo na ba versions ya kala ya navigateur, kasi esengeli te kozala na ntina soki ba navigateurs cibles na yo ekweyi te na ba versions 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>

Kobongisa bonene ya likonzi moko

Auto-layout mpo na makonzí ya grille flexbox elakisi mpe ete okoki kotya bonene ya colonne moko mpe kosala ete makonzí ya bandeko ebongola bonene na yango automatique zingazinga na yango. Okoki kosalela ba classes ya grille oyo esili kolimbolama liboso (lokola elakisami awa na se), ba mixins ya grille, to ba largeurs ya kati ya ligne. Yebá ete makonzí mosusu ekobongola bonene ata soki makonzí ya katikati ezali na bonene boni.

1 ya 3

2 ya 3 (ya monene)

3 ya 3

1 ya 3

2 ya 3 (ya monene)

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

Contenu ya largeur variable

Salelá col-{breakpoint}-autobakelasi mpo na kopesa bonene ya makonzí na kotalela bonene ya bomoto ya makambo oyo ezali na kati na yango.

1 ya 3

Contenu ya largeur variable

3 ya 3

1 ya 3

Contenu ya largeur variable

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

Bakelasi oyo ezali kopesa eyano

Grille ya Bootstrap ezali na ba niveaux mitano ya ba classes pré-définies mpo na kotonga ba layouts complexes oyo ezo répondre. Personnaliser taille ya ba colonnes na yo na ba appareils ya mike mingi, ya mike, ya moyenne, ya minene, to ya minene mingi ndenge nini omoni malamu.

Ba points de rupture nionso

Mpo na ba grille oyo ezali ndenge moko kobanda na ba dispositif ya moke tii na oyo ya monene, salelá ba classes .colmpe . .col-*Lakisa kelasi oyo ezali na banimero ntango ozali na mposa ya likonzi oyo ezali na bonene mpenza; soki te, yoká nsɔni te ya kokangama na .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>

Empilé na horizontal

Na kosalelaka ensemble moko ya ba .col-sm-*classes, okoki kosala système ya grille ya base oyo ebandi na ebele mpe ekomi horizontal na point de rupture ya moke ( sm).

kol-sm-8

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

Bosangisa mpe bosangisi

Olingi te ba colonnes na yo ezala kaka ebele na ba niveaux ya grille mosusu? Salelá kosangisa bakelasi ndenge na ndenge mpo na nivo mokomoko soki esengeli. Tala ndakisa oyo ezali awa na nse mpo na koyeba malamu ndenge oyo nyonso esalaka.

.col-md-8 oyo ezali na kati

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

Ba gouttières

Ba gouttières ekoki ko répondre na ndenge ya réponse na ba classes ya utilité ya remplissage spécifique ya point de rupture na ba classes ya utilité ya marge négative. Mpo na kobongola ba gouttières na molongo moko boye, pair utilitaire ya marge négative na .rowmpe ba utilitaires ya remplissage oyo ekokani na .cols. Ba .containerto .container-fluidmoboti ekoki kozala na mposa ya kobongisama mpe mpo na koboya kotonda oyo elingi te, kosalela lisusu matching padding utilitaire.

Tala ndakisa ya kosala grille ya Bootstrap na esika ya monene ( lg) ya kobuka mpe likolo. Tobakisi .colpadding na .px-lg-5, to contrer que na .mx-lg-n5na parent .rowet puis to ajuster .containerenveloppe na .px-lg-5.

Padding ya colonne personnalisé

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

Molongo ya makonzí

Salelá .row-cols-*bakelasi oyo ezali koyanola mpo na kotya nokinoki motángo ya makonzí oyo ezali komonisa malamu makambo oyo ezali na kati mpe ndenge oyo ozali kosala. Alors que ba .col-*classes normales esalemaka na ba colonne moko moko (par exemple, .col-md-4), ba classes ya ba colonnes ya molongo etiamaki na moboti .rowlokola nzela mokuse.

Salelá bakelasi oyo ya makonzí ya molɔngɔ mpo na kosala nokinoki ba layouts ya grille ya moboko to mpo na kokamba ba layouts ya karte na yo.

Molongo

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

Molongo

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

Molongo

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

Molongo

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

Molongo

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

Okoki mpe kosalela mixin ya Sass oyo ezali elongo na yango, 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);
  }
}

Kobongisa makambo

Salelá ba utilitaires ya alignment flexbox mpo na ko aligner ba colonnes verticalement mpe horizontalement. Internet Explorer 10-11 esimbaka te alignment vertical ya biloko ya flex tango récipient flex ezali na min-heightndenge elakisami awa na se. Tala Flexbugs #3 mpo na koyeba makambo mosusu.

Alignment ya semba

Moko ya makonzí misato

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

Moko ya makonzí misato

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

Alignment ya horizontal

Moko ya makonzí mibale

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

Ba gouttières te

Ba gouttières entre ba colonnes na ba classes na biso ya grille pré-définies ekoki ko longwa na .no-gutters. Yango elongolaka margins négatif na .rowmpe horizontal paddingna ba colonnes nionso ya bana ya mbala moko.

Tala code source pona kosala ba styles oyo. Yeba ete ba overrides ya colonne ezali scoped kaka na ba colonnes ya bana ya liboso mpe ezali ciblé na nzela ya selecteur ya attribut . Atako yango ebimisaka moponi moko ya sikisiki mingi, remplissage ya makonzí ekoki kaka kozala personnalisé lisusu na ba utilitaires ya espacement .

Ozali na mposa ya design ya bord-à-edge? Bwaka moboti .containerto .container-fluid.

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

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

Na pratique, tala ndenge ezo monana. Liyebisi okoki kokoba kosalela oyo na bakelasi mosusu nyonso ya grille oyo esili kolimbolama liboso (elongo na bonene ya makonzí, ba niveaux ya eyano, ba réordonnées, mpe mingi mosusu).

.kolo-sm-6 .kol-md-8

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

Enveloppe ya colonne

Soki batye makonzí koleka 12 na kati ya molɔngɔ moko, etuluku mokomoko ya makonzí mosusu ekozipama, lokola unité moko, na molɔngɔ ya sika.

.col-9

.col-4
Lokola 9 + 4 = 13 > 12, div oyo ya 4 colonnes ya largeur ezuaka enveloppé na ligne ya sika lokola unité moko contigue.

.col-6
Makonzí oyo elandi ezali kokoba na nzela ya molɔngɔ ya sika.

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

Kobukana ya makonzí

Kobuka ba colonnes na ligne ya sika na flexbox esengaka petit hack : bakisa élément na width: 100%esika nionso olingi ko envelopper ba colonnes na yo na ligne ya sika. Normalement yango ekokisama na ba .rows ebele, kasi te méthode nionso ya mise en œuvre ekoki ko comptabiliser yango.

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

Okoki mpe kosalela pause oyo na ba points spécifiques ya rupture na ba utilitaires na biso ya écran oyo ezo répondre .

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

Kozongisa na molɔngɔ

Commander ba classes

Salelá .order-bakelasi mpo na kotambwisa molongo ya komona ya makambo na yo. Ba classes oyo ezali responsive, yango wana okoki ko setting the orderby breakpoint (par exemple, .order-1.order-md-2). Esangisi lisungi mpo 1na nzela 12na kati ya ba niveaux nionso mitano ya grille.

Ya liboso na DOM, ordre moko te esalemi

Ya mibale na DOM, na ordre ya monene koleka

Ya misato na DOM, 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>

Ezali mpe na ba classes responsives .order-firstmpe .order-lastoyo ebongoli ya orderya élément moko na kosalelaka order: -1mpe order: 13( order: $columns + 1), respectivement. Bakelasi yango ekoki mpe kosangisama na .order-*bakelasi oyo ezali na banimero soki esengeli.

Ya liboso na DOM, commandé ya suka

Ya mibale na DOM, sans ordre

Ya misato na DOM, ba commander liboso

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

Kosala offset ya ba colonnes

Okoki ko offset ba colonnes ya grille na ndenge mibale: .offset-ba classes na biso ya grille oyo ezo répondre na ba utilitaires na biso ya marge . Ba classes ya grille ezali na taille mpo na ko correspondre na ba colonnes pendant que ba marges ezali na tina mingi pona ba layouts ya mbangu esika largeur ya offset ezali variable.

Ba kelasi ya offset

Bokende na makonzí na lobɔkɔ ya mobali na kosaleláká .offset-md-*bakelasi. Bakelasi yango ebakisaka marge ya lobɔkɔ ya mwasi ya likoló na *makonzí. Na ndakisa, .offset-md-4etambolaka .col-md-4likoló ya makonzí minei.

.col-md-4 oyo ezali

.col-md-4 .kozanga-malamu-4

.col-md-3 .kozanga-nzela-md-3

.col-md-6 .kolongolama ya biloko-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>

Longola bolongolami ya makonzí na bisika ya kobuka oyo eyanolaka, ekoki kozala ete osengeli kozongisa ba offsets na esika na yango. Tala yango na misala na ndakisa ya grille .

.kolo-sm-5 .kol-md-6

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

.kol-sm-6 .kol-md-5 .kol-lg-6

.col-sm-6 .col-md-5 .kolongola-md-2 .col-lg-6 .kolongola-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>

Ba utilités ya marge

Na kokende na flexbox na v4, okoki kosalela ba utilitaires ya marge lokola .mr-autoko forcer ba colonnes ya bandeko mosika moko na mosusu.

.col-md-4 oyo ezali

.col-md-4 .ml-moto ya motuka

.col-md-3 .ml-md-moto ya mosala

.col-auto .mokonzi-moto

.col-moto ya motuka

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

Kosala zumbu

Mpo na kosala nest ya makambo na yo na grille ya liboso, bakisa ya sika .rowmpe ensemble ya .col-sm-*ba colonnes na kati ya .col-sm-*colonne oyo ezali. Milɔngɔ́ oyo ekangami esengeli kozala na ensemble ya makonzí oyo ebakisami kino na 12 to na nse (esengeli te osalela makonzí nyonso 12 oyo ezali).

Niveau ya 1: .col-sm-9

Niveau ya 2: .col-8 .col-sm-6

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

Ba mixins ya sass

Ntango ozali kosalela ba fichiers Sass ya source ya Bootstrap, ozali na option ya kosalela ba variables ya Sass mpe ba mixins mpo na kosala ba layouts ya page personnalisé, sémantique, mpe responsive. Ba classes na biso ya grille prédéfinies esalelaka ba variables na ba mixins oyo moko pona kopesa suite mobimba ya ba classes prêtes à utiliser pona ba layouts oyo ezo répondre rapide.

Ba variables oyo ezali

Ba variables mpe ba cartes elakisaka motango ya ba colonnes, largeur ya gouttière, mpe point ya requête ya media oyo esengeli kobanda ba colonnes flottante. Tosalelaka oyo mpo na kobimisa ba classes ya grille oyo esili kolimbolama liboso oyo ekomami likolo, mpe lisusu mpo na ba mixins personnalisés oyo etangami awa na se.

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

Ba mixins

Ba mixins esalelamaka elongo na ba variables ya grille pona kobimisa CSS sémantique pona ba colonne ya grille moko moko.

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

Ndakisa ya bosaleli

Okoki ko modifier ba variables na ba valeurs personnalisées na yo moko, to kosalela kaka ba mixins na ba valeurs na bango ya défaut. Tala ndakisa ya kosalela ba paramètres par défaut mpo na kosala layout ya ba colonnes mibale na espace entre.

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

Makambo ya ntina

Contenu ya mibale

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

Kobongisa grille na ndenge ya moto ye moko

Na kosalelaka ba variables na biso ya grille Sass oyo etongami na kati mpe ba cartes, ezali possible ya ko personnaliser entièrement ba classes ya grille prédéfinies. Bobongola motango ya ba niveaux, ba dimensions ya requête ya media, mpe ba largeurs ya conteneur —na sima recompiler.

Makonzí mpe ba gouttières

Motango ya ba colonne ya grille ekoki kobongisama na nzela ya ba variables ya Sass. $grid-columnsesalelamaka mpo na kobimisa bonene (na %) ya likonzi mokomoko ntango $grid-gutter-widthezali kotya bonene mpo na ba gouttières ya makonzí.

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

Ba niveaux ya grille

Koleka ba colonnes yango moko, okoki pe ko personnaliser nombre ya ba niveaux ya grille. Soki olingaki kaka ba niveaux minei ya grille, olingaki kosala mise à jour ya $grid-breakpointsmpe $container-max-widthsna eloko lokola oyo:

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

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

Ntango ozali kosala mbongwana nyonso na ba variables to ba cartes ya Sass, ekosenga obomba mbongwana na yo mpe o recompiler. Kosala bongo ekobimisa ensemble ya sika mpenza ya ba classes ya grille oyo esili kolimbolama liboso mpo na bonene ya makonzí, ba offsets, mpe kosala komande. Ba utilitaires ya visibilité oyo ezo répondre ekozala pe mise à jour pona kosalela ba points de rupture personnalisé. Sala makasi otia ba valeurs ya grille na px(te rem, em, to %).