تعلم نظام Bootstrap 4 Grid في 10 دقائق

يُستخدم نظام Bootstrap 4 Grid للتخطيطات سريعة الاستجابة.

يمثل التخطيط سريع الاستجابة طريقة محاذاة العناصر في الصفحة بدرجات دقة مختلفة. من المهم أن تفهم كيفية استخدام الشبكة قبل التعرف على أي مكون آخر من مكونات Bootstrap 4 ، لأنه مهما كان العنصر الذي تستخدمه ، فستحتاج إلى وضعه في مكان ما على الشاشة.

هيا بنا نبدأ!

جدول المحتويات

  • Bootstrap 4 حاويات
  • Bootstrap 4 صفوف
  • Bootstrap 4 أعمدة
  • قراءة متعمقة

تتكون شبكة Bootstrap 4 من حاويات وصفوف وأعمدة. سنأخذهم واحدًا تلو الآخر ونشرحهم.

Bootstrap 4 حاويات

حاوية Bootstrap 4 هي عنصر في الفصل .container. الحاوية هي جذر نظام شبكة Bootstrap 4 وتُستخدم للتحكم في عرض التخطيط.

تحتوي حاوية Bootstrap 4 على جميع العناصر الموجودة في الصفحة. هذا يعني أن صفحتك يجب أن تحتوي على الهيكل التالي: أولاً نص صفحة HTML ، بداخلها يجب إضافة الحاوية وجميع العناصر الأخرى داخل الحاوية.

 ... 

.containerيحدد الفصل البسيط عرض التخطيط اعتمادًا على عرض الشاشة. يضع المحتوى في منتصف الصفحة محاذاة أفقيًا. توجد مساحة متساوية بين حاوية Bootstrap 4 والحافة اليسرى واليمنى للصفحة.

على .containerجداول أسفل في عرض مثل شاشة عرض يضيق ويصبح العرض الكامل على الهاتف المحمول. يتم تحديد عرض الحاوية داخل مكتبة Bootstrap 4 لكل حجم شاشة. يمكنك رؤية الأحجام الدقيقة هنا.

تأخذ الحاوية كاملة العرض 100٪ من حجم الشاشة بغض النظر عن عرض الشاشة. لاستخدامه تحتاج إلى إضافة الفصل. container-fluid.

 Hello! I am in a simple container. Hello! I am in a full-width container. 

يمكنك عرض CodePen هنا.

لمعرفة الاختلافات بين نوعي الحاويات ، يمكنك فتح القلم في وحدة التحكم الخاصة بك والتبديل بين أحجام الشاشة.

Bootstrap 4 صفوف

صفوف Bootstrap 4 عبارة عن شرائح أفقية من الشاشة. يتم استخدامها فقط كأغلفة للأعمدة. لاستخدامها ، تحتاج إلى .rowالفصل.

 ... 

فيما يلي أهم الأشياء التي يجب أن تتذكرها حول صفوف Bootstrap 4:

  • يتم استخدامها فقط لاحتواء الأعمدة. إذا قمت بوضع عناصر أخرى داخل الصف جنبًا إلى جنب مع الأعمدة ، فلن تحصل على النتيجة المتوقعة.
  • يجب وضعها في حاويات. إذا لم تفعل ذلك ، فستحصل على تمرير أفقي على صفحتك. يحدث هذا لأن الصفوف بها هوامش سالبة يسار ويمنى تساوي 15. تحتوي الحاوية على حشوة 15 بكسل ، لذا فهي تتعارض مع الهوامش.
  • يجب أن تكون الأعمدة أبناء الصف. وإلا فإنها لن تتماشى. يتم إنشاء الصفوف والأعمدة للعمل معًا في هذا التسلسل الهرمي الصارم.

Bootstrap 4 أعمدة

يمكننا الآن الوصول إلى الجزء الجميل من هذا البرنامج التعليمي ، أعمدة Bootstrap 4. الأعمدة رائعة! إنها تساعدك على تقسيم الشاشة أفقيًا.

إذا وضعت عمودًا واحدًا في صفك ، فسيشغل كل العرض. إذا أضفت عمودين ، فسيأخذ كل منهما 1/2 من العرض. وهكذا ينطبق الأمر على أي عدد من الأعمدة.

 ... ... ... ... ... ... ... ... 

يمكنك رؤية الرمز مباشرة على CodePen.

