Grid ƒe ɖoɖo

Kpɔɖeŋu

Bootstrap ƒe grid ɖoɖoa zãa nugoewo, fliwo, kple sɔtiwo ƒe ƒuƒoƒo tsɔ ɖoa ​​nyatakakawo ɖe ɖoɖo nu heɖoa wo ɖe ɖoɖo nu. Wotue kple flexbox eye wòwɔa nu bliboe. Kpɔɖeŋu kple numeɖeɖe deto le alesi grid ɖoɖoa ƒoa ƒui ŋu le ete.

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

Kpɔɖeŋu si le etame la wɔa sɔti etɔ̃ siwo ƒe kekeme sɔ le mɔ̃wo kple nukpɔkpɔwo katã dzi to míaƒe grid klass siwo míeɖo do ŋgɔ la zazã me. Kpɔti mawo le titina le axaa dzi kple dzila la .container.

Ale si wòwɔa dɔe

Ne míegbãe la, alesi grid ɖoɖoa ƒoa ƒui enye si:

• Míaƒe grid la doa alɔ ade siwo ɖoa nya ŋu ƒe breakpoints . Wotu vovototodedeameme ɖe min-widthnyadzɔdzɔgblɔmɔnuwo ƒe nyabiasewo dzi, si fia be wokpɔa ŋusẽ ɖe vovototodedeameme ma kple esiwo katã le etame dzi (le kpɔɖeŋu me, .col-sm-4eku ɖe sm, md, lg, xl, kple ŋu xxl). Esia fia be àteŋu akpɔ nugoe kple sɔti ƒe lolome kple nuwɔna dzi to breakpoint ɖesiaɖe dzi.

• Containers titina kple horizontally pad wò nyatakakawo. Zã .containerna piksel ƒe kekeme si ɖoa nya ŋu, .container-fluidna width: 100%nukpɔkpɔ kple mɔ̃wo katã me, alo nugoe si ɖoa nya ŋu (le kpɔɖeŋu me, .container-md) na tsi kple piksel ƒe kekeme ƒe ƒuƒoƒo.

• Fliwo nye nusiwo wotsɔ blaa sɔtiwoe. Sɔti ɖesiaɖe le tsia dzi padding(si woyɔna be gutter) hena teƒe si le wo dome la dzi kpɔkpɔ. Emegbe paddingwotsia tre ɖe esia ŋu le fliawo dzi kple axadzinu manyomanyowo be woakpɔ egbɔ be nya siwo le wò sɔtiwo me la le ɖoɖo nu le miame le nukpɔkpɔ me. Fliwo hã doa alɔ tɔtrɔɖenu ƒe hatsotsowo be woawɔ sɔti ƒe lolome kple gutter ƒe hatsotsowo ŋudɔ ɖekae be woatrɔ wò nyawo ƒe dometsotso.

• Sɔtiwo te ŋu trɔna ɖe nɔnɔmewo ŋu ale gbegbe. Template sɔti 12 li le fli ɖesiaɖe me, si ana nàte ŋu awɔ nu vovovo siwo ƒo ƒu ɖe sɔti xexlẽme ɖesiaɖe me. Sɔti ƒe hatsotsowo fiaa nɔnɔmetata ƒe sɔti ƒe xexlẽme si woatsɔ akeke ɖe enu (le kpɔɖeŋu me, akeke col-4ene). widthwoɖo s ɖe alafa memamãwo me ale be lolome si sɔ kple wo nɔewo nanɔ asiwò ɣesiaɣi.

• Gutters hã wɔa dɔ nyuie eye woate ŋu atrɔ asi le wo ŋu. Gutter klasswo li le breakpoints katã, kple wo katã ƒe lolome sɔ kple míaƒe margin kple padding dometsotso . Trɔ tsidzɔƒe siwo le tsia dzi kple .gx-*klasswo, tsidzɔƒe siwo le tsitrenu kple .gy-*, alo tsidzɔƒe siwo katã le tsia dzi kple .g-*klasswo. .g-0li hã be woatsɔ aɖe tsiɖɔɖɔɖɔƒewo ɖa.

• Sass ƒe tɔtrɔwo, anyigbatatawo, kple mixins na ŋusẽ grid la. Ne mèdi be yeazã grid ƒe klass siwo woɖo ɖi do ŋgɔ le Bootstrap me o la, àteŋu azã míaƒe grid ƒe dzɔtsoƒe Sass atsɔ awɔ tɔwò kple gɔmesese ƒe dzesi geɖe wu. Míetsɔ CSS ƒe nɔnɔme tɔxɛ aɖewo hã de eme be míazã Sass ƒe tɔtrɔ siawo hena asitɔtrɔ geɖe wu gɔ̃ hã na wò.

Nya seɖoƒewo kple vodada siwo ƒo xlã flexbox , abe ŋutete be woazã HTML ƒe akpa aɖewo abe flex nugoewo ene o ene .

Grid ƒe tiatiawɔblɔɖewo

