نقاط التوقف (Breakpoints)

المفاهيم الأساسية

• نقاط التوقف (Breakpoints) هي اللبنات الأساسية للتصميم المتوافق مع الشاشات (Responsive). استخدمها للتحكم في وقت تكييف التخطيط الخاص بك مع نافذة عرض أو حجم جهاز معين.

• استخدم استعلامات الوسائط (media queries) لبناء الـ CSS الخاص بك حسب نقطة التوقف. استعلامات الوسائط هي ميزة في الـ CSS تتيح لك تطبيق الأنماط بشكل شرطي بناءً على مجموعة من معلمات المتصفح ونظام التشغيل. نحن نستخدم .width-min بشكل شائع في استعلامات الوسائط الخاصة بنا.

• التصميم المتوافق مع الشاشات (Responsive) الذي يبدأ بالهاتف المحمول أولاً هو الهدف. تهدف الـ CSS الخاصة بالـ Bootstrap إلى تطبيق الحد الأدنى من الأنماط لجعل التخطيط يعمل عند أصغر نقطة توقف، ثم تضيف طبقات من الأنماط لضبط هذا التصميم للأجهزة الأكبر. يؤدي هذا إلى تحسين الـ CSS الخاص بك، وتحسين وقت الرندرة، وتوفير تجربة رائعة لزوارك.

نقاط التوقف المتاحة

تتضمن الـ Bootstrap ست نقاط توقف افتراضية، يُشار إليها أحياناً باسم (grid tiers) (مستويات الشبكة)، للبناء بشكل متوافق مع الشاشات. يمكن تخصيص نقاط التوقف هذه إذا كنت تستخدم ملفات الـ Sass المصدرية الخاصة بنا.

تم اختيار كل نقطة توقف لتستوعب بشكل مريح الحاويات التي تكون عروضها من مضاعفات 12. تمثل نقاط التوقف أيضاً مجموعة فرعية من أحجام الأجهزة الشائعة وأبعاد نافذة العرض—فهي لا تستهدف تحديداً كل حالة استخدام أو جهاز. بدلاً من ذلك، توفر النطاقات أساساً قوياً ومتسقاً للبناء عليه لأي جهاز تقريباً.

هذه نقاط التوقف قابلة للتخصيص عبر الـ Sass—ستجدها في الخريطة (map) الخاصة بالـ Sass في ورقة أنماط (stylesheet) _variables.scss الخاصة بنا.

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

لمزيد من المعلومات وأمثلة حول كيفية تعديل خرائط (maps) ومتغيرات الـ Sass الخاصة بنا، يرجى الرجوع إلى قسم الـ CSS في مستندات الـ Grid.

Media queries

بما أن الـ Bootstrap تم تطويره ليكون متوافقاً مع الهاتف المحمول أولاً، فإننا نستخدم مجموعة من استعلامات الوسائط (media queries) لإنشاء نقاط توقف منطقية لتخطيطاتنا وواجهاتنا. تعتمد نقاط التوقف هذه في الغالب على الحد الأدنى لعروض نافذة العرض وتسمح لنا بتوسيع العناصر مع تغير نافذة العرض.

الحد الأدنى للعرض (Min-width)

تستخدم الـ Bootstrap بشكل أساسي نطاقات استعلامات الوسائط التالية—أو نقاط التوقف—في ملفات الـ 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;
  }
}

تترجم المزجات/الدمج (mixins) الخاصة بالـ 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) { ... }

الحد الأعلى للعرض (Max-width)

نستخدم أحياناً استعلامات الوسائط التي تسير في الاتجاه الآخر (حجم الشاشة المحدد أو أصغر):

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

تأخذ هذه المزجات/الدمج (mixins) نقاط التوقف المعلنة هذه، وتطرح منها .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) { ... }

نقطة توقف واحدة (Single breakpoint)

توجد أيضاً استعلامات وسائط (media queries) ومزجات/الدمج (mixins) لاستهداف شريحة واحدة من أحجام الشاشات باستخدام الحد الأدنى والحد الأقصى لعرض نقاط التوقف.

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

بين نقاط التوقف (Between breakpoints)

وبالمثل، قد تمتد استعلامات الوسائط (media queries) عبر عدة عروض لنقاط التوقف:

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