عرض مصدر Bootstrap/layout overview

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

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

على الرغم من أنه ''يمكن'' تداخل الحاويّات، إلا أن أغلب المُخطَّطات لا تحتاج لحاويّات متداخلة.<syntaxhighlight lang="html">
<div class="container">
  <!--  حاويّة هنا -->
</div>
</syntaxhighlight>استخدم الصنف<code>‎.‎container-fluid</code> للحصول على حاويّة ذات عرض كامل، تمتد على عرض إطار العرض (viewport) كاملًا.<syntaxhighlight lang="html">
<div class="container-fluid">
  ...
</div>


</syntaxhighlight>

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

يستخدم Bootstrap أساسًا مجالات استعلامات الوسائط - أو النقاط الحدّيّة - التالية في ملفات Sass المصدريّة للمُخطّطات، نظام الشبكة والعناصر.<syntaxhighlight lang="sass">
// الأجهزة الصغيرة جدًّا: الهواتف في وضع طولي، أقلّ من 576 بسكل
// لا توجد استعلامات وسائط نظرا لأن Bootstrap يستخدم مبدئيًّا هذا الإعداد

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

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

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

// الأجهزة العريضة جدًّا: الشاشات الكبيرة، عرض يفوق 1200 بكسل
@media (min-width: 1200px) { ... }
</syntaxhighlight>تتوفّر جميع استعلامات الوسائط بصيغة مخاليط Mixins في Sass:<syntaxhighlight lang="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;
  }
}
</syntaxhighlight>تنحو استعلامات الوسائط أحيانًا منحى عكسيًّا (عرض الشاشة المُحدَّد ''أو أصغر''):<syntaxhighlight lang="sass">
// الأجهزة الصغيرة جدًّا: الهواتف في وضع طولي، أقلّ من 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 بكسل
// لا توجد استعلامات وسائط للأجهزة العريضة جدّا، إذ أنه لا حدود قصوى لهذه النقطة الحدّيّة
</syntaxhighlight>تتوفّر هذه الاستعلامات كذلك بصيغة مخاليط Sass:<syntaxhighlight lang="sass">
@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
</syntaxhighlight>توجد استعلامات وسائط ومخاليط لاستهداف نطاق واحد من قياس الشاشات باستخدام العرض الأدنى والأقصى للنقاط الحدّيّة:<syntaxhighlight lang="sass">
// الأجهزة الصغيرة جدًّا: الهواتف في وضع طولي، أقلّ من 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) { ... }
</syntaxhighlight>في ما يلي مخاليط Sass الموافقة للاستعلامات السابقة:<syntaxhighlight lang="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) { ... }
</syntaxhighlight>يمكن على نحو مشابه شملُ عرض نقاط حديّة متعدّدة:<syntaxhighlight lang="sass">
// مثال
// تطبيق التنسيقات ابتداءً من الأجهزة المتوسّطة وصولا إلى الأجهزة العريضة جدًّا
@media (min-width: 768px) and (max-width: 1199.98px) { ... }
</syntaxhighlight>لو أردنا مخلوط Sass لاستهداف نفس مقاييس الشاشة لكان على النحو التالي:<syntaxhighlight lang="sass">
@include media-breakpoint-between(md, xl) { ... }


</syntaxhighlight>

== z-index ==
تستخدم عناصر عدّة في Bootstrap الخاصيّة <code>[[CSS/z-index|z-index]]</code> التي تساعد في التحكّم في المُخطَّط بتوفير محور ثالث لتنظيم المحتوى. يستخدم Bootstrap تدرجًا لقيم الخاصيّة <code>[[CSS/z-index|z-index]]</code> صُمِّم لوضع طبقات للتصفّح والتلميحات (Tooltips) والعناصر المنبثقة (Popovers)، ومربعات الحوار (modal) وغيرها.

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

لا يشجّع Bootstrap على تخصيص القيم الفردية، إن اضطررت لتعديل إحداها فسيتوجّب عليك تعديلها كلها.<syntaxhighlight lang="sass">
$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;
</syntaxhighlight>تُستخدَم قيم منخفضة للخاصيّة <code>[[CSS/z-index|z-index]]</code> للتعامل مع تداخل الحدود بين العناصر (مثلا الأزرار وحقول الإدخال في مجموعة إدخال). هذه القيم هي<code>1</code> للحالة المبدئيّة، و <code>2</code> لحالة مرور مؤشر الفأرة فوق العنصر (‎<code>[[CSS/:hover|:hover]]</code>)، و<code>3</code> للحالة النشطة (‎<code>[[CSS/:active|:active]]</code>). يُجلَب عنصُر مُحدَّد إلى الواجهة بقيمة أعلى للخاصيّة <code>[[CSS/z-index|z-index]]</code> من أجل إظهار حوافّه فوق العناصر الأخوة (sibling elements) في حالات ‎<code>[[CSS/:hover|:hover]]</code> و ‎<code>[[CSS/:focus|:focus]]</code> و ‎<code>[[CSS/:active|:active]]</code>.

== مصادر ==
* صفحة [https://getbootstrap.com/docs/4.0/layout/overview/ Overview] ضمن توثيق Bootstrap.
[[تصنيف:Bootstrap|{{SUBPAGENAME}}]]
[[تصنيف:Bootstrap layout|{{SUBPAGENAME}}]]