نزیک بوونەوە

لە کاتێکدا لاپەڕەکانی دەستپێکردن گەشتێکی ناساندنی پڕۆژەکە و ئەوەی پێشکەش دەکات پێشکەش دەکەن، ئەم بەڵگەنامەیە سەرنج دەخاتە سەر ئەوەی بۆچی ئەو کارانە دەکەین کە لە بووتستراپدا ئەنجامی دەدەین. فەلسەفەی ئێمە ڕوون دەکاتەوە بۆ بنیاتنانی لەسەر وێب بۆ ئەوەی کەسانی دیکە بتوانن لە ئێمە فێربن، لەگەڵ ئێمە بەشداری بکەن و یارمەتیدەرمان بن لە باشتربوون.

شتێک دەبینیت کە دەنگێکی دروستی نییە، یان ڕەنگە باشتر بکرێت؟ پرسێک بکەرەوە —ئێمە زۆرمان پێ خۆشە لەگەڵ تۆ باسی بکەین.

پوختە

ئێمە زیاتر خۆمان دەخەینە ناو هەریەکێک لەمانە بە درێژایی، بەڵام لە ئاستێکی بەرزدا، لێرەدا ئەوەیە کە ڕێنمایی نزیکبوونەوەمان دەکات.

• پێکهاتەکان دەبێت وەڵامدەرەوە بن و یەکەمجار مۆبایل بن
• پێکهاتەکان دەبێت بە پۆلێکی بنەڕەتی دروست بکرێن و لە ڕێگەی پۆلەکانی دەستکاریکەرەوە درێژ بکرێنەوە
• بارە پێکهاتەکان دەبێ گوێڕایەڵی پێوەرێکی باوی z-index بن
• هەرکاتێک دەتوانیت جێبەجێکردنی HTML و CSS بە باشتر بزانە لە جاڤاسکڕێپت
• هەرکاتێک دەتوانیت سوودمەندییەکان بەکاربهێنە بەسەر ستایلە تایبەتەکاندا
• هەرکاتێک کە دەتوانیت، دوور بکەوەرەوە لە جێبەجێکردنی پێداویستییە توندەکانی HTML (هەڵبژێرەری منداڵان)

وەڵامدەرەوە

شێوازەکانی وەڵامدانەوەی Bootstrap بۆ ئەوە دروستکراون کە وەڵامدەرەوە بن، ڕێگەیەک کە زۆرجار بە mobile-first ناودەبرێت . ئێمە ئەم زاراوەیە لە دۆکیومێنتەکانماندا بەکاردەهێنین و تا ڕادەیەکی زۆر لەگەڵیدا هاوڕاین، بەڵام لە هەندێک کاتدا دەتوانێت زۆر فراوان بێت. لە کاتێکدا کە نابێت هەموو پێکهاتەیەک بە تەواوی وەڵامدەرەوە بێت لە بووتستراپدا، ئەم ڕێگایە وەڵامدەرەوەیە سەبارەت بە کەمکردنەوەی سەرپێچییەکانی CSS بە پاڵنانی تۆ بۆ زیادکردنی ستایلەکان لەگەڵ گەورەبوونی دەرگای بینین.

لە سەرانسەری Bootstrap، ئەمە بە ڕوونیترین شێوە لە پرسیارە میدیاییەکانماندا دەبینیت. لە زۆربەی حاڵەتەکاندا، ئێمە min-widthئەو پرسیارانە بەکاردەهێنین کە لە خاڵێکی شکاندنی دیاریکراودا دەست دەکەن بە جێبەجێکردن و لە خاڵە شکاندنە بەرزەکاندا دەگوازرێنەوە. بۆ نموونە a .d-noneلە min-width: 0بۆ بێکۆتایی کاردەکات. لە لایەکی ترەوە a .d-md-noneلە خاڵی شکاندنی مامناوەندەوە و بەرەو سەرەوە جێبەجێ دەکرێت.

لە هەندێک کاتدا کاتێک بەکاری دەهێنین max-widthکە ئاڵۆزی سروشتی پێکهاتەیەک پێویستی پێیەتی. لە هەندێک کاتدا، ئەم سەرپێچییانە لە ڕووی کارایی و دەروونییەوە ڕوونترن بۆ جێبەجێکردن و پشتگیریکردن لە دووبارە نووسینەوەی کاراییە سەرەکییەکان لە پێکهاتەکانمانەوە. ئێمە هەوڵ دەدەین ئەم ڕێبازە سنووردار بکەین، بەڵام جار جار بەکاری دەهێنین.

پۆلەکان

جگە لە Reboot ـمان، کە ستایلشیتێکی ئاساییکردنەوەی cross-browser ە، هەموو ستایلەکانمان ئامانجیان بەکارهێنانی پۆلەکانە وەک هەڵبژێرەر. ئەمەش واتە دوورکەوتنەوە لە هەڵبژێرەری جۆر (بۆ نموونە، input[type="text"]) و پۆلەکانی دایک و باوکی دەرەکی (بۆ نموونە، .parent .child) کە ستایلەکان زۆر تایبەت دەکەن بۆ ئەوەی بە ئاسانی سەرپێچی بکەن.

