نقاط شکست

مفاهیم اصلی

• نقاط شکست بلوک های سازنده طراحی پاسخگو هستند. از آن‌ها برای کنترل اینکه چه زمانی می‌توان طرح‌بندی شما را در یک پنجره دید یا اندازه دستگاه خاص تطبیق داد، استفاده کنید.

• از پرس و جوهای رسانه ای برای معماری CSS خود بر اساس نقطه شکست استفاده کنید. پرس‌وجوهای رسانه‌ای یکی از ویژگی‌های CSS هستند که به شما این امکان را می‌دهند که به‌طور مشروط استایل‌ها را بر اساس مجموعه‌ای از پارامترهای مرورگر و سیستم عامل اعمال کنید. ما بیشتر min-widthدر پرس و جوهای رسانه ای خود استفاده می کنیم.

• اول از همه، طراحی واکنشگرا هدف است. هدف CSS بوت استرپ این است که حداقل سبک‌ها را اعمال کند تا یک طرح‌بندی در کوچک‌ترین نقطه شکست کار کند، و سپس لایه‌هایی روی سبک‌ها برای تنظیم آن طراحی برای دستگاه‌های بزرگ‌تر اعمال کند. این CSS شما را بهینه می کند، زمان رندر را بهبود می بخشد و تجربه ای عالی برای بازدیدکنندگان شما فراهم می کند.

نقاط شکست موجود

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

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

این نقاط شکست از طریق Sass قابل تنظیم هستند—شما آنها را در نقشه Sass در _variables.scssشیوه نامه ما پیدا خواهید کرد.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

برای اطلاعات بیشتر و مثال‌هایی درباره نحوه اصلاح نقشه‌ها و متغیرهای Sass، لطفاً به بخش Sass در مستندات Grid مراجعه کنید.

داستان های رسانه

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

حداقل عرض

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

// Source mixins

// 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) { ... }
@include media-breakpoint-up(xxl) { ... }

// Usage

// 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;
  }
}

این میکسین های Sass در CSS کامپایل شده ما با استفاده از مقادیر اعلام شده در متغیرهای Sass ترجمه می شوند. مثلا:

// X-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) { ... }

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

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

حداکثر عرض

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

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

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

این میکسین ها نقاط شکست اعلام شده را می گیرند، .02pxاز آنها کم می کنند و از آنها به عنوان max-widthمقادیر ما استفاده می کنند. مثلا:

// `xs` returns only a ruleset and no media query
// ... { ... }

// `sm` applies to x-small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// `md` applies to small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// `lg` applies to medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// `xl` applies to large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// `xxl` applies to x-large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }

نقطه شکست واحد

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

@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) { ... }
@include media-breakpoint-only(xxl) { ... }

به عنوان مثال @include media-breakpoint-only(md) { ... }نتیجه این خواهد شد:

@media (min-width: 768px) and (max-width: 991.98px) { ... }

بین نقاط شکست

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

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

که منجر به:

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