Sistema tal-grilja

Eżempju

Is-sistema tal-grilja ta 'Bootstrap tuża serje ta' kontenituri, ringieli, u kolonni biex tqassam u tallinja l-kontenut. Huwa mibni bil- flexbox u jirreaġixxi bis-sħiħ. Hawn taħt hemm eżempju u spjegazzjoni fil-fond dwar kif is-sistema tal-grilja tingħaqad flimkien.

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

L-eżempju ta 'hawn fuq joħloq tliet kolonni ta' wisa 'ugwali fl-apparati u l-viewports kollha bl-użu tal-klassijiet tal-grilja predefiniti tagħna. Dawk il-kolonni huma ċċentrata fil-paġna bil-ġenitur .container.

Kif taħdem

Tkissirha, hawn kif tingħaqad is-sistema tal-grilja:

• Il-grilja tagħna tappoġġja sitt breakpoints li jirrispondu . Breakpoints huma bbażati fuq min-widthmistoqsijiet tal-midja, li jfisser li jaffettwaw dak il-breakpoint u dawk kollha 'l fuq minnu (eż., .col-sm-4japplika għal sm, md, lg, xl, u xxl). Dan ifisser li tista 'tikkontrolla d-daqs u l-imġieba tal-kontenitur u tal-kolonna b'kull breakpoint.

• Il-kontenituri jiċċentraw u orizzontalment ipad il-kontenut tiegħek. Uża .containergħal wisa' tal-pixels li jirrispondu, .container-fluidgħall width: 100%-viewports u l-apparati kollha, jew kontenitur li jirrispondu (eż. .container-md) għal kombinazzjoni ta' wisgħat ta' fluwidu u pixel.

• Ringieli huma tgeżwir għall-kolonni. Kull kolonna għandha orizzontali padding(imsejħa kanal) għall-kontroll tal-ispazju bejniethom. Dan paddingimbagħad jiġi kkontrobattat fuq ir-ringieli b'marġini negattivi biex jiġi żgurat li l-kontenut fil-kolonni tiegħek ikun viżwalment allinjat fin-naħa tax-xellug. Ir-ringieli jappoġġjaw ukoll klassijiet ta' modifikaturi biex japplikaw b'mod uniformi d-daqs tal-kolonna u klassijiet tal-kanal biex jibdlu l-ispazjar tal-kontenut tiegħek.

• Il-kolonni huma oerhört flessibbli. Hemm 12-il kolonna mudell disponibbli għal kull ringiela, li jippermettulek toħloq kombinazzjonijiet differenti ta 'elementi li jkopru kwalunkwe numru ta' kolonni. Il-klassijiet tal-kolonni jindikaw in-numru ta' kolonni tal-mudelli li għandhom jifirxu (eż., col-4jifrex fuq erba'). widths huma stabbiliti f'perċentwali sabiex inti dejjem ikollok l-istess daqs relattiv.

• Il-kanali huma wkoll reattivi u customizable. Il-klassijiet tal-kanal huma disponibbli fil-punti ta' waqfien kollha, bl-istess daqsijiet bħall- marġni tagħna u l-ispazjar tal-ikkuttunar . Ibdel kanali orizzontali bi .gx-*klassijiet, kanali vertikali bi .gy-*, jew kanali kollha bi .g-*klassijiet. .g-0huwa wkoll disponibbli biex jitneħħew kanali.

• Sass varjabbli, mapep, u mixins iħaddmu l-grid. Jekk ma tridx tuża l-klassijiet tal-grilja predefiniti f'Bootstrap, tista 'tuża s -sors tal-grilja tagħna Sass biex toħloq tiegħek b'markup semantiku aktar. Aħna ninkludu wkoll xi proprjetajiet tad-dwana CSS biex nikkunsmaw dawn il-varjabbli Sass għal flessibilità saħansitra akbar għalik.

Kun konxju tal-limitazzjonijiet u bugs madwar flexbox , bħall- inkapaċità li tuża xi elementi HTML bħala kontenituri flex .

