بررسی اجمالی

مؤلفه‌ها و گزینه‌هایی برای طرح‌بندی پروژه Bootstrap شما، از جمله ظروف بسته‌بندی، یک سیستم شبکه قدرتمند، یک شی رسانه انعطاف‌پذیر، و کلاس‌های کاربردی پاسخگو.

ظروف

کانتینرها اساسی ترین عنصر چیدمان در بوت استرپ هستند و هنگام استفاده از سیستم شبکه پیش فرض ما مورد نیاز هستند . یک ظرف پاسخگو و با عرض ثابت (به معنای max-widthتغییرات آن در هر نقطه شکست) یا با عرض سیال (به این معنی که همیشه 100%گسترده است) را انتخاب کنید.

در حالی که ظروف را می توان تو در تو قرار داد، اما اکثر چیدمان ها به ظرف تو در تو نیاز ندارند.

<div class="container">
  <!-- Content here -->
</div>

برای .container-fluidیک کانتینر با عرض کامل استفاده کنید، که کل عرض درگاه دید را در بر می گیرد.

<div class="container-fluid">
  ...
</div>

نقاط شکست پاسخگو

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

بوت استرپ در درجه اول از محدوده پرس و جو رسانه زیر - یا نقاط شکست - در فایل های Sass منبع ما برای طرح، سیستم شبکه و اجزای ما استفاده می کند.

// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

از آنجایی که ما CSS منبع خود را در Sass می نویسیم، تمام درخواست های رسانه ای ما از طریق میکس های Sass در دسترس هستند:

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example usage:
@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

ما گهگاه از پرسش‌های رسانه‌ای استفاده می‌کنیم که در جهت دیگر هستند (اندازه صفحه نمایش داده شده یا کوچکتر ):

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

بار دیگر، این پرسش‌های رسانه‌ای از طریق میکس‌های Sass نیز در دسترس هستند:

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }

همچنین پرسش‌های رسانه‌ای و ترکیب‌هایی برای هدف قرار دادن یک بخش واحد از اندازه‌های صفحه با استفاده از حداقل و حداکثر عرض نقطه شکست وجود دارد.

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

این پرسش‌های رسانه‌ای از طریق میکس‌های Sass نیز در دسترس هستند:

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }

به طور مشابه، پرس و جوهای رسانه ممکن است چندین عرض نقطه شکست را شامل شوند:

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }

میکس Sass برای هدف قرار دادن محدوده اندازه صفحه یکسان خواهد بود:

@include media-breakpoint-between(md, xl) { ... }

شاخص Z

چندین مؤلفه Bootstrap از z-indexویژگی CSS استفاده می کنند که با ارائه یک محور سوم برای مرتب کردن محتوا به کنترل طرح بندی کمک می کند. ما از یک مقیاس پیش‌فرض z-index در Bootstrap استفاده می‌کنیم که برای لایه‌بندی مناسب ناوبری، راهنمای ابزار و پاپ‌اور، مدال و موارد دیگر طراحی شده است.

این مقادیر بالاتر از یک عدد دلخواه شروع می شوند، به اندازه کافی بالا و خاص که به طور ایده آل از تضاد جلوگیری می کند. ما به مجموعه‌ای استاندارد از این موارد در اجزای لایه‌ای خود نیاز داریم - راهنمایی‌های ابزار، پاپ‌اورها، نوارهای ناوبری، بازشوها، مدال‌ها - بنابراین می‌توانیم در رفتارها به طور منطقی سازگار باشیم. دلیلی وجود ندارد که از 100+ یا + استفاده نکنیم 500.

ما سفارشی سازی این ارزش های فردی را تشویق نمی کنیم. اگر یکی را تغییر دهید، احتمالاً باید همه آنها را تغییر دهید.

$zindex-dropdown:          1000 !default;
$zindex-sticky:            1020 !default;
$zindex-fixed:             1030 !default;
$zindex-modal-backdrop:    1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;

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