انتقل إلى محتوى الدرس

Responsive Breakpoints Concept مفهوم نقاط التوقف المتجاوبة

أتقن نقاط التوقف المتجاوبة الست في Bootstrap 5.3 من xs حتى xxl، وفلسفة الاستعلامات التصاعدية min-width، وصيغة لواحق الكلاسات، ومعايير اختيار نقاط التحول للواجهة.
3 صفوف تعليمية
بوتستراب 5
2 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

يتصفح المستخدمون تطبيقات الويب الحديثة عبر طيف واسع من الشاشات يبدأ من الهواتف المدمجة بعرض 360px والأجهزة اللوحية بعرض 768px وصولاً إلى الشاشات المكتبية العريضة بدقة 1920px وما فوقها. ولو صُممت الواجهة بأبعاد مكتبية جامدة لاضطر زائر الهاتف للتكبير والتمرير الأفقي المزعج.

تُشكّل نقاط التوقف المتجاوبة العتبات الهندسية القياسية لعرض نافذة المتصفح في Bootstrap 5.3؛ وعند كل عتبة منها يتكيف التخطيط وعرض الحاويات وتوزيع الأعمدة تلقائياً عبر استعلامات الوسائط.

الصف 2 صورة توضيحية
مخطط سلم نقاط التوقف المتجاوبة الست في Bootstrap 5.3 بدءاً من xs أقل من 576px وحتى xxl من 1400px فأكثر
الصف 3 ملاحظة هامة