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 nätanyş? Fon, terminologiýa, görkezmeler we kod bölekleri üçin bu CSS Tricks flexbox gollanmasyny okaň .

Üç sütüniň biri

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

	Goşmaça kiçi <576px	Kiçijik ≥576px	Orta ≥768px	Uly ≥992px	Goşmaça uly ≥1200px
Konteýneriň iň giňligi	Hiç biri (awto)	540px	720px	960px	1140px
Synp prefiksi	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
sütünleriň #	12
Gutyň ini	30px (sütüniň her tarapynda 15px)
Höwürtge	Hawa
Sütün sargyt	Hawa

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.

2-den 1

2-den

3-den 1

3-den 2

3-den 3

<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 köp setir

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

Safari flexbox näsazlygy bardy , munuň aç-açan işlemeginiň öňüni aldy flex-basisýa-da border. Köne brauzer wersiýalary üçin çözgütler bar, ýöne maksatly brauzerleriňiziň ýalňyş wersiýalaryna girmese, zerur bolmaz.

kol

<div class="container">
  <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>
</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ň.

3-den 1

3-den 2-si (has giň)

3-den 3

3-den 1

3-den 2-si (has giň)

3-den 3

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

3-den 1

Üýtgeýän giňlik mazmuny

3-den 3

3-den 1

Üýtgeýän giňlik mazmuny

3-den 3

<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 täsirli ýerleşişleri 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.

kol

col-8

col-4

<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

col-sm-8

col-sm-4

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

.col-md-8

.col-6 .col-md-4

.col-6

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

Gutlar

Çukurlary bölekleýin ýörite padding we negatiw margin peýdaly synplary bilen sazlap bolýar. Berlen hatardaky çukurlary üýtgetmek üçin, negatiw margin peýdasyny .rowwe s-de gabat gelýän padding enjamlaryny jübütläň .col. Againene-de gabat gelýän padding programmasyny ulanyp, islenilmeýän akymdan gaça durmak üçin ene .container- .container-fluidatany hem düzetmeli bolup biler.

lgIne, uly ( ) kesiş nokadynda we ýokardaky Bootstrap toruny sazlamagyň mysaly . .colPadding bilen köpeltdik, ene-atanyň .px-lg-5garşysyna çykdyk, soň bolsa ýüpi sazladyk ..mx-lg-n5.row.container.px-lg-5

Columnörite sütün padding

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</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.

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

Sütün

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

Sütün

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

Sütün

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

Sütün

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

Sütün

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

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

Deňleşdirmek

Sütünleri dik we keseligine deňlemek üçin flexbox deňleşdiriş enjamlaryny ulanyň. Internet Explorer 10-11, flex konteýneriň aşakda görkezilişi ýaly bolanda flex elementleriniň dik tekizlenmegini goldamaýar . min-height Has giňişleýin maglumat üçin Flexbugs # 3 serediň.

Dik tekizlemek

Üç sütüniň biri

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

Üç sütüniň biri

<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

Iki sütüniň biri

<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öretmek üçin deslapky kod. 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, sütün paddingleri aralyk enjamlary bilen 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.).

.col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-sm-6 col-md-8">.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 hatar içinde 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.

.col-9

.col-4
9 + 4 = 13> 12-den bäri, 4 sütünli bu diw bir bitewi birlik hökmünde täze setire örtülýär.

.col-6
Soňky sütünler täze setir boýunça dowam edýär.

<div class="container">
  <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>
</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.

.col-6 .col-sm-3

<div class="container">
  <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>
</div>

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

.col-6 .col-sm-4

<div class="container">
  <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>
</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 (meselem, ). Bäş sany gözenegiň üsti bilen goldawy öz içine alýar .order.order-1.order-md-2112

Ilki bilen DOM-da hiç hili sargyt ulanylmady

Has uly tertip bilen DOM-da ikinji

1-nji sargyt bilen DOM-da üçünji

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-12">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </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-*

Ilki DOM-da, iň soňkusy zakaz edildi

DOM-da ikinji, tertipsiz

Üçünji, DOM-da, ilki zakaz edildi

<div class="container">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered 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

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<div class="container">
  <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>
</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üň .

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<div class="container">
  <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>
</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.

.col-md-4

.col-md-4 .ml-awto

.col-md-3 .ml-md-awto

.col-auto .mr-awto

.col-awto

<div class="container">
  <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>
</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-*

1-nji dereje: .col-sm-9

2-nji dereje: .col-8 .col-sm-6

2-nji dereje: .col-4 .col-sm-6

<div class="container">
  <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>
</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, ç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: 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

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

Esasy mazmun

Ikinji mazmun

<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

Içindäki gözenek Sass üýtgeýjilerimizi we kartalarymyzy ulanyp, öňünden kesgitlenen gözenek synplaryny doly özleşdirmek mümkin. 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 sütüniň giňligini (göteriminde) döretmek üçin ulanylýar .$grid-gutter-width

$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, sütün giňligi, ofset we sargyt üçin öňünden kesgitlenen gözenek synplarynyň täze toplumyny çykarar. 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äň.