تێڕوانینێکی گشتی
پێکهاتەکان و بژاردەکان بۆ داڕشتنی پڕۆژەی Bootstrap ـەکەت، لەوانە پێچانی کۆنتێنەرەکان، سیستەمێکی تۆڕی بەهێز، شتێکی میدیایی نەرم و نیان و پۆلەکانی سوودمەندی وەڵامدەرەوە.
کۆنتێنەرەکان بنەڕەتیترین توخمەکانی نەخشەن لە Bootstrap و پێویستن لە کاتی بەکارهێنانی سیستەمی تۆڕی پێشوەختەمان . لە نێوان دەفرێکی وەڵامدەرەوە و پانایی جێگیر هەڵبژێرە (واتە max-width
گۆڕانکارییەکانی لە هەر خاڵێکی شکاندندا) یان پانی شلە (واتە بەردەوام 100%
فراوانە).
لە کاتێکدا دەتوانرێت کۆنتێنەرەکان هێلانە بکرێت، زۆربەی نەخشەکان پێویستیان بە کۆنتێنەرێکی هێلانەکراو نییە.
.container-fluid
بۆ دەفرێکی تەواو پان بەکاری بهێنە ، کە تەواوی پانایی دەرگای بینین دەگرێتەوە.
بەو پێیەی Bootstrap پەرەی پێدراوە بۆ ئەوەی سەرەتا مۆبایل بێت، ئێمە مشتێک پرسیاری میدیا بەکاردەهێنین بۆ دروستکردنی خاڵی شکاندنی عەقڵانی بۆ نەخشە و ڕووکارەکانمان. ئەم خاڵە شکاندنانە زیاتر لەسەر بنەمای کەمترین پانایی دەرگای بینین دانراون و ڕێگەمان پێدەدەن توخمەکان گەورە بکەین لەگەڵ گۆڕانی دەرگای بینین.
بووتستراپ بە شێوەیەکی سەرەکی ئەم مەودایانەی خوارەوەی پرسیاری میدیا بەکاردەهێنێت- یان خاڵەکانی شکاندن- لە فایلە سەرچاوەییەکانی Sass بۆ نەخشە، سیستەمی تۆڕ و پێکهاتەکانمان.
بەو پێیەی ئێمە CSS سەرچاوەی خۆمان بە ساس دەنووسین، هەموو پرسیارە میدیاییەکانمان لە ڕێگەی میکسینەکانی ساسەوە بەردەستە:
ئێمە ناوبەناو پرسیاری میدیا بەکاردەهێنین کە بە ئاراستەی تردا دەڕۆن (قەبارەی شاشەی پێدراو یان بچووکتر ):
سەرنج بدە کە لەبەر ئەوەی وێبگەڕەکان لە ئێستادا پشتگیری لە پرسیارەکانی ناوەڕۆکی مەودا ناکەن ، ئێمە لە دەوری سنوورەکانی min-
و max-
پێشگرەکان و دەرگاکانی بینین بە پانایی بەشەکی (کە دەتوانێت لە ژێر هەندێک بارودۆخدا ڕووبدات لەسەر ئامێرەکانی dpi بەرز، بۆ نموونە) بە بەکارهێنانی بەهاکان بە وردبینییەکی بەرزتر بۆ ئەم بەراوردکردنانە کاردەکەین .
جارێکی تر ئەم پرسیارە میدیایانە لە ڕێگەی میکسینەکانی ساسەوە بەردەستن:
هەروەها پرسیاری میدیایی و میکسین هەیە بۆ بە ئامانجگرتنی یەک بەش لە قەبارەی شاشەکان بە بەکارهێنانی کەمترین و زۆرترین پانایی خاڵی شکاندن.
ئەم پرسیارە میدیایانە لە ڕێگەی میکسینەکانی ساسەوەش بەردەستن:
بە هەمان شێوە، پرسیارەکانی میدیا لەوانەیە چەندین پانایی خاڵی شکاندن بگرێتەوە:
میکسینی ساس بۆ بە ئامانجگرتنی هەمان مەودای قەبارەی شاشەکە دەبێتە:
چەندین پێکهاتەی Bootstrap z-index
, تایبەتمەندی CSS کە یارمەتی کۆنترۆڵکردنی نەخشە دەدات بە دابینکردنی میحوەرێکی سێیەم بۆ ڕێکخستنی ناوەڕۆک بەکاردەهێنن. ئێمە پێوەرێکی z-indexی پێشوەختە لە Bootstrap بەکاردەهێنین کە دیزاین کراوە بۆ ئەوەی بە شێوەیەکی دروست چینکردنی گەشتکردن، ئامرازەکان و پۆپۆڤەرەکان، مۆداڵەکان و زۆر شتی تر.
ئەم بەها بەرزانە لە ژمارەیەکی ئارەزوومەندانە دەست پێدەکەن، ئەوەندە بەرز و تایبەتن کە بە شێوەیەکی ئایدیاڵ دوور بکەونەوە لە ململانێ. ئێمە پێویستمان بە کۆمەڵەیەکی ستانداردی ئەمانە لە سەرانسەری پێکهاتە چیندارەکانماندا- ئامۆژگاری ئامرازەکان، پۆپۆڤەرەکان، ناوبارەکان، دابەزینەکان، مۆداڵەکان- بۆ ئەوەی بتوانین بە شێوەیەکی گونجاو لە ڕەفتارەکاندا یەکدەنگ بین. هیچ هۆکارێک نییە کە نەماندەتوانی 100
+ یان 500
+ بەکاربهێنین.
ئێمە هانی خۆکارکردنی ئەم بەها تاکەکەسیانە نادەین؛ ئەگەر یەکێکیان بگۆڕیت، پێدەچێت پێویستت بە گۆڕینی هەموویان بێت.
بۆ مامەڵەکردن لەگەڵ سنوورە سەریەککەوتووەکان لەناو پێکهاتەکاندا (بۆ نموونە، دوگمە و زانیارییەکانی ناوەوە لە گروپەکانی چوونەژوورەوە)، ئێمە z-index
بەها تاکە ژمارەی نزمەکانی 1
, 2
, و 3
بۆ باری پێشوەختە، هۆڤەر و چالاک بەکاردەهێنین. لەسەر hover/focus/active، ئێمە توخمێکی تایبەت دەهێنینە پێشەوە بە z-index
بەهایەکی بەرزتر بۆ نیشاندانی سنوورەکەیان بەسەر توخمە خوشک و براکاندا.