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">
  <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 her kesiş nokadyna gözegçilik edip biljekdigiňizi aňladýar.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 dürli elementleriň kombinasiýasyny 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, dik çukurlar .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, has manyly bellik bilen özüňizi döretmek üçin gözenegimiziň çeşmesi Sass -dan peýdalanyp 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ň .

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

Açyk sanly synpy bolmazdan, sütüniň aňsat ölçegi üç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">
  <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">
  <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">
  <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">
  <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 bölekde ( ) .col-sm-*tertipleşdirilen we gorizontal bolýan esasy gözenek ulgamyny döredip bilersiňiz .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>

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">
  <!-- 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 .rowbar bolan sütünler üçin deslapky görnüşde goýulýar. Sütünlere .row-cols-autotebigy giňligini berip bilersiňiz.

Esasy set düzülişlerini çalt döretmek ýa-da karta düzülişiňize gözegçilik etmek we sütün derejesinde zerur bolanda ýok etmek üçin bu hatar sütün synplaryny ulanyň.

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

Ş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">
  <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, çalt üýtgeýän tertipler üçin ulanmaga taýyn synplaryň tutuş toplumyny üpjün etmek üçin şol bir üýtgeýjileri we garyndylary ulanýarlar.

Üý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 garyndylary döretmek üçin ulanýarys.

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

Mixins

Garyndylar, gözenegiň 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);

// Get fancy by offsetting, or changing the sort order
@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

Using our built-in grid Sass variables and maps, it’s possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile.

Columns and gutters

The number of grid columns can be modified via Sass variables. $grid-columns is used to generate the widths (in percent) of each individual column while $grid-gutter-width sets the width for the column gutters.

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

Grid tiers

Moving beyond the columns themselves, you may also customize the number of grid tiers. If you wanted just four grid tiers, you’d update the $grid-breakpoints and $container-max-widths to something like this:

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

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

When making any changes to the Sass variables or maps, you’ll need to save your changes and recompile. Doing so will output a brand new set of predefined grid classes for column widths, offsets, and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints. Make sure to set grid values in px (not rem, em, or %).