نظام الشبكة في إطار العمل Bootstrap

استخدم شبكة الصناديق المرنة Flexbox grid المُوجَّهة أولًا للأجهزة الجوّالة من أجل إنشاء مُخطَّطات بكلّ الأشكال والقياسات بفضل نظام الشبكة في إطار العمل Bootstrap المُكوَّن من اثني عشر عمودًا، وخمس طبقات مُتجاوِبة مبدئيًّا، ومتغيّرات ومخاليط Sass ومجموعة من الأصناف المُعرَّفة مسبقا.

كيف يعمل نظام الشبكة

يستخدم نظام الشبكة في إطار العمل Bootstrap سلسلة من الحاويّات (containers) والأسطُر (rows) والأعمدة (columns) لتخطيط المحتوى ومحاذاته. يُبنَى نظام الشبكة (grid) في إطار العمل Bootstrap على صناديق CSS المرنة CSS Flexbox ويتميّز بأنه متجاوب تمامًا.

اطلع على تصنيف CSS Flexbox إن كنت جديدًا أو غير متعوّد على نظام Flexbox لتتعرّف على المفاهيم، والمصطلحات ولكي تكون لديك خلفيّة عن هذا النظام.

<div class="container">
  <div class="row">
    <div class="col-sm">
      عمود واحد من ثلاثة أعمدة
    </div>
    <div class="col-sm">
      عمود آخَر من ثلاثة أعمدة
    </div>
    <div class="col-sm">
      واحد من ثلاثة أعمدة
    </div>
  </div>
</div>

ينشئ المثال السابق ثلاثة أعمدة متساوية على الأجهزة الصغيرة، والمتوسّطة، والعريضة والعريضة جدًّا باستخدام أصناف الشبكة المُعرَّفة مسبقًا في إطار العمل Bootstrap. توضَع الأعمدة في وسط الصّفحة عبر الصنف الأب ‎.container.

تشرح النقاط التاليّة آليّة العمل بالتفصيل:

• توفّر الأصناف الحاويّة (الحاويّات) Containers وسيلة لتوسيط المحتوى وحشوه أفقيّا. استخدم الحاويّة ‎.container لعرض مُتجاوِب، أو الحاويّة ‎‎.container-fluid للحصول على القيمةwidth: 100% على جميع إطارات العرض Viewports وقياسات الأجهزة.
• تُغلِّف الأسطُرُ الأعمدة. لكلّ عمود حاشيّة أفقية padding (تُسمَّى خندقًا gutter) للتحكّم في المساحة بين الأعمدة. يُعكَس مفعول الحاشيّات على الأسطُر باستخدام هوامش سالبة. يُصبح المحتوى بهذه الطريقة مرتّبًا بصريًّا إلى اليسار.
• يفرض تخطيطُ الشبكة وضعَ المحتوى داخل الأعمدة. كما أنّ الأعمدة وحدها يمكنها أن تكون متفرّعة مباشرة من الأسطُر.
• تتمدَّد الأعمدة التي لم تُحدَّد لها قيمة الخاصيّة width تلقائيًا بحيث تكون متساويّة العرض، بفضل استخدام Flexbox. على سبيل المثال؛ يكون عرض أربعة أعمدة من الصّنف ‎.col-sm على الأجهزة الصغيرة فأعرَض. راجع فقرة أعمدة المُخطَّطات التلقائيّة.
• تشير أسماءُ أصنافِ الأعمدة إلى عدد الأعمدة التي تودّ استخدامها، من أصل 12 صنفًا يمكن استخدامها في السطر. لذا استخدم ‎.col-4 إنْ أردت ثلاثة أعمدة متساويّة العرض.
• تُحدَّد قيم الخاصيّة width بالنسبة المئوية، لذا هي دائما مُنسابة وتُقاس نسبة إلى العنصُر الأب.
• تُضبَط الحاشيّات (الخاصيّة padding) في الأعمدة أفقيًّا وذلك بهدف إنشاء «خنادق» بين كل عمودَيْن، إلا أنّه بالإمكان إلغاء الهوامش (الخاصيّة margin) من الأسطُر والحاشيّات من الأعمدة باستخدام الصنف ‎.no-gutters على السّطر (‎.row).
• توجد خمسة قياسات حدّية في الشبكة، قياس لكلّ نقطة حدية متجاوبة، وذلك من أجل جعل الشبكة متجاوبة. هذه القياسات هي: جميع النقاط (الأجهزة الصغيرة جدًّا)، والصغيرة، والمتوسّطة، والعريضة، والعريضة جدّا.
• تعتمد نقاط الشبكة الحدّية على استعلامات الوسائط التي تستخدم القيمة الدنيا، بمعنى أنّ الاستعلام ينطبق على القيمة الحدّية وجميع النقاط الأعرض منها (مثلًا: ينطبق الصنف ‎.col-sm-4 على الأجهزة الصغيرة، والمتوسّطة، والعريضة، والعريضة جدًّا؛ لكنّه لا ينطبق على النقطة الحدّية الأولى xs).
• يمكن استخدام أصناف الشبكة المُعرَّفة مسبقا (مثل ‎.col-4) أو مخاليط Sass للتعليم الدّلالي Semantic markup.

