Gutlar
Gutlar, “Bootstrap” grid ulgamyndaky mazmuny giňeltmek we mazmuny deňleşdirmek üçin ulanylýan sütünleriňiziň arasynda ýerleşýär.
Olaryň nähili işleýändigi
-
Gutlar, keseligine döredilen sütün mazmunynyň arasyndaky boşluklardyr
padding
. Her sütüni goýýaryspadding-right
we mazmuny deňleşdirmek üçin her hataryň başynda we ahyrynda öwezini dolmakpadding-left
üçin negatiw ulanýarys .margin
-
Çukurlar
1.5rem
(24px
) giňlikde başlaýar. Bu, gözenegimizi padding we margin spacers şkalasyna laýyklaşdyrmaga mümkinçilik berýär. -
Çukurlary jogapkärçilik bilen düzedip bolýar. Gorizontal çukurlary, dik çukurlary we ähli çukurlary üýtgetmek üçin böleklere mahsus çukur sapaklaryny ulanyň.
Gorizontal çukurlar
.gx-*
keseligine gorizontal çukur giňliklerine gözegçilik etmek üçin ulanylyp bilner. Gabat gelýän padding programmasyny ulanyp, islenilmeýän akymdan gaça durmak üçin has uly çukurlar ulanylsa, ene .container
- .container-fluid
atany düzetmeli bolup biler. Mysal üçin, aşakdaky mysalda paddingi köpeltdik .px-4
:
<div class="container px-4">
<div class="row gx-5">
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
Başga bir çözgüt , synp .row
bilen bir örtük goşmak:.overflow-hidden
<div class="container overflow-hidden">
<div class="row gx-5">
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
Dik çukurlar
.gy-*
sapaklar dik çukur giňliklerine gözegçilik etmek üçin ulanylyp bilner. .row
Gorizontal çukurlar ýaly, dik çukurlar sahypanyň soňundaky aşaky akymlara sebäp bolup biler . Şeýle ýagdaý ýüze çyksa, synp .row
bilen bir örtük goşarsyňyz :.overflow-hidden
<div class="container overflow-hidden">
<div class="row gy-5">
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
Gorizontal we dik çukurlar
.g-*
.overflow-hidden
sapaklar gorizontal çukur giňliklerine gözegçilik etmek üçin ulanylyp bilner, aşakdaky mysal üçin has kiçi çukur giňligini ulanýarys, şonuň üçin örtük synpyny goşmagyň zerurlygy bolmaz .
<div class="container">
<div class="row g-2">
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
Setir sütünleri
Gutter sapaklaryny hatar sütünlere hem goşup bolýar . Aşakdaky mysalda, jogap hatar sütünlerini we täsirli gutujyk synplaryny ulanýarys.
<div class="container">
<div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
</div>
</div>
Çukur ýok
Öňünden kesgitlenen gözenek synplarymyzdaky sütünleriň arasyndaky boşluklary aýryp bolýar .g-0
. Bu , ähli çaga sütünlerinden otrisatel we gorizontal margin
aýyrýar ..row
padding
Gyrasy dizaýn gerekmi? Ene- atany taşla ýa- .container
da .container-fluid
.
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 g-0">
<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>
Çukurlary çalyşyň
$gutters
Sapaklar Sass kartasyndan miras galan Sass kartasyndan gurulýar $spacers
.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);