Mfumo wa gridi ya taifa

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.

<div class="container">
  <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 ya 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 ilivyobainishwa hapo juu, kila moja ya sehemu hizi za kuvunja ina kontena lake, kiambishi awali cha darasa la kipekee, na virekebishaji. Hivi ndivyo gridi ya taifa inavyobadilika katika sehemu zote hizi za uvunjaji:

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.

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

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.

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

Maudhui ya upana unaobadilika

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

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

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

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

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

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

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.

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

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.

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

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 zinapaswa kujumuisha seti ya safu wima zinazoongeza hadi 12 au chache (si lazima utumie safu wima zote 12 zilizopo).

<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

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

<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-columns: 12 !default;
$grid-gutter-width: 1.5rem !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 kuyakusanya 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 %).