گرید بسیار کوچک (Grid XSmall)

اینجا درباره «گرید بسیار کوچک (XSmall)» حرف می زنیم. «گرید (Grid)» یعنی چیدن محتوا در ستون ها. در XSmall، پیشوند .col- استفاده می شود. این اندازه برای عرض کمتر از 576 پیکسل است.

تقسیم بندی 25% / 75% در همه دستگاه ها

با .col-3 و .col-9 یک چیدمان ثابت می سازیم. این چیدمان روی همه اندازه ها 25/75 می ماند.

<div class="container-fluid">
  <div class="row">
    <div class="col-3 bg-primary">
      <p>ناوبری</p>
    </div>
    <div class="col-9 bg-dark text-white">
      <p>محتوا</p>
    </div>
  </div>
</div>

مشاهده در ادیتور

تقسیم بندی 33/66 و 50/50

برای 33/66 از .col-4 و .col-8 استفاده کن. برای نصف نصف از .col-6 و .col-6 کمک بگیر.

<!-- 33.3% / 66.6% -->
<div class="container-fluid">
  <div class="row">
    <div class="col-4 bg-primary">
      <p>ستون 1</p>
    </div>
    <div class="col-8 bg-dark text-white">
      <p>ستون 2</p>
    </div>
  </div>
</div>

<!-- 50% / 50% -->
<div class="container-fluid">
  <div class="row">
    <div class="col-6 bg-primary">
      <p>ستون A</p>
    </div>
    <div class="col-6 bg-dark text-white">
      <p>ستون B</p>
    </div>
  </div>
</div>

مشاهده در ادیتور

ستون های برابر با Auto Layout

اگر عدد را برداری و فقط .col بگذاری، ستون ها برابر می شوند. بوتسترپ خودش تعداد را می فهمد.

<!-- دو ستون برابر -->
<div class="row">
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>

<!-- چهار ستون برابر -->
<div class="row">
  <div class="col">1 of 4</div>
  <div class="col">2 of 4</div>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</div>
</div>

مشاهده در ادیتور

گام های عملی

1. یک container-fluid یا container بساز.
2. یک row اضافه کن برای ردیف.
3. ستون ها را با .col-* یا .col بساز.
4. مجموع اعداد هر ردیف حداکثر 12 باشد.
5. نمایش موبایل را بررسی و تست کن.

نکته: پیشوند .col- مخصوص XSmall است و از <576px اعمال می شود.

هشدار: متن طولانی را در ستون باریک نریز. خوانایی بد می شود.

لینک های مرتبط

اول به سیستم گرید سر بزن. سپس چیدمان عمودی/افقی را ببین. در ادامه هم گرید کوچک را دنبال کن.

جمع بندی سریع

• .col- برای XSmall است.
• نمونه های 25/75 و 50/50 آماده اند.
• .col ستون های برابر می سازد.
• عددها از 12 بیشتر نشوند.
• نمایش موبایل را همیشه تست کن.