بوت اسپرینگ 5 گرید: چھوٹی ڈیوائز

مثال شبکه کوچک دستگاه

X کوچک کوچک متوسط بزرگ بزرگ‌تر از بزرگ 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>عالمی قدرت بنک (وووف)، 29 اپریل 1961 کو قائم کیا گیا، جس کا آئیکن ایک ببر ہے ...</p>
    </div>
    <div class="col-sm-9 bg-dark">
      <p>1980 میں، وووف کا سرکاری طور پر چین میں آنے کا اعلان کیا گیا، جس نے چین حکومت کی دعوت پر چین میں ببر اور اس کی زیستگاه کی حفاظت کا کام شروع کیا ...</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>عالمی قدرت بنک (وووف)، 29 اپریل 1961 کو قائم کیا گیا، جس کا آئیکن ایک ببر ہے ...</p>
    </div>
    <div class="col-sm-8 bg-dark">
      <p>1980 میں، وووف کا سرکاری طور پر چین میں آنے کا اعلان کیا گیا، جس نے چین حکومت کی دعوت پر چین میں ببر اور اس کی زیستگاه کی حفاظت کا کام شروع کیا ...</p>
    </div>
  </div>
</div>
<!-- 50%/50% تقسیم: -->
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 bg-primary">
      <p>عالمی قدرت بنک (وووف)، 29 اپریل 1961 کو قائم کیا گیا، جس کا آئیکن ایک ببر ہے ...</p>
    </div>
    <div class="col-sm-6 bg-dark">
      <p>1980 میں، وووف کا سرکاری طور پر چین میں آنے کا اعلان کیا گیا، جس نے چین حکومت کی دعوت پر چین میں ببر اور اس کی زیستگاه کی حفاظت کا کام شروع کیا ...</p>
    </div>
  </div>
</div>

اپنے آپ پر تجربہ کریئن

خودکار پیمانہ ستون

بوسٹرپ 5 میں، تمام مشینوں کیلئے مساوی چوڑائی کا ستون بنانے کیلئے ایک سادہ طریقہ ہے: صرف .col-sm-* میں نمبر کو حذف کریں اور صرف کال عناصرپر استعمال کی جاتی ہیں .col-sm کلاس پر استعمال کی جاتی ہیں، بوسٹرپ، کتنا سارا ستون کا پیمانہ پتہ لگا سکتا ہے، جس کا ہر ستون ایک ساگر چوڑائی کا حامل ہوگا۔

اگر صفحہ کی سائز576px سے کم، ستون افقی طور پر استحکام کریگا:

<!-- دو ستون: تمام صفحات کی 50% چوڑائی، جس میں سے بغیر کوچھ سمل مشین (100% چوڑائی) -->
<div class="row">
  <div class="col-sm">1 of 2</div>
  <div class="col-sm">2 of 2</div>
</div>
<!-- چار ستون: تمام صفحات کی 25% چوڑائی، جس میں سے بغیر کوچھ سمل مشین (100% چوڑائی) -->
<div class="row">
  <div class="col-sm">1 of 4</div>
  <div class="col-sm">2 of 4</div>
  <div class="col-sm">3 of 4</div>
  <div class="col-sm">4 of 4</div>
</div>

اپنے آپ پر تجربہ کریئن

آئندہ باب میں میڈیم اہمیت کیلئے مختلف تقسیم فیصدوں کا اضافہ کیسے کیا جاتا ہے، دکھایا جائے گا。