Grid sitɛmu

Misaliya

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 ni ɲɛfɔli kuncɛlen bɛ duguma, min b’a jira ko grid system bɛ ɲɔgɔn sɔrɔ cogo min na.

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

Misali min bɛ sanfɛ, o bɛ kulu saba dilan minnu bonya bɛ bɛn ɲɔgɔn ma minɛnw ni filɛlikɛyɔrɔw bɛɛ kan ni an ka jatebɔlanw ye minnu ɲɛfɔlen don ka kɔn. o kuluw bɛ cɛmancɛ la ɲɛ kan ni bangebaga ye .container.

A bɛ baara kɛ cogo min na

A karilen, nin ye grid system bɛ ɲɔgɔn sɔrɔ cogo min na:

• an ka grid bɛ jaabiw ka breakpoint wɔɔrɔ dɛmɛ . Kariyɔrɔw sinsinnen bɛ min-widthkunnafonidilanw ka ɲininkaliw kan, o kɔrɔ ye ko u bɛ nɔ bila o kariyɔrɔ la ani a sanfɛtaw bɛɛ la (misali la, a .col-sm-4bɛ tali kɛ sm, md, lg, xl, ani xxl). O kɔrɔ ye ko aw bɛ se ka minɛnw ni kolomaw bonya ni u kɛcogo kɔlɔsi ni kariyɔrɔ kelen-kelen bɛɛ ye.

• Conteneurs centre ani horizontalement pad i ka kɔnɔkow. Baara .containerkɛ ni pixel janya jaabi ye, .container-fluidka ɲɛsin width: 100%filɛliyɔrɔw ni minɛnw bɛɛ ma, walima jaabi minɛn (misali la, .container-md) ka ɲɛsin ji ni pixel bonya faralen ɲɔgɔn kan.

• 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 walasa ka a jira ko i ka kuluw kɔnɔkow bɛ ɲɔgɔn sɔrɔ ni ɲɛ ye ka jigin kinin fɛ. Row fana bɛ modifier classes dɛmɛ walasa ka column sizing ni gutter classes kɛ cogo kelen na walasa ka i ka kɔnɔkow cɛ janya Changer.

• Kolonw bɛ se ka wuli ka bɔ u nɔ na cogo kabakoma na. Jateblaw kulu 12 bɛ yen minnu bɛ sɔrɔ jirisun kelen-kelen bɛɛ la, o b’a to i bɛ se ka fɛnw faralen ɲɔgɔn kan cogo wɛrɛw la minnu bɛ kulu hakɛ o hakɛ la. Kolon kalanw bɛ jatebɔlan kulu hakɛ jira min ka kan ka span (misali la, col-4span naani). widths bɛ sigi kɛmɛsarada la walasa i ka kɛ ni hakɛ danfaralen kelen ye tuma bɛɛ.

• Gutters fana bɛ jaabi di ani u bɛ se ka ladilan. Gutter classes bɛ sɔrɔ breakpoints bɛɛ kɔnɔ, ni u bɛɛ bonya ye kelen ye i n’a fɔ an ka margin ani padding spacing . Aw bɛ jibolisira tilennenw Changer ni .gx-*kalasi ye, jibolisira jɔlen ni .gy-*, walima jibolisira bɛɛ ni .g-*kalasi ye. .g-0bɛ sɔrɔ fana ka jibolisiraw bɔ.

• Sass variables, maps, ani mixins bɛ fanga di grid ma. N’i ​​t’a fɛ ka baara Kɛ ni jatebɔlanw ye minnu ɲɛfɔlen dòn ka Kɔn Bootstrap kɔnɔ, i bɛ Se ka baara Kɛ n’an ka jatebɔ-yɔrɔ Sass ye k’i yɛrɛ ta Dabɔ ni kɔrɔko-taamaʃyɛn caman ye. An bɛ CSS ladamucogo dɔw fana Dòn a la walasa ka nin Sass bεεlajɛlen ninnu dun walasa ka hali bεnkansεbεnba Sɔrɔ i ye.

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

Bootstrap ka grid system bɛ se ka ladamu ka tɛmɛn default breakpoint wɔɔrɔ bɛɛ kan, ani breakpoint o breakpoint i bɛ customize. Grid tier default wɔɔrɔ ye ninnu ye:

• Extra petit (xs) .
• Fitini (sm) .
• Moyen (md) .
• Bagan (lg) .
• A ka bon kosɛbɛ (xl) .
• Extra extra grand (xxl) Bamako, Mali.

I n’a fɔ a fɔra cogo min na san fɛ, o kari-yɔrɔ kelen-kelen bɛɛ n’u ka minɛnw don, u ka kalasi ɲɛbila kɛrɛnkɛrɛnnen, ani u ka fɛn caman sɛmɛntiyalanw. Nin ye cogo min na jabaranin bɛ Yɛlɛma nin kariyɔrɔ ninnu kan:

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

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

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 sɛmɛntiya hali ni cɛmancɛ kulu bonya mana kɛ min o min ye.

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

<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ɔ, kalansen wɔɔrɔ bɛ yen minnu ɲɛfɔlen don ka kɔn 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.

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

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

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

Kolonw tigɛli

Baara kɛ ni jaabi .row-cols-*kalanw ye walasa ka teliya ka kulu hakɛ sigi sen kan 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ɔ daɲɛ minnu bɛ sɔrɔ kuluw kɔnɔ. Ni .row-cols-autoaw bɛ se ka kolonw di u bonya dacogo la.

Baara kɛ ni nin jirisunw kalansenw ye walasa ka teliya ka jatebɔlan jɔnjɔnw dilan walima ka i ka kartiw labɛncogo kɔlɔsi ani ka wuli ni mago bɛ u la kuluw nivo la.

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

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

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

<div class="container">
  <div class="row row-cols-2 row-cols-lg-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">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);
  }
}

Nesting (kɔnɔnafili).

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

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

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: 1.5rem;

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

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

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@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);
  }
}

<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: 1.5rem !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 cogo la:

$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 %).