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

في الفصل السابق، عرضنا مثالاً على شبكة، تحتوي على فئات مناسبة للأجهزة الصغيرة، المتوسطة، والكبيرة. استخدمنا عاملين div (المربعات)، وقمنا بتقسيم 25/75% على الأجهزة الصغيرة، و50/50% على الأجهزة المتوسطة، و33/66% على الأجهزة الكبيرة:

<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>

لكن على الأجهزة xlarge، قد يكون التصميم المخصص 20% / 80% أفضل.

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

للأجهزة xlarge، سنستخدم .col-xl-* النوع:

<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">....</div>
<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">....</div>

السطر التالي سيؤدي إلى تقسيم 25/75% على الأجهزة الصغيرة، و50/50% على الأجهزة المتوسطة، و33/66% على الأجهزة الكبيرة، وتقسيم 20/80% على الأجهزة xlarge وxxlarge. على الأجهزة المصغرة، سيتم ت堆积 تلقائيًا (100%):

مثال

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

جرب بنفسك

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

استخدام XLarge فقط

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

مثال

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

جرب بنفسك

إعداد الأعمدة التلقائي

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

إذا كان حجم الشاشةأقل من 1200px، الأعمدة ستتداخل بحلقة:

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

جرب بنفسك