Isistimu yegridi

Isibonelo

Isistimu yegridi ye-Bootstrap isebenzisa uchungechunge lweziqukathi, imigqa, namakholomu ukuze kuhlelwe futhi kuqondiswe okuqukethwe. Yakhiwe nge- flexbox futhi isabela ngokugcwele. Ngezansi kunesibonelo kanye nencazelo ejulile yokuthi uhlelo lwegridi luhlangana kanjani.

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

Isibonelo esingenhla sidala amakholomu amathathu anobubanzi obulinganayo kuwo wonke amadivayisi nezinkundla zokubuka sisebenzisa amakilasi ethu egridi achazwe ngaphambilini. Lawo makholomu agxile ekhasini elinomzali .container.

Isebenza kanjani

Ukuyihlukanisa, nansi indlela isistimu yegridi ehlangana ngayo:

• Igridi yethu isekela ama-breakpoint ayisithupha asabelayo . Ama-breakpoint asekelwe emibuzweni min-widthyemidiya, okusho ukuthi athinta leyo ndawo kanye nabo bonke abangaphezulu kwayo (isb., .col-sm-4kusebenza ku- sm, md, lg, xl, kanye xxl). Lokhu kusho ukuthi ungakwazi ukulawula isiqukathi nosayizi wekholomu nokuziphatha ngendawo ngayinye yokuhlukana.

• Iziqukathi ziphakathi nendawo bese upheqa okuqukethwe kwakho ngokuvundlile. Sebenzisa .containerkububanzi bephikseli esabelayo, .container-fluidkuzo width: 100%zonke izimbobo zokubuka namadivayisi, noma isiqukathi esiphendulayo (isb, .container-md) ngenhlanganisela yobubanzi boketshezi nobubanzi bephikseli.

• Imigqa iwukugoqa kwamakholomu. Ikholomu ngayinye inezingqimba padding(okuthiwa i-gutter) yokulawula isikhala phakathi kwazo. Lokhu paddingkube sekuphikiswa emigqeni enemajini anegethivu ukuze kuqinisekiswe ukuthi okuqukethwe kumakholomu akho kuqondaniswe ngokubonakalayo phansi kwesokunxele. Imigqa iphinde isekele amakilasi okulungisa ukuze asebenzise ngokufana ukulinganisa kwamakholomu namakilasi odoti ukuze ushintshe isikhala sokuqukethwe kwakho.

• Amakholomu avumelana nezimo ngendlela emangalisayo. Kunamakholomu ezifanekiso angu-12 atholakalayo kumugqa ngamunye, okukuvumela ukuthi udale inhlanganisela ehlukene yezinto ezihlanganisa noma iyiphi inombolo yamakholomu. Amakilasi ekholomu abonisa inani lamakholomu ezifanekiso okufanele adlule (isb., col-4adlule ngesine). widths asethwe ngamaphesenti ukuze uhlale unosayizi ofanayo ohlobene.

• Ama-Gutters nawo ayasabela futhi enziwa ngendlela oyifisayo. Amakilasi e-Gutter ayatholakala kuwo wonke ama-breakpoints, nawo wonke amasayizi afanayo ne- margin yethu kanye nesikhala se-padding . Shintsha ama-gutters avundlile anezigaba .gx-*, ama-gutters aqondile ane- .gy-*, noma wonke ama-gutter anezigaba .g-*. .g-0iyatholakala futhi ukususa ama-gutters.

• Okuguquguqukayo kwe-Sass, amamephu, nezingxube zinika amandla igridi. Uma ungafuni ukusebenzisa amakilasi egridi achazwe ngaphambilini ku-Bootstrap, ungasebenzisa umthombo wethu wegridi i-Sass ukuze uzenzele owakho ngomaka owenziwe ngomumo owengeziwe. Futhi sifaka ezinye izakhiwo ngokwezifiso ze-CSS ukuze sisebenzise lezi ziguquguqukayo ze-Sass ukuze ube nokuvumelana nezimo okukhulu nakakhulu kuwe.

Qaphela imikhawulo neziphazamisi ezizungeze i-flexbox , njengokungakwazi ukusebenzisa ezinye izici ze-HTML njengeziqukathi eziguquguqukayo .

Izinketho zegridi

