بوت اسپت 5 کا گرید

بوت اسپت 5 کا گرید سسٹم

Bootstrap گرید سسٹم flexbox سے بنایا گیا ہے، ویب پینل پر زیادہ سے زیادہ 12 کلومن کی اجازت ہے۔

آپ اگر تمام 12 کلومن کا استعمال نہیں کرنا چاہتے تو، ان کلومن کو جمع کرسکتے ہیں، تاکہ چوڑا کلومن بناسکتے ہیں:

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
span 4 span 4 span 4
span 4 span 8
span 6 span 6
span 12

گرید سسٹم تیز جواب دہ، کلومن اسکرین کی چوڑائی کے مطابق خودکار طور پر پھر سے ترتیب دیتی ہیں۔

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

گرید کلاس

Bootstrap 5 گرید سسٹم میں چھ کلاس ہیں:

  • .col- (بہت چھوٹا ڈیوائس - اسکرین کی چوڑائی 576 پیکسل سے کم کی ہوتی ہے)
  • .col-sm- (چھوٹا ڈیوائس - اسکرین کی چوڑائی 576 پیکسل یا اس سے زیادہ کی ہوتی ہے)
  • .col-md- (بھاری ڈیوائس - اسکرین کی چوڑائی 768 پیکسل یا اس سے زیادہ کی ہوتی ہے)
  • .col-lg- (بڑا ڈیوائس - اسکرین کی چوڑائی 992 پیکسل یا اس سے زیادہ کی ہوتی ہے)
  • .col-xl- (xlarge ڈیوائس - اسکرین کی چوڑائی 1200px یا اس سے زیادہ کی ہوتی ہے)
  • .col-xxl- (xxlarge ڈیوائس - اسکرین کی چوڑائی 1400px یا اس سے زیادہ کی ہوتی ہے)

آپ اس سے متعدد کلاس کو کیمپوزیشن میں جمع کرسکتے ہیں، تاکہ دینامک اور منعطف تر لائ آؤٹ بناسکتے ہیں۔

پوچھ:کسی بھی کلاس کو تناسب سے بڑھایا جاتا ہے، لہذا اگر آپ چاہتے ہیں کہ sm اور md مساوی عرض تنظیم کرنا، صرف آپ کو کافی ہوگا sm۔

Bootstrap 5 گرید کا بنیادی ڈھانچہ

یہ Bootstrap 5 گرید کا بنیادی ڈھانچہ ہے:

<!-- کال کی چوڑائی کنٹرول کرنا، اور وہاں پر ان کی نمائش کا کنٹرول کرنا -->
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<!-- یا بوتسپر کو لائاوت کا کام دیں -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

پہلا مثال: ایک سطر بنانا (<div class="row">）。اور بعد میں، درکار تعداد کا کالوں کا شمار (با مناسب .col-*-* کلاس کی تگ (کلاس کی تگ)）。پہلا ستارا (*) جوابی کا معنامند ہوتا ہے: sm، md، lg، xl یا xxl، اور دوسرا ستارا شمار کا معنامند ہوتا ہے، جس کا مجموعہ ہر سطر میں 12 ہونا چاہئے۔

دوسرے مثال: نہ کسی کال کو کال ایک شمار کا شمار نہ کریں، بلکہ بوتسپر کو لائاوت کا کام دیں، تاکہ مساوی کال بنائیں: دو "col" عنصر = ہر کال کی چوڑائی 50% ہوتی ہے، اور تین کالوں کا مجموعہ ہر کال کی چوڑائی 33.33% ہوتی ہے۔ چار کال = 25% چوڑائی، وغیرہ۔ آپ اور یہ استعمال کرسکتے ہیں .col-sm|md|lg|xl|xxl سٹون کو جوابی بنانا

اب ہم کچھ بنیادی بیوٹسپر 5 گرید لائاوت کے مثالوں کو جمع کر رہے ہیں۔

تین مساوی سτήلون

ایک مثال دیکھیں گے کہ کس طرح آپ تمام اور اسکرین چوڑائی پر تین مساوی سτήلون بناسکتے ہیں:

مثال

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

خود کوشاں کریں

جوابی سτήلون

ایک مثال دیکھیں گے کہ کس طرح آپ کسی تبلٹ سے چار مساوی سτήلون بناسکتے ہیں، اور ان کو بہت بڑی دسک ٹاپ تک بڑھاتے ہیں:چوڑائی کم از کم 576 پی ایکس کے موبائل یا اسکرین پر، سτήلون خود بخود ساتھ میل جلتی ہیں:

مثال

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

خود کوشاں کریں

دو نہایت مختلف جوابی سτήلون

ایک مثال دیکھیں گے کہ کس طرح آپ کسی تبلٹ پر دو مختلف چوڑائی کا سτήلون حاصل کرسکتے ہیں اور ان کو بہت بڑی دسک ٹاپ تک بڑھاتے ہیں:

مثال

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

خود کوشاں کریں

پوچھ:آپ اس تعلیمی میں کے بعد سیکھیں گے گرید سسٹم کا مزید مطلب