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

Selecting UI Breakpoints اختيار نقاط التوقف للواجهة

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

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

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

نادراً ما يحتاج مطور الواجهات المحترف إلى كتابة نقاط التوقف الست كلها على عنصر واحد؛ بل تكتفي معظم المكونات الاحترافية بضبط نقطتين أو ثلاث نقاط تحول استراتيجية يمليها اتساع المحتوى الفعلي لا أسماء موديلات الأجهزة:

  • القاعدة الأساسية للهاتف xs مع تحول عند md أو lg: تكفي لنحو 85% من أقسام الصفحات والنماذج والمقالات ذات العمودين.
  • الهاتف xs ثم اللوحي md ثم المكتبي العريض xl: مثالية لشبكات المتاجر الإلكترونية ولوحات البيانات الكثيفة.
الصف 2 كود برمجي
HTML 
<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>
جرّب بنفسك

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