انتبه لجوانب القصور والعلل المتعلّقة بتخطيط Flexbox، مثل عدم القدرة على استخدام بعضٍ من عناصر HTML لتكون حاويّات Flex.

خيارات الشبكة

يستخدم نظام الشبكة وحدة البكسل px لتعيين النقاط الحديّة وعروض الحاويّات، على الرغم من أنّ إطار العمل Bootstrap يستخدم الوحدتيْن em أو rem لتعيين أغلب القياسات. يعود السبب في هذا الخيّار إلى أنّ عرض إطار العرض يُقاس بالبكسل ولا يتغيّر بتغيّر قياس الخطّ.

راجع الجدول التالي لتتعرّف على كيف يعمل نظام الشبكة ضمن إطار العمل Bootstrap على الأجهزة المختلفة.

	الصغيرة جدًّا <576px	الصغيرة ≥576px	المتوسّطة ≥768px	العريضة ≥992px	العريضة جدًّا ≥1200px
عرض الحاوية الأقصى	لا يوجد (تلقائي)	540px	720px	960px	1140px
بادئة الصنف	‪.col-‬	‪.col-sm-‬	‪.col-md-‬	‪.col-lg-‬	‪.col-xl-‬
عدد الأعمدة	12
عرض الخندق	30px‏ (15px على كلّ جانب)
إمكانيّة التداخل	نعم
الترتيب حسب العمود	نعم

الأعمدة تلقائيّة التخطيط Auto-layout columns

استخدم الأصناف الخاصّة بالنقاط الحدّية لتعيين قياس الأعمدة، دون الحاجة للأصناف المُرقَّمة صراحة (مثل ‎.col-sm-6).

التساوي في العرض

في ما يلي - على سبيل المثال - مخطّطَا شبكة ينطبقان على جميع الأجهزة وأُطُر العرض من xs (الصغيرة جدًّا) إلى xl (العريضة جدًّا). أضف أي عدد من أصناف الأعمدة غير المُرقَّمة للنقطة الحدّيّة المُستهدَفة وسيكون عرض الأعمدة متساويًّا (‎col. للنقطة الحدّية الدنيا، أي جميع الأجهزة).

<div class="container">
  <div class="row">
    <div class="col">
      العمود الأول من عموديْن
    </div>
    <div class="col">
      العمود الثاني من عموديْن
    </div>
  </div>
  <div class="row">
    <div class="col">
      العمود الأول من 3 أعمدة
    </div>
    <div class="col">
      العمود الثاني من 3 أعمدة
    </div>
    <div class="col">
      العمود الثالث من 3 أعمدة
    </div>
  </div>
</div>

عرض متسواي وأسطر متعددة