بەم شێوەیە، پێکهاتەکان دەبێ بە پۆلێکی بنەڕەتی دروست بکرێن کە جووتە بەهای تایبەتمەندی باو و سەرپێچی نەکراو لەخۆبگرێت. بۆ نموونە، .btnو .btn-primary. ئێمە .btnبۆ هەموو ستایلە باوەکان وەک display, padding, و border-width. پاشان دەستکاریکەر بەکاردەهێنین وەک .btn-primaryزیادکردنی ڕەنگەکە، ڕەنگی پاشبنەما، ڕەنگی سنوور و هتد.

پۆلەکانی دەستکاریکەر تەنیا کاتێک دەبێ بەکاربهێنرێن کە چەندین تایبەتمەندی یان بەها هەبێت کە لە سەرانسەری چەندین جۆردا بگۆڕدرێن. دەستکاریکەرەکان هەمیشە پێویست نین، بۆیە دڵنیابە کە لە ڕاستیدا دێڕەکانی کۆد پاشەکەوت دەکەیت و ڕێگری لە سەرپێچی ناپێویست دەکەیت لە کاتی دروستکردنیاندا. نموونەی باشی دەستکاریکەرەکان بریتین لە پۆلەکانی ڕەنگی تەوەرەکانمان و جۆرەکانی قەبارە.

پێوەرەکانی z-index

لە Bootstrap دوو z-indexپێوەر هەیە- توخمەکانی ناو پێکهاتەیەک و پێکهاتەکانی سەرپۆش.

توخمە پێکهاتەکان

• هەندێک لە پێکهاتەکان لە Bootstrap بە توخمەکانی سەریەککەوتوو دروستکراون بۆ ڕێگریکردن لە دوو سنوور بەبێ دەستکاریکردنی borderتایبەتمەندییەکە. بۆ نموونە گروپی دوگمەکان، گروپەکانی چوونەژوورەوە و لاپەڕەسازی.
• ئەم پێکهاتانە z-indexپێوەرێکی ستانداردیان هەیە لە 0ڕێگەی 3.
• 0بە پێشوەختە (سەرەتایە)، 1یە :hover، / 2یە ، و .:active.active3:focus
• ئەم ڕێبازە لەگەڵ چاوەڕوانییەکانماندا دەگونجێت لە بەرزترین ئەولەویەتی بەکارهێنەر. ئەگەر توخمێک فۆکەس بێت، ئەوا لە ڕوانگە و لە سەرنجی بەکارهێنەردایە. توخمە چالاکەکان دووەم بەرزترینن چونکە ئاماژە بە دۆخ دەکەن. هۆڤەر سێیەم بەرزترینە چونکە ئاماژەیە بۆ مەبەستی بەکارهێنەر، بەڵام نزیکەی هەر شتێک دەتوانرێت هۆڤەر بکرێت.

پێکهاتەکانی سەرپۆشکردن

بووتستراپ چەند پێکهاتەیەک لەخۆدەگرێت کە وەکو ئۆڤەرلاییەک لە جۆرێک کاردەکەن. ئەمەش بریتییە لە، بە رێکوپێکی بەرزترین z-index, دابەزینەکان، navbar جێگیر و چەسپاو، مۆداڵەکان، ئامرازەکان، و popovers. z-indexئەم پێکهاتانە پێوەرێکی تایبەت بە خۆیان هەیە کە لە 1000. ئەم ژمارە سەرەتاییە بە ئارەزووی خۆت هەڵبژێردرا و وەکو بافەرێکی بچووک لە نێوان ستایلەکانمان و ستایلە تایبەتەکانی پڕۆژەکەتدا کاردەکات.

هەر پێکهاتەیەکی سەرپۆش z-indexبەهاکەی کەمێک زیاد دەکات بە شێوەیەک کە بنەما باوەکانی UI ڕێگە بە توخمە تەرکیزکراوەکانی بەکارهێنەر یان هەڵواسراو دەدەن لە هەموو کاتێکدا لە دیمەندا بمێننەوە. بۆ نموونە مۆداڵێک بریتییە لە بلۆککردنی بەڵگەنامە (بۆ نموونە، ناتوانیت هیچ کردارێکی تر ئەنجام بدەیت جگە لە کردارەکەی مۆداڵەکە)، بۆیە ئێمە ئەوە لە سەرووی navbarەکانمانەوە دادەنێین.

زیاتر لەم بارەیەوە لە z-indexلاپەڕەی نەخشەسازیمان بزانە .

HTML و CSS لەسەر JS

هەرکاتێک بتوانین پێمان باشە HTML و CSS بنووسین لەسەر جاڤاسکڕێپت. بەگشتی HTML و CSS زیاتر بەرهەمدارن و دەستڕاگەیشتنیان بە کەسانی زیاترە لە هەموو ئاستە جیاوازەکانی ئەزموون. هەروەها HTML و CSS لە وێبگەڕەکەتدا خێراترن لە جاڤاسکڕێپت و وێبگەڕەکەت بەگشتی کارایییەکی زۆرت بۆ دابین دەکات.

