Grid sitɛmu

Baara kɛ ni an ka mobili-fɔlɔ flexbox grid barikama ye walasa ka layidu talenw jɔ cogoya ni hakɛ bɛɛ la k’a sababu kɛ kulu tan ni fila sigicogo ye, jaabi dafalen duuru, Sass fɛn caman sɛgɛsɛgɛli ani mixins, ani kalasi tan ni caman minnu ɲɛfɔlen don ka kɔn.

A bɛ baara kɛ cogo min na

Bootstrap ka grid system bɛ baara kɛ ni minɛnw, jirisunw ani kuluw ye minnu bɛ tugu ɲɔgɔn na walasa ka kɔnɔkow labɛn ani k’u labɛn. A jɔlen bɛ ni flexbox ye wa a bɛ jaabi dafalen di. Misali dɔ bɛ duguma ani jateminɛ kuncɛlen bɛ jabaranin bɛ ɲɔgɔn sɔrɔ cogo min na.

Aw ye kura ye walima aw tɛ flexbox dɔn wa? Aw ye nin CSS Tricks flexbox gafe kalan walasa ka kunnafoni sɔrɔ kɔkankow, daɲɛw, bilasiralikanw ani kode snippets kan.

Kolon saba dɔ la kelen

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

Misali min bɛ sanfɛ, o bɛ kulu saba Dabɔ minnu bonya bɛ bɛn ɲɔgɔn ma minɛn misɛnninw, cɛmancɛw, belebelebaw ani minnu ka bon kosɛbɛ ni an ka jatebɔlanw ye minnu ɲɛfɔlen don ka kɔn. o kuluw bɛ cɛmancɛ la ɲɛ kan ni bangebaga ye .container.

Ka a kari, a bɛ baara kɛ cogo min na, o filɛ nin ye:

Konteynaw bɛ fɛɛrɛ Di walasa k’i ka siti kɔnɔkow Dòn cɛmancɛ la ani k’u Blà ‘yɔrɔ la. Baara .containerkɛ ni pixel width jaabi ye walima .container-fluidka ɲɛsin width: 100%viewport ni minɛnw hakɛ bɛɛ ma.
Layiniw ye fɛnw ye minnu bɛ kɛ ka kolonw datugu. Kolon kelen-kelen bɛɛ bɛ ni horizontal ye padding(a bɛ fɔ a ma ko gutter) walasa ka yɔrɔ min bɛ u ni ɲɔgɔn cɛ, o kɔlɔsi. O paddingbɛ sɔrɔ ka kɛlɛ kɛ jirisunw kan ni dakun juguw ye. O cogo la, i ka kuluw kɔnɔkow bɛɛ bɛ Labɛn ni ɲɛ ye ka Jigin kinin fɛ.
Jatebla labɛncogo la, kɔnɔkow ka kan ka bila kuluw kɔnɔ ani kuluw dɔrɔn de bɛ se ka kɛ jirisunw denw ye teliya la.
Flexbox sababu la, grid kulu minnu ma fɔ width, olu bɛna labɛn u yɛrɛma i n’a fɔ kulu minnu bonya bɛ bɛn ɲɔgɔn ma. Misali la, misali naani .col-smbɛna kɛ otomatiki la 25% bonya ye ka bɔ kariyɔrɔ fitinin na ka taa sanfɛ. Aw ye auto-layout columns yɔrɔ lajɛ walasa ka misali wɛrɛw sɔrɔ.
Kolon kalanw bɛ kulu hakɛ jira i b’a fɛ ka baara kɛ ni min ye ka bɔ 12 la minnu bɛ se ka kɛ jirisun kelen kɔnɔ. O la, n’i b’a fɛ kulu saba minnu bonya bɛ bɛn ɲɔgɔn ma, i bɛ se ka baara kɛ ni .col-4.
Kolon widths bɛ sigi kɛmɛsarada la, o la u bɛ wuli tuma bɛɛ ani u bonya ka kɛɲɛ n’u bangebaga yɔrɔ ye.
Kolonw bɛ ni horizontal paddingye walasa ka gutterw da kulu kelen-kelenw ni ɲɔgɔn cɛ, nka, i bɛ se ka marginbɔ jiriw la ani paddingka bɔ kuluw la ni .no-gutterskan .row.
Walasa ka jatebɔ kɛ jaabi ye, jatebɔyɔrɔ duuru bɛ yen, kelen bɛ jaabi jatebɔyɔrɔ kelen-kelen bɛɛ la : jatebɔyɔrɔ bɛɛ (misɛnninw), misɛnninw, cɛmancɛw, belebelebaw, ani minnu ka bon kosɛbɛ.
Grid breakpoints (jatebɔlanw) bɛ Dabɔ minimum width media ɲininkaliw kan, o kɔrɔ ye k’u bɛ tali Kɛ o breakpoint kelen na ani a sanfɛtaw bɛɛ la (misali la, u .col-sm-4bɛ tali Kɛ minɛn misɛnninw, cɛmancɛw, belebelew ani belebelebaw la, nka xsbreakpoint fɔlɔ tɛ).
Aw bɛ se ka baara kɛ ni jatebɔlanw ye minnu ɲɛfɔlen don ka kɔn (i n’a fɔ .col-4) walima Sass mixins walasa ka kɔrɔko taamasiyɛn caman sɔrɔ.

