کانیاوەکان
کانیاوەکان بریتین لە پادکردنی نێوان ستوونەکانت، بەکاردێت بۆ ئەوەی بە شێوەیەکی وەڵامدەرەوە شوێن و ڕێکخستنی ناوەڕۆک لە سیستەمی تۆڕی Bootstrap دا.
چۆن کاردەکەن
-
کانیاوەکان بۆشاییەکانی نێوان ناوەڕۆکی ستوونەکانن، کە لەلایەن ئاسۆییەوە دروست دەکرێن
padding
. ئێمەpadding-right
وpadding-left
لەسەر هەر ستوونێک دادەنێین، و نەرێنی بەکاردەهێنینmargin
بۆ ئۆفسێتکردنی ئەوەی لە سەرەتا و کۆتایی هەر ڕیزێکدا بۆ ڕێکخستنی ناوەڕۆک. -
کانیاوەکان لە
1.5rem
(24px
) پان دەست پێدەکەن. ئەمەش ڕێگەمان پێدەدات تۆڕەکەمان لەگەڵ پێوەرەکەی پادکردن و فەواصلی پەراوێزدا بگونجێنین . -
دەتوانرێت کانیاوەکان بە شێوەیەکی وەڵامدەرەوە ڕێکبخرێن. پۆلەکانی کانیاوی تایبەت بە خاڵی شکاندن بەکاربهێنە بۆ دەستکاریکردنی کانییە ئاسۆییەکان، کانییە ڕاستەکان و هەموو کانیاوەکان.
کانیاوەکانی ئاسۆیی
.gx-*
دەتوانرێت پۆلەکان بەکاربهێنرێت بۆ کۆنترۆڵکردنی پاناییەکانی کانیاوی ئاسۆیی. لەوانەیە پێویستی بە ڕێکخستن بێت ئەگەر کانی گەورەتر بەکاربهێنرێت بۆ ئەوەی ڕژانی نەخوازراو ڕوونەدات، بە بەکارهێنانی سوودمەندی پادکردنی هاوتا .container
. .container-fluid
بۆ نموونە لەم نموونەیەی خوارەوەدا پادکردنەکەمان زیاد کردووە بەم شێوەیە .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>
چارەسەرێکی بەدیل ئەوەیە کە پێچێک لە دەوری .row
لەگەڵ .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>
کانیاوەکانی ڕاست
.gy-*
دەتوانرێت پۆلەکان بەکاربهێنرێت بۆ کۆنترۆڵکردنی پاناییەکانی کانیاوی ڕاست. وەکو کانییە ئاسۆییەکان، کانییە ڕاستەکان دەتوانن ببنە هۆی هەندێک ڕژان لە خوار .row
لە کۆتایی لاپەڕەیەکدا. ئەگەر ئەمە ڕوویدا، تۆ پێچێک زیاد دەکەیت بە دەوری .row
لەگەڵ .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>
کانیاوەکانی ئاسۆیی و ڕاست
.g-*
دەتوانرێت پۆلەکان بەکاربهێنرێت بۆ کۆنترۆڵکردنی پاناییەکانی کانیاوی ئاسۆیی، بۆ ئەم نموونەیەی خوارەوە ئێمە پانایی کانیاوێکی بچووکتر بەکاردەهێنین، بۆیە پێویست بە زیادکردنی .overflow-hidden
پۆلی پێچان ناکات.
<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>
ڕیز ستوونەکان کانیاوەکان
هەروەها دەتوانرێت پۆلەکانی کانیاو زیاد بکرێت بۆ ستوونی ڕیزەکان . لەم نموونەیەی خوارەوەدا، ئێمە ستوونی ڕیزی وەڵامدەرەوە و پۆلەکانی کانی وەڵامدەرەوە بەکاردەهێنین.
<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>
هیچ کانیاوێک نییە
دەتوانرێت بە .g-0
. margin
ئەمەش s ی نەرێنی لە هەموو ستوونەکانی منداڵانی دەستبەجێ .row
و ئاسۆیی لە هەموو ستوونەکانی منداڵان لا دەبات.padding
پێویستت بە دیزاینێکی لێوار بۆ لێوار هەیە؟ دایک و باوکەکە .container
یان .container-fluid
.
لە پراکتیکدا، لێرەدا چۆن دەردەکەوێت. تێبینی دەتوانیت بەردەوام بیت لە بەکارهێنانی ئەمە لەگەڵ هەموو پۆلەکانی تری تۆڕی پێشوەختە پێناسەکراو (لەوانەش پانایی ستوونەکان، قاتەکانی وەڵامدەرەوە، ڕێکخستنەوە و زۆر شتی تر).
<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>
کانیاوەکان بگۆڕە
پۆلەکان لە نەخشەی ساسەوە دروست دەکرێن کە لە $gutters
نەخشەی ساسەوە بۆماوە $spacers
.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);