انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #3 من درس: نقاط التوقف المتجاوبة في بوتستراب 5

Mobile First Media Queries استعلامات العرض التصاعدية

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

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

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

يبني بوتستراب 5 منظومته بالكامل وفق فلسفة الأولوية للهاتف والاستعلامات التصاعدية min-width؛ فالقواعد الأساسية تُكتب بدون استعلام وسائط لتسري من عرض 0px فصاعداً، ثم تضيف كل عتبة أعلى تحسيناتها تدريجياً للأعلى:

  • القاعدة المخصصة للفئة المتوسطة md عبر @media (min-width: 768px) تسري تلقائياً على md و lg و xl و xxl معاً ما لم تقم فئة أكبر بتعديلها صراحةً.
  • يوفر هذا التوريث التصاعدي اختصاراً هائلاً في الكود؛ لأنك لا تضطر لتكرار نفس الكلاس لكل شاشة أكبر.
الصف 2 كود برمجي
HTML 
<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>
جرّب بنفسك
الصف 3 ملاحظة هامة

جميع فقرات هذا الدرس (نقاط التوقف المتجاوبة في بوتستراب 5)