ئەم بنەمایە API ی جاڤاسکڕێپتی پلە یەکەمی ئێمەیە کە dataتایبەتمەندی بەکاردەهێنێت. پێویست ناکات نزیکەی هیچ جاڤاسکڕێپتێک بنووسیت بۆ بەکارهێنانی پێوەکراوەکانی جاڤاسکڕێپتەکانمان؛ لەبری ئەوە HTML بنووسە. زیاتر لەم بارەیەوە لە لاپەڕەی تێڕوانینی گشتی جاڤاسکڕێپتمان بخوێنەرەوە .

لە کۆتاییدا، ستایلەکانمان لەسەر ڕەفتارە بنەڕەتییەکانی توخمە باوەکانی وێب بنیات دەنێت. هەرکاتێک بتوانین، ئێمە پێمان باشە ئەو شتانە بەکاربهێنین کە وێبگەڕەکە دابینی دەکات. بۆ نموونە دەتوانیت .btnپۆلێک لەسەر نزیکەی هەر توخمێک دابنێیت، بەڵام زۆربەی توخمەکان هیچ بەهایەکی مانادار یان کارایی وێبگەڕێک دابین ناکەن. بۆیە لەبری ئەوە <button>s و <a>s بەکاردەهێنین.

هەروەها بۆ پێکهاتە ئاڵۆزترەکان. لە کاتێکدا دەتوانین پێوەکراوەکەی خۆمان بنووسین بۆ چەسپاندنی فۆڕم بۆ زیادکردنی پۆلەکان بۆ توخمێکی باوک بە پشتبەستن بە دۆخی ئینپوتێک، بەمەش ڕێگەمان پێدەدات دەقەکە ستایل بکەین بڵێین سوور، ئێمە پێمان باشە ئەو :valid/ :invalidpseudo-elements بەکاربهێنین کە هەموو وێبگەڕێک بۆمان دابین دەکات.

خزمەتگوزارییەکان

پۆلەکانی سوودمەندی- پێشتر یارمەتیدەر بوون لە Bootstrap 3- هاوپەیمانێکی بەهێزن لە بەرەنگاربوونەوەی CSS bloat و خراپی کارایی لاپەڕەکان. پۆلێکی سوودبەخش بە شێوەیەکی گشتی تاکە جووتبوونی تایبەتمەندی-بەهای نەگۆڕە کە وەک پۆلێک دەربڕدراوە (بۆ نموونە، .d-blockنوێنەرایەتی دەکات display: block;). سەرنجڕاکێشی سەرەکی ئەوان خێرایی بەکارهێنانە لەکاتی نووسینی HTML و سنووردارکردنی بڕی CSSی تایبەت کە دەبێت بینووسیت.

بە تایبەتی سەبارەت بە CSSی تایبەت، سوودمەندیەکان دەتوانن یارمەتیدەر بن لە بەرەنگاربوونەوەی زیادبوونی قەبارەی پەڕگە بە کەمکردنەوەی باوترین جووتەکانی بەهای تایبەتمەندی دووبارەبووەوەتان بۆ تاکە پۆل. ئەمەش دەتوانێت کاریگەرییەکی دراماتیکی هەبێت لە قەبارەدا لە پڕۆژەکانتدا.

HTML ی نەرم و نیان

لە کاتێکدا هەمیشە ناتوانرێت، ئێمە هەوڵدەدەین لە پێویستیەکانی HTML بۆ پێکهاتەکاندا زۆر دۆگماتیک نەبین. بەم شێوەیە، ئێمە سەرنج دەخەینە سەر پۆلە تاکەکان لە هەڵبژێرەری CSS ی ئێمەدا و هەوڵ دەدەین خۆمان لە هەڵبژێرەری دەستبەجێی منداڵان بەدوور بگرین ( >). ئەمەش نەرمی زیاترت پێدەبەخشێت لە جێبەجێکردنەکەتدا و یارمەتیدەرە بۆ ئەوەی CSS ـەکەمان سادەتر و کەمتر تایبەت بێت.

ڕێکەوتننامەکانی کۆد

ڕێبەری کۆد (لە هاوبەشی دروستکەری Bootstrap، @mdo) بەڵگەنامە دەکات کە چۆن HTML و CSS ـمان دەنووسین لە سەرانسەری Bootstrap. ڕێنماییەکان بۆ فۆرماتکردنی گشتی، پێشوەختەی عەقڵی ساغ، ڕێکخستنی تایبەتمەندی و تایبەتمەندی و زۆر شتی تر دیاری دەکات.

ئێمە Stylelint بەکاردەهێنین بۆ جێبەجێکردنی ئەم ستانداردانە و زۆر شتی تر لە Sass/CSS ـماندا. ڕێکخستنی تایبەتمەندی Stylelint ی ئێمە سەرچاوە کراوە و بەردەستە بۆ ئەوەی کەسانی تر بەکاری بهێنن و درێژ بکەنەوە.

ئێمە vnu-jar بەکاردەهێنین بۆ جێبەجێکردنی HTML ستاندارد و مانادار، هەروەها دیاریکردنی هەڵە باوەکان.