Isistimu yegridi ye-Bootstrap ingakwazi ukuzijwayeza kuwo wonke ama-breakpoint ayisithupha azenzakalelayo, nanoma imaphi ama-breakpoint owenza ngendlela oyifisayo. Izigaba eziyisithupha ezizenzakalelayo zegridi zimi kanje:

• Okuncane kakhulu (xs)
• Encane (sm)
• Okumaphakathi (md)
• Okukhulu (lg)
• Okukhulu kakhulu (xl)
• Okukhulu ngokwengeziwe (xxl)

Njengoba kuphawuliwe ngenhla, indawo ngayinye yalezi zinqamuleli inesitsha sayo, isiqalo sesigaba esihlukile, kanye nezilungisi. Nansi indlela igridi eshintsha ngayo kuwo wonke lawa ma-breakpoint:

Amakholomu esakhiwo esizenzakalelayo

Sebenzisa amakilasi ekholomu aqondene ne-breakpoint ukuze kube lula ukulinganisa ikholomu ngaphandle kwekilasi elinezinombolo ezicacile njenge- .col-sm-6.

Ububanzi obulinganayo

Isibonelo, nazi izakhiwo zegridi ezimbili ezisebenza kuwo wonke amadivayisi nembobo yokubuka, ukusuka xsku- xxl. Engeza noma iyiphi inombolo yamakilasi angenayunithi kuphoyinti ngalinye olidingayo futhi ikholomu ngayinye izoba nobubanzi obufanayo.

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

Ukusetha ububanzi bekholomu eyodwa

Isakhiwo esizenzakalelayo samakholomu egridi ye-flexbox siphinde sisho ukuthi ungasetha ububanzi bekholomu eyodwa futhi ube namakholomu ayizelamani ashintsha usayizi ngokuzenzakalelayo kuwo. Ungasebenzisa amakilasi egridi achazwe ngaphambilini (njengoba kukhonjisiwe ngezansi), imiksi yegridi, noma ububanzi bomugqa. Qaphela ukuthi amanye amakholomu azoshintsha usayizi kungakhathaliseki ububanzi bekholomu emaphakathi.

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

Okuqukethwe kobubanzi obuguquguqukayo

Sebenzisa col-{breakpoint}-autoamakilasi usayizi wamakholomu ngokusekelwe kububanzi bemvelo bokuqukethwe kwawo.

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

Amakilasi asabelayo

Igridi ye-Bootstrap ihlanganisa izigaba eziyisithupha zamakilasi achazwe ngaphambilini okwakha izakhiwo eziphendulayo eziyinkimbinkimbi. Enza ngendlela oyifisayo usayizi wamakholomu akho kumadivayisi amancane, amancane, amaphakathi, amakhulu, noma amakhulu ngokwengeziwe ngendlela obona kufaneleke ngayo.

Wonke ama-breakpoint

Kumagridi afanayo kusukela kwamadivayisi amancane kakhulu ukuya kwamakhulu, sebenzisa i- .colkanye .col-*namakilasi. Cacisa ikilasi elinezinombolo uma udinga ikholomu enosayizi othile; ngaphandle kwalokho, zizwe ukhululekile ukunamathela .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>

Istakwe ukuze ivundlile

Usebenzisa isethi eyodwa .col-sm-*yamakilasi, ungakha isistimu yegridi eyisisekelo eqala isitakikhi bese iba evundlile endaweni encane yokuphumula ( 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>

Hlanganisa futhi ufanise

Awufuni ukuthi amakholomu akho avele anqwabelene kwezinye izigaba zegridi? Sebenzisa inhlanganisela yamakilasi ahlukene esigabeni ngasinye njengoba kudingeka. Bheka isibonelo esingezansi ukuze uthole umbono ongcono wokuthi konke kusebenza kanjani.

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

Amakholomu erowu

Sebenzisa .row-cols-*amakilasi aphendulayo ukuze usethe ngokushesha inani lamakholomu anikezela kangcono okuqukethwe kwakho nesakhiwo. Nakuba .col-*amakilasi avamile asebenza kumakholomu angawodwana (isb, .col-md-4), izigaba zamakholomu emigqa zisethwe kumzali .rownjengokuzenzakalelayo kumakholomu aqukethwe. Ngawe .row-cols-autounganikeza amakholomu ububanzi bawo bemvelo.

Sebenzisa lawa makilasi amakholomu emigqa ukuze udale ngokushesha izakhiwo zegridi eziyisisekelo noma ukuze ulawule izakhiwo zekhadi lakho bese ubhala ngaphezulu uma kudingeka kuleveli yekholomu.

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

Ungasebenzisa futhi i-Sass mixin ehambisana nayo, 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);
  }
}