Bootstrap ƒe grid ɖoɖoa ateŋu atrɔ ɖe nɔnɔme ade siwo katã woɖo ɖi la ŋu, kple gbagbãƒe ɖesiaɖe si nètrɔ asi le. Grid tiers ade siwo woɖo ɖi lae nye esiawo:

• Susu sue aɖe kpee (xs) .
• Sue (sm) .
• Medidime (md) .
• Gã (lg) .
• Gã wu (xl) .
• Gã bubu si lolo wu (xxl) .

Abe alesi míede dzesii le etame ene la, breakpoint siawo dometɔ ɖesiaɖe kple eƒe nugoe, klass ƒe ŋgɔdonya tɔxɛ, kple tɔtrɔwo. Alesi grid la trɔna le breakpoint siawo katã me enye si:

Auto-layout sɔtiwo

Zã breakpoint-koŋ ƒe sɔtiwo ƒe klasswo hena sɔtiwo ƒe lolome ɖoɖo bɔbɔe si me xexlẽdzesiwo ƒe klass si me kɔ abe .col-sm-6.

Woƒe kekeme sɔ kple wo nɔewo

Le kpɔɖeŋu me, grid ƒe ɖoɖo eve siwo ku ɖe mɔ̃ ɖesiaɖe kple nukpɔkpɔ ƒe mɔnu ŋue nye esi, tso xsvaseɖe xxl. Tsɔ unit-less class xexlẽme ɖesiaɖe kpe ɖe breakpoint ɖesiaɖe si nèhiã ŋu eye sɔti ɖesiaɖe ƒe kekeme anɔ ɖeka.

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

Sɔti ɖeka ƒe kekeme ɖoɖo

Auto-layout na flexbox grid sɔtiwo hã fia be àteŋu aɖo sɔti ɖeka ƒe kekeme eye nàna nɔvi sɔtiawo natrɔ woƒe lolome le wo ɖokui si ƒo xlãe. Àteŋu azã grid ƒe hatsotso siwo woɖo ɖi do ŋgɔ (abe alesi woɖee fia le ete ene), grid mixins, alo inline widths. De dzesii be sɔti bubuawo atrɔ woƒe lolome eɖanye titina sɔti la ƒe kekeme ka kee o.

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

Emenyawo ƒe kekeme si trɔna

Zã col-{breakpoint}-autoklasswo nàtsɔ adzidze sɔtiwo ƒe lolome le woƒe emenyawo ƒe kekeme le dzɔdzɔme nu nu.

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

Klass siwo me woɖoa nya ŋu le

Bootstrap ƒe grid la lɔ dzidzenu ade siwo woɖo do ŋgɔ ƒe klasswo ɖe eme hena ɖoɖo sesẽ siwo ɖoa nya ŋu tutu. Trɔ asi le wò sɔtiwo ƒe lolome ŋu le mɔ̃ suewo, suewo, titinatɔwo, gãwo, alo gãwo wu dzi alesi nèkpɔe be esɔ.

Nusiwo katã gblẽa nu le ame ŋu

Le grid siwo sɔ tso mɔ̃ suetɔ dzi va ɖo gãtɔ dzi la, zã .colkple .col-*ƒe hatsotsowo. Gblɔ klass si ŋu xexlẽdzesi le ne èhiã sɔti si ƒe lolome le etɔxɛe; ne menye nenema o la, milé ɖe .col.

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

Woƒo wo nu ƒu ɖe anyigba dzi

Ne èzã .col-sm-*klass ɖeka la, àte ŋu awɔ grid ɖoɖo vevi aɖe si dzea egɔme tso ƒuƒoƒo me eye wòzua tsia dzi le breakpoint suea ( sm).

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

Tsɔe tsaka eye nàtsɔe asɔ kple wo nɔewo

Mèdi be yeƒe sɔtiwo naƒo ƒu ɖe grid tiers aɖewo me ko oa? Zã klass vovovowo ƒe ƒuƒoƒo na tier ɖesiaɖe ne ehiã. Kpɔ kpɔɖeŋu si le ete hena alesi wo katã wɔa dɔe ŋuti susu nyuitɔ.

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

Ðo sɔtiwo ɖe fli me

Zã .row-cols-*klass siwo ɖoa nya ŋu nàtsɔ aɖo sɔti siwo aɖe wò nyatakakawo kple ɖoɖo nyuie wu ƒe xexlẽme kaba. Togbɔ be .col-*klass siwo sɔ la ku ɖe sɔti ɖekaɖekawo ŋu (le kpɔɖeŋu me, .col-md-4), woɖo fli sɔtiwo ƒe klasswo ɖe dzila dzi .rowabe mɔ kpui ene. Àte .row-cols-autoŋu ana sɔtiawo woƒe kekeme le dzɔdzɔme nu.

Zã fli sɔtiwo ƒe klass siawo nàtsɔ awɔ grid ƒe ɖoɖo veviwo kaba alo nàtsɔ akpɔ wò kaɖi ƒe ɖoɖowo dzi.

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

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

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

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

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

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

Àte ŋu azã Sass mixin si kpe ɖe eŋu hã, 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);
  }
}

