رویکرد

در مورد اصول راهنما، استراتژی‌ها و تکنیک‌های مورد استفاده برای ساخت و نگهداری Bootstrap بیاموزید تا بتوانید راحت‌تر آن را شخصی‌سازی و گسترش دهید.

در حالی که صفحات شروع یک تور مقدماتی از پروژه و آنچه ارائه می دهد ارائه می دهند، این سند بر این تمرکز دارد که چرا کارهایی را که در بوت استرپ انجام می دهیم انجام می دهیم. این فلسفه ما را برای ساختن بر روی وب توضیح می دهد تا دیگران بتوانند از ما یاد بگیرند، با ما همکاری کنند و به ما در پیشرفت کمک کنند.

چیزی را می بینید که درست به نظر نمی رسد، یا شاید بتوان آن را بهتر انجام داد؟ یک موضوع را باز کنید — مایلیم در مورد آن با شما بحث کنیم.

خلاصه

ما در سرتاسر هر یک از این موارد را بیشتر بررسی خواهیم کرد، اما در سطح بالا، در اینجا چیزی است که رویکرد ما را راهنمایی می کند.

• کامپوننت‌ها باید واکنش‌گرا باشند و در ابتدا برای موبایل باشند
• کامپوننت ها باید با یک کلاس پایه ساخته شوند و از طریق کلاس های اصلاح کننده گسترش یابند
• حالت های مولفه باید از یک مقیاس شاخص z مشترک پیروی کنند
• در صورت امکان، اجرای HTML و CSS را به جاوا اسکریپت ترجیح دهید
• در صورت امکان، از برنامه های کاربردی به جای سبک های سفارشی استفاده کنید
• در صورت امکان، از اجرای الزامات سختگیرانه HTML خودداری کنید (انتخاب کنندگان کودکان)

پاسخگو

سبک‌های واکنش‌گرای Bootstrap به گونه‌ای طراحی شده‌اند که واکنش‌گرا باشند، رویکردی که اغلب از آن به عنوان اولین موبایل یاد می‌شود . ما از این اصطلاح در اسناد خود استفاده می کنیم و تا حد زیادی با آن موافقیم، اما گاهی اوقات ممکن است خیلی گسترده باشد. در حالی که هر مؤلفه نباید به طور کامل در بوت استرپ پاسخگو باشد، این رویکرد پاسخگو در مورد کاهش نادیده گرفتن CSS با فشار دادن شما به اضافه کردن سبک ها با بزرگتر شدن نمای دید است.

در سراسر Bootstrap، این را به وضوح در پرسش‌های رسانه‌ای ما خواهید دید. در بیشتر موارد، ما از min-widthپرس‌و‌جوهایی استفاده می‌کنیم که در یک نقطه شکست خاص شروع به اعمال می‌کنند و تا نقاط شکست بالاتر ادامه می‌یابند. به عنوان مثال، a .d-noneاز تا بی نهایت اعمال min-width: 0می شود. از طرف دیگر، a .d-md-noneاز نقطه شکست متوسط ​​به بالا اعمال می شود.

در مواقعی از آن استفاده خواهیم max-widthکرد که پیچیدگی ذاتی یک جزء به آن نیاز داشته باشد. گاهی اوقات، اجرای و پشتیبانی از این لغوها از نظر عملکردی و ذهنی واضح تر از بازنویسی عملکرد اصلی از اجزای ما است. ما تلاش می کنیم این رویکرد را محدود کنیم، اما هر از گاهی از آن استفاده خواهیم کرد.

کلاس ها

جدا از راه‌اندازی مجدد، یک شیوه‌نامه عادی سازی متقابل مرورگر، هدف همه سبک‌های ما استفاده از کلاس‌ها به عنوان انتخابگر است. این به معنای دوری از انتخابگرهای نوع (مثلاً input[type="text"]) و کلاس‌های والد خارجی (مثلاً .parent .child) است که سبک‌ها را خیلی خاص می‌کند و به راحتی قابل لغو نیست.