أضف الصّنف ‎.w-100 حيثُ تريد أن تتمدّد أعمدة بعرض متساوٍ على أسطر عدّة. اجعل عناصر العودة إلى السطر متجاوبة بدمج الصنف ‎.w-100 مع بعضٍ من أدوات العرض المتجاوبة في Bootstrap.

كانت هناك علة في Safari flexbox منعت هذا السلوك إلا باستعمال صريح لـ flex-basis أو border. هناك حلول بديلة في إصدارات المتصفح الأقدم ، ولكنها ليست ضرورية ما لم تستهدف المتصفحات التي فيها هذه العلة.

<div class="container">
  <div class="row">
    <div class="col">عمود</div>
    <div class="col">عمود</div>
    <div class="w-100"></div>
    <div class="col">عمود</div>
    <div class="col">عمود</div>
  </div>
</div>

تعيين عرض عمود واحد

ينتُج عن استخدام التخطيط التلقائي لأعمدة شبكة خلايا Flexbox إمكانيةُ تعيين عرض عمود واحد وترك الأعمدة المتجاورة تأخذ مقاييس تلقائية. يمكن استخدام أصناف الشبكة المُعرَّفة مسبقًا (على منوال المثال أدناه)، أو مخاليط Sass الخاصّة بالشبكة، أو تحديد العرض ضمن السّطر Inline. جرّب المثال التالي ولاحظ أنّ عرضَ العمود في الوسَط مُحدَّد (‎.col-6) وأنّ عرض العموديْن الآخريْن يتحدّد تلقائيًّا.

<div class="container">
  <div class="row">
    <div class="col">
      العمود الأول من 3 أعمدة
    </div>
    <div class="col-6">
      العمود الثاني من 3 أعمدة(أعرض)
    </div>
    <div class="col">
      العمود الثالث من ثلاثة أعمدة
    </div>
  </div>
  <div class="row">
    <div class="col">
      العمود الأوّل من 3 أعمدة
    </div>
    <div class="col-5">
      العمود الثاني من 3 (أعرض)
    </div>
    <div class="col">
      العمود الثالث من ثلاثة
    </div>
  </div>
</div>

العرض حسب محتوى متغيّر

استخدم الأصناف col-{breakpoint}-auto لتعيين قياس الأعمدة وفقًا للعرض الطبيعي لمحتواها.

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      العمود الأول من 3 أعمدة
    </div>
    <div class="col-md-auto">
      محتوى متغيّر العرض
    </div>
    <div class="col col-lg-2">
      العمود الثالث من 3 أعمدة
    </div>
  </div>
  <div class="row">
    <div class="col">
      العمود الأول من 3 أعمدة
    </div>
    <div class="col-md-auto">
      محتوى متغيّر العرض
    </div>
    <div class="col col-lg-2">
      العمود الثالث من 3 أعمدة
    </div>
  </div>
</div>

الأصناف المتجاوبة

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

جميع النقاط الحدّية

استخدم الأصناف ‎.col و ‎.col-‎‎*‎ للشبكات المتشابهة على جميع الأجهزة من الأصغر إلى الأعرض. استخدم الأصناف المُرَقَّمة إن احتجت عمودًا بقياس مُحدَّد؛ في ما عدا ذلك يُتاح الصّنف ‎.col.

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>
<div class="row">
  <div class="col-8">col-8</div>
  <div class="col-4">col-4</div>
</div>

الانتقال من أعمدة متكدّسة إلى شبكة أفقية

يمكن باستخدام مجموعة واحدة من الأصناف ‎.col-sm-*‎ إنشاءُ شبكة بسيطة تبدو متكدّسة (الواحد أسفل الآخر) على الأجهزة الصّغيرة جدًّا ثم تنتقل للوضع الأفقي على الشاشات الصغيرة (sm).

جرّب المثال التالي لترى النتيجة.

<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

الخلط بين أعمدة بقياسات مختلفة

