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

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

الحاويات

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

هناك 3 حاويات في Bootstrap:

• ‎‎‏‎.container‎‎‏ التي تعين قيمة max-width في كل النقاط الحدية المتجاوبة
• ‎‎‏‎.container-fluid‎‎‏ التي تعين القيمة width: 100% في كل النقاط الحدية
• ‎‎‏‎.container-{breakpoint}‎‎‏ التي تعين القيمة width: 100% حتى النقطة الحدية المعيّنة.

يوضح الجدول التالي العلاقة بين سمة max-width الخاصة بالحاوية والحاويتين ‎.container و ‎.container-fluid‎‎‎عبر جميع النقاط الحدية.

	Extra small<576px	Small≥576px	Medium≥768px	Large≥992px	Extra large≥1200px
.container	100%	540px	720px	960px	1140px
.container-sm	100%	540px	720px	960px	1140px
.container-md	100%	100%	720px	960px	1140px
.container-lg	100%	100%	100%	960px	1140px
.container-xl	100%	100%	100%	100%	1140px
.container-fluid	100%	100%	100%	100%	100%

الحاوية الافتراضية

الحاوية الافتراضية ‎.container متجاوبة وثابتة العرض، أي أنّ قيمة max-widthخاصتها تتغير عند كل نقطة حدية.

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

الحاوية المنسابة Fluid

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

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

التجاوب

أُضيفت الحاويات المتجاوبة منذ الإصدار 4.4. وتتيح لك تعيين صنف واسع 100% إلى حين بلوغ نقطة حدية معينة. والتي بعدها يُطبق  قيم  max-widthالخاصة بكل نقطة حدية. مثلا، ‎.container-sm واسعة 100% إلى حين بلوغ النقطة الحدية sm حيث ستُكبَّر مع كل من md و lg و xl.

<div class="container-sm">مئة في المئة واسع إلى حين بلوغ النقط الحدية الصغيرة </div>
<div class="container-md">مئة في المئة واسع إلى حين بلوغ النقط الحدية المتوسطة</div>
<div class="container-lg">مئة في المئة واسع إلى حين بلوغ النقط الحدية الكبيرة</div>
<div class="container-xl">مئة في المئة واسع إلى حين بلوغ النقط الحدية الكبيرة جدا</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) { ... }

// مثال على الاستخدام
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-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 بكسل
// لا توجد استعلامات وسائط للأجهزة العريضة جدّا، إذ أنه لا حدود قصوى لهذه النقطة الحدّيّة

تنبيه: لا تدعم المتصفحات حاليا الاستعلامات النطاقية (range context queries)، يمكننا التحايل على قيود استخدام سوابق min-‎ و max-‎ إطارات العرض باستخدام العرض الكسري - fractional width - (والتي يمكن أن تحدث في حال تحقق بعض الشروط في أجهز high-dpi مثلا) عبر استعمال قيم ذات دقة عالية.

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

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

// لا يلزم استخدام استعلامات الوسائط للنقطة الحدية الكبرى لأنه ليس لها حد أعلى على عرضها

// مثال: تنسيق يُطبق على النقطة الحدية المتوسطة فما دونها
// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

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

// الأجهزة الصغيرة جدًّا: الهواتف في وضع طولي، أقلّ من 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.