in English

روش

د لارښود اصولو، ستراتیژیو او تخنیکونو په اړه زده کړئ چې د بوټسټریپ جوړولو او ساتلو لپاره کارول کیږي نو تاسو کولی شئ په اسانۍ سره خپل ځان تنظیم او پراخ کړئ.

پداسې حال کې چې پیل شوي پاڼې د پروژې ابتدايي سفر وړاندې کوي او هغه څه چې دا وړاندیز کوي، دا سند په دې تمرکز کوي چې ولې موږ هغه کارونه کوو چې موږ یې په بوټسټراپ کې کوو. دا په ویب کې د جوړولو لپاره زموږ فلسفه تشریح کوي ترڅو نور له موږ څخه زده کړي، زموږ سره مرسته وکړي، او زموږ سره مرسته وکړي.

یو څه وګورئ چې سم نه ښکاري، یا شاید ښه ترسره شي؟ یوه مسله پرانیزئ - موږ خوښ یو چې له تاسو سره یې بحث وکړو.

لنډیز

موږ به د دې هر یو په اوږدو کې ډوب کړو، مګر په لوړه کچه، دلته هغه څه دي چې زموږ چلند ته لارښوونه کوي.

  • اجزا باید ځواب ویونکي او ګرځنده وي - لومړی
  • اجزا باید د بیس کلاس سره جوړ شي او د ترمیم کونکي ټولګیو له لارې پراخ شي
  • د اجزاو ریاستونه باید د عام Z-index پیمانه اطاعت وکړي
  • هرکله چې امکان ولري، د جاواسکریپټ په اړه د HTML او CSS تطبیق ته ترجیح ورکړئ
  • هرکله چې امکان ولري، په دودیز سټایلونو کې اسانتیاوې وکاروئ
  • هرکله چې امکان ولري، د سخت HTML اړتیاو پلي کولو څخه ډډه وکړئ (د ماشومانو انتخاب کونکي)

ځواب ورکوونکی

د بوټسټریپ ځواب ویونکي سټایلونه د ځواب ویونکي کیدو لپاره رامینځته شوي ، داسې طریقه چې ډیری وختونه د ګرځنده - لومړی په نوم یادیږي . موږ دا اصطلاح په خپلو اسنادو کې کاروو او په لویه کچه ورسره موافق یو، مګر ځینې وختونه دا خورا پراخه کیدی شي. پداسې حال کې چې هره برخه باید په بوټسټریپ کې په بشپړ ډول ځواب ویونکي نه وي، دا ځواب ورکوونکي طریقه د CSS د کمولو په اړه ده چې تاسو د سټایلونو اضافه کولو لپاره فشار راوړي ځکه چې د لید پورټ لوی کیږي.

د بوټسټریپ په اوږدو کې ، تاسو به دا زموږ د رسنیو پوښتنو کې خورا روښانه وګورئ. په ډیری قضیو کې، موږ هغه min-widthپوښتنې کاروو چې په یو ځانګړي وقفه کې پلي کیږي او د لوړو وقفو پوائنټونو له لارې پرمخ ځي. د مثال په توګه، یو له انفینٹی .d-noneڅخه پلي کیږي. min-width: 0له بلې خوا، .d-md-noneد منځنۍ وقفې او پورته څخه پلي کیږي.

ځینې ​​​​وختونه موږ به وکاروو max-widthکله چې د یوې برخې اصلي پیچلتیا ورته اړتیا ولري. ځینې ​​​​وختونه، دا نظرونه په فعاله او ذهني توګه زموږ د برخو څخه د اصلي فعالیت بیا لیکلو په پرتله د پلي کولو او ملاتړ لپاره روښانه دي. موږ هڅه کوو چې دا طریقه محدوده کړو، مګر وخت په وخت به یې کاروو.

ټولګي

زموږ د ریبوټ سربیره ، د کراس براوزر نورمال کولو سټایل شیټ ، زموږ ټول سټایلونه د انتخاب کونکو په توګه د ټولګیو کارول دي. دا پدې مانا ده چې د ډول ټاکونکو (د بیلګې په توګه، input[type="text"]) او بهر د والدینو ټولګیو (لکه، .parent .child) څخه پاک چلول چې سټایلونه خورا ځانګړي کوي چې په اسانۍ سره پورته شي.