aw ye dantigɛliw ni buguw dɔn minnu bɛ flexbox lamini na , i n' a fɔ sebaliya ka HTML yɔrɔ dɔw kɛ flex minɛnw ye .

Grid sugandiliw

Hali ni Bootstrap bɛ ems walima rems kɛ ka bonya fanba ɲɛfɔ, pxs bɛ kɛ ka grid breakpoints ani container widths kɛ. o bɛ kɛ bawo filɛlikɛyɔrɔ bonya bɛ pixel kɔnɔ wa a tɛ Changé ni sɛbɛnnibolo hakɛ ye .

Aw ye a lajɛ Bootstrap grid system fan dɔw bɛ baara kɛ cogo min na minɛn caman kan ni tabali ye min bɛ se ka kɛ.

	A ka dɔgɔn kosɛbɛ <576px	A ka dɔgɔn ≥576px	Cɛmancɛ ≥768px	A ka bon ≥992px	A ka bon kosɛbɛ ≥1200px
Max minɛn bonya	Foyi tɛ (auto) .	540px ye	720px ye	960px ye	1140px ye
Kalanso ɲɛbila	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# ka kuluw	12 ye
Gutter bonya	30px (15px bɛ kulu dɔ fan kelen-kelen bɛɛ la)
Nestable ye	Awɔ
Kolonw ka komandi	Awɔ

Kolonw labɛncogo yɛrɛma

Baara kɛ ni breakpoint-specific column classes ye walasa ka column bonya nɔgɔya ni class numéro jɛlen tɛ i n’a fɔ .col-sm-6.

A bonya bɛ bɛn

Misali la, nin ye jatebɔlan fila ye minnu bɛ tali kɛ minɛn ni filɛlikɛyɔrɔ bɛɛ la, k’a ta xska se xl. Aw bɛ unit-less classes hakɛ o hakɛ fara a kan i mago bɛ breakpoint kelen-kelen bɛɛ la ani kolon kelen-kelen bɛɛ bɛna kɛ kelen ye.

1 ka bɔ 2 la

2 ka bɔ 2 la

1 ka bɔ 3 la

2 ka bɔ 3 la

3 ka bɔ 3 la

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

Layini caman-caman-bonya kelen-kelen

Aw bɛ kuluw da minnu bonya bɛ bɛn ɲɔgɔn ma minnu bɛ zana caman cɛ ni a donli ye .w-100yɔrɔ min na aw b’a fɛ kuluw ka kari ka kɛ zana kura ye. aw bɛ lafiɲɛbɔw kɛ jaabiw ye ni u ɲagamini .w-100ye ni jaabi jiralan nafama dɔw ye .

Safari flexbox bug dɔ tun bɛ yen min ye nin bali ka baara kɛ ni ɲɛfɔli jɛlen flex-basiswalima border. Baarakɛcogo dɔw bɛ yen navigatɔrɔ kɔrɔw la, nka u man kan ka kɛ wajibi ye ni i ka navigatɔrɔ laɲinitaw ma bin buggy versions kɔnɔ.

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>

Kolon kelen bonya sigili