به این ترتیب، کامپوننت‌ها باید با یک کلاس پایه ساخته شوند که جفت‌های دارایی-مقدار مشترک و غیرقابل رد شدن را در خود جای دهد. به عنوان مثال، .btnو .btn-primary. ما .btnبرای تمام سبک های رایج مانند display، paddingو و border-widthاستفاده می کنیم. سپس از اصلاح کننده هایی مانند .btn-primaryاضافه کردن رنگ، رنگ پس زمینه، رنگ حاشیه و غیره استفاده می کنیم.

کلاس‌های اصلاح‌کننده فقط زمانی باید استفاده شوند که چندین ویژگی یا مقادیر برای تغییر در چندین متغیر وجود داشته باشد. اصلاح‌کننده‌ها همیشه ضروری نیستند، بنابراین مطمئن شوید که در واقع خطوط کد را ذخیره می‌کنید و هنگام ایجاد آنها از لغو غیرضروری جلوگیری می‌کنید. نمونه‌های خوب اصلاح‌کننده‌ها، کلاس‌های رنگ تم و انواع سایز ما هستند.

مقیاس های شاخص z

دو z-indexمقیاس در Bootstrap وجود دارد - عناصر درون یک جزء و اجزای همپوشانی.

عناصر جزء

• برخی از مؤلفه‌ها در بوت استرپ با عناصر همپوشانی ساخته شده‌اند تا از مرزهای دوگانه بدون تغییر borderویژگی جلوگیری کنند. به عنوان مثال، گروه های دکمه، گروه های ورودی و صفحه بندی.
• این مؤلفه‌ها یک z-indexمقیاس استاندارد از 0طریق اشتراک 3دارند.
• 0پیش فرض (ابتدایی) 1است :hover، / 2است و است .:active.active3:focus
• این رویکرد با انتظارات ما از بالاترین اولویت کاربر مطابقت دارد. اگر عنصری فوکوس شده باشد، در دید و توجه کاربر است. عناصر فعال در رتبه دوم قرار دارند زیرا آنها حالت را نشان می دهند. Hover سومین بالاترین رتبه را دارد زیرا نشان دهنده قصد کاربر است، اما تقریباً هر چیزی را می توان نگه داشت.

اجزای پوشش

بوت استرپ شامل چندین مؤلفه است که به نوعی به عنوان یک پوشش عمل می کنند. این شامل، به ترتیب بالاترین z-index، بازشوها، نوارهای ناوبری ثابت و چسبنده، مدال‌ها، راهنمای ابزار و پاپ‌اورها می‌شود. z-indexاین مولفه ها مقیاس خاص خود را دارند که از 1000. این شماره شروع به صورت دلخواه انتخاب شده است و به عنوان یک بافر کوچک بین سبک های ما و سبک های سفارشی پروژه شما عمل می کند.

هر مؤلفه همپوشانی z-indexمقدار خود را اندکی افزایش می دهد به گونه ای که اصول مشترک رابط کاربری اجازه می دهد تا عناصر متمرکز یا شناور شده توسط کاربر همیشه در معرض دید باقی بمانند. به عنوان مثال، یک مدال، سند را مسدود می‌کند (مثلاً، شما نمی‌توانید هیچ اقدام دیگری را به جز اقدام مدال انجام دهید)، بنابراین ما آن را بالای نوارهای ناوبری خود قرار می‌دهیم.

z-indexدر صفحه طرح ما در مورد این بیشتر بیاموزید .

HTML و CSS روی JS

در صورت امکان، ترجیح می دهیم HTML و CSS را به جاوا اسکریپت بنویسیم. به طور کلی، HTML و CSS برای افراد بیشتری در سطوح مختلف تجربه پرکارتر و قابل دسترسی هستند. HTML و CSS نیز در مرورگر شما سریعتر از جاوا اسکریپت هستند و مرورگر شما به طور کلی عملکرد زیادی را برای شما فراهم می کند.