إنْ لم تكن ترغب في تكديس طبقات متماثلة لتشكّل شبكة فيمكنك استخدام خليط من الأصناف لكلّ طبقة حسب الحاجة. جرّب المثال التالي لتكوّن فكرة أوضح عن آلية العمل.

<div class="container">
<!-- تظهر الأعمدة مكدّسة على الأجهزة الجوّالة نظرا لأن أحد العمودين يشغل عرض الشاشة كاملا، والعمود الآخر يشغل نصفها -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- تبدأ الأعمدة بأخذ نصف عرض الشاشة على الأجهزة الجوّالة ثم تتقلّص إلى الثلث على الأجهزة اللوحية والحواسيب -->
<div class="row">
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- تأخذ الأعمدة نصف الشاشة دائما، سواء على الأجهزة الجوّالة وعلى الحواسيب -->
<div class="row">
  <div class="col-6">.col-6</div>
  <div class="col-6">.col-6</div>
</div>
</div>

الخنادق

يمكن تعديل الخنادق بصورة متجاوبة عن طريقة إضافة حاشية خاصة في نقاط حدية معينة واستخدام أصناف الهامش السالبة. لتغيير الخنادق في صفّ معين ، قم بإقران صنف للهوامش السالبة في الصف ‎.row مع مطابقة ذلك في الأعمدة ‎.cols. قد يلزم تعديل الأب ‎.container أو ‎.container-fluid لتجنّب أيّ طفح غير مرغوب، وذلك باستخدام أصناف الحاشية المطابقة مرة أخرى.

في ما يلي مثال لتخصيص شبكة Bootstrap عند النقطة الحدية الكبيرة (lg) فما فوقها. سنزيد حاشية ‎.col باستخدام ‎.px-lg-5، وسنطابق ذلك باستخدام ‎.mx-lg-n5 في الأب ‎.row ثم نعدّل الحاوية ‎.container بإضافة الصنف ‎.px-lg-5.

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">عمود مخصص ذو حاشية</div>
    <div class="col py-3 px-lg-5 border bg-light">عمود مخصص ذو حاشية</div>
  </div>
</div>

أعمدة الصفوف

استخدم الأصناف المتجاوبة ‎.row-cols-*‎ المتجاوبة لتعيّن بسرعة عدد الأعمدة الأنسب لعرض المحتوى والخطاطة. في حين تُطبَّق الأًصناف ‎.col-*‎ العادية على الأعمدة فرادى (على سبيل المثال ، ‎.col-md-4) ، تُعيَّن أصناف أعمدة الصف في الأب ‎.row اختصارًا.

استخدم أصناف أعمدة الصفوف التالية لإنشاء خطاطات الشبكة الأساسية بسرعة أو للتحكم في خطاطات البطاقة.

<div class="container">
  <div class="row row-cols-2">
    <div class="col">عمود</div>
    <div class="col">عمود</div>
    <div class="col">عمود</div>
    <div class="col">عمود</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-3">
    <div class="col">عمود</div>
    <div class="col">عمود</div>
    <div class="col">عمود</div>
    <div class="col">عمود</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-4">
    <div class="col">عمود</div>
    <div class="col">عمود</div>
    <div class="col">عمود</div>
    <div class="col">عمود</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-4">
    <div class="col">عمود</div>
    <div class="col">عمود</div>
    <div class="col-6">عمود</div>
    <div class="col">عمود</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">عمود</div>
    <div class="col">عمود</div>
    <div class="col">عمود</div>
    <div class="col">عمود</div>
  </div>
</div>

يمكنك أيضا استعمال المخلوط ‎row-cols()‎:

