Grid nhyehyɛe

Fa yɛn mobile-first flexbox grid a ahoɔden wom no si nhyehyeɛ a ɛwɔ nsusuwii ne ne kɛseɛ nyinaa aseda a ɛwɔ adum dumienu nhyehyɛeɛ, default mmuaeɛ tiers anum, Sass variables ne mixins, ne adesua ahodoɔ du du pii a wɔadi kan akyerɛkyerɛ mu.

Sɛnea ɛyɛ adwuma

Bootstrap grid nhyehyɛe no de containers, rows, ne columns ahorow a ɛtoatoa so di dwuma de hyehyɛ nneɛma no na ɛne no hyia. Wɔde flexbox na esii na ɛyɛ nea ɛyɛ adwuma yiye. Ase hɔ no yɛ nhwɛso ne hwɛ a emu dɔ a ɛfa sɛnea grid no bom ho.

Woyɛ foforo wɔ flexbox mu anaasɛ wunnim? Kenkan CSS Tricks flexbox akwankyerɛ yi ma akyi, nsɛmfua, akwankyerɛ, ne koodu nsɛm nketenkete.

Adum abiɛsa no mu biako

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

Nhwɛsoɔ a ɛwɔ atifi hɔ no yɛ nkorabata mmiɛnsa a ne tɛtrɛtɛ yɛ pɛ wɔ mfiri nketewa, mfimfini, akɛseɛ, ne akɛseɛ a ɛboro soɔ so de yɛn grid adesua ahodoɔ a yɛadi kan akyerɛkyerɛ mu no di dwuma. Saa nkyerɛwde ahorow no wɔ kratafa no mfinimfini a ɔwofo no ka ho .container.

Sɛ yɛbubu no a, sɛnea ɛyɛ adwuma ni:

Containers ma ɔkwan a wobɛfa so ahyɛ wo site no mu nsɛm no mfinimfini na woayɛ no tẽẽ. Fa di dwuma .containerma pixel trɛw a ɛyɛ mmuae anaasɛ .container-fluidma width: 100%wɔ viewport ne mfiri akɛse nyinaa so.
Rows yɛ ntama a wɔde kyekyere adum ho. Adum biara wɔ horizontal padding(a wɔfrɛ no gutter) a wɔde hwɛ baabi a ɛda wɔn ntam no so. paddingAfei wɔde nsensanee a enye siw eyi ano wɔ nkyerɛwde ahorow no so . Saa kwan yi so no, nsɛm a ɛwɔ wo nkyerɛwde ahorow no mu nyinaa yɛ nea wɔde aniwa hu a ɛne benkum so hyia.
Wɔ grid nhyehyeɛ mu no, ɛsɛ sɛ wɔde nsɛm a ɛwɔ mu no to nkorabata mu na nkorabata nko ara na ɛbɛtumi ayɛ row ahorow no mma ntɛm ara.
Esiane flexbox nti, grid columns a enni specified widthno bɛhyehyɛ ne ho sɛ columns a ne tɛtrɛtɛ yɛ pɛ. Sɛ nhwɛso no, nhwɛso anan a .col-smemu biara bɛyɛ 25% trɛw ankasa fi breakpoint ketewa no ne soro. Hwɛ auto-layout columns ɔfã no ma nhwɛso pii.
Kɔlam adesua ahorow kyerɛ kɔla dodow a wopɛ sɛ wode di dwuma wɔ 12 a ebetumi aba wɔ row biara mu no mu. Enti, sɛ wopɛ sɛ nkyerɛwde abiɛsa a ne tɛtrɛtɛ yɛ pɛ twa a, wubetumi de adi dwuma .col-4.
Wɔde kɔla widths ahyɛ ɔha mu nkyekyɛmu mu, enti ɛyɛ nsuo ne kɛseɛ berɛ biara sɛ wɔde toto wɔn awofoɔ element ho.
Columns wɔ horizontal paddinga ɛbɛma gutters no wɔ columns ankorankoro ntam, nanso, wubetumi ayi marginafi rows ne paddingfi columns no mu ne .no-gutterson the .row.
Sɛnea ɛbɛyɛ a grid no bɛtumi ayɛ adwuma no, grid no breakpoints anum na ɛwɔ hɔ, baako ma breakpoint biara a ɛyɛ mmuaeɛ : breakpoints no nyinaa (ketewa a ɛboro soɔ), nketewa, mfimfini, kɛseɛ, ne kɛseɛ a ɛboro soɔ.
Grid breakpoints gyina minimum width media queries so, a ɛkyerɛ sɛ ɛfa saa breakpoint biako ne wɔn a ɛwɔ n’atifi nyinaa ho (sɛ nhwɛso no, .col-sm-4ɛfa mfiri nketewa, mfinimfini, akɛse, ne akɛse a ɛboro so ho, nanso ɛnyɛ xsbreakpoint a edi kan no).
Wubetumi de grid adesua ahorow a wɔadi kan akyerɛkyerɛ mu (te sɛ .col-4) anaa Sass mixins adi dwuma ama nkyerɛase agyiraehyɛde pii.