Għażliet tal-grilja

Is-sistema tal-grilja ta' Bootstrap tista' tadatta s-sitt breakpoints default kollha, u kwalunkwe breakpoints li tippersonalizza. Is-sitt livelli tal-grilja default huma kif ġej:

• Żgħir żejjed (xs)
• Żgħir (ċm)
• Medju (md)
• Kbir (lg)
• Kbir żejjed (xl)
• Kbir żejjed (xxl)

Kif innutat hawn fuq, kull wieħed minn dawn il-punti ta' waqfien għandu l-kontenitur, il-prefiss uniku tal-klassi, u l-modifikaturi tiegħu. Hawn kif il-grilja tinbidel f'dawn il-punti ta' waqfien:

Kolonni ta' tqassim awtomatiku

Uża klassijiet ta' kolonni speċifiċi għal breakpoint għal daqs faċli tal-kolonna mingħajr klassi nnumerata espliċita bħal .col-sm-6.

Wisa' ugwali

Pereżempju, hawn żewġ layouts tal-grilja li japplikaw għal kull apparat u viewport, minn xssa xxl. Żid kwalunkwe numru ta 'klassijiet mingħajr unitajiet għal kull breakpoint li għandek bżonn u kull kolonna tkun l-istess wisa'.

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

L-issettjar ta' wisa' ta' kolonna waħda

It-tqassim awtomatiku għall-kolonni tal-grilja tal-flexbox ifisser ukoll li tista 'tissettja l-wisa' ta 'kolonna waħda u jkollok il-kolonni tal-aħwa awtomatikament ridimensjonaw madwarha. Tista' tuża klassijiet ta' gril definiti minn qabel (kif muri hawn taħt), mixins ta' grilja, jew wisgħat inline. Innota li l-kolonni l-oħra se jibdlu d-daqs irrispettivament mill-wisa 'tal-kolonna ċentrali.

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

Kontenut ta 'wisa' varjabbli

Uża col-{breakpoint}-autoklassijiet għad-daqs tal-kolonni bbażati fuq il-wisa 'naturali tal-kontenut tagħhom.

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

Klassijiet li jirrispondu

Il-grilja ta' Bootstrap tinkludi sitt livelli ta' klassijiet predefiniti għall-bini ta' layouts kumplessi li jirrispondu. Ippersonalizza d-daqs tal-kolonni tiegħek fuq apparat żgħir żejjed, żgħir, medju, kbir jew kbir żejjed kif jidhirlek xieraq.

Kollha breakpoints

Għal grilji li huma l-istess mill-iżgħar ta 'apparati għall-akbar, uża l- .colu .col-*klassijiet. Speċifika klassi numerata meta jkollok bżonn kolonna ta' daqs partikolari; inkella, tħossok liberu li żżomm mal- .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>

Stacked għal orizzontali

Bl-użu ta 'sett wieħed ta' .col-sm-*klassijiet, tista 'toħloq sistema ta' grilja bażika li tibda f'munzelli u ssir orizzontali fil-punt ta 'waqfien żgħir ( 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>

Ħallat u qabblu

Ma tridx li l-kolonni tiegħek sempliċement jiġbru f'xi gradi tal-grilja? Uża taħlita ta 'klassijiet differenti għal kull saff kif meħtieġ. Ara l-eżempju hawn taħt għal idea aħjar ta' kif jaħdem kollox.

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

Kolonni ta' ringiela

Uża l- .row-cols-*klassijiet li jirrispondu biex issettja malajr in-numru ta’ kolonni li jirrendu l-aħjar il-kontenut u t-tqassim tiegħek. Filwaqt li l-klassijiet normali .col-*japplikaw għall-kolonni individwali (eż., .col-md-4), il-klassijiet tal-kolonni tar-ringieli huma stabbiliti fuq il-ġenitur .rowbħala shortcut. Bil .row-cols-autointi tista 'tagħti l-kolonni wisa' naturali tagħhom.

Uża dawn il-klassijiet tal-kolonni ringieli biex toħloq malajr layouts bażiċi tal-grilja jew biex tikkontrolla t-tqassim tal-karti tiegħek.

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

Tista' wkoll tuża l-mixin Sass li jakkumpanja 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);
  }
}

