رویکرد

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

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

خلاصه

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

• کامپوننت‌ها باید واکنش‌گرا باشند و در ابتدا برای موبایل باشند
• کامپوننت ها باید با یک کلاس پایه ساخته شوند و از طریق کلاس های اصلاح کننده گسترش یابند
• حالت های مولفه باید از یک مقیاس شاخص 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 سومین بالاترین رتبه را دارد زیرا نشان دهنده قصد کاربر است، اما تقریباً هر چیزی را می توان نگه داشت.

اجزای پوشش

Bootstrap includes several components that function as an overlay of some kind. This includes, in order of highest z-index, dropdowns, fixed and sticky navbars, modals, tooltips, and popovers. These components have their own z-index scale that begins at 1000. This starting number was chosen arbitrarily and serves as a small buffer between our styles and your project’s custom styles.

Each overlay component increases its z-index value slightly in such a way that common UI principles allow user focused or hovered elements to remain in view at all times. For example, a modal is document blocking (e.g., you cannot take any other action save for the modal’s action), so we put that above our navbars.

Learn more about this in our z-index layout page.

HTML and CSS over JS

Whenever possible, we prefer to write HTML and CSS over JavaScript. In general, HTML and CSS are more prolific and accessible to more people of all different experience levels. HTML and CSS are also faster in your browser than JavaScript, and your browser generally provides a great deal of functionality for you.

This principle is our first-class JavaScript API using data attributes. You don’t need to write nearly any JavaScript to use our JavaScript plugins; instead, write HTML. Read more about this in our JavaScript overview page.

Lastly, our styles build on the fundamental behaviors of common web elements. Whenever possible, we prefer to use what the browser provides. For example, you can put a .btn class on nearly any element, but most elements don’t provide any semantic value or browser functionality. So instead, we use <button>s and <a>s.

The same goes for more complex components. While we could write our own form validation plugin to add classes to a parent element based on an input’s state, thereby allowing us to style the text say red, we prefer using the :valid/:invalid pseudo-elements every browser provides us.

Utilities

Utility classes—formerly helpers in Bootstrap 3—are a powerful ally in combating CSS bloat and poor page performance. A utility class is typically a single, immutable property-value pairing expressed as a class (e.g., .d-block represents display: block;). Their primary appeal is speed of use while writing HTML and limiting the amount of custom CSS you have to write.

Specifically regarding custom CSS, utilities can help combat increasing file size by reducing your most commonly repeated property-value pairs into single classes. This can have a dramatic effect at scale in your projects.

Flexible HTML

While not always possible, we strive to avoid being overly dogmatic in our HTML requirements for components. Thus, we focus on single classes in our CSS selectors and try to avoid immediate children selectors (>). This gives you more flexibility in your implementation and helps keep our CSS simpler and less specific.

Code conventions

Code Guide (from Bootstrap co-creator, @mdo) documents how we write our HTML and CSS across Bootstrap. It specifies guidelines for general formatting, common sense defaults, property and attribute orders, and more.

We use Stylelint to enforce these standards and more in our Sass/CSS. Our custom Stylelint config is open source and available for others to use and extend.

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