Bootstrap 5 الشبكة: الأجهزة الصغيرة

مثال شبكة الأجهزة الصغيرة جدًا

XSmall Small Medium Large Extra Large XXL
مقدمة الصنف .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
عرض الشاشة <576px >=576px >=768px >=992px >=1200px >=1400px

إذا كان لدينا تصميم بسيط يحتوي على عمودين، نأمل أن تكون العمودجميعتقسيم الأجهزة 25% / 75%.

سنضيف النوع التالي إلى العمودين:

<div class="col-3">....</div>
<div class="col-9">....</div>

النموذج التالي سيؤدي إلى تقسيم 25% / 75% لجميع الأجهزة (صغيرة جدًا، صغيرة، متوسطة، كبيرة، كبيرة جدًا وضخمة):

مثال

<div class="container-fluid">
  <div class="row">
    <div class="col-3 bg-primary">
      <p>منظمة الحياة البرية العالمية (WWF)، التي تأسست في 29 أبريل 1961، ورمزها هو الدب الأبيض...</p>
    </div>
    <div class="col-9 bg-dark">
      <p>في عام 1980، وصلت منظمة الحياة البرية العالمية (WWF) إلى الصين، بدعوة من الحكومة الصينية للعمل على حماية الدببة الأبيض وموائلها...</p>
    </div>
  </div>
</div>

جرب بنفسك

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

للتمييز بين 33.3/66.6% من التقسيم، يجب استخدام .col-4 و .col-8للتمييز بين 50/50% من التقسيم، يجب استخدام .col-6 و .col-6):

مثال

<!-- توزيع 33.3/66.6% -->
<div class="container-fluid">
  <div class="row">
    <div class="col-4 bg-primary">
      <p>منظمة الحياة البرية العالمية (WWF)، التي تأسست في 29 أبريل 1961، ورمزها هو الدب الأبيض...</p>
    </div>
    <div class="col-8 bg-dark">
      <p>في عام 1980، وصلت منظمة الحياة البرية العالمية (WWF) إلى الصين، بدعوة من الحكومة الصينية للعمل على حماية الدببة الأبيض وموائلها...</p>
    </div>
  </div>
</div>
<!-- توزيع 50/50% -->
<div class="container-fluid">
  <div class="row">
    <div class="col-6 bg-primary">
      <p>منظمة الحياة البرية العالمية (WWF)، التي تأسست في 29 أبريل 1961، ورمزها هو الدب الأبيض...</p>
    </div>
    <div class="col-6 bg-dark">
      <p>في عام 1980، وصلت منظمة الحياة البرية العالمية (WWF) إلى الصين، بدعوة من الحكومة الصينية للعمل على حماية الدببة الأبيض وموائلها...</p>
    </div>
  </div>
</div>

جرب بنفسك

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

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

<!-- عمدتين: عرض 50% -->
<div class="row">
  <div class="col">1 من 2</div>
  <div class="col">2 من 2</div>
</div>
<!-- أربعة أعمدة: عرض 25% -->
<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>

جرب بنفسك

الصفحة التالية ستعرض كيفية إضافة نسبة تقسيم مختلفة للأجهزة الصغيرة.