Sistemụ grid

Jiri ngwa mkpanaaka flexbox mbụ dị ike iji wuo nhazi nke ụdị na nha niile maka sistemụ kọlụm iri na abụọ, ọkwa ndabara isii, mgbanwe Sass na mixins, yana ọtụtụ klaasị eburu ụzọ kọwaa.

Na ibe a

Ọmụmaatụ

Sistemụ grid Bootstrap na-eji usoro akpa, ahịrị, na kọlụm iji hazie na mezie ọdịnaya. Ejiri flexbox rụọ ya ma na-anabata ya nke ọma. N'okpuru ebe a bụ ihe atụ na nkọwa dị omimi maka otú usoro grid si ejikọta ọnụ.

Ọhụrụ ka ọ bụ nke ị mabeghị na flexbox? Gụọ ntuziaka flexbox CSS aghụghọ a maka ndabere, okwu okwu, ntuziaka na snippets koodu.

Ogidi

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

Ọmụmaatụ a dị n'elu na-emepụta kọlụm obosara atọ nhata n'ofe ngwaọrụ niile yana ọdụ ụgbọ elu site na iji klaasị grid anyị akọwapụtara. Ogidi ndị ahụ gbadoro ụkwụ na ibe ya na nne na nna .container.

Ka o si arụ ọrụ

N'ịkwatu ya, nke a bụ ka sistemụ grid si agbakọta ọnụ:

Grid anyị na-akwado ebe nkwụsịtụ isii na-anabata . Ebe nkwụsịtụ na-adabere na min-widthajụjụ mgbasa ozi, nke pụtara na ha na-emetụta ebe nkwụsịtụ ahụ na ndị niile dị n'elu ya (dịka ọmụmaatụ, .col-sm-4metụtara sm, md, lg, xl, na xxl). Nke a pụtara na ị nwere ike ijikwa akpa na kọlụm nha na omume site na ebe nkwụsịtụ ọ bụla.
Akpa etiti wee dochie ọdịnaya gị n'ụzọ kwụ ọtọ. Jiri .containermaka obosara pikselụ na-anabata, .container-fluidmaka width: 100%n'ofe ebe nlele na ngwaọrụ niile, ma ọ bụ akpa na-anabata (dịka ọmụmaatụ .container-md) maka ngwakọta nke mmiri na obosara pixel.
Ahịrị bụ ihe mkpuchi maka ogidi. Kọlụm ọ bụla nwere kehoraizin padding(a na-akpọ gutter) maka ịchịkwa ohere dị n'etiti ha. A paddingna-emegide nke a n'ahịrị ndị nwere oke na-adịghị mma iji hụ na ọdịnaya dị na kọlụm gị na-adakọba n'anya n'akụkụ aka ekpe. Ahịrị na-akwado klaasị mgbanwe iji tinye otu kọlụm nha na klaasị gotter iji gbanwee oghere nke ọdịnaya gị.
Ogidi na-agbanwe agbanwe nke ukwuu. Enwere ogidi ndebiri 12 dị n'otu ahịrị, na-enye gị ohere ịmepụta njikọ dị iche iche nke ihe na-agafe ọnụ ọgụgụ ogidi ọ bụla. Klas kọlụm na-egosi ọnụọgụ ogidi ndebiri ka ọ dị ogologo (dịka ọmụmaatụ, col-4agbatị anọ). widths ka edobere na pasentị ka ị na-enwe otu nha nha.
Gutters na-anabatakwa ma hazie ya. Klas gutter dị n'ofe ebe nkwụsịtụ niile, yana otu nha dị ka oke na oghere padding anyị . Gbanwee gọọmenti kwụ ọtọ na .gx-*klaasị, gọọmentị kwụ ọtọ nwere .gy-*, ma ọ bụ ọwa mmiri niile nwere .g-*klaasị. .g-0dịkwa maka iwepu ọwa mmiri.
Sass variables, map na mixins na-eme ka grid dị ike. Ọ bụrụ na ịchọghị iji klaasị grid akọwapụtagoro na Bootstrap, ị nwere ike iji isi iyi Sass nke grid anyị iji mepụta nke gị nwere akara nrịbama karịa. Anyị gụnyekwara ụfọdụ ihe eji eme omenala CSS iji rie mgbanwe Sass ndị a maka mgbanwe dị ukwuu maka gị.

Mara oke na chinchi gburugburu flexbox , dị ka enweghị ike iji ụfọdụ HTML ọcha dị ka flex containers .

Nhọrọ grid

Sistemụ grid Bootstrap nwere ike imeghari n'ofe ntụpọ isii ndabara, yana ebe nkwụsịtụ ọ bụla ị na-ahazi. Ogo grid isii nke ndabara bụ ndị a:

