شرح صفوف ومحتوى الفقرة
يعتمد Bootstrap 5 ست فئات قياسية للتجاوب بعد أن أضاف الفئة السادسة xxl عند عتبة 1400px لمواكبة الشاشات المكتبية الحديثة العريضة:
- الفئة الأصغر
xs: للشاشات الأضيق من576pxكالهواتف بالوضع العمودي، وهي القاعدة الافتراضية بدون أي لاحقة. - الفئة الصغيرة
sm: تبدأ من عرض576pxفأكثر للهواتف العريضة بالوضع الأفقي. - الفئة المتوسطة
md: تبدأ من عرض768pxفأكثر للأجهزة اللوحية. - الفئة الكبيرة
lg: تبدأ من عرض992pxفأكثر للحواسيب المحمولة. - الفئة الأكبر
xl: تبدأ من عرض1200pxفأكثر للشاشات المكتبية القياسية. - الفئة الفائقة
xxl: تبدأ من عرض1400pxفأكثر للشاشات العريضة.
HTML
<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>