في هذا الدرس 6تصفّح المواضيع
يتصفح المستخدمون تطبيقات الويب الحديثة عبر طيف واسع من الشاشات يبدأ من الهواتف المدمجة بعرض 360px والأجهزة اللوحية بعرض 768px وصولاً إلى الشاشات المكتبية العريضة بدقة 1920px وما فوقها. ولو صُممت الواجهة بأبعاد مكتبية جامدة لاضطر زائر الهاتف للتكبير والتمرير الأفقي المزعج.
تُشكّل نقاط التوقف المتجاوبة العتبات الهندسية القياسية لعرض نافذة المتصفح في Bootstrap 5.3؛ وعند كل عتبة منها يتكيف التخطيط وعرض الحاويات وتوزيع الأعمدة تلقائياً عبر استعلامات الوسائط.
يعتمد Bootstrap 5 ست فئات قياسية للتجاوب بعد أن أضاف الفئة السادسة xxl عند عتبة 1400px لمواكبة الشاشات المكتبية الحديثة العريضة:
- الفئة الأصغر
xs: للشاشات الأضيق من576pxكالهواتف بالوضع العمودي، وهي القاعدة الافتراضية بدون أي لاحقة. - الفئة الصغيرة
sm: تبدأ من عرض576pxفأكثر للهواتف العريضة بالوضع الأفقي. - الفئة المتوسطة
md: تبدأ من عرض768pxفأكثر للأجهزة اللوحية. - الفئة الكبيرة
lg: تبدأ من عرض992pxفأكثر للحواسيب المحمولة. - الفئة الأكبر
xl: تبدأ من عرض1200pxفأكثر للشاشات المكتبية القياسية. - الفئة الفائقة
xxl: تبدأ من عرض1400pxفأكثر للشاشات العريضة.
<div class="container bp-stage">
<h2>Active Tier Detector</h2>
<p id="tierOut" class="bp-badge">Detecting...</p>
</div>
<script>
const w = window.innerWidth;
const t = w>=1400 ? 'xxl' : w>=1200 ? 'xl'
: w>=992 ? 'lg' : w>=768 ? 'md' : w>=576 ? 'sm' : 'xs';
tierOut.textContent = w + 'px -> Tier: ' + t;
</script>يبني بوتستراب 5 منظومته بالكامل وفق فلسفة الأولوية للهاتف والاستعلامات التصاعدية min-width؛ فالقواعد الأساسية تُكتب بدون استعلام وسائط لتسري من عرض 0px فصاعداً، ثم تضيف كل عتبة أعلى تحسيناتها تدريجياً للأعلى:
- القاعدة المخصصة للفئة المتوسطة
mdعبر@media (min-width: 768px)تسري تلقائياً علىmdوlgوxlوxxlمعاً ما لم تقم فئة أكبر بتعديلها صراحةً. - يوفر هذا التوريث التصاعدي اختصاراً هائلاً في الكود؛ لأنك لا تضطر لتكرار نفس الكلاس لكل شاشة أكبر.
<style>
.tier-box { padding: 12px; background: #faf7fe; }
@media (min-width: 768px) {
.tier-box { background: #ecfdf5; }
}
</style>
<div class="container">
<div class="tier-box">Mobile base -> Tablet+ green</div>
</div>بمجرد حفظك لرموز نقاط التوقف الخمس ذات اللاحقة، تصبح قادراً على قراءة وكتابة مئات الكلاسات في بوتستراب لأنها تتبع جميعاً معادلة تسمية موحدة للاحقة التجاوب:
الفئة التأسيسية للهاتف xs: تُكتب بصيغة {property}-{value} بدون أي لاحقة وسطى فتعمل من عرض 0px فصاعداً.
الفئات المتجاوبة الأعلى sm..xxl: تُكتب بصيغة {property}-{breakpoint}-{value} فتعمل بدءاً من عرض تلك الفئة وما فوقها.
لهذا السبب لن تجد أبداً لاحقة باسم -xs- في بوتستراب 5؛ لأن الكلاس الأساسي الخالي من اللاحقة يمثل فئة الهاتف افتراضياً!
نادراً ما يحتاج مطور الواجهات المحترف إلى كتابة نقاط التوقف الست كلها على عنصر واحد؛ بل تكتفي معظم المكونات الاحترافية بضبط نقطتين أو ثلاث نقاط تحول استراتيجية يمليها اتساع المحتوى الفعلي لا أسماء موديلات الأجهزة:
- القاعدة الأساسية للهاتف
xsمع تحول عندmdأوlg: تكفي لنحو 85% من أقسام الصفحات والنماذج والمقالات ذات العمودين. - الهاتف
xsثم اللوحيmdثم المكتبي العريضxl: مثالية لشبكات المتاجر الإلكترونية ولوحات البيانات الكثيفة.
<div class="container">
<h2>JS matchMedia Sync (lg: 992px)</h2>
<p id="mqStatus"></p>
</div>
<script>
const mq = window.matchMedia('(min-width: 992px)');
mqStatus.textContent = mq.matches
? 'Desktop lg+ mode' : 'Compact <992px mode';
</script>احتفظ بهذا المرجع الهندسي الشامل لنقاط التوقف الست في Bootstrap 5.3؛ فجميع أبعاد الحاويات وأعمدة الشبكة وأدوات العرض التي ستبنيها في الدروس القادمة تستند مباشرةً إلى هذه القيم القياسية:
| اسم فئة التوقف | لاحقة الكلاس | نطاق عرض النافذة | استعلام الوسائط المقابل | الأجهزة المستهدفة غالباً |
|---|---|---|---|---|
| الأصغر Extra small | بدون لاحقة | < 576px | الوضع الافتراضي بدون استعلام | الهواتف الذكية بالوضع العمودي |
| الصغيرة Small | sm | >= 576px | @media (min-width: 576px) | الهواتف بالوضع الأفقي |
| المتوسطة Medium | md | >= 768px | @media (min-width: 768px) | الأجهزة اللوحية والنوافذ المقسومة |
| الكبيرة Large | lg | >= 992px | @media (min-width: 992px) | الحواسيب المحمولة |
| الأكبر Extra large | xl | >= 1200px | @media (min-width: 1200px) | الشاشات المكتبية القياسية |
| الفائقة Extra extra large | xxl | >= 1400px | @media (min-width: 1400px) | الشاشات المكتبية العريضة |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس منظومة نقاط التوقف الست في Bootstrap 5.3 من xs حتى xxl، ومنطق التوريث التصاعدي عبر min-width، وصيغة اللاحقة الموحدة للكلاسات المتجاوبة. الخطوة التالية: انتقل الآن إلى الدرس السادس «الحاويات في بوتستراب 5» لتطبيق هذه العتبات الست عملياً على حاويات التخطيط المتدرجة والمرنة.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Responsive Breakpoint نقطة التوقف المتجاوبة
- عتبة عرض قياسية محددة مسبقاً لنافذة المتصفح تتغير عندها قواعد التخطيط وعرض العناصر تلقائياً.
- للمراجعة
- 02 Class Infix لاحقة التجاوب الوسطى
- الرمز المختصر للفئة الذي يتوسط اسم الكلاس في بوتستراب لتفعيل التنسيق بدءاً من تلك الشاشة فصاعداً.
- للمراجعة
- 03 Mobile-First Inheritance التوريث التصاعدي من الهاتف
- كتابة التنسيق الأساسي للشاشات الصغيرة أولاً ثم ترقية التخطيط للشاشات الأكبر عبر استعلامات min-width.
- للمراجعة
- 04 Sub-Pixel Max-Width (.98px) دقة الكسر العشري .98px
- طرح 0.02px في حدود الاستعلامات العكسية لمنع الفجوات الناتجة عن الكسور العشرية عند تكبير الشاشات عالية الكثافة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 XS XS
- Extra Small Viewport Tier (<576px)
- الفئة التأسيسية الافتراضية للهواتف الذكية بدءاً من 0px وتُكتب كلاساتها دائماً بدون لاحقة.
- للمراجعة
- 02 MD MD
- Medium Viewport Tier (>=768px)
- فئة التجاوب المخصصة للأجهزة اللوحية والنوافذ المتوسطة عبر استعلام العرض 768px فأكثر.
- للمراجعة
- 03 XXL XXL
- Extra Extra Large Tier (>=1400px)
- الفئة السادسة التي أضافها بوتستراب 5 لخدمة الشاشات المكتبية العريضة بدقة 1400px وما فوقها.
- للمراجعة
- 04 DPI DPI
- Dots Per Inch
- مقياس كثافة البكسلات في الشاشات الحديثة والذي يفسر ظهور أبعاد كسرية عند تفعيل تكبير النظام.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
بدّل بين تبويبات الهاتف xs واللوحي md والشاشة العريضة xxl في المحاكي التفاعلي ولاحظ كيف تتدرج كثافة العرض تصاعدياً.
-
افتح مثال كاشف الفئة النشطة في محرر التجريب وغيّر عرض منطقة المعاينة لمراقبة تغير اسم الفئة تلقائياً عند العتبات القياسية.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي8 أسئلة تنتظرك ＋
كم عدد نقاط التوقف المتجاوبة القياسية المعتمدة افتراضياً في Bootstrap 5.3؟
يضم الإصدار الخامس 6 فئات قياسية هي: xs وsm وmd وlg وxl بالإضافة إلى الفئة السادسة الجديدة xxl.
عند أي عرض أدنى للنافذة تتفعل فئة التوقف السادسة الجديدة xxl في Bootstrap 5؟
تبدأ فئة الشاشات العريضة xxl عند عرض 1400px فأكثر.
يستخدم Bootstrap 5 اللاحقة "-xs-" داخل أسماء الكلاسات لاستهداف شاشات الهاتف الأقل من 576px.
خطأ؛ فئة الهاتف xs هي القاعدة التأسيسية من 0px فصاعداً وتُكتب دائماً بدون أي لاحقة وسطى.
أي خاصية في استعلامات وسائط CSS يعتمد عليها Bootstrap 5 لتحقيق التوريث التصاعدي Mobile-First؟
يستخدم بوتستراب استعلامات min-width بحيث تسري القاعدة على الفئة المحددة وكافة الشاشات الأعرض منها تلقائياً.
ما الحد الأدنى لعرض الشاشة الذي يفعّل نقطة التوقف المتوسطة md في Bootstrap 5؟
تبدأ الفئة المتوسطة md من عرض 768px فأكثر.
في Bootstrap 5 تظل القاعدة المطبقة على فئة md فعالة تلقائياً على شاشات lg وxl وxxl ما لم تُعدَّل بفئة أكبر.
صواب؛ لأن شرط min-width: 768px يتحقق رياضياً في جميع الشاشات الأعرض أيضاً حتى تغيره فئة أعلى.
لماذا يستخدم Bootstrap الكسر .98px (مثل 767.98px) في استعلامات الحد الأعلى بدلاً من الأرقام الصحيحة؟
لتفادي الفجوات الناتجة عن الأبعاد الكسرية (مثل 767.5px) على الشاشات عالية الكثافة عند تفعيل تكبير النظام.
ما الواجهة البرمجية القياسية في المتصفح التي تتيح لجافاسكريبت مراقبة نفس شرط min-width المستخدم في بوتستراب؟
تتيح دالة window.matchMedia مراقبة تحقق استعلامات الوسائط لحظياً وبكفاءة عالية دون حسابات يدوية.