Hu anohyeto ne mfomso a ɛwɔ flexbox ho , te sɛ HTML nneɛma bi a wuntumi mfa nni dwuma sɛ flex containers .

Grid a wobetumi apaw

Bere a Bootstrap de ems anaa rems di dwuma de kyerɛkyerɛ akɛse dodow no ara mu no, pxwɔde s di dwuma ma grid breakpoints ne container widths. Eyi te saa efisɛ viewport no trɛw yɛ pixels na ɛnsakra ne font kɛse no .

Hwɛ sɛnea Bootstrap grid nhyehyɛe no afã horow yɛ adwuma wɔ mfiri ahorow pii a ɛwɔ pon a ɛyɛ mmerɛw so.

	Nneɛma nketenkete a ɛboro so <576px	Nketewa a ɛyɛ ≥576px	Mfinimfini ≥768px	Ɔkɛseɛ ≥992px	Ɔkɛseɛ a ɛboro so ≥1200px
Max ahina no trɛw	Obiara nni hɔ (auto) .	540px na ɛyɛ	720px na ɛyɛ	960px na ɛyɛ	1140px na ɛyɛ
Adesuakuw no anim asɛm	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# a ɛwɔ nkyerɛwde ahorow mu	12. 12
Gutter no trɛw	30px (15px wɔ ɔfa biara a ɛwɔ kɔla bi so) .
Nea ɛyɛ nestable	Aane
Kɔla a wɔkra no	Aane

Auto-layout nkyerɛwde ahorow

Fa breakpoint-specific column classes di dwuma ma column sizing a ɛnyɛ den a enni class a wɔde nɔma a ɛda adi pefee te sɛ .col-sm-6.

Ntrɛwmu a ɛyɛ pɛ

Sɛ nhwɛso no, grid nhyehyɛe abien a ɛfa mfiri ne viewport biara ho ni, efi xskosi xl. Fa unit-less class dodow biara ka ho ma breakpoint biara a wuhia na column biara bɛyɛ ne tɛtrɛtɛ koro.

1 a ɛwɔ 2 mu

2 a ɛwɔ 2 mu

1 wɔ 3 mu

2 wɔ 3 mu

3 wɔ 3 mu

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

Multi-line a ne tɛtrɛtɛ yɛ pɛ

Yɛ nkyerɛwde a ne tɛtrɛtɛ yɛ pɛ a ɛtrɛw nkyerɛwde ahorow pii mu denam .w-100baabi a wopɛ sɛ nkyerɛwde no bubu kɔ nkyerɛwde foforo a wode bɛhyɛ mu no so. Ma ahomegye no nyɛ nea ɛyɛ adwuma denam nneɛma .w-100bi a wɔde kyerɛ nneɛma a ɛyɛ adwuma a wode bɛfrafra so .

Na Safari flexbox bɔne bi wɔ hɔ a ɛmma eyi ntumi nyɛ adwuma a enni pefee flex-basisanaa border. Workarounds wɔ hɔ ma browser version dedaw, nanso ɛnsɛ sɛ ɛho hia sɛ wo target browsers no nhwe ase wɔ buggy versions no mu a.

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>

Setting column biako trɛw

