Mfumo wa gridi ya taifa

Tumia gridi yetu ya nguvu ya kwanza ya kisanduku cha rununu kuunda miundo ya maumbo na saizi zote kwa shukrani kwa mfumo wa safu wima kumi na mbili, viwango sita vya kuitikia chaguomsingi, viambajengo vya Sass na vichanganyiko, na makundi kadhaa yaliyobainishwa awali.

Katika ukurasa huu

Mfano

Mfumo wa gridi ya Bootstrap hutumia mfululizo wa kontena, safu mlalo na safu wima ili kupanga na kupanga maudhui. Imejengwa kwa flexbox na inajibu kikamilifu. Ifuatayo ni mfano na maelezo ya kina ya jinsi mfumo wa gridi unavyokusanyika.

Je! wewe ni mgeni au hujui flexbox? Soma mwongozo huu wa kisanduku rahisi cha Mbinu za CSS kwa usuli, istilahi, miongozo na vijisehemu vya msimbo.

Safu

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>

Mfano ulio hapo juu huunda safu wima tatu za upana sawa kwenye vifaa vyote na vituo vya kutazama kwa kutumia aina zetu za gridi zilizobainishwa awali. Safu wima hizo zimewekwa katikati ya ukurasa na mzazi .container.

Inavyofanya kazi

Kuivunja, hivi ndivyo mfumo wa gridi unavyokusanyika:

Gridi yetu inasaidia vituo sita vya kuitikia . Vizuizi vinatokana na min-widthmaswali ya media, kumaanisha kuwa vinaathiri sehemu hiyo ya kukiuka na wale wote walio juu yake (km, .col-sm-4inatumika kwa sm, md, lg, xl, na xxl). Hii inamaanisha kuwa unaweza kudhibiti ukubwa wa kontena na safu wima na tabia kwa kila sehemu ya kukagua.
Vyombo katikati na pedi mlalo maudhui yako. Tumia .containerkwa upana wa pikseli unaojibu, .container-fluidkwa width: 100%vituo na vifaa vyote vya kutazama, au chombo kinachojibu (km, .container-md) kwa mchanganyiko wa upana wa kiowevu na pikseli.
Safu ni vifungashio vya safu wima. Kila safu ina mlalo padding(inayoitwa gutter) kwa kudhibiti nafasi kati yao. Kisha hii paddinginapingwa kwenye safu mlalo zilizo na pambizo hasi ili kuhakikisha kuwa maudhui katika safu wima yako yamepangiliwa kwa mwonekano chini upande wa kushoto. Safu mlalo pia zinaauni madarasa ya kurekebisha ili kutumia kwa usawa madarasa ya ukubwa wa safu na mifereji ya maji ili kubadilisha nafasi ya maudhui yako.
Safu ni rahisi kunyumbulika sana. Kuna safu wima 12 za violezo zinazopatikana kwa kila safu, zinazokuruhusu kuunda michanganyiko tofauti ya vipengee vinavyochukua safu wima yoyote. Madarasa ya safu wima yanaonyesha idadi ya safu wima za violezo vya kudumu (kwa mfano, col-4vipindi vinne). widths zimewekwa kwa asilimia kwa hivyo kila wakati unakuwa na saizi sawa.
Gutters pia ni msikivu na inaweza kubinafsishwa. Madarasa ya gutter yanapatikana katika sehemu zote za kukatiza, kwa ukubwa sawa na nafasi zetu za ukingo na padding . Badilisha mifereji ya maji ya mlalo yenye .gx-*madarasa, mifereji ya maji wima yenye .gy-*, au mifereji yote yenye .g-*madarasa. .g-0inapatikana pia ili kuondoa mifereji ya maji.
Vigeu vya Sass, ramani na michanganyiko huimarisha gridi ya taifa. Iwapo hutaki kutumia madarasa ya gridi yaliyofafanuliwa awali katika Bootstrap, unaweza kutumia chanzo cha gridi yetu ya Sass kuunda yako mwenyewe ukitumia alama za kisemantiki zaidi. Pia tunajumuisha baadhi ya vipengele maalum vya CSS ili kutumia vigeu hivi vya Sass kwa urahisi zaidi kwako.

Fahamu vikwazo na hitilafu zinazozunguka flexbox , kama vile kutokuwa na uwezo wa kutumia baadhi ya vipengele vya HTML kama vyombo vinavyobadilikabadilika .

