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

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

الحاويات

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

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

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

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

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

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

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

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

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

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

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

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

// الأجهزة العريضة جدًّا: الشاشات الكبيرة، عرض يفوق 1200 بكسل
@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;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

// الأجهزة العريضة جدًّا: الشاشات الكبيرة، عرض يفوق 1200 بكسل
@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)، ومربعات الحوار (modal) وغيرها.

تبدأ القيم العليا بعدد عشوائي، مرتفع ومُحدَّد بما فيه الكفاية لتجنب الخلط بين الطبقات على نحو أمثل. يحتاج إطار العمل لمجموعة معيارية عبر مختلف الطبقات - التلميحات والتلميحات المنبثقة وقوائم التصفّح والقوائم المنسدلة والنوافذ الشرطية - بحيث يكون السلوك متناسقًا. لا يوجد سبب خاصّ جعل فريق التطوير يتجنّب القيم 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 للحالة النشطة (‎:active). يُجلَب عنصُر مُحدَّد إلى الواجهة بقيمة أعلى للخاصيّة z-index من أجل إظهار حوافّه فوق العناصر الأخوة (sibling elements) في حالات ‎:hover و ‎:focus و ‎:active.

مصادر

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