ملاحظة جانبية: الأعمدة غير ملونة. لقد أضفت للتو ألوانًا لوصف أكثر إقناعًا بصريًا / حتى تبدو جميلة.

ضبط الأحجام للأعمدة

يؤدي استخدام .colالفئة إلى ضبط عرض العمود ديناميكيًا. هذا يعني أنه بناءً على عدد الأعمدة في الصف ، سيكون عرض العمود هو عرض الحاوية مقسومًا على عدد الأعمدة.

لكن هناك طريقة أخرى لتعريف الأعمدة. يمكنك استخدام الفئات للأعمدة وتحديد حجمها.

بشكل افتراضي ، تتكون شبكة Bootstrap 4 من 12 عمودًا. يمكنك تحديد أي حجم من 1 إلى 12 للعمود الخاص بك. إذا كنت تريد 3 أعمدة متساوية ، فيمكنك استخدامها .col-4لكل عمود (لأن كل عمود 3 * 4 = 12). أو يمكنك تعيين أحجام مختلفة لهم. وهنا بعض الأمثلة:

 ... ... ... ... ... ... ... ... 

يمكنك رؤية الرمز مباشرة على CodePen.

إذا لم يصل مجموع العمودين في صفك إلى 12 ، فلن يملأ الصف بأكمله. إذا تجاوز مجموع الأعمدة 12 ، فسوف ينتقل إلى السطر التالي. سيعرض السطر الأول فقط العناصر الأولى التي تضيف ما يصل إلى 12 أو أقل.

تعيين نقاط التوقف للأعمدة

إذا أخذت المثال أعلاه وأردت عرضه على الهاتف المحمول ، فقد تواجه بعض المشكلات. سيؤدي عرض خمسة أعمدة على الهاتف المحمول إلى جعل المحتوى غير قابل للقراءة.

هذا هو المكان الذي يلعب فيه أحد أقوى مكونات Bootstrap 4. من أجل الحصول على تخطيطات مختلفة على الشاشات المختلفة ، لن تحتاج إلى كتابة استعلامات الوسائط ، بدلاً من ذلك يمكنك استخدام نقاط توقف الأعمدة.

نقطة التوقف هي متغير Bootstrap 4 يرمز إلى دقة الشاشة. عندما تحدد نقطة توقف لفصل ما ، فأنت تخبر الفصل أن يكون نشطًا فقط من أجل الدقة التي تكون على الأقل بحجم الرقم الذي تحمله نقطة التوقف.

أبسط فصل سنتعلم عنه هو .col-[breakpoint]الفصل. عندما تستخدم هذه الفئة ، فأنت تحدد سلوك الأعمدة فقط عندما يتم عرضها على الأجهزة التي تحتوي على دقة نقطة توقف محددة على الأقل. حتى نقطة التوقف المحددة ، ستتم محاذاة الأعمدة عموديًا بشكل افتراضي. وبعد نقطة التوقف الخاصة بك ، ستتم محاذاة أفقيًا بسبب الفصل الدراسي.

يحتوي Bootstrap على 4 نقاط توقف يمكنك استخدامها:

  • .col-sm للهواتف المحمولة الأكبر حجمًا (الأجهزة ذات الدقة ≥ 576 بكسل) ؛
  • .col-md للأجهزة اللوحية (768 بكسل) ؛
  • .col-lg لأجهزة الكمبيوتر المحمولة (992 بكسل) ؛
  • .col-xl لأجهزة الكمبيوتر المكتبية (≥ 1200 بكسل)

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

في مثالنا سنستخدم .col-lgنقطة التوقف ونرى كيف تبدو الأعمدة على الشاشات المختلفة. بالنسبة إلى الدقة الأقل من نقطة التوقف المحددة (<992 بكسل) ، سيتم عرض الأعمدة رأسياً. هذا يعني أنه على الأجهزة المحمولة والأجهزة اللوحية ، ستبدو الأعمدة كما يلي:

وبالنسبة للأجهزة التي تحتوي على دقة أعلى أو مساوية لنقطة التوقف (px992 بكسل) ، فإن الأعمدة ستنتقل في نفس الصف. هذا يعني أنه على أجهزة الكمبيوتر المحمولة وأجهزة الكمبيوتر المكتبية ستحصل على هذه النتيجة:

 ... ... 

