شبكة Bootstrap 5: من الترتيب إلى الأفقي

مثال شبكة: ترتيب أفقي

لنقم بإنشاء نظام شبكة أساسي يبدأ في الأجهزة الصغيرة ويصبح أفقيًا في الأجهزة الأكبر.

في المثال التالي، يعرض تصميم داخلي بسيط لـ "ترتيب أفقي" لثلاثة عمودين، مما يعني أنه سيكون هناك تقسيم 50/50% على جميع الشاشات، باستثناء الشاشات الصغيرة جدًا، حيث سيتم ترتيبه تلقائيًا (100%):

مثال: ترتيب أفقي

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 bg-primary">
      <p>عمود 1 ...</p>
    </div>
    <div class="col-sm-6 bg-dark">
      <p>عمود 2 ...</p>
    </div>
  </div>
</div>

تجربة بنفسك

نصيحة:.col-sm-* الرقم في التصنيف يعني عدد الأعمدة التي يجب أن يغطيها div (12 عمودًا في المجموع). لذا،.col-sm-1 تخطي عمود واحد،.col-sm-4 تخطي 4 أعمدة،.col-sm-6 تخطي 6 أعمدة، وهلم جرا.

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

نصيحة:من خلال .container-fluid التصنيف إلى .container، يمكنك تغيير أي عرض كامل تحويل التصميم إلى عرض ثابت التصميم التفاعلي:

مثال: حاوية تفاعلية

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <p>عمود 1 ...</p>
    </div>
    <div class="col-sm-6">
      <p>عمود 2 ...</p>
    </div>
  </div>
</div>

تجربة بنفسك

أعمدة التخطيط التلقائي

في Bootstrap 5، هناك طريقة بسيطة لإنشاء أعمدة متساوية العرض لجميع الأجهزة: فقط من .col-size-* حذف الرقم، واستخدام col فقط في العنصر .col-size التصنيف. Bootstrap ستعرف عدد الأعمدة، وسيحصل كل عمود على نفس العرض. تصنيفات الحجم (sm، md وما إلى ذلك) تحدد متى يجب أن يستجيب كل عمود:

<!-- عمدتين: عرض 50% على جميع الأجهزة، باستثناء الأجهزة الصغيرة جداً (عرض 100%) -->
<div class="row">
  <div class="col-sm">1 من 2</div>
  <div class="col-sm">2 من 2</div>
</div>
<!-- أربعة أعمدة: عرض 25% على جميع الأجهزة، باستثناء الأجهزة الصغيرة جداً (عرض 100%) -->
<div class="row">
  <div class="col-sm">1 من 4</div>
  <div class="col-sm">2 من 4</div>
  <div class="col-sm">3 من 4</div>
  <div class="col-sm">4 من 4</div>
</div>

تجربة بنفسك