Chaguzi za gridi ya taifa

Mfumo wa gridi ya Bootstrap unaweza kubadilika katika sehemu zote sita za utatuzi chaguo-msingi, na sehemu zozote za kuvunja unazoweka mapendeleo. Viwango sita vya msingi vya gridi ni kama ifuatavyo:

Ndogo zaidi (xs)
Ndogo (sm)
Wastani (md)
Kubwa (lg)
Kubwa zaidi (xl)
Kubwa zaidi ya ziada (xxl)

Kama ilivyoonyeshwa hapo juu, kila moja ya sehemu hizi za kuvunja ina kontena lao, kiambishi awali cha darasa la kipekee, na virekebishaji. Hivi ndivyo gridi ya taifa inavyobadilika katika sehemu zote hizi za uvunjaji:

	xs <576px	sm ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
Chombo`max-width`	Hakuna (otomatiki)	540px	720px	960px	1140px	1320px
Kiambishi awali cha darasa	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
# ya safu wima	12
Upana wa gutter	1.5rem (.75rem kushoto na kulia)
Mifereji maalum	Ndiyo
Nestable	Ndiyo
Kuagiza safu	Ndiyo

Safu wima za mpangilio otomatiki

Tumia madarasa ya safu wima mahususi kwa uwekaji ukubwa wa safu wima kwa urahisi bila darasa lililo na nambari dhahiri kama .col-sm-6.

Sawa-upana

Kwa mfano, hapa kuna mipangilio miwili ya gridi inayotumika kwa kila kifaa na kituo cha kutazama, kutoka xshadi xxl. Ongeza idadi yoyote ya madarasa yasiyo na kitengo kwa kila sehemu ya kukatika unayohitaji na kila safu itakuwa na upana sawa.

1 kati ya 2

2 ya 2

1 kati ya 3

2 ya 3

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

Kuweka upana wa safu moja

Mpangilio otomatiki wa safu wima za gridi ya flexbox pia inamaanisha unaweza kuweka upana wa safu wima moja na kuwa na safu wima ndugu kubadilisha ukubwa kiotomatiki kuizunguka. Unaweza kutumia madarasa ya gridi yaliyofafanuliwa awali (kama inavyoonyeshwa hapa chini), mchanganyiko wa gridi, au upana wa ndani. Kumbuka kuwa safu wima zingine zitabadilisha ukubwa bila kujali upana wa safu ya katikati.

1 kati ya 3

2 kati ya 3 (pana)

3 ya 3

1 kati ya 3

2 kati ya 3 (pana)

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

Maudhui ya upana unaobadilika

Tumia col-{breakpoint}-automadarasa kwa ukubwa wa safuwima kulingana na upana asili wa yaliyomo.

1 kati ya 3

Maudhui ya upana unaobadilika

3 ya 3

1 kati ya 3

Maudhui ya upana unaobadilika

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

Madarasa ya mwitikio

Gridi ya Bootstrap inajumuisha viwango sita vya madarasa yaliyofafanuliwa awali kwa ajili ya kujenga mipangilio changamano inayoitikia. Geuza ukubwa wa safuwima zako upendavyo kwenye vifaa vidogo zaidi, vidogo, vya kati, vikubwa au vikubwa zaidi unavyoona inafaa.

Vizuizi vyote

Kwa gridi ambazo ni sawa kutoka kwa vifaa vidogo hadi vikubwa zaidi, tumia .colna .col-*madarasa. Taja darasa la nambari wakati unahitaji safu ya ukubwa maalum; vinginevyo, jisikie huru kushikamana na .col.

col

kol-8

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

Imepangwa kwa mlalo

Kwa kutumia seti moja ya .col-sm-*madarasa, unaweza kuunda mfumo wa msingi wa gridi ya taifa ambao huanza kupangwa na kuwa mlalo kwenye sehemu ndogo ya kukatika ( sm).

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

Changanya na ufanane

Je! hutaki safu wima zako zirundikane tu katika viwango vingine vya gridi ya taifa? Tumia mchanganyiko wa madarasa tofauti kwa kila daraja inapohitajika. Tazama mfano hapa chini kwa wazo bora la jinsi yote inavyofanya kazi.

.col-md-8

.col-6 .col-md-4

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

Safu wima