Auto-layout for flexbox grid columns nso kyerɛ sɛ wobɛtumi ahyɛ column baako trɛw na woama anuanom columns no ayɛ ne kɛseɛ asesa ne kɛseɛ atwa ho ahyia. Wubetumi de grid adesua ahorow a wɔadi kan akyerɛkyerɛ mu (sɛnea wɔakyerɛ wɔ ase hɔ no), grid mixins, anaa inline ntrɛwmu adi dwuma. Hyɛ no nsow sɛ nkyerɛwde afoforo no bɛsesa ne kɛse ɛmfa ho sɛnea mfinimfini adum no trɛw te.

1 wɔ 3 mu

2 of 3 (a ɛtrɛw) .

3 wɔ 3 mu

1 wɔ 3 mu

2 of 3 (a ɛtrɛw) .

3 wɔ 3 mu

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

Nsɛm a ɛwɔ ntrɛwmu a ɛsakrasakra

Fa col-{breakpoint}-autoadesua ahorow di dwuma de ma nkyerɛwde ahorow no kɛse gyina wɔn mu nsɛm no abɔde mu trɛw so.

1 wɔ 3 mu

Nsɛm a ɛwɔ ntrɛwmu a ɛsakrasakra

3 wɔ 3 mu

1 wɔ 3 mu

Nsɛm a ɛwɔ ntrɛwmu a ɛsakrasakra

3 wɔ 3 mu

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

Adesua ahorow a wɔde mmuae ma

Bootstrap no grid no ka tiers anum a wɔadi kan akyerɛkyerɛ mu adesua ahorow a wɔde besisi mmuae nhyehyɛe ahorow a ɛyɛ den. Yɛ wo columns no kɛse wɔ mfiri nketewa, nketewa, mfinimfini, akɛse, anaa akɛse a ɛboro so so sɛnea wuhu sɛ ɛfata.

Nneɛma a wɔde paapae mu nyinaa

Sɛ wopɛ grids a ɛyɛ pɛ fi mfiri nketewa so kosi kɛse so a, fa .colne .col-*adesua ahorow no di dwuma. Kyerɛ adesuakuw a wɔde nɔma ahyɛ mu bere a wuhia kɔla a ne kɛse titiriw; anyɛ saa a, ntwentwɛn wo nan ase sɛ wobɛbata .col.

col

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>

Wɔaboaboa ano akɔ soro

Sɛ wode .col-sm-*adesua ahorow biako di dwuma a, wubetumi ayɛ grid nhyehyɛe titiriw a efi ase a wɔaboaboa ano na ɛbɛyɛ horizontal wɔ breakpoint ketewa ( 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>

Fa fra na fa fra mu

Wompɛ sɛ wo columns no bɛ stack kɛkɛ wɔ grid tiers binom mu? Fa adesua ahorow a wɔaka abom di dwuma ma tier biara sɛnea ɛho hia. Hwɛ nhwɛso a ɛwɔ ase ha no na woanya sɛnea ne nyinaa yɛ adwuma no ho adwene pa.

.kol-md-8 na ɛwɔ hɔ

.kol-6 .kol-md-4 na ɛwɔ hɔ

.kol-6 na ɛwɔ hɔ

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

Nsu a ɛkɔ nsu mu

Gutters betumi mmuae asiesie denam breakpoint-specific padding ne negative margin utility adesuakuw ahorow so. Sɛ wopɛ sɛ wosakra gutters no wɔ row bi a wɔde ama mu a, pair a negative margin utility wɔ .rowne matching padding utilities wɔ .cols no so. Ebia ɛho behia sɛ wɔyɛ nsakrae wɔ .containeranaa ɔwofo no nso mu na wɔakwati sɛ ɛbɛboro so a wɔmpɛ, de adi dwuma bio matching padding utility..container-fluid

Nhwɛsoɔ a ɛfa sɛdeɛ wobɛsesa Bootstrap grid no wɔ ( lg) breakpoint kɛseɛ no ne nea ɛboro saa no nie. Yɛama .colpadding no akɔ soro ne .px-lg-5, counteracted that with .mx-lg-n5on the parent .rowna afei yɛasiesie .containerwrapper no ne .px-lg-5.

Custom column padding a wɔde ahyɛ mu

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

Fa nkyerɛwde ahorow no toatoa so

Fa .row-cols-*adesua ahorow a ɛyɛ mmuae no di dwuma fa hyehyɛ nkyerɛwde dodow a ɛkyerɛ wo nsɛm ne wo nhyehyɛe no yiye no ntɛm. Bere a .col-*adesua ahorow a ɛyɛ daa no fa nkyerɛwde ahorow no ankorankoro ho (sɛ nhwɛso no, .col-md-4), wɔde nkyerɛwde ahorow no adesua ahorow no si ɔwofo no so .rowsɛ ɔkwan tiawa.

Fa saa row columns classes yi yɛ ntɛm yɛ basic grid layouts anaasɛ hwɛ wo card layouts so.

Nkyekyɛmu

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

Nkyekyɛmu

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

Nkyekyɛmu

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

Nkyekyɛmu

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

Nkyekyɛmu

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

Wubetumi nso de Sass mixin a ɛka ho no adi dwuma, 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);
  }
}