يمكنك رؤية الرمز مباشرة على CodePen.إذا فتحت Codepen في نافذة أخرى وشاهدت الصفحة بدقة مختلفة ، فسترى الأعمدة تغير مواقعها.

إذا كنت تريد أن يسير العمودان على نفس الخط بدءًا من الهواتف المحمولة الأكبر حجمًا التي ستستخدمها .col-sm، للأجهزة اللوحية .col-mdوللشاشات الكبيرة جدًا .col-xl.

ضبط الأحجام ونقاط التوقف للأعمدة

يمكنك الجمع بين الأحجام ونقاط التوقف واستخدام فئة واحدة مع التنسيق .col-[breakpoint]-[size].

على سبيل المثال ، إذا كنت تريد محاذاة ثلاثة أعمدة بأحجام مختلفة في صف يبدأ بدقة الكمبيوتر المحمول ، فأنت بحاجة إلى القيام بذلك:

 ... ... ... 

ستحصل على هذه النتيجة على درجات دقة أقل من 992 بكسل:

وللشاشات التي تكون 992 بكسل:

مرة أخرى ، يمكنك رؤية الكود مباشرة على CodePen.

ولكن ماذا لو كنت تريد عرض عمود واحد في كل صف على درجات دقة نقالة صغيرة وعمودين في كل صف على الأجهزة اللوحية وأربعة على أجهزة الكمبيوتر المحمولة أو الأجهزة ذات الدقة العالية؟

ثم تقوم بإضافة فئات متعددة لعمود واحد لوصف سلوك كل دقة. باستخدام فئات متعددة ، فإنك تحدد أن المحتوى سيأخذ ستة فتحات على الأجهزة اللوحية وثلاثة على أجهزة الكمبيوتر المحمولة.

 ... ... ... ... 

ستظهر النتيجة هكذا على الأجهزة اللوحية:

ومثل هذا على أجهزة الكمبيوتر المحمولة وبدقة أعلى:

هذا المثال موجود أيضًا على CodePen.

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

أعمدة المقاصة

إذا كنت لا تريد أن تكون الأعمدة بجوار بعضها البعض ، فيمكنك استخدام الفصل .offset-[breakpoint]-[size]مع امتداد .col-[breakpoint]-[size].

يماثل استخدام هذه الفئة إضافة عمود فارغ قبل العمود. اليك مثال بسيط:

 ... ... 

يمكنك رؤية الرمز مباشرة على CodePen.

يمكنك استخدام الفصل في أي عمود في الصف. وفيما يلي بعض الأمثلة أكثر:

 ... ... ... ... ... 

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

قد يكون هذا بمثابة مفاجأة ، ولكن يمكنك إضافة صف داخل عمود!

سيتم بعد ذلك تقسيم الصف المعني (الذي سيكون عرض عموده الأصلي) إلى 12 عمودًا (أصغر) يمكنك الرجوع إليها من خلال .col-* الفئات.

دعنا نلقي نظرة على ما يحدث عندما نقوم بإدراج صف جديد داخل عمود:

 ... ... ... ... 

يمكنك رؤية الرمز مباشرة على CodePen.

بمعرفة ذلك ، يمكنك التعمق في العديد من المستويات لتنظيم معلوماتك. ستوفر لك الأعمدة طريقة بسيطة لإدارة مساحتك.

يختتم هذا المعرفة الأساسية المتعلقة بنظام الشبكة المتجاوبة Bootstrap 4. إذا كانت لديك أسئلة ، فيرجى إبلاغي بذلك في التعليقات ، وسأكون سعيدًا بالإجابة.

قراءة متعمقة

إذا كان لديك المزيد من الوقت ، فإليك بعض الموارد المفيدة:

  • توثيق الشبكة الرسمية من GetBootstrap
  • فيديو تعليمي من Scrimba

تم نشر هذه المقالة في البداية على مدونة BootstrapBay. إنه جزء من سلسلة أكبر من دروس Bootstrap 4 تسمى 14 Days of Bootstrap 4. إذا كنت ترغب في مواصلة التعرف على مكونات Bootstrap 4 ، فهذه المقالات هي مكان جيد للبدء.

وإذا كنت ترغب في بدء تطويرك باستخدام نموذج Bootstrap ، فيمكنك التحقق من سوقنا.

ولكن قبل الخوض في التفاصيل ، توقف لحظة للاحتفال بمهاراتك المكتسبة حديثًا !؟