Obere obere (xs)
Obere (sm)
Ọkara (md)
Nnukwu (lg)
Nnukwu nnukwu (xl)
Nnukwu nnukwu (xxl)

Dị ka e kwuru n'elu, nke ọ bụla n'ime ebe nkwụsịtụ ndị a nwere akpa nke ya, prefix klaasị pụrụ iche, na ndị mgbanwe. Nke a bụ ka grid si agbanwe n'ofe ebe nkwụsịtụ ndị a:

	xs <576px	sm ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
Akpa`max-width`	Ọ nweghị (akpaaka)	540px	720px	960px	1140px	1320px
Nganiihu klaasị	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
# nke ogidi	12
Obosara gutter	1.5rem (.75rem n'aka ekpe na aka nri)
Ọwa mmiri omenala	Ee
Akwụsịghị ya	Ee
Ntụnye kọlụm	Ee

Ogidi nhazi onwe

Jiri klaasị kọlụm gbawara agbawa maka nha kọlụm dị mfe na-enweghị klaasị akọwapụtara ọnụ ka .col-sm-6.

Ha nhata-obosara

Dịka ọmụmaatụ, ebe a bụ nhazi grid abụọ na-emetụta ngwaọrụ ọ bụla na nlegharị anya, site xsna gaa na xxl. Tinye klaasị ọ bụla na-erughị nkeji maka ebe nkwụsịtụ ọ bụla ịchọrọ na kọlụm ọ bụla ga-abụ otu obosara.

1 nke 2

2 nke 2

1 nke 3

2 nke 3

3 nke 3

html

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

Ịtọ ntọala otu obosara kọlụm

Nhazi akpaaka maka kọlụm flexbox pụtakwara na ị nwere ike ịtọ obosara nke otu kọlụm wee mee ka ogidi nwanne gbanwee ya ozugbo. Ị nwere ike iji klaasị grid akọwapụtagoro (dị ka egosiri n'okpuru), mixins grid, ma ọ bụ obosara ahịrị. Rịba ama na ogidi ndị ọzọ ga-agbanwe nha n'agbanyeghị obosara nke kọlụm etiti.

1 nke 3

2 n'ime 3 (obosara)

3 nke 3

1 nke 3

2 n'ime 3 (obosara)

3 nke 3

html

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

Ọdịnaya obosara na-agbanwe agbanwe

Jiri col-{breakpoint}-autoklaasị were nha kọlụm dabere na obosara okike nke ọdịnaya ha.

1 nke 3

Ọdịnaya obosara na-agbanwe agbanwe

3 nke 3

1 nke 3

Ọdịnaya obosara na-agbanwe agbanwe

3 nke 3

html

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

Grid nke Bootstrap gụnyere ọkwa isii nke klaasị akọwapụtagoro maka iwulite okirikiri nhọrọ ukwuu na-anabata. Hazie nha nke kọlụm gị na obere obere, obere, ọkara, nnukwu ma ọ bụ nnukwu ngwaọrụ agbanyeghị na ọ dabara gị.

Ebe nkwụsịtụ niile

Maka grids bụ otu site na ngwaọrụ kacha nta ruo na nke kachasị, jiri .colna .col-*klaasị. Ezipụta klaasị nwere nọmba mgbe ịchọrọ kọlụm nwere oke nha; ma ọ bụghị ya, nweere onwe gị ịrapara na .col.

Kọl

kọl-8

kọl-4

html

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

Akwadoro na kehoraizin

N'iji otu .col-sm-*klaasị, ị nwere ike ịmepụta usoro grid bụ isi nke na-amalite n'usoro wee bụrụ kehoraizin na obere nkwụsịtụ ( sm).

Kọl-sm-8

col-sm-4

col-sm

html

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

Gwakọta na dakọtara

Ịchọghị ka kọlụm gị kwụkọ naanị n'ụfọdụ ọkwa grid? Jiri ngwakọta nke klaasị dị iche iche maka ọkwa ọ bụla dịka achọrọ. Lee ihe atụ n'okpuru ka ị nweta echiche ka mma ka ọ na-arụ ọrụ.

.kọl-md-8

.Col-6 .Col-md-4

.kọl-6

html

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

Ahịrị ogidi

Jiri .row-cols-*klaasị na-anabata ngwa ngwa tọọ ọnụọgụ ogidi ndị kacha nye ọdịnaya na nhazi gị ngwa ngwa. Ebe .col-*klaasị nkịtị na-emetụta kọlụm n'otu n'otu (dịka ọmụmaatụ, .col-md-4), klaasị ahịrị ahịrị ka edobere na nne na nna .rowdịka ụzọ mkpirisi. Na .row-cols-autoị nwere ike inye ogidi ha eke obosara.

Jiri klaasị ahịrị ahịrị ndị a ka imepụta usoro grid ngwa ngwa ma ọ bụ jikwaa okirikiri nhọrọ ukwuu kaadị gị.

Ogidi

html

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

Ogidi

html

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

Ogidi

html

<div class="container text-center">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Ogidi

html

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

Ogidi

html

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

Ogidi

html

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

Ị nwekwara ike iji Sass mixin na-esote 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);
  }
}