Ukwenza isidleke

Ukuze uhlanganise okuqukethwe kwakho ngegridi ezenzakalelayo, engeza entsha .rownesethi .col-sm-*yamakholomu ngaphakathi kwekholomu ekhona .col-sm-*. Imigqa efakwe kusidleke kufanele ifake isethi yamakholomu ahlanganisa kufika ku-12 noma ngaphansi (akudingekile ukuthi usebenzise wonke amakholomu angu-12 atholakalayo).

<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

Uma usebenzisa amafayela we-Sass womthombo we-Bootstrap, unenketho yokusebenzisa okuguquguqukayo kwe-Sass nezingxube ukuze udale ukwakheka kwekhasi langokwezifiso, le-semantic, kanye nekhasi eliphendulayo. Amakilasi ethu egridi achazwe ngaphambilini asebenzisa lezi zimo eziguquguqukayo nezixube ukuhlinzeka ngesudi ephelele yamakilasi alungele ukusetshenziswa ezakhiwo ezisabelayo ngokushesha.

Okuguquguqukayo

Okuguquguqukayo namamephu kunquma inani lamakholomu, ububanzi be-gutter, kanye nendawo yombuzo wemidiya okufanele kuqalwe kuyo amakholomu antantayo. Sisebenzisa lezi ukuze sikhiqize amakilasi egridi achazwe ngaphambilini abhalwe ngenhla, kanye nezingxube zangokwezifiso ezibalwe ngezansi.

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

Imiksi

Imiksi isetshenziswa ngokuhambisana neziguquko zegridi ukuze kukhiqizwe i-CSS ye-semantic yamakholomu egridi ngayinye.

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

Ukusetshenziswa kwesibonelo

Ungakwazi ukuguqula okuguquguqukayo kube ngamavelu akho angokwezifiso, noma usebenzise nje ama-mixins ngamavelu awo azenzakalelayo. Nasi isibonelo sokusebenzisa izilungiselelo ezizenzakalelayo ukuze udale isakhiwo samakholomu amabili esinegebe phakathi.

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

Ukwenza ngokwezifiso igridi

Ngokusebenzisa okuguquguqukayo kwegridi ye-Sass eyakhelwe ngaphakathi namamephu, kungenzeka ukwenza ngendlela oyifisayo amakilasi egridi achazwe ngaphambilini. Shintsha inani lama-tiers, ubukhulu bemibuzo yemidiya, nobubanzi besiqukathi—bese uhlanganisa futhi.

Amakholomu nama-gutters

Inani lamakholomu egridi lingashintshwa ngokusebenzisa okuguquguqukayo kwe-Sass. $grid-columnsisetshenziselwa ukukhiqiza ububanzi (ngamaphesenti) bekholomu ngayinye kuyilapho $grid-gutter-widthisetha ububanzi bamagutha ekholomu.

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

Izigaba zegridi

Ukudlulela ngale kwamakholomu ngokwawo, ungase futhi wenze ngendlela oyifisayo inombolo yezigaba zegridi. Uma ubufuna amagridi amane kuphela, ungabuyekeza $grid-breakpointsfuthi $container-max-widthskube into efana nalena:

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

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

Uma wenza noma yiziphi izinguquko eziguquguqukayo ze-Sass noma amamephu, uzodinga ukuthi ulondoloze izinguquko zakho futhi uphinde uhlanganise. Ukwenza kanjalo kuzokhipha isethi entsha sha yamakilasi egridi achazwe kusengaphambili obubanzi bekholomu, ama-offset, noku-oda. Izinsiza ezibonakalayo ezisabelayo nazo zizobuyekezwa ukuze kusetshenziswe ama-breakpoints angokwezifiso. Qiniseka ukuthi usetha amanani egridi ku px(hhayi rem, em, noma %).