لمحة عن تخطيط الصفحات في Bootstrap

يحوي إطار العمل Bootstrap عناصر وخيارات لتخطيط مشاريع تطوير الويب؛ بما في ذلك الحاويّات Containers، نظام شبكة Grid system فعّال، كائنات وسيطة مرنة وأصناف أدوات متجاوبة.

الحاويّات

الحاويّات هي الأساس الذي تُبنَى عليه مُخطَّطات التصميم في Bootstrap وهي مطلوبة عند استخدام نظام الشبكة المبدئي. اختر حاويّة متجاوبة وذات عرض ثابت (بمعنى أن قيم max-width تتغيّر عند كلّ نقطة حديّة Breakpoints) أو حاويّة ذات عرض مُنساب (أي أن نسبة العرض تبلغ 100% طول الوقت).

على الرغم من أنه يمكن تداخل الحاويّات، إلا أن أغلب المُخطَّطات لا تحتاج لحاويّات متداخلة.

<div class="container">
  <!--  حاويّة هنا -->
</div>

استخدم الصنف‎.‎container-fluid للحصول على حاويّة ذات عرض كامل، تمتد على عرض إطار العرض Viewport كاملا.

<div class="container-fluid">
  ...
</div>

نقاط حدّيّة متجاوبة

يعتمد إطار العمل Bootstrap على مبدأ التطوير للجوّال أولا، لذا يستخدم مجموعة من استعلامات الوسائط Media queries لإنشاء نقاط حدّيّة حسّاسة لاستخدامها في المُخطَّطات والواجهات. تعتمد هذه النقاط الحديّة - غالبا - على العرض الأدنى لإطار العرض وتتيح تمديد العناصر مع تغير إطار العرض.

يستخدم Bootstrap أساسا مجالات استعلامات الوسائط - أو النقاط الحدّيّة - التالية في ملفات Sass المصدريّة للمُخطّطات، نظام الشبكة والعناصر.

// الأجهزة الصغيرة جدًّا (الهواتف في وضع طولي، أقلّ من 576px)
// لا توجد استعلامات وسائط نظرا لأن Bootstrap يستخدم مبدئيًّا هذا الإعداد

// الأجهزة الصغيرة (الهواتف في وضع عرضي، 576px فما فوق)
@media (min-width: 576px) { ... }

// الأجهزة المتوسّطة (الأجهزة اللوحية، عرض يفوق 768px)
@media (min-width: 768px) { ... }

// الأجهزة العريضة (الحواسيب المكتبية، شاشات يزيد عرضها على 992px) 
@media (min-width: 992px) { ... }

// الأجهزة العريضة جدًّا (الشاشات الكبيرة، عرض يفوق 1200px)
@media (min-width: 1200px) { ... }

تتوفّر جميع استعلامات الوسائط بصيغة مخاليط Mixins في Sass:

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// مثال على الاستخدام
@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

تنحو استعلامات الوسائط أحيانا منحى عكسيًّا (عرض الشاشة المُحدَّد أو أصغر):

// الأجهزة الصغيرة جدًّا (الهواتف في وضع طولي، أقلّ من 576px)
@media (max-width: 575.98px) { ... }

// الأجهزة الصغيرة (الهواتف في وضع عرضي،  أقلّ من 768px)
@media (max-width: 767.98px) { ... }

// الأجهزة المتوسّطة (الأجهزة اللوحية، أقلّ من 992px)
@media (max-width: 991.98px) { ... }

// الأجهزة العريضة (الحواسيب المكتبية، أقلّ من 1200px)
@media (max-width: 1199.98px) { ... }

// الأجهزة العريضة جدًّا (الشاشات الكبيرة، عرض يفوق 1200px)
// لا توجد استعلامات وسائط للأجهزة العريضة جدّا، إذ أنه لا حدود قصوى لهذه النقطة الحدّيّة

تتوفّر هذه الاستعلامات كذلك بصيغة مخاليط Sass:

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }

توجد استعلامات وسائط ومخاليط لاستهداف نطاق واحد من قياس الشاشات باستخدام العرض الأدنى والأقصى للنقاط الحدّيّة:

// الأجهزة الصغيرة جدًّا (الهواتف في وضع طولي، أقلّ من 576px)
@media (max-width: 575.98px) { ... }

// الأجهزة الصغيرة (الهواتف في وضع عرضي، 576px فما فوق)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

//// الأجهزة المتوسّطة (الأجهزة اللوحية، عرض يفوق 768px)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// الأجهزة العريضة (الحواسيب المكتبية، شاشات يزيد عرضها على 992px) 
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// الأجهزة العريضة جدًّا (الشاشات الكبيرة، عرض يفوق 1200px)
@media (min-width: 1200px) { ... }

في ما يلي مخاليط Sass الموافقة للاستعلامات السابقة:

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }

يمكن على نحو مشابه شملُ عرض نقاط حديّة متعدّدة:

// مثال
// تطبيق التنسيقات ابتداءً من الأجهزة المتوسّطة وصولا إلى الأجهزة العريضة جدًّا
@media (min-width: 768px) and (max-width: 1199.98px) { ... }

لو أردنا مخلوط Sass لاستهداف نفس مقاييس الشاشة لكان على النحو التالي:

@include media-breakpoint-between(md, xl) { ... }

Z-index

تستخدم عناصر عدّة في Bootstrap الخاصيّة z-index التي تساعد في التحكّم في المُخطَّط بتوفير محور ثالث لتنظيم المحتوى. يستخدم Bootstrap تدرجا لقيم الخاصيّة z-index صُمِّم لوضع طبقات للتصفّح، التلميحات Tooltips والتلميحات المنبثقة Popovers، النوافذ المنبثقة وغيرها.

تبدأ القيم العليا بعدد عشوائي، مرتفع ومُحدَّد بما فيه الكفاية لتجنب الخلط بين الطبقات على نحو أمثل. يحتاج إطار العمل لمجموعة معيارية عبر مختلف الطبقات - التلميحات، التلميحات المنبثقة، قوائم التصفّح، القوائم المنسدلة، النوافذ الشرطية - بحيث يكون السلوك متناسقا. لا يوجد سبب خاصّ جعل فريق التطوير يتجنّب القيم 100 فأعلى أو 500 فما فوق.

لا يشجّع Bootstrap على تخصيص القيم الفردية، إن اضطررت لتعديل إحداها فسيتوجّب عليك تعديلها كلها.

$zindex-dropdown:          1000 !default;
$zindex-sticky:            1020 !default;
$zindex-fixed:             1030 !default;
$zindex-modal-backdrop:    1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;

تُستخدَم قيم منخفضة للخاصيّة z-index للتعامل مع تداخل الحدود بين العناصر (مثلا الأزرار وحقول الإدخال في مجموعة إدخال). هذه القيم هي1 للحالة المبدئيّة، 2 لحالة الحومان Hover و3 للحالة النشطة. يُجلَب عنصُر مُحدَّد إلى الواجهة بقيمة أعلى للخاصيّة z-index من أجل إظهار حوافّه فوق العناصر الشقيقة في حالات الحومان، التركيز Focus والنشاط.

المصادر

• صفحة Overview ضمن توثيق Bootstrap.