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ň .
<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.
.container
Duýgur piksel giňligi ýa-da.container-fluid
ähliwidth: 100%
görnüş we enjam ululyklary üçin ulanyň . - Setirler sütünler üçin örtüklerdir. Her sütüniň
padding
arasyndaky boşlugy dolandyrmak üçin keseligine (çukur diýilýär) bar.padding
Soň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
width
awtomatiki 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
width
göterim bilen kesgitlenýär, şonuň üçin olar hemişe esasy elementine görä suwuk we uludyr. - Sütünleriň
padding
aýratyn sütünleriň arasynda çukurlary döretmek üçin keseligine bar, ýönemargin
hatarlary hatarlardan wepadding
sütünlerden aýryp.no-gutters
bilersiň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-4
kiçi, orta, uly we goşmaça uly enjamlara degişlidir, ýöne birinjixs
nokat 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 em
s ý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 .rem
px
“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 xs
bar 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 köp setir
.w-100
Sü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-100
Kä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.
<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ň.
<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}-auto
Mazmunynyň 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 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 .col
we .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>
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 .row
we 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-fluid
atany hem düzetmeli bolup biler.
lg
Ine, uly ( ) kesiş nokadynda we ýokardaky Bootstrap toruny sazlamagyň mysaly . .col
Padding bilen köpeltdik, ene-atanyň .px-lg-5
garşysyna çykdyk, soň bolsa ýüpi sazladyk ..mx-lg-n5
.row
.container
.px-lg-5
<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 .row
gysga ý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ň.
<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-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>
Ş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
<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 margin
aýyrýar ..row
padding
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- .container
da .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-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.
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.
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 > 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 .row
s bilen ýerine ýetirilýär, ýöne her bir ýerine ýetiriş usuly munuň üçin hasap edip bilmeýär.
<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 .
<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-2
1
12
<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-first
we .order-last
synplar bar . Bu sapaklary zerur bolanda sanly synplar bilen birleşdirip bolýar.order
order: -1
order: 13
order: $columns + 1
.order-*
<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-4
geçýär ..col-md-4
<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üň .
<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-auto
dogan sütünlerini biri-birinden uzaklaşdyrmak ýaly margin hyzmatlaryny ulanyp bilersiňiz.
<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 .row
we 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-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);
}
}
<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-columns
mahaly, 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-widths
meň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äň.