Ibejtu

Biex tbejta l-kontenut tiegħek mal-grilja default, żid kolonni ġodda .rowu sett ta .col-sm-*' kolonna eżistenti .col-sm-*. Ringieli mdaħħla għandhom jinkludu sett ta’ kolonni li jammontaw għal 12 jew inqas (mhux meħtieġ li tuża t-12-il kolonna kollha disponibbli).

<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

Meta tuża l-fajls Sass sors ta 'Bootstrap, għandek l-għażla li tuża varjabbli u mixins Sass biex toħloq layouts tal-paġna personalizzati, semantiċi u li jirrispondu. Il-klassijiet tal-grilja predefiniti tagħna jużaw dawn l-istess varjabbli u mixins biex jipprovdu firxa sħiħa ta 'klassijiet lesti għall-użu għal layouts li jirrispondu malajr.

Varjabbli

Varjabbli u mapep jiddeterminaw in-numru ta 'kolonni, il-wisa' tal-kanal, u l-punt ta 'mistoqsija tal-midja li fih jibdew il-kolonni f'wiċċ l-ilma. Aħna nużaw dawn biex niġġeneraw il-klassijiet tal-grilja predefiniti dokumentati hawn fuq, kif ukoll għall-mixins personalizzati elenkati hawn taħt.

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

Mixins

Mixins jintużaw flimkien mal-varjabbli tal-grilja biex jiġġeneraw CSS semantiċi għal kolonni tal-grilja individwali.

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

Eżempju ta' użu

Tista 'timmodifika l-varjabbli għall-valuri tad-dwana tiegħek stess, jew sempliċement tuża l-mixins bil-valuri awtomatiċi tagħhom. Hawn eżempju ta 'użu tas-settings default biex jinħoloq tqassim ta' żewġ kolonni b'vojt bejniethom.

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

Jippersonalizza l-grilja

Bl-użu tal-varjabbli u l-mapep Sass tal-grilja integrata tagħna, huwa possibbli li tippersonalizza kompletament il-klassijiet tal-grilja predefiniti. Ibdel in-numru ta 'saffi, id-dimensjonijiet tal-interrogazzjoni tal-midja, u l-wisa' tal-kontenituri—imbagħad ikkompila mill-ġdid.

Kolonni u kanali

In-numru ta 'kolonni tal-grilja jista' jiġi modifikat permezz ta 'varjabbli Sass. $grid-columnsjintuża biex jiġġenera l-wisgħat (f'perċentwali) ta 'kull kolonna individwali filwaqt li $grid-gutter-widthjistabbilixxi l-wisa' għall-kanali tal-kolonna. $grid-row-columnsjintuża biex jiġi stabbilit in-numru massimu ta' kolonni ta' .row-cols-*, kwalunkwe numru li jaqbeż dan il-limitu jiġi injorat.

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

Saffi tal-grilja

Li timxi lil hinn mill-kolonni nfushom, tista 'wkoll tippersonalizza n-numru ta' gradi tal-grilja. Jekk ridt biss erba' livelli tal-grilja, taġġorna l- $grid-breakpointsu $container-max-widthsgħal xi ħaġa bħal din:

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

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

Meta tagħmel xi bidliet fil-varjabbli jew il-mapep Sass, ikollok bzonn issalva l-bidliet tiegħek u tikkompila mill-ġdid. Jekk tagħmel hekk toħroġ sett ġdid fjamant ta' klassijiet ta' gril definiti minn qabel għal wisa' ta' kolonni, offsets u ordnijiet. L-utilitajiet ta' viżibilità li jirrispondu se jiġu aġġornati wkoll biex jużaw il-punti ta' waqfien tad-dwana. Kun żgur li tissettja l-valuri tal-grilja fi px(mhux rem, em, jew %).