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

کورس سفارش:

بڑی سائز کا گرید مثال ایکس اسمال سمال میڈیم لارج ایکسرا لارج
XXL کلاس کا پیشوند .col- .col-sm- .col-md- .col-lg- .col-xl-
.col-xxl- اسکرین کی چوڑائی <576px >=768px >=992px >=1200px >=1400px

پچھلے فصل میں، ہم نے ایک گرید مثال پیش کیا جس میں وسطی اور کوچک سائز کی کلاس شامل تھیں۔ ہم نے دو دی وی (کالن) استعمال کیا اور کوچک سائز میں 25% / 75% تقسیم کردے گا، وسطی سائز میں 50% / 50% تقسیم کردے گا:

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

لیکن بڑی سائز کی سائز میں، 33% / 66% تقسیم کردے گا کا ڈیزائن بہتر ممکن ہو سکتا ہے。

بڑی سائز کی اسکرین کی چوڑائی992 پیکسل سے 1199 پیکسل تک。

بڑی سائز کی اپلائیں، .col-lg-* کلاس:

<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>

کوچک سائز کی اپلائیں، -sm- کلاس کا. وسطی سائز کی اپلائیں، -md- کلاس کا. بڑی سائز کی اپلائیں، -lg- کلاس کا.

مثال کا استعمال، منجع کوچک میں 25% / 75% تقسیم کردے گا، وسطی میں 50% / 50% تقسیم کردے گا، بڑی، xlarge اور xxlarge میں 33% / 66% تقسیم کردے گا۔ نیم کوچک منجع میں، یہ خودکار طور پر پیچا کردے گا (100%):

مثال

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

خود کو امتحان کریں

تذکرہ:یقینی بنائیں کہ مجموعی مجموعہ یا کم از 12 (تمام 12 درج شده ستون استعمال نہ کریں):

لارج کو استعمال کریں

در مثال زیر، ہم صرف .col-lg-6 کلاس (بدون .col-md-* اور یا .col-sm-*）。یعنی لارج، ایکس لارج اور ایکس ایکس لارج دستگاه‌ها 50%/50% تقسیم کریں گے۔ لیکن، میڈیم، چھوٹی اور بہت چھوٹی دستگاه‌ها کیلئے، افقی طور پر پلاسو کریں گے (100% عرضت):

مثال

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

خود کو امتحان کریں

خودکار پلان بندی ستون

در بوت اسٹپ 5 میں، تمامی دستگاه‌ها کیلئے برابر عرضتی ستون بنانے کیلئے ایک سادہ طریقہ ہے: صرف .col-lg-* عدد کو حذف کریں، اور صرف col عنصر پر استعمال کریں .col-lg کلاس کا پتہ لگایا جائے گا، اور ہر ستون کو برابر عرضت دی جائے گی。

اگر سائز اسکرینکم از 992px، ستون‌ها افقی طور پر پلاسو می‌شوند:

<!-- دو ستون: در دستگاه‌های بزرگتر از 50% عرضت -->
<div class="row">
  <div class="col-lg">1 از 2</div>
  <div class="col-lg">2 از 2</div>
</div>
<!-- چار ستون: در دستگاه‌های بزرگتر از 25% عرضت -->
<div class="row">
  <div class="col-lg">1 از 4</div>
  <div class="col-lg">2 از 4</div>
  <div class="col-lg">3 از 4</div>
  <div class="col-lg">4 از 4</div>
</div>

خود کو امتحان کریں