دەربارەی وەشانی چوارەمی (بووتستراپ)
بووتستراپ چییە؟
کورتەیەک:
بووترستراپ (پەیکەرێک)ی بەخۆڕایی و سەرچاوە کراوەیە کە بەکاردێت بۆ نەخشاندنی (بەشی پێشەوە)ی وێبسایتەکەن. پێکهاتووە لە هەریەک لە زمانەکانی :
HTML, CSS, JAVASCRIPT .
ئەم سێ زمانەش بەیەکەوە ڕێکخراون دواتر کراونەتە (پەیکەر) تاوەکوو نەخشەسازانی وێب بەئاسانی و خێرایی کارەکانی خۆیان ئەنجام بدەن.
HTML, CSS, JAVASCRIPT .
ئەم سێ زمانەش بەیەکەوە ڕێکخراون دواتر کراونەتە (پەیکەر) تاوەکوو نەخشەسازانی وێب بەئاسانی و خێرایی کارەکانی خۆیان ئەنجام بدەن.
(بووتستراپ – Bootstrap) لەسەر پێگەی (جیت هەب – Github) دووەم زۆرترین دەنگپێدراوە (زیاتر لە 95 هەزار).
*وە لەسەرەتادا پڕۆژەکە بە (تویتەر بلووپرێنت – Twitter Blueprint) بانگدەکرا.
گەشەپێدان و بنیاتنان:
لە 19ی ئابی 2011 لە ئیڤێنتێکی (هاکاثۆن – Hackathon)دا بۆ یەکەمجار پڕۆژەکەی خۆیان بەخۆڕایی و سەرچاوەکراوەیی بڵاوکردەوە
کە لەلایەن تیمی گەشەپێدەرانی تۆڕی کۆمەڵایەتی (تویتەر – Twitter)ەوە گەشەیپێدرا، بەڵام گەشەپێدەر و دۆزەرەوەی سەرەکی پڕۆژەکە (مارک ئۆتۆ – Mark Otto) و (جەیکۆب ثۆرنتەن – Jacob Thornton) بوون.
کە لەلایەن تیمی گەشەپێدەرانی تۆڕی کۆمەڵایەتی (تویتەر – Twitter)ەوە گەشەیپێدرا، بەڵام گەشەپێدەر و دۆزەرەوەی سەرەکی پڕۆژەکە (مارک ئۆتۆ – Mark Otto) و (جەیکۆب ثۆرنتەن – Jacob Thornton) بوون.
پاشان لە 31 کانونی دووەمی ساڵی 2012دا وەشانی دووەمی (پەیکەر)ەکەیان بڵاوکردەوە.
وەشانی سێیەمی لە 19ی ئابی ساڵی 2013 بڵاوکردەوە.
وەشانی سێیەمی لە 19ی ئابی ساڵی 2013 بڵاوکردەوە.
وەشانی چوارەم لە 29ی تشرینی یەکەمی ساڵی 2014دا کەوتە گەشەپێدانەوە، وە لەئێستادا بە شێوەیەکی فەرمی وەشانی چوارەم کەوتە بەردەست و بڵاوکرایەوە.
ناوەڕۆکی بابەتەکە:
تایبەتمەندییە نوێیەکانی وەشانی چوارەم چین ؟
– کلاسەکانی (panel و well) گۆڕاون بۆ (.card)، هەمان شێوازی هەیە، بەڵام دەستکاری لە ستایلی (پادینگ و مارجین)ەکەی کراوە، وە (کارت)ەکان دەتوانن بە تەنیا دابنرێن.
سەیری وێنە بکە بۆ تێگەیشتن:
– درووستکردنی گرووپێک لە (تەیبڵەکان) (بەهەمان قەبارە) زۆر ئاسانتر کراوە وەک لەپێشتر.
سەیری وێنە بکە بۆ تێگەیشتن:
– ڕەنگەکان و بۆکسەکان لە وەشانە نوێیەکەدا هەر ماون، بەڵام ڕەنگەکان تاریکتر کراون و بۆکسەکان بە ڕەنگ پڕکراونەتەوە.
سەیری وێنە بکە بۆ تێگەیشتن:
– قەبارەی فۆنتەکان بە 2 پیکسڵ گەورەتر کراون، قەبارەی تاگی هێدینگەکانیش بەشێوەیەکی تر دەستکاریکراون. وە بەشێوەیەکی زۆر یەکەی rem بەکارهێنراوە بۆ گەورە و بچووککردنەوەی فۆنتەکان (لەجیاتی پیکسڵ و em).
نموونەیەک لەسەر یەکەی rem لە زمانی نەخشەسازی CSSدا:
body { font-size: 1.4rem; } دەکاتە 14 پیکسڵ
سەیری وێنە بکە بۆ تێگەیشتن:
– شێوازی هێڵەگەکان گۆڕاون، //هێڵەگەکان گرنگترین بەشی (پەیکەر)ی (بووتستراپ – Bootstrap)ن. ئەگەر چاوێک بە وەشانی پێشوو بخشێنینەوە، ئەوا دەبینین کە کلاسەکانی هێڵەگ بەم کورتکراوانە بانگدەکران : xs و sm و md و lg
وە هەروەها بەم شێوەیەش کاریان دەکرد:
هەروەک دەبینین، بچووکترین شاشەقەبارە لە (پەیکەر)ەکەدا بریتییە لە 768 پیکسڵ، واتە هیچ ڕێگایەکی ئاسان نییە بۆ ئەوەی پەڕەکە بۆ ئامێرەکانی خوار 375 پیکسڵ هەستیار بێت، وەهەروەها هیچ هەستیارییەکی تایبەت دانەنراوە بۆ شێوەی ئاسۆیی مۆبایلە زیرەکەکان (واتە ئەگەر مۆبایلە زیرەکەکەت بەشێوەی ئاسۆیی بگریت (بەدڵنیاییەوە ناوەڕۆکەکەشی خۆکارانە لەسەر شێوەی ئاسۆیی دەردەکەوێت) ئەوا هیچ هەستیارییەکی تایبەت بەدی ناکەیت.
– هێڵەگەکانی وەشانی چوارەمی بووتستراپ:
– زیادکردنی کلاسێکی تایبەت بەناوی: xl (پێشتر هەتتاوەکو large هەبوو، ئێستا X large زیادکراوە.)، کە ئەمەش پشتگیرییەکی باشترە بۆ ئامێرە بچووکەکان. ئێستا تەواوی شاشەقەبارە ئامادەکراوەکانی ناو (پەیکەر)ەکە بوونەتە 5 دانە : xs , sm , md, lg, xl
– لەوانەیە بیربکەنەوە کە کلاسە نوێیەکە بۆ پشتگیریکردنی ئامێرە گەورەکان (مەبەست لە شاشەیە) بێت چونکە ناوەکەی xl(X large)، بەڵام پێچەوانەیەتی! بەڵکوو زیادکراوە بۆ زیاتر پشتگیریکردنی ئامێرە بچووکەکان.
ئەم کڵاسە نوێیە وا لە (میدیا کویری – media query)ەکە دەکات کە نزمبێتەوە بۆ 544 پیکسڵ، هەر لەبەر ئەمەشە کە پشتگیرییەکی باشە بۆ ئامێرە بچووکەکان.
ئەم کڵاسە نوێیە وا لە (میدیا کویری – media query)ەکە دەکات کە نزمبێتەوە بۆ 544 پیکسڵ، هەر لەبەر ئەمەشە کە پشتگیرییەکی باشە بۆ ئامێرە بچووکەکان.
لۆجیکی ئەم کلاسە نوێیە:
سێ هێڵەگی x (وەک col-xs-taqikrdnawa) دەگۆڕدرێن بۆ 4 هێڵەگی x. لەکاتێکدا کە کڵاسە کۆنەکە بریتییە لە 3 هێڵەگی x و تەنها پشتگیری ئامێرەکانی خوار 768 پیکسڵ دەکات، لە کڵاسە نوێیەکەدا دەتوانیت 4 کڵاسی x لە یەک پەڕەدا زیادبکەیت، واتە پشتگیری ئامێرەکانی خوار 544 پیکسڵیش دەکات، ئەمە تایبەتمەندییە بۆ پشتگیریکردنی ئامێرە بچووکەکان و ئەو ئامێرانەی کە شاشەکانیان درێژە.
سەیری وێنە بکە بۆ تێگەیشتن:
نموونە:
دیسکتۆپ و لاپتۆپەکان
تاتەبژمێرە پانەکان
تاتەبژمێرە شاشەدرێژەکان
فابلێتەکان
مۆبایلە زیرەکە شاشەدرێژەکان
بۆ بینینی چۆنییەتی کارکردنی هێڵگەکان:
– (بووتستراپ – Bootstrap) لەوەشانی سێیەمەوە پشتگیری لە ڕەنگی فلات و دیزاینی ناوازە و سادە دەکات.
بەڵام لەم وەشانەدا هیچ گۆڕانکارییەکی گەورە بەدینەکراوە، تەنها شتە بچووکەکانیان زیاتر گەشەپێداوە.
بەڵام لەم وەشانەدا هیچ گۆڕانکارییەکی گەورە بەدینەکراوە، تەنها شتە بچووکەکانیان زیاتر گەشەپێداوە.
فەرموون سەیری گۆڕانکاری لەشێوازی دوگمەناندا بکەن
وێنە:
– کڵاسی pull:
یەکێکی تر لە تایبەتمەندییە ناوازەکان بریتییە لە زیاتر هەستیارکردنی کلاسەکانی ناوەڕۆک (فلەوت – float) لەگەڵ بەکارهێنانی قەبارەکان(xs,l,lg,md,sm) ،
نموونە:
pull-md-right یاخود left
نموونە:
pull-md-right یاخود left
ئەمە ئاسانکارییەکی بەسوودە.
بەکارهێنەر پێش ئەم تایبەتمەندییە دەبوایە CSSی بەکاربهێنایە بۆ ئەوەی ئەم کارە ئەنجامب دات.
بەکارهێنەر پێش ئەم تایبەتمەندییە دەبوایە CSSی بەکاربهێنایە بۆ ئەوەی ئەم کارە ئەنجامب دات.
سەیری وێنە بکە بۆ تێگەیشتن:
فەرهەنگۆک:
پەیکەر = Framework
بەشی-پێشەوە = Front-end
سەرچاوەکراوە = Open-Source
نەخشاندن = design
ئیڤێنت = Event
کلاسەکان = Classes (هەموو تاگێک لە زمانی CSSدا کلاسێکی خۆی هەیە)
تەیبڵ = ناوی یەکێک لە تاگەکانی HTMLە
مارجین / پادینگ = Margin/Padding یەکێکن لە ئامرازەکانی زمانی CSS
هێڵگە = Grid
پیکسڵ = یەکەیەکە بۆ گەورە و بچووککردنەوەی قەبارەی فۆنت،فۆڕم،دۆکومێنتێک لە فۆتۆشۆپ، شتی تر…
ڕیم = rem ەکەیەکە بۆ گەورە و بچووککردنەوەی قەبارەی فۆنت.
ئاسۆیی = Landscape
تاتەبژمێر = Tablet
فابڵێتەکان = Phablets هەر لە تاتەبژمێرەکان دەچن، بەڵام شێوازی مۆبایل و تاتەبژمێری وەرگرتووە لەبەر ئەوە ناونراوە Phablets (نموونە: فابڵێتی SAMSUNG Galaxy Tab E 8)
نووسەر: محمد بێساران هەورامی
_________________________________