Atɔwɔwɔ

Be nàtsɔ grid si woɖo ɖi la awɔ atɔ ɖe wò nyatakakawo ŋu la, tsɔ sɔti yeye .rowkple ƒuƒoƒo kpe ɖe .col-sm-*sɔti si li xoxo .col-sm-*ŋu. Ele be sɔti siwo wotsɔ ƒo ƒui va ɖo 12 alo esi mede nenema o nanɔ fli siwo wotsɔ ƒo ƒui me (mehiã be nàzã sɔti 12 siwo katã li la o).

<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 ƒe nyawo

Ne èle Bootstrap ƒe dzɔtsoƒe Sass faɛlwo zãm la, tiatia le asiwò be nàzã Sass ƒe tɔtrɔwo kple mixins atsɔ awɔ axa ƒe ɖoɖo siwo wowɔ ɖe ɖoɖo nu, gɔmesese, kple ŋuɖoɖo. Míaƒe grid klass siwo míeɖo do ŋgɔ la zãa tɔtrɔ kple mixins siawo ke tsɔ naa klass siwo sɔ na zazã ƒe ƒuƒoƒo blibo aɖe na ɖoɖo siwo ɖoa nya ŋu kabakaba.

Nusiwo trɔna

Tɔtrɔwo kple anyigbatatawoe ɖoa sɔtiwo ƒe xexlẽme, gutter ƒe kekeme, kple media biabia teƒe si woadze sɔti siwo le tsia dzi gɔme le. Míezãa esiawo tsɔ wɔa grid ƒe hatsotso siwo woɖo ɖi do ŋgɔ siwo woŋlɔ ɖe etame, kpakple na mixins tɔxɛ siwo woŋlɔ ɖe ete.

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

Nusiwo wotsɔ tsakae

Wozãa mixins kpe ɖe grid ƒe tɔtrɔwo ŋu tsɔ wɔa gɔmesese ƒe CSS na grid ƒe sɔti ɖekaɖekawo.

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

Kpɔɖeŋu zazã

Àteŋu atrɔ asi le tɔtrɔawo ŋu ɖe wò ŋutɔ wò asixɔxɔ tɔxɛwo nu, alo nàzã mixins kple woƒe asixɔxɔ gbãtɔwo ko. Kpɔɖeŋu aɖee nye esi le ɖoɖo siwo woɖo ɖi zazã atsɔ awɔ sɔti eve ƒe ɖoɖo si me dometsotso le le dome.

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

<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 la ƒe tɔtrɔ ɖe nɔnɔmewo ŋu

Ne míezã míaƒe grid Sass tɔtrɔwo kple anyigbatata siwo wotu ɖe eme la, anya wɔ be míatrɔ asi le grid ƒe hatsotso siwo woɖo ɖi do ŋgɔ ŋu keŋkeŋ. Trɔ tiers ƒe xexlẽme, media biabia ƒe didimewo, kple nugoe ƒe kekeme—emegbe nàgbugbɔ aƒo ƒu.

Sɔtiwo kple tsiɖɔɖɔɖɔƒewo

Woateŋu atrɔ asi le grid sɔtiwo ƒe xexlẽme ŋu to Sass ƒe tɔtrɔwo dzi. $grid-columnswozãna tsɔ wɔa sɔti ɖesiaɖe ƒe kekeme (le alafa memamã me) esime $grid-gutter-widthwòɖoa sɔti ƒe tsidzɔƒewo ƒe kekeme. $grid-row-columnswozãnɛ tsɔ ɖoa ​​sɔtiwo ƒe .row-cols-*xexlẽme si sɔ gbɔ wu na , woŋea aɖaba ƒua xexlẽdzesi ɖesiaɖe si wu seɖoƒe sia dzi.

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

Grid ƒe ƒuƒoƒoawo

Ne èyi ŋgɔ wu sɔtiawo ŋutɔ la, àte ŋu atrɔ asi le grid tiers ƒe xexlẽme hã ŋu. Ne èdi be yeakpɔ grid tiers ene ko la, àwɔ asitɔtrɔ le $grid-breakpointskple $container-max-widthsŋu wòazu nane si le abe esia ene:

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

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

Ne èle tɔtrɔ aɖewo wɔm le Sass ƒe tɔtrɔwo alo anyigbatatawo ŋu la, ahiã be nàdzra wò tɔtrɔwo ɖo eye nàgbugbɔ aƒo wo nu ƒu. Esia wɔwɔ ana grid ƒe hatsotso siwo woɖo ɖi do ŋgɔ ƒe ƒuƒoƒo yeye aɖe nadze na sɔti ƒe kekeme, vovototodedeameme, kple ɖoɖowɔwɔ. Woatrɔ asi le nukpɔkpɔ ƒe dɔwɔnu siwo ɖoa nya ŋu hã ŋu be woazã vovototodedeameme siwo wowɔ ɖe ɖoɖo nu. Kpɔ egbɔ be yeɖo grid ƒe asixɔxɔwo ɖe px(menye rem, em, alo %).