Akwu

Iji grid ndabara tinye akwu ọdịnaya gị, tinye nke ọhụrụ .rowna nhazi .col-sm-*kọlụm n'ime .col-sm-*kọlụm dị adị. Ahịrị akwụkwụ kwesịrị ịgụnye otu kọlụm gbakwụnye ihe ruru 12 ma ọ bụ ole na ole (ọ chọghị ka ị jiri kọlụm 12 niile dị).

Ọkwa 1: .col-sm-3

Ọkwa 2: .col-8 .col-sm-6

Ọkwa 2: .col-4 .col-sm-6

html

<div class="container text-center">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="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

Mgbe ị na-eji faịlụ Sass isi mmalite Bootstrap, ị nwere nhọrọ nke iji Sass variables na mixins mepụta nhazi ihu akwụkwọ omenala, nkọwa na nke na-anabata. Klaasị grid anyị akọwapụtagoro na-eji otu mgbanwe na mixins ndị a iji nye otu klaasị akwadoro iji maka nhazi ngwa ngwa na-anabata ya.

Mgbanwe

Mgbanwe na maapụ na-ekpebi ọnụọgụ nke kọlụm, obosara gotter na ebe ajụjụ mgbasa ozi ga-amalite ogidi ndị na-ese n'elu mmiri. Anyị na-eji ndị a iji wepụta klaasị grid akọwapụtara n'elu, yana maka mixins omenala edepụtara n'okpuru.

$grid-columns:      12;
$grid-gutter-width: 1.5rem;
$grid-row-columns:  6;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

Ngwakọta

A na-eji mixins na njikọta yana mgbanwe grid iji mepụta CSS ntụgharị uche maka kọlụm grid nke ọ bụla.

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

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Offset with margins
@include make-col-offset($size, $columns: $grid-columns);

Ojiji ọmụmaatụ

Ị nwere ike gbanwee mgbanwe ndị ahụ ka ọ bụrụ ụkpụrụ omenala nke gị, ma ọ bụ jiri mixins na ụkpụrụ ndabara ha. Nke a bụ ọmụmaatụ nke iji ntọala ndabara iji mepụta nhazi kọlụm abụọ nwere oghere n'etiti.

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

Isi ọdịnaya

Ọdịnaya nke abụọ

html

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

Na-ahazi grid

Iji grid Sass arụnyere na maapụ anyị, ọ ga-ekwe omume ịhazi klaasị grid akọwapụtachara kpamkpam. Gbanwee ọnụ ọgụgụ nke ọkwa, akụkụ ajụjụ mgbasa ozi na obosara akpa - wee chịkọtaghachi.

Ogidi na gotters

Enwere ike gbanwee ọnụọgụ nke kọlụm grid site na mgbanwe Sass. $grid-columnsa na-eji emepụta obosara (na pasent) nke kọlụm nke ọ bụla ma $grid-gutter-widthna-edozi obosara maka gọọlụ kọlụm. $grid-row-columnsa na-eji iji tọọ ọnụọgụgụ kacha nke kọlụm nke .row-cols-*, ọnụọgụ ọ bụla karịrị oke a na-eleghara anya.

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !default;

Ọkwa grid

N'ịgafe ogidi ndị ahụ n'onwe ha, ị nwekwara ike hazie ọnụọgụgụ nke grid. Ọ bụrụ na ịchọrọ naanị ọkwa grid anọ, ị ga-emelite ya $grid-breakpointsna $container-max-widthsihe dịka nke a:

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

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

Mgbe ị na-eme mgbanwe ọ bụla na mgbanwe Sass ma ọ bụ maapụ, ị ga-achọ ịchekwa mgbanwe gị wee chịkọta ya. Ime nke a ga-ewepụta otu klaasị grid akọwapụtagoro nke ọma maka obosara kọlụm, mgbaghara na ịtụ. A ga-emelitekwa akụrụngwa visibiliti na-anabata iji jiri ebe nkwụsịtụ omenala. Gbaa mbọ hụ na ịtọọ ụkpụrụ grid na px(ọ bụghị rem, em, ma ọ bụ %).