.element {
  // ثلاث أعمدة ابتدائية
  @include row-cols(3);

  // خمس أعمدة من النقطة الحدية الوسطى فما فوقها
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

المحاذاة

استخدم أدوات المحاذاة عبر تخطيط Flexbox لمحاذاة الأعمدة أفقيًّا وعموديّا.

تنبيه: لا يدعم متصفحا Internet Explorer 10-11 المحاذاة العمودية للعناصر المرنة إن كانت سمة min-heigh مُعرّفة في الحاوية المرنة كما هو موضح أدناه. راجع حل العلة # 3 لمزيد من التفاصيل.

المحاذاة العمودية

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      واحد من ثلاثة أعمدة
    </div>
    <div class="col">
      واحد من ثلاثة أعمدة
    </div>
    <div class="col">
      واحد من ثلاثة أعمدة
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      واحد من ثلاثة أعمدة
    </div>
    <div class="col">
      واحد من ثلاثة أعمدة
    </div>
    <div class="col">
      واحد من ثلاثة أعمدة
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      واحد من ثلاثة أعمدة
    </div>
    <div class="col">
      واحد من ثلاثة أعمدة
    </div>
    <div class="col">
      واحد من ثلاثة أعمدة
    </div>
  </div>
</div>

و:

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      واحد من ثلاثة أعمدة
    </div>
    <div class="col align-self-center">
      واحد من ثلاثة أعمدة
    </div>
    <div class="col align-self-end">
      واحد من ثلاثة أعمدة
    </div>
  </div>
</div>

المحاذاة الأفقيّة

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      واحد من عموديْن
    </div>
    <div class="col-4">
      واحد من عموديْن
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      واحد من عموديْن
    </div>
    <div class="col-4">
      واحد من عموديْن
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      واحد من عموديْن
    </div>
    <div class="col-4">
      واحد من عموديْن
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      واحد من عموديْن
    </div>
    <div class="col-4">
      واحد من عموديْن
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      واحد من عموديْن
    </div>
    <div class="col-4">
      واحد من عموديْن
    </div>
  </div>
</div>

حذف الخنادق حول الأعمدة

يمكن حذف الخنادق المُعرَّفة مسبقا حول الأعمدة باستخدام الصّنف ‎.no-gutters. يحذف هذا الصّنف الهوامش (margin) السلبيّة حول السّطر (‎.row) والحاشيّات الأفقيّة (padding) من جميع الأعمدة المباشرة.

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

احذف الأب ‎.container أو ‎.container-fluidإن كنت تريد تصميمًا من الحافة إلى الحافة .

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

جرّب المثال التالي لترى كيف تظهر الأعمدة عند استخدام الصّنف ‎.no-gutters. يُرجى ملاحظة أنه يمكن استخدام هذا الصّنف مع جميع أصناف الشبكة المُعرَّفة مسبقًا.

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

التفاف الأعمدة

إذا وُضِع أكثر من 12 عمودًا ضمن سطر واحد فإنّ كلّ مجموعة من الأعمدة الزائدة ستشكّل وحدة تلتفّ إلى سطر جديد.

تأمّل نتيجة المثال التالي.

<div class="row">
  <div class="col-9">.col-9</div>
  <div class="col-4">.col-4<br>بما أنّ 9 + 4 = 13 أكبر من 12 فإن هذا العنصُر الذي يبلغ عرضه 4 أعمدة سيلتفّ إلى سطر جديد يشكّل فيه وحدة متماشية</div>
  <div class="col-6">.col-6<br>تكمل الأعمدة المتبقيّة على السطر الجديد</div>
</div>

نقل الأعمدة إلى سطر جديد

يتطلّب نقل الأعمدة إلى سطر جديد في تخطيط Flexbox استخدام الحيلة التاليّة: إضافة عنصُر بالعرض width: 100% حيثُ تريد نقل الأعمدة إلى سطر جديد. يُفتَرض أن يُنجَز هذا العمل باستخدام أصناف ‎.row متعدّدة، إلا أنّه لا يمكن التأكّد من أنّ ذلك سيعمل على جميع المتصفّحات.

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

    <!-- افرض نقل الأعمدة الموالية إلى سطر جديد-->
    <div class="w-100"></div>

    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
</div>

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

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

     <!-- افرض نقل الأعمدة المواليّة إلى سطر جديد، بدءًا من الأجهزة المتوسّطة -->
    <div class="w-100 d-none d-md-block"></div>

    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  </div>
</div>

إعادة الترتيب

ترتيب الأصناف

استخدم الأصناف ‎.order-‎ للتحكّم في الترتيب البصريّ للمحتوى. هذه الأصناف متجاوبة، لذا يمكن تعيينها حسب النقاط الحدّية (مثلًا: ‎‎‎.order-1 .order-md-2). يُمكن ترتيب الأصناف ‎.order-‎ من 1 إلى 12 بالنسبة لكلّ نقطة من النقاط الحدّية الخمس.

<div class="container">
  <div class="row">
    <div class="col">
      الأول في الشفرة، لكنّه غير داخل في الترتيب
    </div>
    <div class="col order-12">
      الثاني في الشفرة، إلّا أنه يظهر الأخير
    </div>
    <div class="col order-1">
      الثالث في الشفرة، غير أنّه الأول من الأعمدة المُرتّبة
    </div>
  </div>
</div>

كما يوجد الصّنفان ‎.order-first (أوّل في الترتيب) و ‎.order-last (أخير في الترتيب) اللذان يغيّران قيمة الخاصيّة order بالنسبة لعنصُر مّا بتطبيق القيمتيْن order: -1 و ‎order: 13 ‏(order: $columns‎ + 1) على التوالي. يمكن الجمع بين استخدام هذين الصّنفيْن والأصناف المُرقَّمة الأخرى ‎.order-‎*‎ حسب الحاجة.

<div class="container">
  <div class="row">
    <div class="col order-last">
      الأوّل في الشفرة، لكنّه الأخير
    </div>
    <div class="col">
      الثاني في الشفرة، لكنّه غير مُرتَّب
    </div>
    <div class="col order-first">
      الأخير في الشفرة، لكنّه الأوّل
    </div>
  </div>
</div>

إزاحة الأعمدة

توجد طريقتان لإزاحة الأعمدة في الشبكة: الأصناف ‎.offset-‎ و أدوات التباعد. تُعدّ أصناف الإزاحة لتوافق قياس الأعمدة بينما تفيد أدوات التباعد في الإنشاء السريع للمُخطَّطات التي يكون عرضُ الإزاحة فيها متغيّرًا.

أصناف الإزاحة

استخدم الأصناف ‎.offset-‎*‎ لإزاحة الأعمدة إلى اليمين. تزيد هذه الأصناف الهامش على الجانب الأيسر بما يوافق العدد * من الأعمدة. الصنف ‎.offset-md-4 - على سبيل المثال - ينقل العمود بما يوافق ‎.col-md-4 إلى اليمين.

جرّب نتيجة المثال التالي.

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

قد تحتاج إلى إعادة تعيين الإزاحة في نقاط حدّية، استخدم الأصناف offset-*-0 لهذا الغرض، راجع صفحة الأمثلة الخاصة بالشبكة.

<div class="container">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

أدوات الهامش

يتيح الانتقال إلى تخطيط Flexbox في الإصدار 4 من إطار العمل Bootstrap إمكانيّةَ استخدام أدوات الهامش مثل الصنف‎.ml-auto لفرض التباعد بين الأعمدة المتجاورة.

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto mr-auto">.col-auto .mr-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

إنشاء شبكة متعدّدة المستويات

أضف صنف ‎.row جديدًا ومجموعة أعمدة ‎.col-sm-‎*‎ داخل العمود ‎.col-sm-‎*‎ ذي المستوى الأعلى لإنشاء مستوى جديد داخل الشبكة. يجب أن تحوي أسطُر المستوى الجديد مجموعة من الأعمدة يصل عددها - على الأكثر - إلى 12 (لا يُفرَض استخدام جميع الأعمدة الاثني عشر المتوفّرة).

<div class="container">
  <div class="row">
    <div class="col-sm-9">
      المستوى 1: .col-sm-9
      <div class="row">
        <div class="col-8 col-sm-6">
          المستوى 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          المستوى 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

تخصيص الشبكة من المصدر

يُتاح للمطوّر عند استخدام ملفات Sass المصدرية خيارُ استخدام مخاليط Mixins ومتغيّرات Sass لإنشاء مُخطَّطات صفحات مُخَصّصة، ودلاليّة ومتجاوبة. تستخدم أصناف الشّبكة المُعرَّفة مسبقًا في إطار العمل Bootstrap المخاليط والمتغيّرات نفسها لتوفير مجموعة متكاملة وجاهزة للاستخدام من الأصناف تمكّن من إنشاء مُخطَّطات متجاوبة بسرعة.

متغيّرات Sass

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

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // الشاشات الصّغيرة جدًا / الهواتف
  xs: 0,
  // الشاشات الصّغيرة / الهواتف
  sm: 576px,
  // الشاشات المتوسّطة / الأجهزة اللوحيّة
  md: 768px,
  // الشاشات العريضة / الحواسيب 
  lg: 992px,
  // الشاشات العريضة جدًا / الحواسيب العريضة
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

المخاليط Mixins

تُستخدَم المخاليط بالتزامن مع متغيّرات الشبكة لتوليد أنماط CSS دلاليّة للعمل مع أعمدة شبكة منفردة.

// ينشئ عنصرًا مغلّفًا لسلسلة من الأعمدة
@include make-row();

// يجعل العنصُر جاهزًا للاستخدام في الشبكة (تطبيق جميع التنسيقات ما عدا العرض)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// التخصيص أكثر بإزاحة الأعمدة أو تغيير ترتيبها
@include make-col-offset($size, $columns: $grid-columns);

مثال على الاستخدام

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

.example-container {
  @include make-container();
  // احرص على أن تعرّف هذا العرض عقب  المخلوط لإعادة تعريف
  // `make-container()` المُولد من قِبل `width: 100%`
  width: 800px;
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">المحتوى الأساسي</div>
    <div class="example-content-secondary">المحتوى الثانوي</div>
  </div>
</div>

تخصيص الشّبكة

يمكن تخصيص أصناف الشبكة كاملةً باستخدام متغيّرات وجداول Sass المُضمَّنة في الملفات المصدريّة. غيّر عدد الطّبقات، والأبعاد في استعلامات الوسائط وعرض الحاويّات ثم جمّع المصدر لتحصُل على شبكة مُخصَّصة.

الأعمدة والخنادق

تستطيع تغيير عدد الأعمدة في الشبكة عن طريق متغيّرات Sass. يُستخدَم المتغيّر ‎$grid-columns لتوليد قياسات العرض (بالنسبة المئويّة) لكلّ عمود، في ما يسمح المتغيّر ‎$grid-gutter-width بتعيين قياسات عرض خاصّة للنقاط الحدّية تُقسَّم بالتساوي بين padding-left و padding-right للخنادق حول الأعمدة.

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

طبقات الشبكة

قد ترغب بتخصيص الشبكة على مستوى أعلى من الأعمدة: عدد طبقات الشبكة. إن أردت أربع طبقات فقط فيمكنك تحديث المتغيّريْن ‎$grid-breakpoints و ‎$container-max-widths ليبدوا على النّحو التالي:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

ستحتاج إلى حفظ الملفّ المصدري ثم تجميع المصدر (compile) بعد تعديل متغيّرات أو جداول Sass. ينتُج عن التجميع حينها مجموعة جديدة تمامًا من الأصناف المُعرَّفة مسبقًا لقياسات عرض الأعمدة، والإزاحات والترتيب. ستُحدَّث كذلك أدوات الإظهار والإخفاء لتستخدم النقاط الحدّية المُخصَّصة الجديدة. تأكّد من تعيين قيم الشبكة بالبكسل px وليس بوحدة قياس أخرى (remأو emأو %).

المصدر

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