این اصل API جاوا اسکریپت کلاس اول ما با استفاده از dataویژگی ها است. برای استفاده از افزونه های جاوا اسکریپت ما نیازی به نوشتن تقریباً هیچ جاوا اسکریپتی ندارید. در عوض، HTML بنویسید. در صفحه مرور کلی جاوا اسکریپت ما درباره این موضوع بیشتر بخوانید .

در نهایت، سبک های ما بر اساس رفتارهای اساسی عناصر رایج وب است. در صورت امکان، ما ترجیح می دهیم از آنچه مرورگر ارائه می دهد استفاده کنیم. برای مثال، می‌توانید .btnتقریباً روی هر عنصری یک کلاس قرار دهید، اما اکثر عناصر هیچ ارزش معنایی یا عملکرد مرورگر را ارائه نمی‌کنند. بنابراین در عوض از <button>s و s استفاده می کنیم <a>.

همین امر در مورد اجزای پیچیده تر نیز صدق می کند. در حالی که می‌توانیم افزونه اعتبارسنجی فرم خودمان را بنویسیم تا کلاس‌ها را بر اساس وضعیت ورودی به عنصر والد اضافه کنیم، در نتیجه به ما اجازه می‌دهیم متن را قرمز کنیم، ترجیح می‌دهیم از عناصر شبه :valid/ استفاده کنیم که هر مرورگر در اختیار ما قرار می‌دهد.:invalid

خدمات رفاهی

کلاس‌های Utility - که قبلاً در Bootstrap 3 یاری می‌کردند - یک متحد قدرتمند در مبارزه با نفخ CSS و عملکرد ضعیف صفحه هستند. یک کلاس کاربردی معمولاً یک جفت ویژگی-مقدار منفرد و تغییرناپذیر است که به صورت یک کلاس بیان می‌شود (مثلاً .d-blockنشان می‌دهد display: block;). جذابیت اصلی آنها سرعت استفاده در هنگام نوشتن HTML و محدود کردن مقدار CSS سفارشی برای نوشتن است.

به طور خاص در مورد CSS سفارشی، ابزارهای کمکی می‌توانند با کاهش متداول‌ترین جفت‌های ویژگی-مقدار تکراری شما در کلاس‌های منفرد، به مبارزه با افزایش اندازه فایل کمک کنند. این می تواند تأثیر چشمگیری در مقیاس در پروژه های شما داشته باشد.

HTML انعطاف پذیر

در حالی که همیشه امکان پذیر نیست، ما سعی می کنیم در الزامات HTML خود برای مؤلفه ها از تعصب بیش از حد اجتناب کنیم. بنابراین، ما روی کلاس‌های تکی در انتخابگرهای CSS خود تمرکز می‌کنیم و سعی می‌کنیم از انتخابگرهای فوری کودکان اجتناب کنیم ( >). این به شما انعطاف‌پذیری بیشتری در پیاده‌سازی می‌دهد و کمک می‌کند CSS ما ساده‌تر و کمتر خاص باشد.

قراردادهای کد

راهنمای کد (از سازنده بوت استرپ، @mdo) نحوه نوشتن HTML و CSS خود را در بوت استرپ مستند می کند. دستورالعمل‌هایی را برای قالب‌بندی کلی، پیش‌فرض‌های عقل سلیم، سفارش‌های ویژگی‌ها و ویژگی‌ها و موارد دیگر مشخص می‌کند.

ما از Stylelint برای اجرای این استانداردها و موارد دیگر در Sass/CSS خود استفاده می کنیم. پیکربندی سفارشی Stylelint ما منبع باز است و برای استفاده و گسترش دیگران در دسترس است.

ما از vnu-jar برای اجرای HTML استاندارد و معنایی و همچنین شناسایی خطاهای رایج استفاده می کنیم.