Tumia .row-cols-*madarasa ya kuitikia ili kuweka kwa haraka idadi ya safu wima zinazotoa maudhui na mpangilio wako vyema. Ingawa .col-*madarasa ya kawaida hutumika kwa safu wima mahususi (kwa mfano, .col-md-4), madarasa ya safu mlalo yamewekwa kwa mzazi .rowkama njia ya mkato. Pamoja na .row-cols-autowewe unaweza kutoa nguzo upana wao wa asili.

Tumia madarasa haya ya safu mlalo ili kuunda kwa haraka miundo msingi ya gridi au kudhibiti mipangilio ya kadi yako.

Safu

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>

Safu

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>

Safu

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>

Safu

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>

Safu

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>

Safu

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>

Unaweza pia kutumia mchanganyiko unaoandamana wa Sass, 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

Ili kuweka maudhui yako kwa gridi chaguo-msingi, ongeza safu mpya .rowna seti ya .col-sm-*safu wima iliyopo .col-sm-*. Safu mlalo zilizowekwa lazima zijumuishe seti ya safu wima zinazoongeza hadi 12 au chache (si lazima utumie safu wima zote 12 zilizopo).

Kiwango cha 1: .col-sm-3

Kiwango cha 2: .col-8 .col-sm-6

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

Unapotumia faili za chanzo za Sass za Bootstrap, una chaguo la kutumia viambajengo vya Sass na vichanganyiko ili kuunda mipangilio ya ukurasa maalum, ya kimantiki na inayoitikia. Madarasa yetu ya gridi yaliyofafanuliwa awali hutumia vigeu hivi sawa na vichanganyiko ili kutoa safu nzima ya madarasa yaliyo tayari kutumia kwa miundo inayoitikia kwa haraka.

Vigezo

Vigezo na ramani huamua idadi ya safu wima, upana wa mfereji wa maji, na sehemu ya hoja ya midia ambapo safu wima zinazoelea zinaweza kuanza. Tunatumia hizi ili kutengeneza madarasa ya gridi yaliyofafanuliwa awali yaliyoandikwa hapo juu, na vile vile kwa michanganyiko maalum iliyoorodheshwa hapa chini.

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

Mchanganyiko

Michanganyiko hutumiwa pamoja na vigeu vya gridi ya taifa ili kutoa CSS ya kisemantiki kwa safu wima za gridi mahususi.

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

Mfano wa matumizi

Unaweza kurekebisha anuwai kwa maadili yako mwenyewe, au tumia tu mchanganyiko na maadili yao ya msingi. Huu hapa ni mfano wa kutumia mipangilio chaguo-msingi ili kuunda muundo wa safu wima mbili na pengo kati.

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

Maudhui kuu

Maudhui ya pili

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>

Kubinafsisha gridi ya taifa

Kwa kutumia vigeu vyetu vilivyojengewa ndani vya gridi ya Sass na ramani, inawezekana kubinafsisha kabisa aina za gridi zilizoainishwa awali. Badilisha idadi ya viwango, vipimo vya hoja ya media, na upana wa kontena-kisha ujumuishe.

Nguzo na mifereji ya maji

Idadi ya safu wima za gridi inaweza kubadilishwa kupitia vigeu vya Sass. $grid-columnshutumika kutoa upana (katika asilimia) ya kila safu mahususi huku $grid-gutter-widthikiweka upana wa mifereji ya safu wima. $grid-row-columnshutumika kuweka idadi ya juu zaidi ya safu wima .row-cols-*, nambari yoyote inayozidi kikomo hiki hupuuzwa.

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

Viwango vya gridi

Ukisonga zaidi ya safu wima zenyewe, unaweza pia kubinafsisha idadi ya viwango vya gridi ya taifa. Ikiwa ungetaka safu nne tu za gridi, ungesasisha $grid-breakpointsna $container-max-widthskwa kitu kama hiki:

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

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

Unapofanya mabadiliko yoyote kwa vigeu vya Sass au ramani, utahitaji kuhifadhi mabadiliko yako na kukusanya tena. Kufanya hivyo kutatoa seti mpya kabisa ya madarasa ya gridi yaliyofafanuliwa awali kwa upana wa safu, marekebisho na kuagiza. Huduma za mwonekano wa kuitikia pia zitasasishwa ili kutumia vizuizi maalum. Hakikisha umeweka thamani za gridi ndani px(si rem, em, au %).