د دې په څیر، اجزا باید د اساس طبقې سره جوړ شي چې عام کورونه ولري، د ملکیت ارزښت جوړه جوړه نه وي. د مثال په توګه، .btnاو .btn-primary. موږ .btnد ټولو عام سټایلونو لکه display، padding، او لپاره کاروو border-width. بیا موږ ترمیم کونکي کاروو لکه .btn-primaryرنګ ، شالید رنګ ، سرحد رنګ ، او داسې نور.

د بدلون کونکي ټولګي باید یوازې هغه وخت وکارول شي کله چې ډیری ملکیتونه یا ارزښتونه شتون ولري چې په ډیری ډولونو کې بدل شي. تعدیل کونکي تل اړین ندي ، نو ډاډه اوسئ چې تاسو واقعیا د کوډ لینونه خوندي کوئ او د رامینځته کولو پرمهال د غیر ضروري اوورایډونو مخه ونیسئ. د ترمیم کونکو ښه مثالونه زموږ د موضوع رنګ ټولګي او د اندازې ډولونه دي.

د z-index ترازو

z-indexپه بوټسټریپ کې دوه پیمانه شتون لري — عناصر د یوې برخې دننه او پوښښ اجزاو کې.

د اجزاو عناصر

  • په بوټسټریپ کې ځینې برخې د borderملکیت بدلولو پرته د دوه ګوني سرحدونو مخنیوي لپاره د متقابل عناصرو سره جوړ شوي. د مثال په توګه، د تڼۍ ګروپونه، د ننوتلو ګروپونه، او پاڼه کول.
  • دا اجزاوې د لارې په معیاري z-indexپیمانه شریکوي .03
  • 0ډیفالټ (ابتدايي) دی، 1دی :hover، 2دی :active/ .active، او 3دی :focus.
  • دا طریقه زموږ د لوړ کاروونکي لومړیتوبونو تمه لري. که یو عنصر متمرکز وي، دا په نظر کې دی او د کاروونکي پام کې دی. فعال عناصر دوهم لوړ دي ځکه چې دوی حالت څرګندوي. هور دریم لوړ دی ځکه چې دا د کارونکي اراده په ګوته کوي، مګر نږدې هر څه ځړول کیدی شي.

د اجزاو پوښل

بوټسټریپ کې ډیری برخې شاملې دي چې د یو ډول پوښښ په توګه کار کوي. پدې کې شامل دي، په ترتیب سره د لوړ z-index، ډراپ ډاون، ثابت او چپکونکي نیوبارز، موډلونه، اوزار ټایپونه، او پاپورونه. دا اجزا خپله z-indexپیمانه لري چې په پیل کې پیل کیږي 1000. دا پیل شوی شمیره په خپله خوښه غوره شوې او زموږ د سټایلونو او ستاسو د پروژې دودیز سټایلونو ترمینځ د کوچني بفر په توګه کار کوي.

هر پوښښ برخه خپل z-indexارزښت یو څه په داسې ډول ډیروي چې د UI عام اصول اجازه ورکوي چې کاروونکي تمرکز یا ځړول شوي عناصر هر وخت په نظر کې پاتې شي. د مثال په توګه، یو موډل د اسنادو بلاک کول دي (د مثال په توګه، تاسو د موډل د عمل لپاره هیڅ کوم بل کار نه شی کولی)، نو موږ دا زموږ د نیوبارونو څخه پورته کیښود.

z-indexد ‏‎‎‏ پاڼې اړوند نور معلومات په فسبوک کې اوګورئ

HTML او CSS په JS کې

هرکله چې امکان ولري، موږ غوره کوو چې په جاواسکریپټ کې HTML او CSS ولیکئ. په عموم کې، HTML او CSS د ټولو مختلفو تجربو کچو ډیرو خلکو ته ډیر ګټور او د لاسرسي وړ دي. HTML او CSS ستاسو په براوزر کې د JavaScript په پرتله ګړندي دي، او ستاسو براوزر عموما ستاسو لپاره خورا لوی فعالیت چمتو کوي.

