بوت اسٹرپ 5 گرید: XXL

XXL سہولت گرید مثال

ایکس اسمال سمال میڈیم لارج ایکسرا لارج XXL
کلاس کا پیشونامہ .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
سکرین وسیعائی <576px >=576px >=768px >=992px >=1200px >=1400px

XXL سہولت کا تعریف یہ ہے کہ 1400 پیکسل سے زیادہکی سکرین وسیعائی。

مثال کا در اپراتور میانی، بڑی اور بہت بڑی سہولتوں پر 50%/50% کا تقسیم ہوگا، جبکہ XXL سہولتوں پر 25%/75% کا تقسیم ہوگا۔ درجہ اول اور درجہ اول درجہ کم سہولتوں پر، یہ خودکار طور پر پتھر سے بند ہوجائے گا (100%) :

مثال

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

خود کو بچارکریں

تذکرہ:تأکید کرتے ہیں کہ مجموعی تعداد ہمیشہ 12 رہے

XXL

درج ذیل مثال میں، ہم صرف .col-xxl-6 کلاس (بغیر .col-md-* اور یا .col-sm-*）。یعنی ایکس لارج اپریشنوں کو 50/50 فیصد میں تقسیم کیا جائے گا، لیکن بوسٹرپ میں بوسٹرپ، بوسٹرپ، بوسٹرپ، بوسٹرپ اور بوسٹرپ اپریشنوں کیلئے، یہ عمودی طور پر جمع ہوجائیں گے (100% وسعت):

مثال

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

خود کو بچارکریں

خودکار پلان بجٹ کولس

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

اگر اسکرین کی سائز1400px سے کم، سٹول آئندہ کی سطح پر جمع ہوجائیں گے:

<!-- دو ستون: خاص طور پر بڑی سائز کی اپنی وسعت 50% ہوگی -->
<div class="row">
  <div class="col-xxl">1 of 2</div>
  <div class="col-xxl">2 of 2</div>
</div>
<!-- چار ستون: خاص طور پر بڑی سائز کی اپنی وسعت 25% ہوگی -->
<div class="row">
  <div class="col-xxl">1 of 4</div>
  <div class="col-xxl">2 of 4</div>
  <div class="col-xxl">3 of 4</div>
  <div class="col-xxl">4 of 4</div>
</div>

خود کو بچارکریں