ستوونەکان
فێربە چۆن دەستکاری ستوونەکان بکەیت بە چەند بژاردەیەک بۆ ڕێکخستن و ڕێکخستن و ئۆفسێتکردن بەهۆی سیستەمی تۆڕی فلێکسبۆکسمانەوە. لەگەڵ ئەوەشدا، بزانە چۆن پۆلەکانی ستوون بەکاربهێنیت بۆ بەڕێوەبردنی پانایی توخمە نا تۆڕەکان.
چۆن کاردەکەن
-
ستوونەکان لەسەر تەلارسازی فلیکسبۆکسی تۆڕەکە دروست دەکرێن. Flexbox واتە ئێمە بژاردەمان هەیە بۆ گۆڕینی تاکە ستوونەکان و دەستکاریکردنی گروپەکانی ستوونەکان لە ئاستی ڕیزەکاندا . تۆ هەڵدەبژێریت چۆن ستوونەکان گەشە دەکەن، بچووک دەبنەوە، یان بە شێوەیەکی تر دەگۆڕدرێن.
-
لە کاتی دروستکردنی نەخشەی تۆڕدا، هەموو ناوەڕۆکەکان بە ستوون دەڕوات. پلەبەندی تۆڕی Bootstrap لە کۆنتێنەرێکەوە بۆ ڕیزێکی تر بۆ ستوونێکی تر دەڕوات بۆ ناوەڕۆکەکەت. لە بۆنە دەگمەنەکاندا، لەوانەیە ناوەڕۆک و ستوون تێکەڵ بکەیت، بەڵام ئاگاداربە کە دەکرێت دەرئەنجامی نەخوازراو هەبێت.
-
بووتستراپ پۆلی پێشوەختە دیاریکراو لەخۆدەگرێت بۆ دروستکردنی نەخشەی خێرا و وەڵامدەرەوە. بە شەش خاڵی شکاندن و دەیان ستوون لە هەر قاتێکی تۆڕدا، ئێمە دەیان پۆلمان هەیە کە پێشتر بۆت دروستکراون بۆ دروستکردنی نەخشە دڵخوازەکانت. ئەگەر بتەوێت دەتوانرێت لە ڕێگەی ساسەوە ئەمە لەکاربخرێت.
ڕێکخستن
سوودمەندییەکانی ڕێکخستنی flexbox بەکاربهێنە بۆ ڕێکخستنی ستوونەکان بە شێوەی ڕاست و ئاسۆیی.
ڕێکخستنی ڕاست
<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>
ڕێکخستنی ئاسۆیی
<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 class="row justify-content-evenly">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
پێچانی ستوون
ئەگەر زیاتر لە ١٢ ستوون لەناو یەک ڕیزدا دابنرێت، هەر گروپێکی ستوونی زیادە وەک یەک یەکە دەپێچرێتەوە لەسەر هێڵێکی نوێ.
بەو پێیەی 9 + 4 = 13 > 12، ئەم دیڤە 4 ستوونییە فراوانە وەک یەک یەکەی بەردەوام لەسەر هێڵێکی نوێ دەپێچرێتەوە.
ستوونەکانی دواتر بە درێژایی هێڵی نوێ بەردەوامن.
<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>
ستوونەکان دەشکێن
شکاندنی ستوونەکان بۆ دێڕێکی نوێ لە flexbox پێویستی بە هاکێکی بچووک هەیە: زیادکردنی توخمێک لەگەڵ width: 100%
هەر شوێنێک کە بتەوێت ستوونەکانت بپێچیتەوە بۆ دێڕێکی نوێ. بە شێوەیەکی ئاسایی ئەمە بە چەندین .row
s بەدی دێت، بەڵام هەموو شێوازێکی جێبەجێکردن ناتوانێت حساب بۆ ئەمە بکات.
<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>
هەروەها دەتوانیت ئەم پشووە لە خاڵە شکاندنی تایبەتدا بەکاربهێنیت لەگەڵ سوودمەندییەکانی پیشاندانی وەڵامدەرەوەمان .
<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>
دووبارە ڕێکخستنەوە
داواکردنی پۆلەکان
پۆلەکان بەکاربهێنە .order-
بۆ کۆنترۆڵکردنی ڕێزبەندی بینراوی ناوەڕۆکەکەت. ئەم پۆلانە وەڵامدەرەوەن، بۆیە دەتوانیت order
بە خاڵی شکاندن دابنێیت (بۆ نموونە، .order-1.order-md-2
). پشتگیری لە 1
ڕێگەی 5
لە سەرانسەری هەر شەش قاتی تۆڕەکەدا لەخۆدەگرێت.
<div class="container">
<div class="row">
<div class="col">
First in DOM, no order applied
</div>
<div class="col order-5">
Second in DOM, with a larger order
</div>
<div class="col order-1">
Third in DOM, with an order of 1
</div>
</div>
</div>
هەروەها وەڵامدەرەوە .order-first
و .order-last
پۆلەکان هەن کە بە جێبەجێکردنی و بە رێککەوت order
لە توخمێک دەگۆڕن. هەروەها دەتوانرێت ئەم پۆلانە بەپێی پێویست لەگەڵ پۆلە ژمارەدارەکاندا تێکەڵ بکرێن.order: -1
order: 6
.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>
ئۆفسێتی ستوونەکان
دەتوانیت ستوونەکانی تۆڕ بە دوو شێوە ئۆفسێت بکەیت: .offset-
پۆلەکانی تۆڕی وەڵامدەرەوەمان و سوودمەندییەکانی پەراوێزمان . پۆلەکانی تۆڕ قەبارەیان بۆ دانراوە بۆ ئەوەی لەگەڵ ستوونەکاندا بگونجێت لە کاتێکدا پەراوێزەکان زیاتر بەسوودن بۆ نەخشە خێراکان کە پانایی ئۆفسێتەکە گۆڕاوە.
پۆلەکانی ئۆفسێت
.offset-md-*
بە بەکارهێنانی پۆلەکان ستوونەکان بۆ لای ڕاست بگوازەرەوە . ئەم پۆلانە پەراوێزی چەپی ستوونێک بە *
ستوون زیاد دەکەن. بۆ نموونە بەسەر چوار ستووندا .offset-md-4
دەجووڵێت ..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>
جگە لە پاککردنەوەی ستوون لە خاڵەکانی شکاندنی وەڵامدەرەوە، لەوانەیە پێویستت بە ڕێستکردنی ئۆفسێتەکان بێت. ئەمە بە کردار لە نموونەی تۆڕەکەدا ببینە .
<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>
خزمەتگوزارییەکانی پەراوێز
لەگەڵ گواستنەوە بۆ flexbox لە v4، دەتوانیت سوودمەندییەکانی پەراوێز بەکاربهێنیت وەک .me-auto
ناچارکردنی ستوونەکانی خوشک و برا لە یەکتر دوور بخەیتەوە.
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
</div>
<div class="row">
<div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
<div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
</div>
<div class="row">
<div class="col-auto me-auto">.col-auto .me-auto</div>
<div class="col-auto">.col-auto</div>
</div>
</div>
پۆلەکانی ستوونی سەربەخۆ
هەروەها .col-*
دەتوانرێت پۆلەکان لە دەرەوەی a بەکاربهێنرێت .row
بۆ ئەوەی پانایییەکی دیاریکراو بە توخمێک بدرێت. هەر کاتێک پۆلەکانی ستوون وەک منداڵی ناڕاستەوخۆی ڕیزێک بەکاردەهێنرێن، پادکردنەکان لادەبرێن.
<div class="col-3 bg-light p-3 border">
.col-3: width of 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
.col-sm-9: width of 75% above sm breakpoint
</div>
دەتوانرێت پۆلەکان لەگەڵ سوودمەندییەکان بەکاربهێنرێت بۆ دروستکردنی وێنەی شلۆقی وەڵامدەرەوە. دڵنیابە لە پێچانی ناوەڕۆکەکە لەناو .clearfix
پێچێکدا بۆ پاککردنەوەی فلۆتەکە ئەگەر دەقەکە کورتتر بوو.
بڕگەیەک لە دەقی شوێنگرەوە. ئێمە لێرەدا بەکاری دەهێنین بۆ نیشاندانی بەکارهێنانی پۆلی clearfix. ئێمە لێرەدا چەند دەستەواژەیەکی بێمانا زیاد دەکەین بۆ ئەوەی نیشان بدەین کە چۆن ستوونەکان لێرەدا لەگەڵ وێنەی هەڵدەفڕێتدا کارلێک دەکەن.
وەک دەبینیت بڕگەکان بە ڕەوشتەوە بە دەوری وێنە هەڵدەفڕێتەکەدا دەپێچنەوە. ئێستا بیهێنە بەرچاوت کە ئەمە چۆن دەبێت لەگەڵ هەندێک ناوەڕۆکی ڕاستەقینە لێرەدا، نەک تەنها ئەم دەقە بێزارکەرەی شوێنگرەوە کە بەردەوام دەبێت و بەردەوام دەبێت، بەڵام لە ڕاستیدا هیچ زانیارییەکی بەرجەستە ناگەیەنێت لە. بە سادەیی شوێن دەگرێت و نابێت لە ڕاستیدا بخوێنرێتەوە.
و لەگەڵ ئەوەشدا، لێرەدایت، هێشتا خۆڕاگرن لە خوێندنەوەی ئەم دەقە شوێنگرەدا، بە هیوای هەندێک تێگەیشتنی زیاتر، یان هەندێک هێلکەی جەژنی ئیستەری شاراوەی ناوەڕۆک. گاڵتەیەک، ڕەنگە. بەداخەوە لێرەدا هیچ کام لەوانە نییە.
<div class="clearfix">
<img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">
<p>
A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
</p>
<p>
As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
</p>
<p>
And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
</p>
</div>