بوت اسپرینگ 5 گرید: وسطی اہلیت

پچھلے پیج BS5 گرید اسمال
پائیدہ پیج BS5 گرید لارج

中型设备网格实例

	XSmall	Small	Medium	Large	Extra Large	XXL
类前缀	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
屏幕宽度	<576px	>=576px	>=768px	>=992px	>=1200px	>=1400px

在前一章中，我们展示了一个网格实例，其中包含用于小型设备的类。我们使用了两个 div（列），并给了它们 25% / 75% 的拆分：

....
....

但在中型设备上，50% / 50% 拆分的设计可能会更好。

中型设备被定义为屏幕宽度从 768 像素到 991 像素。

对于中型设备，我们将使用 .col-md-* 类：

....
....

在小型设备上，请使用包含 -sm- 的类。在中型设备上，请使用包含 -md- 的类。

下例将导致小型设备上的 25% / 75% 拆分和中型（以及大型、超大和特大）设备上的 50% / 50% 拆分。在超小设备上，它会自动堆叠（100%）：

مثال

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

نوکری بجائی تجربہ

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

میڈیم استعمال کیا جائیگا

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

مثال

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

نوکری بجائی تجربہ

آوتومیشن لائائز کول

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

اگر سکرین کی سائزکم از کم 768px، ستون افقی طور پر پتھر سکتے ہیں:

<!-- دو ستون: میڈیم سے اوپر کی اہم آلات میں 50% چوڑائی -->
<div class="row">
  <div class="col-md">1 of 2</div>
  <div class="col-md">2 of 2</div>
</div>
<!-- چار ستون: میڈیم سے اوپر کی اہم آلات میں 25% چوڑائی -->
<div class="row">
  <div class="col-md">1 of 4</div>
  <div class="col-md">2 of 4</div>
  <div class="col-md">3 of 4</div>
  <div class="col-md">4 of 4</div>
</div>

نوکری بجائی تجربہ

آئندہ باب کو دکھائی جائیگا کہ کیسے بڑے اور دوسرے اہم آلات کے لئے مختلف تقسیم فیصدوں کو شامل کیا جائیگا.