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

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

صغير جداً الصغير المتوسط الضخم الضخم جداً XXL
مقدمة الفئة .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
عرض الشاشة <576px >=576px >=768px >=992px >=1200px >=1400px

لنفترض أن لدينا تصميم بسيط يحتوي على عمودين. نريد تفكيك العمودين بنسبة 25% / 75% للأجهزة الصغيرة.

يُعرف الجهاز الصغير بأنه عرض الشاشةمن 576 بكسل إلى 767 بكسل.

للأجهزة الصغيرة سنستخدم .col-sm-* فئة.

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

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

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

مثال

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

جربها بنفسك

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

للتفكيك بنسبة 33.3% / 66.6% يجب استخدام .col-sm-4 و .col-sm-8للتفكيك بنسبة 50% / 50% يجب استخدام .col-sm-6 و .col-sm-6) :

مثال

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

جربها بنفسك

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

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

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

<!-- إثنين من الأعمدة: عرض 50% على جميع الشاشات، باستثناء الأجهزة الصغيرة جداً (عرض 100%) -->
<div class="row">
  <div class="col-sm">1 من 2</div>
  <div class="col-sm">2 من 2</div>
</div>
<!-- أربعة أعمدة: عرض 25% على جميع الشاشات، باستثناء الأجهزة الصغيرة جداً (عرض 100%) -->
<div class="row">
  <div class="col-sm">1 من 4</div>
  <div class="col-sm">2 من 4</div>
  <div class="col-sm">3 من 4</div>
  <div class="col-sm">4 من 4</div>
</div>

جربها بنفسك

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