Grid ulgamy

On iki sütün ulgamy, bäş sany jogap beriji dereje, Sass üýtgeýjileri we garyndylary we öňünden kesgitlenen onlarça synpyň kömegi bilen ähli şekilleriň we ululyklaryň ýerleşişini gurmak üçin güýçli ykjam ilkinji flexbox torumyzy ulanyň.

Bu nähili işleýär

“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 toruň nädip birleşýändigine mysal we çuňňur syn berilýär.

Flexbox bilen täze ýa-da tanyş däl? Fon, terminologiýa, görkezmeler we kod bölekleri üçin bu CSS Tricks flexbox gollanmasyny okaň .

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

Aboveokardaky mysal, öňünden kesgitlenen gözenek synplarymyzy ulanyp, kiçi, orta, uly we goşmaça uly enjamlarda üç sany giňlikdäki sütün döredýär. Şol sütünler ene-atasy bilen sahypada jemlenendir .container.

Ony döwmek, ine, nähili işleýär:

• Konteýnerler sahypaňyzyň mazmunyny merkezleşdirmek we keseligine ýerleşdirmek üçin serişdeleri üpjün edýär. .containerDuýgur piksel giňligi ýa-da .container-fluidähli width: 100%görnüş we enjam ululyklary üçin ulanyň .
• Setirler sütünler üçin örtüklerdir. Her sütüniň paddingarasyndaky boşlugy dolandyrmak üçin keseligine (çukur diýilýär) bar. paddingSoňra bolsa negatiw aralyklar bilen hatarlara garşy durýarlar . Şeýlelik bilen, sütünleriňizdäki ähli mazmun çep tarapa wizual taýdan deňleşdirilýär.
• Panel düzülişinde mazmun sütünleriň içinde ýerleşdirilmelidir we diňe sütünler hatar çagalar bolup biler.
• Flexbox-yň kömegi bilen, kesgitlenmedik gözenek sütünleri widthawtomatiki usulda deň giňlik sütünleri ýaly ýerleşer. Mysal üçin, dört mysal .col-sm, kiçijik nokatdan we ýokarydan awtomatiki usulda 25% giň bolar. Has giňişleýin mysallar üçin awtomatik ýerleşdiriş sütünleri bölümine serediň.
• Sütün synplary, mümkin bolan 12 hatardan peýdalanmak isleýän sütünleriň sanyny görkezýär. Şeýlelik bilen, üç sany deň giňlikdäki sütün isleseňiz, ulanyp bilersiňiz .col-4.
• Sütünler widthgöterim bilen kesgitlenýär, şonuň üçin olar hemişe esasy elementine görä suwuk we uludyr.
• Sütünleriň paddingaýratyn sütünleriň arasynda çukurlary döretmek üçin keseligine bar, ýöne marginhatarlary hatarlardan we paddingsütünlerden aýryp .no-guttersbilersiňiz .row.
• Toruň täsirli bolmagy üçin bäş sany gözenegiň nokady bar, her jogap beriji nokat üçin biri : ähli bölek nokatlary (goşmaça kiçi), kiçi, orta, uly we goşmaça uly.
• Grid bölekleri iň az giňlikdäki media talaplaryna esaslanýar, ýagny şol bir nokada we ýokardakylaryň hemmesine degişlidir (mysal üçin, .col-sm-4kiçi, orta, uly we goşmaça uly enjamlara degişlidir, ýöne birinji xsnokat däl).
• Has semantik bellemek üçin öňünden kesgitlenen gözenek synplaryny (ýaly .col-4) ýa-da Sass garyndylaryny ulanyp bilersiňiz.

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 ululyklaryň köpüsini kesgitlemek üçin ems ýa-da s ulanýan bolsa, s gözenegiň nokatlary we konteýner giňlikleri üçin ulanylýar. Sebäbi görnüşiň giňligi pikselde we şriftiň ululygy bilen üýtgemeýär .rempx

“Bootstrap” grid ulgamynyň taraplarynyň amatly stol bilen birnäçe enjamda nähili işleýändigini görüň.

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

Deň giňlikdäki sütünleri birnäçe setire bölüp bolýar, ýöne Safari flexbox näsazlygyflex-basis bardy, munuň aç - açan işlemegine päsgel berdi border. Köne brauzer wersiýalary üçin çözgütler bar, ýöne döwrebap bolsaňyz zerur bolmaz.

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</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>

Deň giňlikdäki köp hatar

.w-100Sütünleriň täze setirine bölünmegini isleýän ýeriňizi goýup, birnäçe hatary öz içine alýan deň giňlikdäki sütünleri dörediň . .w-100Käbir duýgur displeý enjamlary bilen garyşdyryp, arakesmeleri täsirli ediň .

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

Jogap beriji sapaklar

“Bootstrap” paneli çylşyrymly jogap beriş gurluşlaryny gurmak üçin öňünden kesgitlenen bäş 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="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>

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

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

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .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>