Auto-layout for flexbox grid columns fana kɔrɔ ye ko i bɛ se ka kulu kelen bonya sigi ani ka balimakɛ kuluw kɛ u yɛrɛma ka bonya caman wuli a lamini na. Aw bɛ se ka baara kɛ ni jatebɔlanw ye minnu ɲɛfɔlen don ka kɔn (i n’a fɔ a jiralen bɛ cogo min na jukɔrɔ), jatebɔlanw ɲagaminenw, walima jatebɔlanw bonya. A kɔlɔsi ko kulu tɔw bɛna bonya caman Changer hali ni cɛmancɛ koloma bonya mana kɛ min o min ye.

1 ka bɔ 3 la

2 ka bɔ 3 la (a ka bon) .

3 ka bɔ 3 la

1 ka bɔ 3 la

2 ka bɔ 3 la (a ka bon) .

3 ka bɔ 3 la

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

Kɔnɔkow bonya caman bɛrɛbɛrɛ

Baara kɛ ni col-{breakpoint}-autokalanw ye walasa ka kuluw bonya ka kɛɲɛ n’u kɔnɔkow bonya dacogo ye.

1 ka bɔ 3 la

Kɔnɔkow bonya caman bɛrɛbɛrɛ

3 ka bɔ 3 la

1 ka bɔ 3 la

Kɔnɔkow bonya caman bɛrɛbɛrɛ

3 ka bɔ 3 la

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

Kalanso minnu bɛ jaabi di

Bootstrap ka grid kɔnɔ, kalasi minnu ɲɛfɔlen don ka kɔn, olu ka tiers duuru bɛ yen walasa ka jaabiw labɛncogo gɛlɛnw jɔ. Aw ye aw ka kuluw bonya kɛ ka kɛɲɛ ni aw yɛrɛ sago ye minɛn fitininw kan, minɛn fitininw, cɛmancɛw, belebelebaw, walima minnu ka bon kosɛbɛ i n’a fɔ aw b’a ye cogo o cogo.

Kariyɔrɔw bɛɛ

Ni jatebɔlanw ye kelen ye k’a ta minɛn fitininw na ka se minɛn belebelebaw ma, aw bɛ baara kɛ ni .colani .col-*kalasiw ye. Kalanso nimɔrɔma dɔ jira ni i mago bɛ kulu kɛrɛnkɛrɛnnen na min bonya ka bon; n’o tɛ, aw kana siga ka nɔrɔ .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>

A bɛ dalajɛ ka kɛ tilennen ye

Ni aw bɛ baara kɛ ni .col-sm-*kalansen kelen ye, aw bɛ se ka grid system basigilen dɔ da min bɛ daminɛ ni ɲɔgɔn ye ka kɛ horizontal ye breakpoint fitinin na ( sm).

kol-sm-8 ye

kol-sm-4

kol-sm ye

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

Mix ka ɲɔgɔn sɔrɔ

Aw t’a fɛ aw ka kuluw ka ɲɔgɔn dalajɛ dɔrɔn grid tiers dɔw kɔnɔ wa? Aw bɛ baara kɛ ni kalan suguya wɛrɛw faralen ye ɲɔgɔn kan sanfɛyɔrɔ kelen-kelen bɛɛ la i n’a fɔ aw mago bɛ cogo min na. Aw ye misali lajɛ min bɛ duguma walasa ka hakilina ɲuman sɔrɔ a bɛɛ bɛ baara kɛ cogo min na.

.kol-md-8 ye

.koli-6 .kol-md-4

.kol-6 ye

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

Gutɛriw

Gutters bɛ se ka jaabi ladilan ni breakpoint-specific padding ani negative margin utility classes ye. Walasa ka gutɛriw Changer dans un row dit, pair un utilitaire de marge négatif sur le .rowet matching padding utilités sur le .cols. A bɛ se ka kɛ ko .containerwalima .container-fluidbangebaga ka kan ka ladilan fana walasa ka a yɛrɛ tanga jibɔbaliya ma, ka baara kɛ ni padding utility ye min bɛ bɛn ɲɔgɔn ma tuguni.

Nin ye misali ye Bootstrap grid ladamuni na ( lg) kariyɔrɔba la ani a sanfɛ. an ye dɔ fara .colpadding kan ni .px-lg-5, ka counteract o ni .mx-lg-n5kan bangebaga kan ka sɔrɔ ka wrapper .rowladilan ni ..container.px-lg-5

