Grid ulgamy

Mysal

“Bootstrap” gözenek ulgamy mazmuny düzmek we deňleşdirmek üçin birnäçe konteýner, hatar we sütün ulanýar. Flexbox bilen gurlan we doly jogap berýär. Aşakda gözenek ulgamynyň birleşmeginiň mysaly we çuňňur düşündirişi bar.

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

Aboveokardaky mysal, öňünden kesgitlenen gözenek synplarymyzy ulanyp, ähli enjamlar we görnüşler boýunça üç sany giňlikdäki sütün döredýär. Şol sütünler ene-atasy bilen sahypada jemlenendir .container.

Bu nähili işleýär

Ony döwmek, gözenegiň ulgamynyň nädip birleşýändigi:

• Torumyz alty sany täsirli nokady goldaýar . Bölüniş nokatlary media soraglaryna esaslanýar min-width, ýagny bu nokada we ýokardakylara täsir edýär (meselem , ,,, we degişlidir .col-sm-4) . Bu, konteýneriň we sütüniň ululygyna we özüni alyp barşyna gözegçilik edip bilersiňiz.smmdlgxlxxl

• Konteýnerler merkeziňizi we mazmunyňyzy keseligine ýerleşdirýärler. .containerPiksel giňligi, ähli görnüşler we enjamlar üçin ýa-da suwuk we piksel giňlikleriniň utgaşmasy üçin täsirli konteýner (mysal üçin .container-fluid) ulanyň .width: 100%.container-md

• Setirler sütünler üçin örtüklerdir. Her sütüniň paddingarasyndaky boşlugy dolandyrmak üçin keseligine (çukur diýilýär) bar. paddingSoňra sütünleriňizdäki mazmunyň çep tarapa göz bilen deňleşmegini üpjün etmek üçin negatiw aralyklar bilen hatarlara garşy çykýar . Şeýle hem hatarlar mazmunyňyzyň aralygyny üýtgetmek üçin sütün ölçeglerini we gutujyk synplaryny birmeňzeş ulanmak üçin üýtgediji synplary goldaýar.

• Sütünler ajaýyp çeýe. Her hatarda 12 sany şablon sütüni bar, bu size islendik sütüni öz içine alýan elementleriň dürli kombinasiýalaryny döretmäge mümkinçilik berýär. Sütün synplary şablon sütünleriniň sanyny görkezýär (mysal üçin, col-4dört aralyk). widths göterimde kesgitlenýär, şonuň üçin elmydama deň ölçegde bolýar.

• Gutlar hem duýgur we düzülip bilner. Gutter sapaklary, margin we padding aralygy bilen deň ölçegdäki ähli böleklerde bar . Gorizontal çukurlary .gx-*synplar bilen, dik çukurlary .gy-*ýa-da synplar bilen ähli çukurlary üýtgediň .g-*. .g-0çukurlary aýyrmak üçin hem elýeterlidir.

• Sass üýtgeýjiler, kartalar we garyndylar seti güýçlendirýär. “Bootstrap” -da öňünden kesgitlenen gözenek synplaryny ulanmak islemeýän bolsaňyz, gözenegiň çeşmesi Sass -dan has semantik bellik bilen özüňizi döretmek üçin ulanyp bilersiňiz. Şeýle hem bu Sass üýtgeýjileri siziň üçin has çeýeligi üçin sarp etmek üçin käbir CSS aýratyn häsiýetlerini goşýarys.

Käbir HTML elementlerini flex konteýner hökmünde ulanyp bilmezlik ýaly flexbox-yň töweregindäki çäklendirmelerden we kemçiliklerden habardar boluň habardar boluň .

Grid görnüşleri

“Bootstrap” -yň gözenek ulgamy, alty sany deslapky nokadyň we özüňiz düzen islendik nokatlaryň hemmesine uýgunlaşyp biler. Alty sany gözenek derejesi aşakdakylar:

• Goşmaça kiçi (xs)
• Kiçi (sm)
• Orta (md)
• Uly (lg)
• Artykmaç uly (xl)
• Goşmaça uly (xxl)

Aboveokarda belläp geçişimiz ýaly, bu nokatlaryň hersiniň öz konteýni, üýtgeşik synp prefiksi we üýtgedijileri bar. Ine, bu bölekleriň arasynda gözenegiň üýtgemegi:

Awto-tertip sütünleri

Şunuň ýaly aç-açan sanly synpy bolmazdan, sütüniň ululygyny aňsatlaşdyrmak üçin arakesme aýratyn sütün synplaryny ulanyň.col-sm-6 .

Deňlik

Mysal üçin, bu ýerde her enjama we görüniş nokadyna degişli iki sany gözenek düzülişi xsbar xxl. Gerekli her nokat üçin islendik sany az synp goşuň we her sütün birmeňzeş giňlikde bolar.

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

Bir sütüniň inini düzmek

Flexbox grid sütünleri üçin awtomatiki düzüliş, bir sütüniň inini düzüp, dogan sütünleriň awtomatiki usulda ölçegini üýtgedip biljekdigiňizi aňladýar. Öňünden kesgitlenen gözenek synplaryny (aşakda görkezilişi ýaly), gözenek garyndylaryny ýa-da ini giňliklerini ulanyp bilersiňiz. Beýleki sütünleriň merkezi sütüniň giňligine garamazdan ölçegini üýtgetjekdigine üns beriň.

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

Üýtgeýän giňlik mazmuny

col-{breakpoint}-autoMazmunynyň tebigy giňligine baglylykda sütünleri ulaltmak üçin sapaklary ulanyň .

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

