نقاط التوقف
نقاط التوقف هي عروض قابلة للتخصيص تحدد سلوك التخطيط المتجاوب عبر الجهاز أو أحجام منفذ العرض في Bootstrap.
المفاهيم الأساسية
-
نقاط التوقف هي اللبنات الأساسية للتصميم سريع الاستجابة. استخدمها للتحكم في الوقت الذي يمكن فيه تكييف التخطيط الخاص بك مع منفذ عرض أو حجم جهاز معين.
-
استخدم استعلامات الوسائط لتصميم CSS الخاص بك عن طريق نقطة التوقف. تعد استعلامات الوسائط إحدى ميزات CSS التي تتيح لك تطبيق الأنماط المشروط بناءً على مجموعة من معلمات المستعرض ونظام التشغيل. نحن الأكثر شيوعًا
min-width
في استفساراتنا الإعلامية. -
الهدف الأول هو التصميم سريع الاستجابة للجوّال. يهدف Bootstrap's CSS إلى تطبيق الحد الأدنى من الأنماط لجعل التخطيط يعمل عند أصغر نقطة توقف ، ثم طبقات على الأنماط لضبط هذا التصميم للأجهزة الأكبر حجمًا. يؤدي ذلك إلى تحسين CSS الخاص بك ، وتحسين وقت العرض ، وتوفير تجربة رائعة للزائرين.
نقاط التوقف المتاحة
يتضمن Bootstrap ستة نقاط توقف افتراضية ، يشار إليها أحيانًا باسم طبقات الشبكة ، للبناء بشكل متجاوب. يمكن تخصيص نقاط التوقف هذه إذا كنت تستخدم ملفات Sass المصدر الخاصة بنا.
نقطة توقف | فئة infix | أبعاد |
---|---|---|
X- صغير | لا أحد | <576 بكسل |
صغير | sm |
≥576 بكسل |
متوسط | md |
768 بكسل |
كبير | lg |
≥992 بكسل |
كبير جدا | xl |
≥ 1200 بكسل |
كبير جدا جدا | xxl |
≥1400 بكسل |
تم اختيار كل نقطة توقف للاحتفاظ بشكل مريح بالحاويات التي يكون عرضها بمضاعفات 12. تمثل نقاط التوقف أيضًا مجموعة فرعية من أحجام الأجهزة الشائعة وأبعاد منفذ العرض - فهي لا تستهدف على وجه التحديد كل حالة استخدام أو جهاز. بدلاً من ذلك ، توفر النطاقات أساسًا قويًا ومتسقًا يمكن البناء عليه لأي جهاز تقريبًا.
نقاط التوقف هذه قابلة للتخصيص عبر Sass - ستجدها في خريطة Sass في _variables.scss
ورقة الأنماط الخاصة بنا.
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
لمزيد من المعلومات والأمثلة حول كيفية تعديل خرائط ومتغيرات Sass الخاصة بنا ، يرجى الرجوع إلى قسم Sass في وثائق الشبكة .
تساؤلات الإعلام
نظرًا لأن Bootstrap تم تطويره ليكون متنقلًا أولاً ، فإننا نستخدم عددًا قليلاً من استعلامات الوسائط لإنشاء نقاط توقف معقولة لتخطيطاتنا وواجهاتنا. تعتمد نقاط التوقف هذه في الغالب على الحد الأدنى من عروض منفذ العرض وتسمح لنا بتوسيع نطاق العناصر مع تغير إطار العرض.
العرض الأدنى
يستخدم 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;
}
}
تُترجم خلطات 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
كقيم لدينا. فمثلا:
// X-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) { ... }
// X-Large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }
// XX-Large devices (larger desktops)
// No media query since the xxl breakpoint has no upper bound on its width
min-
العرضmax-
ذات العروض الكسرية (والتي يمكن أن تحدث في ظل ظروف معينة على الأجهزة عالية الدقة ، على سبيل المثال) باستخدام القيم بدقة أعلى.
نقطة توقف واحدة
توجد أيضًا استعلامات ومزيج وسائط لاستهداف جزء واحد من أحجام الشاشات باستخدام الحد الأدنى والحد الأقصى لعرض نقاط التوقف.
@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) { ... }