Kolon padding min bɛ kɛ ka kɛɲɛ ni mɔgɔw sago ye

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

Kolonw tigɛli

Baara kɛ ni jaabi .row-cols-*kalanw ye walasa ka teliya ka kulu hakɛ sigi min bɛ i ka kɔnɔkow ni i ka labɛncogo jira ka ɲɛ. K’a sɔrɔ kalasi nɔrɔlenw .col-*bɛ tali kɛ kulu kelen-kelen bɛɛ la (misali la, .col-md-4), jirisun kuluw kalasi bɛ sigi bangebaga .rowkan i n’a fɔ sira surun.

Baara kɛ ni nin jirisunw kalansenw ye walasa ka teliya ka jatebɔlan jɔnjɔnw dilan walima ka i ka karti labɛncogo kɔlɔsi.

Kɔlɔni

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

Kɔlɔni

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

Kɔlɔni

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

Kɔlɔni

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

Kɔlɔni

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

Aw bɛ se fana ka baara kɛ ni Sass mixin ye min bɛ a kɔfɛ, 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);
  }
}

Alignment (labɛnni).

Baara kɛ ni flexbox alignment utilities ye walasa ka kolonw labɛn ka ɲɛ ani ka u labɛn ka ɲɛ. Internet Explorer 10-11 tɛ flex fɛnw labɛncogo jɔlen dɛmɛ ni flex minɛn bɛ ni a ye min-heighti n’a fɔ a jiralen bɛ cogo min na jukɔrɔ. Aw ye Flexbugs #3 lajɛ walasa ka kunnafoni wɛrɛw sɔrɔ.

Labɛnni jɔlen

Kolon saba dɔ la kelen

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

Kolon saba dɔ la kelen

<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 horizontal (Jɛɲɔgɔnya tilennen).

Kolon fila dɔ la kelen

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

Gutters tɛ yen

kuluw ni ɲɔgɔn cɛ jibolisiraw an ka jatebɔ kalansenw kɔnɔ minnu ɲɛfɔlen don ka kɔn , olu bɛ se ka bɔ ni .no-gutters. marginO bɛ s juguw bɔ .rowani horizontal paddingka bɔ denmisɛnw ka kuluw bɛɛ la.

Nin ye 'sènfɛ-kode ye min bɛ Kɛ ka nin cogoyaw Dabɔ. aw k' a kɔlɔsi ko kuluw sɛgɛsɛgɛli bɛ kɛ ka ɲɛsin denmisɛnw kulu fɔlɔw dɔrɔn de ma , wa u bɛ laɲini fɛnw sugandili fɛ . Hali n’o bɛ sugandili kɛrɛnkɛrɛnnen dɔ lawuli, kolosinsinnanw bɛ se ka ladilan ka taa a fɛ hali bi ni yɔrɔjan nafamafɛnw ye .

Aw mago bɛ dilan na min bɛ bɔ dakun na ka taa a dan na wa? Aw bɛ bangebaga .containerwalima .container-fluid.

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

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

Tiɲɛ na, a bɛ cogo min na, o filɛ nin ye. A kɔlɔsi aw bɛ se ka t’a fɛ ka baara kɛ ni nin ye ni jatebɔlan tɔw bɛɛ ye minnu ɲɛfɔlen don ka kɔn (o la, kuluw bonya, jaabiw, jatebɔw, ani fɛn wɛrɛw).

.koli-sm-6 .kol-md-8

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

Kolonw sirili

Ni kulu minnu ka ca ni 12 ye, olu bilala jirisun kelen kɔnɔ, kulu wɛrɛw kulu kelen-kelen bɛɛ bɛna, i n’a fɔ yɔrɔ kelen, ka siri tigɛli kura kan.

.kol-9 ye

.col-4
Komin 9 + 4 = 13 > 12, nin div 4-kolon-kɔnɔ in bɛ siri tigɛli kura kan i n’a fɔ unit kelen min bɛ ɲɔgɔn kan.

.col-6
Kolon minnu bɛ tugu ɲɔgɔn kɔ, olu bɛ tɛmɛ layini kura kan.

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

