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

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث

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

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

يستخدم نظام الشبكة في إطار العمل Bootstrap سلسلة من الحاويّات، والأسطُر Rows والأعمدة Columns لتخطيط المحتوى ومحاذاته. يُبنَى نظام الشبكة Grid في إطار العمل Bootstrap على صناديق CSS المرنة 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>

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

ينتُج عن استخدام التخطيط التلقائي لأعمدة شبكة خلايا 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>

أعمدة متساوية العرض تمتدّ على أسطُر عدّة

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

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</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="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 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>

المحاذاة

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

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

<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) من جميع الأعمدة المباشرة.

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

.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="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 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>

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

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

استخدم الأصناف ‎.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">
      First, but last
    </div>
    <div class="col">
      Second, but unordered
    </div>
    <div class="col order-first">
      Third, but first
    </div>
  </div>
</div>
مجلوبة من "https://wiki.hsoub.com/index.php?title=Bootstrap/grid&oldid=3590"