دا اصل زموږ د لومړۍ درجې جاوا سکریپټ API دی چې د dataځانګړتیاوو په کارولو سره. تاسو اړتیا نلرئ زموږ د جاواسکریپټ پلگ انونو کارولو لپاره نږدې کوم جاواسکریپټ ولیکئ؛ پرځای یې، HTML ولیکئ. د دې په اړه نور معلومات زموږ په جاواسکریپټ کتنه پاڼه کې ولولئ .

په نهایت کې ، زموږ سټایلونه د عام ویب عناصرو بنسټیزو چلندونو باندې رامینځته کیږي. هرکله چې امکان ولري، موږ غوره کوو هغه څه وکاروو چې براوزر یې چمتو کوي. د مثال په توګه، تاسو کولی شئ .btnپه نږدې هر عنصر کې ټولګي واچوئ، مګر ډیری عناصر هیڅ سیمانټیک ارزښت یا د براوزر فعالیت نه وړاندې کوي. نو پرځای یې، موږ <button>s او <a>s کاروو.

ورته د ډیرو پیچلو برخو لپاره ځي. پداسې حال کې چې موږ کولی شو خپل د فورمې تایید کولو پلگ ان د ان پټ حالت پراساس په اصلي عنصر کې ټولګي اضافه کولو لپاره ولیکو ، پدې توګه موږ ته اجازه راکوي متن سټایل کړو چې سور ووایی ، موږ غوره کوو چې هر براوزر موږ ته د :valid/ :invalidpseudo-عناصرو کارولو ته ترجیح ورکوي.

اسانتیاوې

د کارونې ټولګي — پخوا په بوټسټریپ 3 کې مرسته کونکي — د CSS بلوټ او د مخ ضعیف فعالیت سره مبارزه کې قوي متحد دي. د یوټیلټي کلاس په عموم ډول یو واحد ، د بدلیدونکي ملکیت ارزښت جوړه ده چې د ټولګي په توګه څرګندیږي (د مثال په توګه ، .d-blockاستازیتوب کوي display: block;). د دوی لومړني اپیل د HTML لیکلو پرمهال د کارونې سرعت دی او د دودیز CSS مقدار محدود کول چې تاسو یې باید ولیکئ.

په ځانګړې توګه د دودیز CSS په اړه، اسانتیاوې کولی شي د فایل اندازې زیاتوالي سره مبارزه کې مرسته وکړي چې ستاسو ډیری عام تکرار شوي ملکیت ارزښت جوړونه په واحد ټولګیو کې کم کړي. دا کولی شي ستاسو په پروژو کې په پیمانه ډراماتیک اغیزه ولري.

انعطاف وړ HTML

پداسې حال کې چې تل ممکنه نه وي، موږ هڅه کوو چې د اجزاوو لپاره زموږ د HTML اړتیاوو کې د ډیر باوري کیدو څخه مخنیوی وکړو. په دې توګه، موږ په خپلو CSS انتخاب کونکو کې په واحد ټولګیو تمرکز کوو او هڅه کوو چې د ماشومانو سمدستي انتخاب کونکو څخه مخنیوی وکړو ( >). دا تاسو ته ستاسو په پلي کولو کې ډیر انعطاف درکوي او زموږ د CSS ساده او لږ مشخص ساتلو کې مرسته کوي.

د کوډ کنوانسیونونه

د کوډ لارښود (د بوټسټریپ شریک جوړونکي څخه ، @mdo) سندونه چې موږ څنګه خپل HTML او CSS په بوټسټریپ کې لیکو. دا د عمومي فارمیټ کولو لپاره لارښوونې مشخصوي، د عام احساس ډیفالټ، ملکیت او د ځانګړتیا امرونه، او نور.

موږ سټایلینټ کاروو ترڅو دا معیارونه پلي کړو او نور زموږ په Sass/CSS کې. زموږ دودیز سټایلینټ تشکیل خلاص سرچینه ده او د نورو کارولو او غزولو لپاره شتون لري.

موږ د معیاري او سیمانټیک HTML پلي کولو لپاره vnu-jar کاروو ، او همدارنګه د عام غلطیو کشف کول.