Kolon bɛ kari

Kolonw kari ka taa layini kura la flexbox kɔnɔ, o bɛ hakɛ fitinin dɔ de wajibiya: width: 100%i b’a fɛ k’i ka kuluw siri yɔrɔ o yɔrɔ la ka fɛn dɔ fara tigɛli kura kan. A ka c’a la o bɛ Kɛ ni .rows caman ye, nka waleyali fɛɛrɛ bɛɛ tɛ Se ka jatebla Kɛ o la.

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

aw bɛ se fana ka nin lafiɲɛbɔ in kɛ lafiɲɛbɔ kɛrɛnkɛrɛnnenw na ni an ka jaabi jiralanw ye .

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

Segin ka sigi sen kan

Kalansow komandi

Baara kɛ ni .order-kalanw ye walasa ka i ka kɔnɔkow sigicogo ɲɛnama kɔlɔsi. Nin kalan ninnu bɛ jaabi di, o la aw bɛ se ka orderby breakpoint (misali la, .order-1.order-md-2). A bɛ dɛmɛ don ka 1tɛmɛn ka 12tɛmɛn grid tiers duuru bɛɛ kan.

Fɔlɔ DOM kɔnɔ, yamaruya si ma kɛ

Filanan DOM la, ni komandiba ye

Sabanan DOM la, ni komandi ye 1 ye

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

.order-firstJaabi ni .order-lastkalasi fana bɛ yen minnu bɛ fɛn dɔ Changer ni ( ) orderwaleyali ye , u kelen-kelen bɛɛ. O kalanw fana bɛ se ka ɲagami ni kalansenw ye minnu jate bɛ kɛ i n’a fɔ a mago bɛ cogo min na.order: -1order: 13order: $columns + 1.order-*

Fɔlɔ DOM kɔnɔ, komandi laban

Filanan DOM la, min ma yamaruya

Sabanan DOM la, komandi fɔlɔ

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

Kolonw (offset) kɛli

Aw bɛ se ka grid kolonw offset cogo fila la: an ka jaabiw .offset-grid classes ani an ka margin utilities . Grid classes (jatebɔlanw) hakɛ bɛ bonya walasa ka bɛn kuluw ma k’a sɔrɔ margins (dakunw) nafa ka bon kosɛbɛ layidu teliya la yɔrɔ minnu na offset (fɔlikan) bonya bɛ ɲɔgɔn ta.

Offset kalanw

Aw bɛ kuluw wuli ka taa kinin fɛ ni .offset-md-*kalanw ye. O kalasiw bɛ dɔ Fàra kulu dɔ kinin fɛ dakun kan *kuluw fɛ. Misali la, .offset-md-4a bɛ taa .col-md-4kulu naani kan.

.kol-md-4 ye

.kol-md-4 .fɔcogo-md-4

.kol-md-3 .fɔcogo-md-3

.kol-md-6 .fɔcogo-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>

Ka fara kolomaw jɛyali kan jaabiw tiɲɛniyɔrɔw la, i bɛ se ka offsetw labɛn kokura. aw ye nin lajɛ wale la ja misali la .

.koli-sm-5 .kol-md-6

.kol-sm-5 .fɔli-sm-2 .kol-md-6 .fɔcogo-md-0

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

.kol-sm-6 .kol-md-5 .fɔli-md-2 .koli-lg-6 .fɔli-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>

Margin nafamafɛnw

Ni 'yɔrɔ bɛ flexbox la v4 kɔnɔ, i bɛ Se ka baara Kɛ ni margin utilities ye i n'a fɔ .mr-autoka balimakɛw ka kuluw Wajibiya ka Bɔ ɲɔgɔn na.

.kol-md-4 ye

.kol-md-4 .ml-auto

.koli-md-3 .ml-md-auto

.col-auto .mr-auto ka baara ye

.kol-otomatiki

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

Denw dilanni

Walasa k’i ka kɔnɔkow nest ni grid default ye, i ka kulu kura .rowni kulu dɔ fara kulu .col-sm-*dɔ kan min bɛ yen .col-sm-*. Nested rows ka kan ka kɛ ni kuluw kulu ye minnu bɛ fara ɲɔgɔn kan ka se 12 ma walima ka dɔgɔya (a man kan i ka baara kɛ ni kulu 12 bɛɛ ye minnu bɛ sɔrɔ).