Nneɛma a Wɔde Di Dwuma

Fa flexbox alignment utilities di dwuma de hyɛ column ahorow no hyia wɔ vertical ne horizontally. Internet Explorer 10-11 ntumi mmoa flex nneɛma a wɔde gyina hɔ gyina hɔ bere a flex container no wɔ min-heightsɛnea wɔakyerɛ wɔ ase ha no. Hwɛ Flexbugs #3 ma nsɛm pii.

Nhyiam a ɛda hɔ gyina hɔ

Adum abiɛsa no mu biako

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

Adum abiɛsa no mu biako

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

Horizontal a wɔde hyɛ mu

Adum abien no mu biako

<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 biara nni hɔ

Wobetumi de .no-gutters. Eyi yi margins a enye no fi .rowne nea ɛwɔ soro no paddingfi mmofra adum a ɛwɔ hɔ ntɛm nyinaa nyinaa mu.

Ɛha na source code a wɔde yɛ saa styles yi ni. Hyɛ no nsow sɛ wɔde column overrides no scoped kɔ mmofra columns a edi kan no nkutoo so na wɔde wɔn ani asi so denam attribute selector so . Bere a eyi ma wonya selector pɔtee bi no, wobetumi akɔ so ayɛ column padding no foforo denam spacing utilities so .

Wohia adwini a efi ano kosi ano? Tow ɔwofo no gu .containeranaa .container-fluid.

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

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

Wɔ nneyɛe mu no, sɛnea ɛte ni. Hyɛ no nsow sɛ wubetumi akɔ so de eyi adi dwuma wɔ grid adesua afoforo a wɔadi kan akyerɛkyerɛ mu nyinaa (a column trɛw, mmuae tiers, reorders, ne nea ɛkeka ho ka ho).

.kol-sm-6 .kol-md-8 na ɛwɔ hɔ

.kol-6 .kol-md-4 na ɛwɔ hɔ

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

Kɔla a wɔde kyekyere nneɛma ho

Sɛ wɔde nkyerɛwde bɛboro 12 gu ɔfa biako mu a, nkorabata foforo kuw biara, sɛ ade biako, bɛbɔ nkyerɛwde foforo so.

.kol-9 na ɛwɔ hɔ

.col-4
Esiane sɛ 9 + 4 = 13 > 12 nti, saa div a ne kɛse yɛ adum 4 yi nya kyekyere nkyerɛwde foforo so sɛ ade biako a ɛtoatoa so.

.col-6 Ntrɛwmu a
edi hɔ no kɔ so fa nkyerɛwde foforo no so.

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

Kɔla a ɛpaapae

Sɛ wobɛbubu columns akɔ line foforɔ mu wɔ flexbox mu a, ɛhia hack ketewa bi: fa element bi ka ho ne width: 100%baabiara a wopɛ sɛ wokyekyere wo columns no kɔ line foforɔ mu. Mpɛn pii no, wɔde .rows pii na ɛyɛ eyi, nanso ɛnyɛ ɔkwan biara a wɔfa so de di dwuma na ebetumi abu eyi ho akontaa.

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

