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%:

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

لكن في الأجهزة المتوسطة، قد يكون التصميم الموزع 50% / 50% أفضل.

تعرف الأجهزة المتوسطة بأنها عرض الشاشةمن 768 بكسل إلى 991 بكسل.

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

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

في الأجهزة الصغيرة، استخدم النوع الذي يحتوي على -sm- النوع. في الأجهزة المتوسطة، استخدم النوع الذي يحتوي على -md- النوع.

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

مثال

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

جربها بنفسك

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

استخدام Medium فقط

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

مثال

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

جربها بنفسك

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

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

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

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

جربها بنفسك

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