بررسی اجمالی

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

ظروف

کانتینرها اساسی ترین عنصر چیدمان در بوت استرپ هستند و هنگام استفاده از سیستم شبکه پیش فرض ما مورد نیاز هستند . کانتینرها برای محتوی، بالشتک کردن و (گاهی) وسط محتوای درون خود استفاده می شوند. در حالی که ظروف را می توان تو در تو قرار داد، اما اکثر چیدمان ها به ظرف تو در تو نیاز ندارند.

Bootstrap دارای سه کانتینر مختلف است:

• .container، که max-widthدر هر نقطه شکست پاسخگو یک عدد تعیین می کند
• .container-fluid، که width: 100%در تمام نقاط شکست است
• .container-{breakpoint}، که width: 100%تا نقطه شکست مشخص شده است

جدول زیر نحوه max-widthمقایسه هر کانتینر با نمونه اصلی .containerو .container-fluidدر هر نقطه شکست را نشان می دهد.

آنها را در عمل ببینید و در مثال Grid ما مقایسه کنید .

همه در یک

کلاس پیش فرض ما .containerیک ظرف با عرض ثابت پاسخگو است، به این معنی که max-widthدر هر نقطه شکست تغییر می کند.

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

مایع

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

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

پاسخگو

کانتینرهای پاسخگو در Bootstrap نسخه 4.4 جدید هستند. آنها به شما اجازه می دهند کلاسی را مشخص کنید که تا رسیدن به نقطه شکست مشخص شده 100٪ عرض داشته باشد، پس از آن ما max-widths را برای هر یک از نقاط شکست بالاتر اعمال می کنیم. برای مثال، .container-smبرای شروع تا رسیدن به نقطه شکست، 100٪ عرض است، جایی که با ، و و smمقیاس آن افزایش می یابد .mdlgxl

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>

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

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

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

// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` 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 در دسترس هستند:

// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-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) { ... }
// No media query necessary for xl breakpoint as it has no upper bound on its width

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

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

// 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مقدار بالاتر به خط مقدم می‌آوریم تا مرز آن‌ها را روی عناصر برادر نشان دهد.