Wubetumi nso de saa ahomegye yi adi dwuma wɔ ahomegyebea pɔtee bi mu denam yɛn responsive display utilities no so .

.kol-6 .kol-sm-4 na ɛwɔ hɔ

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

Nneɛma a Wɔsan Hyehyɛ no

Hyɛ adesua ahorow ho nhyehyɛe

Fa .order-adesua ahorow di dwuma de hwɛ sɛnea wo nsɛm no nnidiso nnidiso wɔ aniwa so no so. Saa adesua ahorow yi yɛ mmuae, enti wubetumi ahyɛ orderby breakpoint (sɛ nhwɛso no, .order-1.order-md-2). Nea ɛka ho ne mmoa ma 1through 12wɔ grid tiers anum no nyinaa so.

Nea edi kan wɔ DOM mu no, wɔamfa ahyɛde biara anni dwuma

Nea ɛto so abien wɔ DOM mu, a ɛwɔ nhyehyɛe kɛse

Nea ɛto so abiɛsa wɔ DOM mu, a wɔahyehyɛ no 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>

Afei nso responsive .order-firstne .order-lastclasses a ɛsesa orderof an element denam order: -1ne order: 13( order: $columns + 1) a wɔde di dwuma no so. Saa adesua ahorow yi nso wobetumi de afrafra .order-*adesua ahorow a wɔde nɔma ahyɛ mu no mu sɛnea ɛho hia.

Nea edi kan wɔ DOM mu, wɔkraa nea etwa to

Nea ɛto so abien wɔ DOM mu, wɔanhyɛ da

Nea ɛto so abiɛsa wɔ DOM mu, wɔkraa nea edi kan

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

Offsetting nkyerɛwde ahorow

Wubetumi offset grid columns wɔ akwan abien so: yɛn responsive .offset-grid classes ne yɛn margin utilities . Wɔayɛ grid adesua ahorow no kɛse sɛnea ɛbɛyɛ a ɛne column ahorow hyia bere a margins ho wɔ mfaso kɛse ma nhyehyɛe ahorow a ɛyɛ ntɛm wɔ baabi a offset no trɛw yɛ nsakrae.

Offset adesua ahorow

Fa nkyerɛwde ahorow no kɔ nifa denam .offset-md-*adesua ahorow so. Saa adesua ahorow yi ma kɔla bi benkum so no kɔ soro denam *nkyerɛwde ahorow so. Sɛ nhwɛso no, .offset-md-4ɛkɔfa .col-md-4adum anan so.

.kol-md-4 na ɛwɔ hɔ

.col-md-4 .asɛmfua-md-4

.col-md-3 .asɛmfua-md-3

.col-md-6 .asɛmfua-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>

Wɔ column clearing wɔ responsive breakpoints akyi no, ebia ɛho behia sɛ wo reset offsets. Hwɛ eyi wɔ adeyɛ mu wɔ grid nhwɛso no mu .

.kol-sm-5 .kol-md-6 na ɛwɔ hɔ

.col-sm-5 .offset-sm-2 .col-md-6 .afiri a wɔde hyɛ mu-md-0

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

.col-sm-6 .col-md-5 .offset-md-2 .kol-lg-6 .ɔfset-lg-0. Ɔde ne nsa kyerɛɛ ne so, na ɔde ne nsa kyerɛɛ ne so bio

<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 nneɛma a wɔde di dwuma

Ɛnam sɛ wobɛtu akɔ flexbox wɔ v4 mu a, wobɛtumi de margin utilities te sɛ .mr-autosɛ wobɛhyɛ anuanom columns afiri wɔn ho wɔn ho ho adi dwuma.

.kol-md-4 na ɛwɔ hɔ

.col-md-4 .ml-afiri a wɔde yɛ adwuma

.col-md-3 .ml-md-afiri a wɔde yɛ adwuma

.col-auto .owura-afiri

.col-afiri a wɔde yɛ adwuma

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

Nesting a wɔde yɛ buw

