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

گرید سسٹم

بوتسٹرپ کا گرید سسٹم فلیکس بکز پر مبنی ہوتا ہے، جس میں پورے ویب پینل پر 12 کلومن تک کی اجازت ہوتی ہے.

آپ اگر تمام 12 کلومن کو علیحدہ علیحدہ استعمال نہ کریں تو ان کلومن کو جمع کریں تاکہ باریک کلومن بنائیں:

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

یقین رکھیجئے کہ مجموعی مجموعہ 12 سے بہتر نہیں ہو (تمام 12 درج فہرست کلومن کو استعمال نہ کریں).

گرید کلاس

بوتسٹرپ 5 گرید سسٹم میں چھ کلاس فراہم کی گئی ہیں:

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

مذکورہ بالا کلاس کو جمع کریں تاکہ پیداکرنے والی لائاوت کی آسانگی اور مروت پیدا ہو سکے.

نکات:ہر کلاس کا اپنا تناسب ہے، جس لیے اگر آپ کا اپنایا ساتھ sm اور md کا اک ہی چوڑائی چاہتے ہیں، تو صرف sm کو طے کریں.

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

یہاں سے بوتسٹرپ 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 ایک عدد اضافہ کریں، جبکہ بوتسپر خود کار کا استعمال کرکے بیچ کی چوڑائی کو بنتا ہے، تاکہ مساوی ستون بنائیں: دو "col" عنصر = ہر سستون کی 50% چوڑائی، تین سستون = ہر سستون کی 33.33% چوڑائی، چار سستون = 25% چوڑائی وغیرہ، آپ یہاں سے بھی استعمال کرسکتے ہیں، جیسے .col-sm|md|lg|xl|xxl ستونوں کو جواب دہانی بنادئیں

گرید کے چناؤ

درج ذیل جدول میں مختصر طور پر ملاحظہ کیاجاتا ہے کہ کس طرح بوتسپر 5 گرید سسٹم مختلف اسکرین سائزوں پر کام کرتا ہے:

بہت چھوٹا (<576px) چھوٹا (>=576px) بڑا (>=768px) بڑا (>=992px) بہت بڑا (>=1200px) بہت بڑا (>=1400px)
کلاس کا پچھلے نام .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
گرید کا کارروائی همیشه افقی چینوں کو پتھر پر کھولا، بالترتیب مرز کے اوپر افقی طور پر چینوں کو پتھر پر کھولا، بالترتیب مرز کے اوپر افقی طور پر چینوں کو پتھر پر کھولا، بالترتیب مرز کے اوپر افقی طور پر چینوں کو پتھر پر کھولا، بالترتیب مرز کے اوپر افقی طور پر چینوں کو پتھر پر کھولا، بالترتیب مرز کے اوپر افقی طور پر
کنٹینر کی چوڑائی کوئی نہیں (auto) 540px 720px 960px 1140px 1320px
لئے مناسب موبائل افقی موبائل عمودی پلیٹ فورم لپ تاپ لپ تاپ اور دس میز لپ تاپ اور دس میز
ستون کا نمبر 12 12 12 12 12 12
گٹر چوڑائی 1.5rem (کے ہر ساتھ .75rem ) 1.5rem (کے ہر ساتھ .75rem ) 1.5rem (کے ہر ساتھ .75rem ) 1.5rem (کے ہر ساتھ .75rem ) 1.5rem (کے ہر ساتھ .75rem ) 1.5rem (کے ہر ساتھ .75rem )
داخل شدہ ہائے ہائے ہائے ہائے ہائے ہائے
افراد ہائے ہائے ہائے ہائے ہائے ہائے
ستون کی ترتیب ہائے ہائے ہائے ہائے ہائے ہائے