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

بہت چھوٹا کی جیگھ میں مثال

ایک ساتھ چھوٹا چھوٹا متوسط بڑا ایک ساتھ بڑا XXL
پیشوند کلاس .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
اسکرین کی چوڑائی <576px >=576px >=768px >=992px >=1200px >=1400px

اگر چاہئیے تو دو سطر کا ایک سادہ پلان موجود ہوگا. چاہیے تو سطر بندر کی جگہ بند کریں گے:سبھی25% / 75% کی تقسیم کردار میں دیکھیں گے:

ہم دو سطر میں درج ذیل کلاس کو شامل کریں گے:

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

یہ مثال سبھی آلات (بہت چھوٹا، چھوٹا، متوسط، بڑا، بہت بڑا اور بہت بڑا) کا 25% / 75% تقسیم کرے گا۔

مثال

<div class="container-fluid">
  <div class="row">
    <div class="col-3 bg-primary">
      <p>عالمی قدرتی فاؤنڈیشن (WWF)، جو 1961 میں 29 اپریل کو قائم ہوا، اس کا نشان ایک کیوبائو ہے...</p>
    </div>
    <div class="col-9 bg-dark">
      <p>1980 میں، ووئی ایف آئی (WWF) رسمی طور پر چین میں آنے لگا، حکومت چین کی دعوت پر، کیوبائو اور اس کی آبادی کی حفاظت کا کام کرنا شروع کیا...</p>
    </div>
  </div>
</div>

خود سے کوشش کریئن

توجہ دیں:پتاسان کو یا کچھ بھی کم سے کم 12 کا مجموعہ بنائیں (12 سے کم کو استعمال نہ کریں):

33.3% / 66.6% تقسیم کیلئے، آپ کو .col-4 اور .col-850% / 50% تقسیم کیلئے، آپ کو .col-6 اور .col-6):

مثال

<!-- 33.3%/66.6% تقسیم -->
<div class="container-fluid">
  <div class="row">
    <div class="col-4 bg-primary">
      <p>عالمی قدرتی فاؤنڈیشن (WWF)، جو 1961 میں 29 اپریل کو قائم ہوا، اس کا نشان ایک کیوبائو ہے...</p>
    </div>
    <div class="col-8 bg-dark">
      <p>1980 میں، ووئی ایف آئی (WWF) رسمی طور پر چین میں آنے لگا، حکومت چین کی دعوت پر، کیوبائو اور اس کی آبادی کی حفاظت کا کام کرنا شروع کیا...</p>
    </div>
  </div>
</div>
<!-- 50%/50% تقسیم -->
<div class="container-fluid">
  <div class="row">
    <div class="col-6 bg-primary">
      <p>عالمی قدرتی فاؤنڈیشن (WWF)، جو 1961 میں 29 اپریل کو قائم ہوا، اس کا نشان ایک کیوبائو ہے...</p>
    </div>
    <div class="col-6 bg-dark">
      <p>1980 میں، ووئی ایف آئی (WWF) رسمی طور پر چین میں آنے لگا، حکومت چین کی دعوت پر، کیوبائو اور اس کی آبادی کی حفاظت کا کام کرنا شروع کیا...</p>
    </div>
  </div>
</div>

خود سے کوشش کریئن

خودکار لائن آؤٹ کی سمتوں

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

<!-- دو سمت: 50% پیمائش -->
<div class="row">
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>
<!-- چار سمت: 25% پیمائش -->
<div class="row">
  <div class="col">1 of 4</div>
  <div class="col">2 of 4</div>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</div>
</div>

خود سے کوشش کریئن

بعد کا باب اس بات کو دکھائے گا کہ چھوٹی آلات کیلئے مختلف تقسیم فیصدوں کو کیسے شامل کیا جاتا ہے。