شبكة Bootstrap 5: XXL

مثال شبكة جهاز XXL

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

يُعرف جهاز XXL ب 1400 بكسل وما فوقعرض الشاشة.

الامثلة التالية ستقوم بإنشاء تقسيم بنسبة 50/50 على الأجهزة المتوسطة والكبيرة والكبيرة جداً، وتقسيم بنسبة 25/75 على الأجهزة الصغيرة والصغيرة جداً. سيتم ت堆يعها تلقائيًا على الأجهزة الصغيرة والصغيرة جداً (100%)：

مثال

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 col-xxl-3">
      <p>مؤسسة الحياة الطبيعية العالمية (WWF)، تأسست في 29 أبريل 1961، شعارها دب الأبيض...</p>
    </div>
    <div class="col-md-6 col-xxl-9">
      <p>في عام 1980، حضرت WWF رسميًا إلى الصين، دعوة من الحكومة الصينية للعمل في حماية الدب الأبيض وبيئته...</p>
    </div>
  </div>
</div>

تجربة بنفسك

ملاحظة:تأكدوا من أن مجموعها دائمًا 12.

استخدام XXL فقط

في المثال التالي، نحن فقط نحدد .col-xxl-6 الصفة (بدون .col-md-* و / أو .col-sm-*). هذا يعني أن الأجهزة xxlarge ستقسم 50/50%. ولكن، للأجهزة الكبيرة جدًا، الكبيرة، المتوسطة، الصغيرة والصغيرة جدًا، ستكون متداخلة عموديًا (عرض 100%):

مثال

<div class="container-fluid">
  <div class="row">
    <div class="col-xxl-6">
      <p>مؤسسة الحياة الطبيعية العالمية (WWF)، تأسست في 29 أبريل 1961، شعارها دب الأبيض...</p>
    </div>
    <div class="col-xxl-6">
      <p>في عام 1980، حضرت WWF رسميًا إلى الصين، دعوة من الحكومة الصينية للعمل في حماية الدب الأبيض وبيئته...</p>
    </div>
  </div>
</div>

تجربة بنفسك

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

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

إذا كان حجم الشاشةأقل من 1400px، الأعمدة ستتداخل أفقياً:

<!-- أعمدتين: في الأجهزة الكبيرة جدًا أو أكبر هي عرض 50% -->
<div class="row">
  <div class="col-xxl">1 من 2</div>
  <div class="col-xxl">2 من 2</div>
</div>
<!-- أربعة أعمدة: في الأجهزة الكبيرة جدًا أو أكبر هي عرض 25% -->
<div class="row">
  <div class="col-xxl">1 من 4</div>
  <div class="col-xxl">2 من 4</div>
  <div class="col-xxl">3 من 4</div>
  <div class="col-xxl">4 من 4</div>
</div>

تجربة بنفسك