مثال على شبكة Bootstrap 5

نحن جمعنا بعض أمثلة تصميم الشبكة لـ Bootstrap 5.

ثلاثة تقسيمات مساوية

استخدمها على عدد محدد من العناصر .col استخدم الفئة، وBootstrap ستعرف عدد العناصر (وإنشاء أعمدة متساوية العرض). في المثال التالي، استخدمنا ثلاثة عناصر col، كل منها يبلغ عرضه 33.33%.

مثال

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

جرب بنفسك

ثلاثة أعمدة مساوية باستخدام أرقام

يمكنك أيضًا استخدام أرقام لتحكم في عرض الأعمدة. تأكد فقط من أن مجموعها يساوي أو يقل عن 12 (لا تحتاج إلى استخدام جميع 12 عمودًا متاحة):

مثال

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

جرب بنفسك

ثلاثة أعمدة غير مساوية

لإنشاء أعمدة غير مساوية، يجب عليك استخدام أرقام. مثال التالي سيقوم بإنشاء تقسيم 25/50/25%:

مثال

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

جرب بنفسك

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

لكن، من خلال تعيين عرض عمود واحد فقط، يكفي، وتسمح للأعمدة المجاورة بضبط حجمها تلقائيًا. مثال التالي سيقوم بإنشاء تقسيم 25/50/25%:

مثال

<div class="row">
  <div class="col">col</div>
  <div class="col-6">col-6</div>
  <div class="col">col</div>
</div>

جرب بنفسك

مزيد من الأعمدة المساوية

مثال

<!-- ستونان مساويان -->
<div class="row">
  <div class="col">1 من 2</div>
  <div class="col">2 من 2</div>
</div>
<!-- أربعة أعمدة مساوية -->
<div class="row">
  <div class="col">1 من 4</div>
  <div class="col">2 من 4</div>
  <div class="col">3 من 4</div>
  <div class="col">4 من 4</div>
</div>
<!-- ستونان مساويان -->
<div class="row">
  <div class="col">1 من 6</div>
  <div class="col">2 من 6</div>
  <div class="col">3 من 6</div>
  <div class="col">4 من 6</div>  
  <div class="col">5 من 6</div>
  <div class="col">6 من 6</div>
</div>

جرب بنفسك

Row Cols

يمكنك أيضًا استخدام .row-cols-* يجب أن تظهر تحكم الفئة في الأعمدة المجاورة لبعضها البعض (بغض النظر عن عدد الأعمدة):

مثال

<div class="row row-cols-1">
  <div class="col">1 من 2</div>
  <div class="col">2 من 2</div>
</div>
<div class="row row-cols-2">
  <div class="col">1 من 4</div>
  <div class="col">2 من 4</div>
  <div class="col">3 من 4</div>
  <div class="col">4 من 4</div>
</div>
<div class="row row-cols-3">
  <div class="col">1 من 6</div>
  <div class="col">2 من 6</div>
  <div class="col">3 من 6</div>
  <div class="col">4 من 6</div>  
  <div class="col">5 من 6</div>
  <div class="col">6 من 6</div>
</div>

جرب بنفسك

مزيد من الأعمدة غير المساوية

مثال

<!-- ستونان غیر برابر -->
<div class="row">
  <div class="col-8">1 من 2</div>
  <div class="col-4">2 من 2</div>
</div>
<!-- Four unequal columns -->
<div class="row">
  <div class="col-2">1 من 4</div>
  <div class="col-2">2 من 4</div>
  <div class="col-2">3 من 4</div>
  <div class="col-6">4 من 4</div>
</div>
<!-- Setting two column widths -->
<div class="row">
  <div class="col-4">1 من 4</div>
  <div class="col-6">2 من 4</div>
  <div class="col">3 من 4</div>
  <div class="col">4 من 4</div>
</div>

جرب بنفسك

مستوى واحد

إذا كان عمودًا أطول من عمود آخر (بسبب النص أو إعدادات الارتفاع CSS)، فإن الباقي سيتبعه:

مثال

<div class="row">
  <div class="col">Lorem ipsum...</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

جرب بنفسك

عمود متداخل

هذا المثال يوضح كيفية إنشاء تصميم عمودي يحتوي على عمودين آخرين داخل العمود الأول:

مثال

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

جرب بنفسك

فئات الاستجابة

يحتوي نظام الشبكة في Bootstrap 5 على خمس فئات:

  • .col- (أجهزة صغيرة جدًا - عرض الشاشة أقل من 576 بكسل)
  • .col-sm- (أجهزة صغيرة - عرض الشاشة يساوي أو أكبر من 576 بكسل)
  • .col-md- (أجهزة متوسطة - عرض الشاشة يساوي أو أكبر من 768 بكسل)
  • .col-lg- (أجهزة كبيرة - عرض الشاشة يساوي أو أكبر من 992 بكسل)
  • .col-xl- (أجهزة xlarge - عرض الشاشة يساوي أو أكبر من 1200px)
  • .col-xxl- (أجهزة xxlarge - عرض الشاشة يساوي أو أكبر من 1400px)

يمكنك دمج الفئات المذكورة أعلاه لإنشاء تصميمات أكثر حيوية وسهولة التكيف.

نصيحة:كل فئة يتم تضخيمها بنسب متساوية، لذا إذا كنت ترغب في sm و md إذا كنت تريد تعيين نفس العرض، فما عليك سوى تحديد sm。

من الت堆يع إلى التخطيط الأفقي

هذا المثال يوضح كيفية إنشاء تصميم عمودي، حيث يتم ت堆يعه على الأجهزة الصغيرة جدًا، ثم يصبح تصميمًا أفقيًا على الأجهزة الكبيرة (sm، md، lg و xl):

مثال

<div class="row">
  <div class="col-sm-9">col-sm-9</div>
  <div class="col-sm-3">col-sm-3</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>

جرب بنفسك

Mix و Match

مثال

<!-- في الأجهزة الصغيرة جداً 50/50، في الأجهزة الكبيرة 75/25 -->
<div class="row">
  <div class="col-6 col-sm-9">col-6 col-sm-9</div>
  <div class="col-6 col-sm-3">col-6 col-sm-3</div>
</div>
<!-- في الأجهزة الصغيرة جداً والصغيرة والمتوسطة 58/42، في الأجهزة الكبيرة والكبيرة جداً 66.3/33.3 -->
<div class="row">
  <div class="col-7 col-lg-8">col-7 col-lg-8</div>
  <div class="col-5 col-lg-4">col-5 col-lg-4</div>
</div>
<!-- في الأجهزة الصغيرة 25/75، في الأجهزة المتوسطة 50/50، في الأجهزة الكبيرة والكبيرة جداً 33/66. في الأجهزة الصغيرة جداً، سيتم ترتيبها تلقائيًا (100%). -->
<div class="row">
  <div class="col-sm-3 col-md-6 col-lg-4">col-sm-3 col-md-6 col-lg-4</div>
  <div class="col-sm-9 col-md-6 col-lg-8">col-sm-9 col-md-6 col-lg-8</div>
</div>

جرب بنفسك

بدون gutter

إذا كنت ترغب في تغيير مسافة الفواصل بين الأعمدة (المساحة الإضافية)، استخدم أي .g-1|2|3|4|5 النوع (.g-4 هي القيمة الافتراضية).

إذا كنت ترغب في حذف خطوط التشطيب (gutter) بشكل كامل، استخدم .g-0：

مثال

<div class="row g-0">

جرب بنفسك