Nivo 1: .col-sm-9 ye

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

Nivo 2: .kol-4 .kol-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 ka mixinw

Ni i bɛ baara Kɛ ni Bootstrap ka source Sass files ye, i bɛ se ka baara Kɛ ni Sass variables ni mixins ye walasa ka ɲɛw labɛncogo ladamulenw, kɔrɔko ani jaabiw dilan. An ka grid kalasi minnu ɲɛfɔlen don ka kɔn, olu bɛ baara kɛ ni nin fɛn caman ɲɔgɔnna ni mixins kelenw ye walasa ka kalan labɛnnenw suite bɛɛ di walasa ka jaabi teliya layidu ta.

Yɛlɛma-yɛlɛmaw

Yɛlɛmaw ni kartiw bɛ kuluw hakɛ jira, gutɛri bonya, ani kunnafonidilanw ɲininkali yɔrɔ min na kuluw bɛ wuli ka wuli. An bɛ baara Kɛ ni ninnu ye walasa ka grid classes (jatebɔ-kalanso) minnu ɲɛfɔlen dòn ka Kɔn, olu Sɔrɔ minnu sɛbɛnnen dòn san fɛ, ka Fàra custom mixins (lada mixins) minnu kofɔlen dòn jukɔrɔ.

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

Mixinw (Mixins).

Mixins bɛ baara kɛ ni grid variables ye walasa ka semantiki CSS dilan grid kulu kelen-kelen bɛɛ kama.

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

Misali la baarakɛcogo

Aw bɛ se ka fɛn caman sɛmɛntiya ka kɛɲɛ ni aw yɛrɛ ka ladamu nafaw ye, walima ka baara kɛ dɔrɔn ni mixins ye n’u ka nafa fɔlɔw ye. Nin ye misali ye min bɛ baara Kɛ ni 'sènfɛ-sɛbɛnni-minɛnw ye walasa ka kulu fla-fla-labɛnni Dabɔ ni danfara bɛ u ni ɲɔgɔn cɛ.

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

Kɔnɔkow kunbabaw

Kɔnɔkow filanan

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

Ka grid (jatebɔ) kɛ ka kɛɲɛ ni mɔgɔw sago ye

Baara kɛli ni an ka jatebɔlan Sass fɛn caman sɛgɛsɛgɛli ni kartiw ye minnu bɛ a kɔnɔ, a bɛ se ka jatebɔ kalasi minnu ɲɛfɔlen don ka kɔn, olu bɛrɛbɛn pewu. Yɛlɛma ni tiyɛri hakɛ ye, kunnafonidilan ɲininkali hakɛw, ani minɛnw bonya—o kɔfɛ, aw bɛ segin ka ɲɔgɔn dalajɛ.

Kolonw ni jibolisiraw

Grid kuluw hakɛ bɛ se ka ladilan Sass variables fɛ. $grid-columnsbɛ kɛ ka kolosinsinnan kelen-kelen bɛɛ bonya (kɛmɛsarada la) sɔrɔ ka sɔrɔ $grid-gutter-widthka kolosinsinnanw bonya sigi sen kan.

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

Grid tiers (jatebɔlanw).

Ni i bɛ tɛmɛ kuluw yɛrɛ kan, i bɛ se fana ka jatebɔlanw hakɛ ladilan. Ni i tun b’a fɛ ka grid tiers naani dɔrɔn de sɔrɔ, i tun bɛna $grid-breakpointsand update $container-max-widthska kɛ nin fɛn in ye:

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

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

Ni i bɛ fɛn o fɛn Changer Sass variables walima maps la, i ka kan k’i ka fɛn caman Changements mara ani ka recompile. O kɛli bɛna kɛ sababu ye ka grid classes (jatebɔlanw) minnu ɲɛfɔlen don ka kɔn, olu kulu kura dɔ bɔ ka ɲɛsin kolosinsinnanw bonya, offsets ani komandiw ma. Responsive visibility utilities fana bɛna ladamu walasa ka baara kɛ ni ladamu breakpoints ye. Aw ye aw jija ka jatebɔlan nafaw sigi px(a tɛ rem, em, walima %).