Deňleşdirmek

Sütünleri dik we keseligine deňlemek üçin flexbox deňleşdiriş enjamlaryny ulanyň.

Dik tekizlemek

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

Gorizontal deňleşdirme

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

Çukur ýok

Öňünden kesgitlenen gözenek synplarymyzdaky sütünleriň arasyndaky boşluklary aýryp bolýar .no-gutters. Bu , ähli çaga sütünlerinden otrisatel we gorizontal marginaýyrýar ..rowpadding

Ine, bu stilleri döretmegiň deslapky kody. Sütüniň artykmaç görnüşleriniň diňe ilkinji çagalar sütünlerine degişlidigini we atribut saýlaýjynyň üsti bilen nyşana alnandygyny unutmaň . Bu has anyk saýlaýjy döredýän hem bolsa, aralyk enjamlary bilen sütün paddingleri hasam düzülip bilner .

Gyrasy dizaýn gerekmi? Ene- atany taşla ýa- .containerda .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

Iş ýüzünde, ine, görnüşi. Muny öňünden kesgitlenen gözenek synplarynyň hemmesi bilen ulanmagy dowam etdirip bilersiňiz (sütün giňligi, täsirli derejeler, tertipler we ş.m.).

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Sütün dolamak

Bir hatarda 12-den gowrak sütün ýerleşdirilse, goşmaça sütünleriň her topary bir birlik hökmünde täze setire girer.

<div class="row">
  <div class="col-9">.col-9</div>
  <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>

Sütün arakesmesi

Sütünleri flexbox-da täze setire bölmek üçin kiçijik bir hack gerek: width: 100%sütünleriňizi täze setir bilen örtmek isleýän ýeriňize element goşuň. Adatça bu birnäçe .rows bilen ýerine ýetirilýär, ýöne her bir ýerine ýetiriş usuly munuň üçin hasap edip bilmeýär.

<div class="row">
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

  <!-- Force next columns to break to new line -->
  <div class="w-100"></div>

  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>

Şeýle hem, bu arakesmäni duýgur displeý hyzmatlarymyz bilen belli nokatlarda ulanyp bilersiňiz .

<div class="row">
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

  <!-- Force next columns to break to new line at md breakpoint and up -->
  <div class="w-100 d-none d-md-block"></div>

  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>

Tertibe salmak

Sargyt sapaklary

Mazmunyňyzyň wizual tertibine.order- gözegçilik etmek üçin sapaklary ulanyň . Bu synplar täsirli, şonuň üçin nokady kesgitläp bilersiňiz (mysal üçin ). Bäş sany gözenek derejesindäki goldawy öz içine alýar .order.order-1.order-md-2112

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

Şeýle hem degişlilikde we ( ) ulanyp, elementiň üýtgemegini üýtgedýän täsirli .order-firstwe .order-lastsynplar bar . Bu sapaklary zerur bolanda sanly synplar bilen birleşdirip bolýar.orderorder: -1order: 13order: $columns + 1.order-*

<div class="container">
  <div class="row">
    <div class="col order-last">
      First, but last
    </div>
    <div class="col">
      Second, but unordered
    </div>
    <div class="col order-first">
      Third, but first
    </div>
  </div>
</div>

Sütünleri öçürmek

Tor sütünlerini iki ýol bilen öçürip bilersiňiz: jogap .offset-beriji gözenek synplarymyz we margin hyzmatlarymyz . Grid synplary sütünlere gabat gelýär, marşrutlar ofsetiň giňligi üýtgeýän çalt düzülişler üçin has peýdalydyr.

Ofset sapaklary

Sütünleri ulanyp sütünleri saga geçiriň .offset-md-*. Bu synplar sütüniň çep gyrasyny *sütünler bilen köpeldýär. Mysal üçin, dört sütüniň üstünden .offset-md-4geçýär ..col-md-4

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>

Duýgur nokatlarda sütün arassalamakdan başga-da, ofsetleri täzeden düzmeli bolmagyňyz mümkin. Muny gözenegiň mysalynda görüň .

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>

Margin hyzmatlary

V4-de flexbox-a geçmek bilen, .mr-autodogan sütünlerini biri-birinden uzaklaşdyrmak ýaly margin hyzmatlaryny ulanyp bilersiňiz.

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
  <div class="col-auto mr-auto">.col-auto .mr-auto</div>
  <div class="col-auto">.col-auto</div>
</div>

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="row">
  <div class="col-sm-9">
    Level 1: .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>

Sass garyndylary

“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: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

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

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();
@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 {
  width: 800px;
  @include make-container();
}

.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. $grid-columnsşol bir wagtyň özünde her sütüniň giňligini (göteriminde) döretmek üçin ulanylýar$grid-gutter-widthsütün çukurlary üçin ini kesgitlän

$grid-columns: 12 !default;
$grid-gutter-width: 30px !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 %) belläň.