Jogap beriji sapaklar

“Bootstrap” paneli çylşyrymly jogap beriş gurluşlaryny gurmak üçin öňünden kesgitlenen alty derejeli synpy öz içine alýar. Sütünleriňiziň ululygyny goşmaça kiçi, kiçi, orta, uly ýa-da goşmaça uly enjamlarda düzüň.

Brehli bölekler

Iň kiçi enjamdan iň ulusyna deň bolan gözenekler üçin .colwe .col-*synplary ulanyň. Aýratyn ölçegli sütün gerek bolsa, sanly synpy görkeziň; bolmasa, ýapyşmaga arkaýyn boluň .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>

Gorizontal görnüşde

Classesseke-täk synp toplumyny ulanyp , kiçijik nokada ( ) .col-sm-*gorizontal bolup başlaýan esasy gözenek ulgamyny döredip bilersiňiz .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>

Garyşdyryň we deňeşdiriň

Sütünleriňiziň käbir gözenek derejelerine ýapylmagyny islemeýärsiňizmi? Zerur bolanda her dereje üçin dürli synplaryň kombinasiýasyny ulanyň. Bularyň nähili işleýändigi barada has gowy düşünmek üçin aşakdaky mysala serediň.

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

Setir sütünleri

.row-cols-*Mazmunyňyzy we ýerleşişiňizi iň oňat görkezýän sütünleriň sanyny çalt kesgitlemek üçin täsirli synplary ulanyň . Adaty .col-*synplar aýratyn sütünlere (meselem, .col-md-4) degişli bolsa, hatar sütün synplary ene-atada .rowgysga ýol hökmünde goýulýar. Bilen.row-cols-auto tebigy giňligini berip bilersiňiz.

Esasy set düzülişlerini çalt döretmek ýa-da karta düzülişiňizi dolandyrmak üçin bu hatar sütün synplaryny ulanyň.

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

Şeýle hem, Sass garyndysyny ulanyp bilersiňiz , 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);
  }
}

Höwürtge

Mazmunyňyzy deslapky gözenek bilen ýerleşdirmek üçin, bar bolan sütüniň içine täze .rowwe sütünler goşuň . Içerki hatarlarda 12 ýa-da has az sütünler toplumy bolmaly (bar bolan sütünleriň hemmesini ulanmagyňyz hökmany däl)..col-sm-*.col-sm-*

<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

“Bootstrap” -yň çeşmesi Sass faýllaryny ulananyňyzda, adaty, semantik we täsirli sahypa düzülişlerini döretmek üçin Sass üýtgeýjilerini we garyndylaryny ulanyp bilersiňiz. Öňünden kesgitlenen gözenek synplarymyz, şol bir üýtgeýjileri we garyndylary ulanýarlar, çalt täsirli ýerleşişler üçin ulanmaga taýyn synplaryň toplumyny üpjün etmek üçin.

Üýtgeýjiler

Üýtgeýjiler we kartalar sütünleriň sanyny, çukuryň giňligini we ýüzýän sütünleri başlamaly media talap nokadyny kesgitleýär. Bulary ýokarda resminamalaşdyrylan öňünden kesgitlenen gözenek synplaryny, şeýle hem aşakda görkezilen adaty garyndylar üçin ulanýarys.

$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

Miksinler, aýratyn gözenek sütünleri üçin semantik CSS döretmek üçin gözenegiň üýtgeýjileri bilen bilelikde ulanylýar.

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

Mysal ulanylyşy

Üýtgeýjileri öz aýratyn bahalaryňyza üýtgedip bilersiňiz ýa-da garyşyklary adaty bahalary bilen ulanyp bilersiňiz. Ine, aralykdaky iki sütünli düzülişi döretmek üçin deslapky sazlamalary ulanmagyň mysaly.

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

Paneli sazlamak

Gurlan gözenek Sass üýtgeýjilerimizi we kartalarymyzy ulanyp, öňünden kesgitlenen gözenek synplaryny doly özleşdirip bolýar. Gatnaşyklaryň sanyny, media talaplarynyň ölçeglerini we konteýner giňligini üýtgediň, soňra täzeden düzüň.

Sütünler we çukurlar

Tor sütünleriniň sanyny Sass üýtgeýjileri arkaly üýtgedip bolýar. sütün çukurlary üçin ini kesgitlän $grid-columnsmahaly, her aýratyn sütüniň giňligini (göterimde) döretmek üçin ulanylýar . sütünleriň iň köp sanyny bellemek üçin ulanylýar, bu çäkden geçýän islendik san hasaba alynmaýar.$grid-gutter-width$grid-row-columns.row-cols-*

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

Grid gatlaklary

Sütünleriň özünden geçip, gözenek derejeleriniň sanyny hem düzüp bilersiňiz. Diňe dört gözenek derejesini isleýän bolsaňyz, $grid-breakpointsşuňa $container-max-widthsmeňzeş bir zady täzelärdiňiz:

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

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

Sass üýtgeýjilerine ýa-da kartalaryna haýsydyr bir üýtgeşme girizeniňizde, üýtgeşmeleriňizi ýazdyrmaly we täzeden düzmeli bolarsyňyz. Şeýle etmek bilen sütün giňligi, ofset we sargyt üçin öňünden kesgitlenen gözenek synplarynyň täze toplumy çykar. Customörite kesiş nokatlaryny ulanmak üçin jogap beriji görüniş hyzmatlary hem täzelener. Tor bahalaryny px(däl rem, emýa-da %) goýuň.