سیستەمی تۆڕ
تۆڕی فلیکسبۆکسی بەهێزی مۆبایل-یەکەم بەکاربهێنە بۆ دروستکردنی نەخشە بە هەموو شێوە و قەبارەیەک بەهۆی سیستەمێکی دوانزە ستوونی، پێنج قاتە وەڵامدەرەوەی پێشوەختە، گۆڕاو و میکسینەکانی Sass، و دەیان پۆلی پێشوەختە دیاریکراو.
سیستەمی تۆڕی بووتستراپ زنجیرەیەک کۆنتێنەر و ڕیز و ستوون بەکاردەهێنێت بۆ داڕشتن و ڕێکخستنی ناوەڕۆک. بە فلیکس بۆکس دروستکراوە و بە تەواوی وەڵامدەرەوەیە. لە خوارەوە نموونەیەک و سەیرێکی قووڵ دەخەینەڕوو کە چۆن تۆڕەکە کۆدەبێتەوە.
تازەیت لە فلێکس بۆکس یان نامۆ؟ ئەم ڕێنماییە فلیکسبۆکسەی CSS Tricks بخوێنەرەوە بۆ زانینی پاشبنەما، زاراوە، ڕێنماییەکان و پارچە کۆدەکان.
نموونەی سەرەوە سێ ستوونی پانایی یەکسان لەسەر ئامێرە بچووک و مامناوەند و گەورە و گەورە زیادەکان دروست دەکات بە بەکارهێنانی پۆلەکانی تۆڕی پێشوەختە دیاریکراومان. ئەو ستوونانە لە ناوەڕاستی لاپەڕەکەدا بە دایک و باوکەوە دانراون .container
.
بە شکاندنی، لێرەدا چۆن کاردەکات:
- کۆنتێنەرەکان ئامرازێک بۆ ناوەند و ئاسۆیی پادکردنی ناوەڕۆکی ماڵپەڕەکەت دابین دەکەن.
.container
بۆ پانایی پێکسڵی وەڵامدەرەوە یان.container-fluid
بۆwidth: 100%
لە سەرانسەری هەموو قەبارەکانی دەرچەی بینین و ئامێر بەکاربهێنە . - ڕیزەکان پێچانە بۆ ستوونەکان. هەر ستوونێک ئاسۆیی هەیە
padding
(کە پێی دەوترێت کانیاو) بۆ کۆنترۆڵکردنی بۆشایی نێوانیان. پاشان ئەمەشpadding
لەسەر ڕیزەکان بە پەراوێزی نەرێنی بەرپەرچی دەدرێتەوە. بەم شێوەیە، هەموو ناوەڕۆکەکانی ناو ستوونەکانت بە شێوەیەکی بینراو لە لای چەپەوە ڕێکدەخرێن. - لە نەخشەی تۆڕدا، ناوەڕۆک دەبێت لەناو ستوونەکاندا دابنرێت و تەنها ستوونەکان دەتوانن منداڵی دەستبەجێی ڕیزەکان بن.
- بەهۆی flexbox، ستوونەکانی تۆڕ بەبێ دیاریکراو
width
بە شێوەیەکی ئۆتۆماتیکی وەک ستوونی پانایی یەکسان داڕێژراون. بۆ نموونە چوار نموونەی.col-sm
هەریەکەیان بە شێوەیەکی ئۆتۆماتیکی 25% پان دەبێت لە خاڵی شکاندنی بچووکەوە و بەرەو سەرەوە. بۆ نموونەی زیاتر سەیری بەشی ستوونەکانی نەخشەی ئۆتۆماتیکی بکە. - پۆلەکانی ستوونەکان ژمارەی ستوونەکان دیاری دەکەن کە دەتەوێت بەکاریان بهێنیت لە کۆی 12 ستوونی ئەگەری بۆ هەر ڕیزێک. کەواتە، ئەگەر سێ ستوونی پانایی یەکسانت دەوێت لە درێژاییدا، دەتوانیت بەکاربهێنیت
.col-4
. - ستوونەکان
width
بە ڕێژەی سەدی دانراون، بۆیە هەمیشە شلەن و قەبارەیان هەیە بە بەراورد بە توخمە باوکیان. - ستوونەکان ئاسۆیییان هەیە
padding
بۆ دروستکردنی کانیاوەکان لە نێوان ستوونە تاکەکەسییەکان، بەڵام دەتوانیتmargin
لە ڕیزەکان وpadding
لە ستوونەکان بە.no-gutters
لەسەر.row
. - بۆ ئەوەی تۆڕەکە وەڵامدەرەوە بێت، پێنج خاڵی شکاندنی تۆڕ هەیە، یەکێک بۆ هەر خاڵێکی شکاندنی وەڵامدەرەوە : هەموو خاڵەکانی شکاندن (بچووکی زیادە)، بچووک، مامناوەند، گەورە، و گەورەیەکی زیادە.
- خاڵەکانی شکاندنی تۆڕ لەسەر بنەمای پرسیارەکانی میدیای کەمترین پاناییە، واتە بۆ ئەو خاڵە شکاندنە یەک و هەموو ئەوانەی سەرەوەی دەگونجێت (بۆ نموونە،
.col-sm-4
بۆ ئامێرە بچووکەکان، مامناوەندەکان، گەورەکان و گەورەکانی زیادە دەگونجێت، بەڵامxs
خاڵی شکاندنی یەکەم نا). - دەتوانیت پۆلەکانی تۆڕی پێشوەختە پێناسەکراو (وەک
.col-4
) یان میکسینەکانی Sass بەکاربهێنیت بۆ نیشاندانی زیاتری مانادار.
ئاگاداری سنووردارکردن و هەڵەکانی دەوروبەری flexbox بە، وەک بێتوانایی لە بەکارهێنانی هەندێک توخمەکانی HTML وەکو کۆنتێنەری فلیکس .
لە کاتێکدا کە Bootstrap em
s یان s بەکاردەهێنێت rem
بۆ پێناسەکردنی زۆربەی قەبارەکان، px
s بۆ خاڵەکانی شکاندنی تۆڕ و پانایی کۆنتێنەرەکان بەکاردێت. ئەمەش لەبەر ئەوەیە کە پانایی ڤیوپۆرت بە پێکسڵە و لەگەڵ قەبارەی فۆنتەکەدا ناگۆڕێت .
بزانە چۆن لایەنەکانی سیستەمی تۆڕی Bootstrap لە سەرانسەری چەندین ئامێردا کاردەکەن بە خشتەی دەستی.
بچووکی زیادە <576px |
بچووک ≥576px |
مامناوەند ≥768px |
گەورە ≥992px |
گەورەیەکی زیادە ≥1200px |
|
---|---|---|---|---|---|
زۆرترین پانایی دەفرەکە | هیچ (ئۆتۆ) | 540px | 720px | 960px | 1140px |
پێشگرى پۆل | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
# لە ستوونەکان | 12. 12 | ||||
پانایی کانیاو | 30px (15px لە هەر لایەکی ستوونێک) | ||||
هێلانە | بەڵێ | ||||
داواکردنی ستوون | بەڵێ |
پۆلەکانی ستوونی تایبەت بە خاڵی شکاندن بەکاربهێنە بۆ قەبارەدانانی ئاسانی ستوون بەبێ پۆلێکی ژمارەدار ڕوون وەک .col-sm-6
.
بۆ نموونە لێرەدا دوو شێوازی تۆڕ دەخەینەڕوو کە بۆ هەموو ئامێر و دەرچەیەکی بینین دەگونجێت، لە xs
تا xl
. هەر ژمارەیەک لە پۆلەکانی بێ یەکە زیاد بکە بۆ هەر خاڵێکی شکاندن کە پێویستت پێی بێت و هەموو ستوونێک هەمان پانایی دەبێت.
دەتوانرێت ستوونی پانایی یەکسان بشکێنرێت بۆ چەند دێڕێک، بەڵام هەڵەیەکی فلیکسبۆکسی سەفاری هەبوو کە ڕێگری دەکرد لە کارکردنی ئەمە بەبێ flex-basis
یان ڕوون border
. چارەسەر هەیە بۆ وەشانی کۆنتری وێبگەڕەکان، بەڵام نابێت پێویست بن ئەگەر تۆ نوێ بیت.
هەروەها داڕشتنی ئۆتۆماتیکی بۆ ستوونەکانی تۆڕی فلێکسبۆکس بەو مانایەیە کە دەتوانیت پانایی یەک ستوون دابنێیت و ستوونەکانی خوشک و براکان بە شێوەیەکی ئۆتۆماتیکی قەبارەیان بە دەوریدا بگۆڕیت. دەتوانیت پۆلەکانی تۆڕی پێشوەختە پێناسەکراو (وەک لە خوارەوە نیشان دراوە)، تێکەڵکردنی تۆڕەکان، یان پاناییەکانی ناو هێڵ بەکاربهێنیت. سەرنج بدە کە ستوونەکانی تر قەبارەیان دەگۆڕن گرنگ نییە پانایی ستوونی ناوەڕاستەکە چەندە.
پۆلەکان بەکاربهێنە col-{breakpoint}-auto
بۆ قەبارەدانانی ستوونەکان بە پشتبەستن بە پانایی سروشتی ناوەڕۆکەکەیان.
ستوونی یەکسان دروست بکە کە چەندین ڕیز دەگرێتەوە بە دانانی a .w-100
لەو شوێنەی کە دەتەوێت ستوونەکان بشکێن بۆ هێڵێکی نوێ. پشووەکان بکە بە وەڵامدەرەوە بە تێکەڵکردنی .w-100
لەگەڵ هەندێک سوودمەندی پیشاندانی وەڵامدەرەوە .
تۆڕی بووتستراپ پێنج قات لە پۆلی پێشوەختە دیاریکراو لەخۆدەگرێت بۆ دروستکردنی نەخشەی وەڵامدەرەوەی ئاڵۆز. قەبارەی ستوونەکانت لەسەر ئامێرە بچووکەکان، بچووکەکان، مامناوەندەکان، گەورەکان، یان گەورەکانی زیادە بەپێی پێویست خۆت بگۆڕە.
بۆ ئەو تۆڕانەی کە وەک یەکن لە بچووکترین ئامێرەکانەوە تا گەورەترین، پۆلەکانی .col
و بەکاربهێنە. .col-*
پۆلێکی ژمارەدار دیاری بکە کاتێک پێویستت بە ستوونێکی قەبارە تایبەتە؛ ئەگەرنا، ئازادانە پابەند بیت بە .col
.
بە بەکارهێنانی یەک کۆمەڵە .col-sm-*
پۆل، دەتوانیت سیستەمێکی تۆڕی بنەڕەتی دروست بکەیت کە بە کۆکردنەوە دەست پێدەکات و لە خاڵی شکاندنی بچووکدا دەبێتە ئاسۆیی ( sm
).
ناتەوێت ستوونەکانت بە سادەیی لە هەندێک قاتەکانی تۆڕدا کۆببنەوە؟ بەپێی پێویست تێکەڵەیەک لە پۆلە جیاوازەکان بۆ هەر قاتێک بەکاربهێنە. بۆ بیرۆکەیەکی باشتر کە هەموو ئەمانە چۆن کاردەکەن سەیری نموونەی خوارەوە بکە.
سوودمەندییەکانی ڕێکخستنی flexbox بەکاربهێنە بۆ ڕێکخستنی ستوونەکان بە شێوەی ڕاست و ئاسۆیی.
دەتوانرێت بە .no-gutters
. margin
ئەمەش s ی نەرێنی لە هەموو ستوونەکانی منداڵانی دەستبەجێ .row
و ئاسۆیی لە هەموو ستوونەکانی منداڵان لا دەبات.padding
لێرەدا کۆدی سەرچاوەی دروستکردنی ئەم ستایلانە دەخەینەڕوو. تێبینی بکە کە سەرپێچی ستوونەکان تەنها بۆ ستوونی یەکەمی منداڵەکان مەودایان بۆ دانراوە و لە ڕێگەی هەڵبژێرەری تایبەتمەندیەکانەوە دەکرێنە ئامانج . لە کاتێکدا ئەمە هەڵبژێرەرێکی تایبەتتر دروست دەکات، هێشتا دەتوانرێت پادکردنی ستوونەکان زیاتر خۆکارانە بکرێت بە سوودمەندییەکانی دووری .
پێویستت بە دیزاینێکی لێوار بۆ لێوار هەیە؟ دایک و باوکەکە .container
یان .container-fluid
.
لە پراکتیکدا، لێرەدا چۆن دەردەکەوێت. تێبینی دەتوانیت بەردەوام بیت لە بەکارهێنانی ئەمە لەگەڵ هەموو پۆلەکانی تری تۆڕی پێشوەختە پێناسەکراو (لەوانەش پانایی ستوونەکان، قاتەکانی وەڵامدەرەوە، ڕێکخستنەوە و زۆر شتی تر).
ئەگەر زیاتر لە ١٢ ستوون لەناو یەک ڕیزدا دابنرێت، هەر گروپێکی ستوونی زیادە وەک یەک یەکە دەپێچرێتەوە لەسەر هێڵێکی نوێ.
بەو پێیەی 9 + 4 = 13 > 12، ئەم دیڤە 4 ستوونییە فراوانە وەک یەک یەکەی بەردەوام لەسەر هێڵێکی نوێ دەپێچرێتەوە.
ستوونەکانی دواتر بە درێژایی هێڵی نوێ بەردەوامن.
شکاندنی ستوونەکان بۆ دێڕێکی نوێ لە flexbox پێویستی بە هاکێکی بچووک هەیە: زیادکردنی توخمێک لەگەڵ width: 100%
هەر شوێنێک کە بتەوێت ستوونەکانت بپێچیتەوە بۆ دێڕێکی نوێ. بە شێوەیەکی ئاسایی ئەمە بە چەندین .row
s بەدی دێت، بەڵام هەموو شێوازێکی جێبەجێکردن ناتوانێت حساب بۆ ئەمە بکات.
هەروەها دەتوانیت ئەم پشووە لە خاڵە شکاندنی تایبەتدا بەکاربهێنیت لەگەڵ سوودمەندییەکانی پیشاندانی وەڵامدەرەوەمان .
پۆلەکان بەکاربهێنە .order-
بۆ کۆنترۆڵکردنی ڕێزبەندی بینراوی ناوەڕۆکەکەت. ئەم پۆلانە وەڵامدەرەوەن، بۆیە دەتوانیت order
بە خاڵی شکاندن دابنێیت (بۆ نموونە، .order-1.order-md-2
). پشتگیری لە 1
ڕێگەی 12
لە سەرانسەری هەر پێنج قاتەکەی تۆڕەکەدا لەخۆدەگرێت.
هەروەها وەڵامدەرەوە .order-first
و .order-last
پۆلەکان هەن کە بە جێبەجێکردنی و ( ) بە رێککەوت order
لە توخمێک دەگۆڕن. هەروەها دەتوانرێت ئەم پۆلانە بەپێی پێویست لەگەڵ پۆلە ژمارەدارەکاندا تێکەڵ بکرێن.order: -1
order: 13
order: $columns + 1
.order-*
دەتوانیت ستوونەکانی تۆڕ بە دوو شێوە ئۆفسێت بکەیت: .offset-
پۆلەکانی تۆڕی وەڵامدەرەوەمان و سوودمەندییەکانی پەراوێزمان . پۆلەکانی تۆڕ قەبارەیان بۆ دانراوە بۆ ئەوەی لەگەڵ ستوونەکاندا بگونجێت لە کاتێکدا پەراوێزەکان زیاتر بەسوودن بۆ نەخشە خێراکان کە پانایی ئۆفسێتەکە گۆڕاوە.
.offset-md-*
بە بەکارهێنانی پۆلەکان ستوونەکان بۆ لای ڕاست بگوازەرەوە . ئەم پۆلانە پەراوێزی چەپی ستوونێک بە *
ستوون زیاد دەکەن. بۆ نموونە بەسەر چوار ستووندا .offset-md-4
دەجووڵێت ..col-md-4
جگە لە پاککردنەوەی ستوون لە خاڵەکانی شکاندنی وەڵامدەرەوە، لەوانەیە پێویستت بە ڕێستکردنی ئۆفسێتەکان بێت. ئەمە بە کردار لە نموونەی تۆڕەکەدا ببینە .
لەگەڵ گواستنەوە بۆ flexbox لە v4، دەتوانیت سوودمەندییەکانی پەراوێز بەکاربهێنیت وەک .mr-auto
ناچارکردنی ستوونەکانی خوشک و برا لە یەکتر دوور بخەیتەوە.
بۆ هێلانەکردنی ناوەڕۆکەکەت بە تۆڕی پێشوەختە، ستوونێکی نوێ .row
و کۆمەڵێک زیاد بکە لەناو ستوونێکی .col-sm-*
هەبوودا . .col-sm-*
ڕیزەکانی هێلانەکراو دەبێت کۆمەڵێک ستوون لەخۆ بگرن کە کۆدەبنەوە تا ١٢ یان کەمتر (پێویست ناکات هەر ١٢ ستوونی بەردەست بەکاربهێنیت).
لە کاتی بەکارهێنانی فایلە سەرچاوەییەکانی Sass ی Bootstrap، بژاردەی بەکارهێنانی گۆڕاوەکانی Sass و mixinsت هەیە بۆ دروستکردنی نەخشەی لاپەڕەی تایبەت و مانادار و وەڵامدەرەوە. پۆلەکانی تۆڕی پێشوەختە پێناسەکراومان هەمان ئەم گۆڕاو و میکسینانە بەکاردەهێنن بۆ دابینکردنی کۆمەڵەیەکی تەواو لە پۆلە ئامادەکراوەکان بۆ بەکارهێنان بۆ نەخشە وەڵامدەرەوە خێراکان.
گۆڕاوەکان و نەخشەکان ژمارەی ستوونەکان، پانایی کانیاو و خاڵی پرسیاری میدیا دیاری دەکەن کە تێیدا دەست بە ستوونی هەڵدەفڕێت دەکرێت. ئێمە ئەمانە بەکاردەهێنین بۆ دروستکردنی پۆلەکانی تۆڕی پێشوەختە پێناسەکراو کە لە سەرەوە بەڵگەیان لەسەر کراوە، هەروەها بۆ ئەو میکسینە تایبەتانەی کە لە خوارەوە ئاماژەیان پێکراوە.
میکسینەکان بە هاوبەشی لەگەڵ گۆڕاوە تۆڕەکان بەکاردەهێنرێن بۆ دروستکردنی CSSی مانادار بۆ ستوونی تۆڕی تاکەکەسی.
دەتوانیت گۆڕاوەکان دەستکاری بکەیت بۆ بەها تایبەتەکانی خۆت، یان تەنها میکسینەکان بە بەها پێشوەختەکانیان بەکاربهێنیت. لێرەدا نموونەیەک لە بەکارهێنانی ڕێکخستنە پێشوەختەکان بۆ دروستکردنی نەخشەیەکی دوو ستوونی کە بۆشایی نێوانیان هەبێت.
بە بەکارهێنانی گۆڕاو و نەخشەکانی تۆڕی Sass ی ناوەکیمان، دەتوانرێت پۆلەکانی تۆڕی پێشوەختە پێناسەکراو بە تەواوی خۆکارانە بکرێت. ژمارەی قاتەکان، ڕەهەندەکانی پرسیاری میدیا و پاناییەکانی دەفرەکان بگۆڕە- پاشان دووبارە کۆبکەرەوە.
ژمارەی ستوونەکانی تۆڕ دەتوانرێت لە ڕێگەی گۆڕاوە ساسەکانەوە دەستکاری بکرێت. $grid-columns
بەکاردێت بۆ دروستکردنی پاناییەکان (بە ڕێژەی لەسەدا)ی هەر ستوونێکی تاکەکەسی لە کاتێکدا $grid-gutter-width
پانایی بۆ کانیاوەکانی ستوونەکان دادەنێت.
بە تێپەڕین لە خودی ستوونەکان، دەتوانیت ژمارەی قاتەکانی تۆڕەکەش بەپێی خواستی خۆت دابنێیت. ئەگەر تەنها چوار قاتی تۆڕت دەویست، ئەوا $grid-breakpoints
و $container-max-widths
بە شتێکی وەک ئەم نوێ دەکەیتەوە:
لەکاتی ئەنجامدانی هەر گۆڕانکارییەک لە گۆڕاوەکان یان نەخشەکانی Sass، پێویستە گۆڕانکارییەکانت هەڵبگریت و دووبارە کۆبکەیتەوە. بەم شێوەیە کۆمەڵەیەکی نوێ لە پۆلەکانی تۆڕی پێشوەختە دیاریکراو بۆ پانایی ستوونەکان، ئۆفسێتەکان و ڕێکخستن دەردەچێت. هەروەها سوودمەندییەکانی بینینی وەڵامدەرەوە نوێ دەکرێنەوە بۆ بەکارهێنانی خاڵەکانی شکاندنی تایبەتمەند. دڵنیابە لە دانانی بەهاکانی تۆڕ لە px
(نەک rem
, em
, یان %
).