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

وصف الدورة:

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

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

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

لكن في الأجهزة الكبيرة، قد تكون تصميمات التقسيم 33% / 66% أفضل.

يُعرف الجهاز الكبير بأنه عرض الشاشةمن 992 بكسل إلى 1199 بكسل.

للأجهزة الكبيرة، سنستخدم .col-lg-* الصفة:

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

في الأجهزة الصغيرة، يُفضل استخدام الصفات التي تحتوي على -sm- الصفة. في الأجهزة المتوسطة، يُفضل استخدام الصفات التي تحتوي على -md- الصفة. في الأجهزة الكبيرة، يُفضل استخدام الصفات التي تحتوي على -lg- الصفة.

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

مثال

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

جربها بنفسك

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

استخدام Large فقط

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

مثال

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

جربها بنفسك

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

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

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

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

جربها بنفسك