Sɛ wopɛ sɛ wode default grid no hyɛ wo nsɛm no mu a, fa kɔla foforo .rowne .col-sm-*nkyerɛwde ahorow ka ho wɔ .col-sm-*kɔla bi a ɛwɔ hɔ dedaw no mu. Ɛsɛ sɛ nested rows no de columns ahorow a ɛka bom yɛ 12 anaa nea ennu saa ka ho (ɛnhia sɛ wode columns 12 a ɛwɔ hɔ no nyinaa bedi dwuma).

Ɔfa 1: .col-sm-9

Ɔfa 2: .col-8 .col-sm-6

Ɔfa 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 a wɔde yɛ nneɛma

Sɛ wode Bootstrap no source Sass fael ahorow redi dwuma a, wowɔ hokwan sɛ wode Sass variables ne mixins bedi dwuma de ayɛ custom, semantic, ne responsive page layouts. Yɛn grid adesua ahorow a wɔakyerɛkyerɛ mu dedaw no de saa nsakrae ne mixins koro yi ara di dwuma de ma adesua ahorow a wɔasiesie sɛ wɔde bedi dwuma no nyinaa ma nhyehyɛe ahorow a ɛyɛ mmuae ntɛmntɛm.

Nneɛma a Ɛsakra

Variables ne maps kyerɛ column dodow, gutter trɛw, ne media asɛmmisa beae a wobefi ase floating columns. Yɛde eyinom di dwuma de yɛ grid adesua ahorow a wɔahyɛ ato hɔ a wɔakyerɛw ho asɛm wɔ atifi hɔ no, ne afei nso mixins a wɔahyɛ da ayɛ a wɔakyerɛw wɔ ase ha no.

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

Nneɛma a wɔde frafra

Wɔde mixins di dwuma de ka grid variables no ho de yɛ semantic CSS ma grid columns ankorankoro.

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

Nhwɛso a wɔde di dwuma

Wubetumi asesa variables no akɔ w’ankasa custom values no mu, anaasɛ wode mixins no adi dwuma kɛkɛ ne wɔn default values no. Nhwɛsoɔ a ɛfa default nhyehyeɛ no a wode bɛyɛ nhyehyɛɛ a ɛwɔ kɔla mmienu a ɛwɔ nsonsonoeɛ wɔ ntam no nie.

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

Nsɛm atitiriw a ɛwom

Nsɛm a ɛto so abien

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

Grid no a wɔreyɛ no sɛnea wopɛ

Sɛ yɛde yɛn grid Sass variables ne maps a wɔasisi no di dwuma a, ɛyɛ yie sɛ wobɛsesa grid classes a wɔadi kan akyerɛkyerɛ mu no koraa. Sesa tiers dodow, media abisade nsusuwii, ne container no trɛw—afei san boaboa ano.

Adum ne nsu a ɛkɔ nsu mu

Wobetumi asesa grid columns dodow no denam Sass variables so. $grid-columnswɔde di dwuma de yɛ ntrɛwmu (wɔ ɔha biara mu) a ɛwɔ adum ankorankoro biara mu bere a $grid-gutter-widthɛde ntrɛwmu ma adum no nsu a ɛkɔ nsu mu no.

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

Grid a ɛwɔ sorosoro

Sɛ wokɔ akyiri sen columns no ankasa a, wubetumi nso ayɛ grid tiers dodow no ho nhyehyɛe. Sɛ wopɛ grid tiers anan pɛ a, anka wobɛma $grid-breakpointsne no ayɛ foforo $container-max-widthsakɔ biribi te sɛ eyi mu:

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

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

Sɛ woreyɛ nsakraeɛ biara wɔ Sass variables anaa maps no mu a, ɛho bɛhia sɛ wode wo nsakraeɛ no sie na wosan boaboa ano. Saa a wobɛyɛ no bɛma woanya grid adesua ahorow a wɔadi kan akyerɛkyerɛ mu ama column widths, offsets, ne ordering foforo koraa. Wɔbɛsan ayɛ mmuaeɛ visibility utilities no foforɔ de adi dwuma wɔ custom breakpoints no mu. Hwɛ sɛ wode grid values bɛhyɛ px(ɛnyɛ rem, em, anaa %).