Bootstrap لەسەر تۆڕێکی 12 ستوونی وەڵامدەرەوە دروستکراوە. هەروەها ئێمە نەخشەی پانایی جێگیر و شلەمان لەسەر بنەمای ئەو سیستەمە داناوە.
سیستەمی تۆڕی پێشوەختە کە وەک بەشێک لە Bootstrap دابین کراوە تۆڕێکی 940px پان و 12 ستوونە .
هەروەها چوار جۆری وەڵامدەرەوەی هەیە بۆ ئامێر و ڕوونییە جیاوازەکان: مۆبایل، پۆرترێتی تابلێت، دیمەنی مێز و دەسکتۆپی بچووک، و دەسکتۆپی گەورەی شاشە فراوان.
- <div class = "ڕیز" >
- <div پۆل = "span4" > ... </div>
- <div پۆل = "span8" > ... </div>
- </div>
وەک لێرەدا نیشان دراوە، دەتوانرێت نەخشەیەکی بنەڕەتی بە دوو "ستوون" دروست بکرێت، هەریەکەیان ژمارەیەک لەو ١٢ ستوونە بنەڕەتییە دەگرێتەوە کە وەک بەشێک لە سیستەمی تۆڕەکەمان پێناسەمان کردووە.
- <div class = "ڕیز" >
- <div پۆل = "span4" > ... </div>
- <div پۆل = "span4 ئۆفسێت4" > ... </div>
- </div>
بە سیستەمی تۆڕی ئیستاتیک (نا شلە) لە Bootstrap، هێلانەکردن ئاسانە. بۆ هێلانەکردنی ناوەڕۆکەکەت، تەنها ستوونێکی نوێ .row
و کۆمەڵێک ستوون زیاد بکە لەناو ستوونێکی .span*
هەبوودا ..span*
- <div class = "ڕیز" >
- <div پۆل = "span12" >
- ئاستی یەکەمی ستوونی
- <div class = "ڕیز" >
- <div class = "span6" > ئاستی دووەم </div>
- <div class = "span6" > ئاستی دووەم </div>
- </div>
- </div>
- </div>
گۆڕاو | بةهاى دواكةوتن | وەسف |
---|---|---|
@gridColumns |
12. 12 | ژمارەی ستوونەکان |
@gridColumnWidth |
60px | پانایی هەر ستوونێک |
@gridGutterWidth |
20px | بۆشایی نەرێنی لە نێوان ستوونەکاندا |
@siteWidth |
کۆی حیسابکراوی هەموو ستوونەکان و کانیاوەکان | ژمارەی ستوون و کانیاوەکان دەژمێرێت بۆ دانانی پانایی .container-fixed() میکسینەکە |
لەناو Bootstrapدا مشتێک گۆڕاو بۆ خۆکارکردنی سیستەمی تۆڕی پێشوەختەی 940px دروستکراوە، کە لە سەرەوە بەڵگەی لەسەر کراوە. هەموو گۆڕاوەکان بۆ تۆڕەکە لە گۆڕاوەکاندا هەڵدەگیرێن.less.
دەستکاریکردنی تۆڕەکە واتە گۆڕینی سێ @grid*
گۆڕاوەکە و دووبارە کۆکردنەوەی Bootstrap. گۆڕاوە تۆڕەکان لە variables.less بگۆڕە و یەکێک لە چوار ڕێگای بەڵگەدار بەکاربهێنە بۆ دووبارە کۆکردنەوە . ئەگەر ستوونی زیاتر زیاد دەکەیت، دڵنیابە CSS زیاد دەکەیت بۆ ئەوانەی لە grid.lessدان.
خۆکارکردنی تۆڕەکە تەنها لە ئاستی پێشوەختەدا کاردەکات، تۆڕی 940px. بۆ پاراستنی لایەنە وەڵامدەرەوەکانی Bootstrap، هەروەها دەبێت تۆڕەکان لە responsive.lessدا خۆت ڕێکبخەیت.
شێوازی پێشوەختە و سادە بە فراوانی 940px، ناوەنددار بۆ تەنها نزیکەی هەر ماڵپەڕێک یان لاپەڕەیەک کە لەلایەن تاکە لاپەڕەیەکەوە دابینکراوە <div class="container">
.
- <جەستە>
- <div class = "دەفر" >
- ...
- </div>
- </body>
<div class="container-fluid">
پێکهاتەی لاپەڕەی نەرم و نیان دەدات، کەمترین و زۆرترین پانایی، و پەڕەیەکی لایەنی دەستی چەپ. بۆ ئەپ و دۆکەکان زۆر باشە.
- <div class = "شلەی دەفر" >
- <div class = "شلەی ڕیز" >
- <div پۆل = "span2" >
- <!--ناوەڕۆکی پەڕە لاوەکییەکان-->
- </div>
- <div پۆل = "span10" >
- <!--ناوەڕۆکی جەستە-->
- </div>
- </div>
- </div>
بووتستراپ پشتگیری لە مشتێک پرسیاری میدیا دەکات بۆ یارمەتیدان لە گونجاوترکردنی پڕۆژەکانت لەسەر ئامێرە جیاوازەکان و ڕوونی شاشە. لێرەدا ئەوەی لەخۆدەگرێت:
لەیبڵ | پانایی نەخشە | پانایی ستوونەکە | پانایی کانیاو |
---|---|---|---|
مۆبایلە زیرەکەکان | 480px و خوارەوە | ستوونی شلە، بێ پانایی جێگیر | |
تابلێتی پۆرترێت | 480px بۆ 768px | ستوونی شلە، بێ پانایی جێگیر | |
تابلێتی دیمەنی سروشتی | 768px بۆ 940px | 44px | 20px |
بنەڕەتی | 940px و بەرزتر | 60px | 20px |
شاشەیەکی گەورە | 1210px و بەرزتر | 70px | 30px |
پرسیارەکانی میدیا ڕێگە بە CSSی تایبەت دەدەن بە پشتبەستن بە ژمارەیەک مەرج- ڕێژە، پانایی، جۆری پیشاندانی، هتد- بەڵام بەزۆری لە دەوری min-width
و تەرکیز دەکات max-width
.
Bootstrap بە شێوەیەکی ئۆتۆماتیکی ئەم پرسیارە میدیایانە لەخۆناگرێت، بەڵام تێگەیشتن و زیادکردنیان زۆر ئاسانە و پێویستی بە کەمترین ڕێکخستن هەیە. چەند بژاردەیەکت هەیە بۆ خستنەڕووی تایبەتمەندییە وەڵامدەرەکانی Bootstrap:
بۆچی تەنها نەیخەینە ناوەوە؟ ڕاستی بڵێم، پێویست ناکات هەموو شتێک وەڵامدەرەوە بێت. لەبری ئەوەی هانی گەشەپێدەران بدەین بۆ لابردنی ئەم تایبەتمەندییە، ئێمە باشتر وایە چالاکی بکەین.
- // مۆبایلەکانی لاندسکەیپ و داون
- @media ( زۆرترین پانایی : 480px ) { ... } _
- // مۆبایلی لاندسکەیپ بۆ تابلێتی پۆرترێت
- @media ( زۆرترین پانایی : 768px ) { ... } _
- // تابلێتی پۆرترێت بۆ لاندسکیپ و دەسکتۆپ
- @media ( کەمترین پانی : 768px ) و ( زۆرترین پانی : 940px ) { ... } . _
- // دەسکتۆپی گەورە
- @media ( کەمترین پانی : 1200px ) { .. } .