سیستم گرید (Grid System)
اینجا با گرید بوتسترپ آشنا می شویم. «گرید (Grid)» یعنی چیدن محتوا در ستون ها. «فلکس باکس (Flexbox)» موتور چیدمان است. صفحه به 12 ستون تقسیم می شود. می توانی ستون ها را ترکیب کنی. مثلا 4+8 یا 6+6. هدف، ساخت چیدمان واکنش گراست.
ساختار پایه گرید
هر ردیف با row شروع می شود. سپس ستون ها می آیند. اگر از .col بدون عدد استفاده کنی، ستون ها مساوی می شوند. این روش سریع و ساده است.
<div class="row">
<div class="col">A</div>
<div class="col">B</div>
<div class="col">C</div>
</div>
کلاس ها و برِک پوینت ها
برای کنترل اندازه ها از پیشوندها کمک بگیر: .col-، .col-sm-، .col-md-، .col-lg-، .col-xl-، .col-xxl-. هر کدام از یک عرض شروع می شود و به بالا گسترش می یابد.
دو روش ساخت ستون ها
روش اول: مساوی. روش دوم: مجموع 12. یعنی اعداد هر ردیف نهایتا 12 شوند. مثلا سه ستون برابر یعنی 4+4+4. این کار در موبایل تا دسکتاپ مقیاس می شود.
<div class="row">
<div class="col-sm-4">Left</div>
<div class="col-sm-4">Center</div>
<div class="col-sm-4">Right</div>
</div>
<div class="row">
<div class="col-md-8">Main</div>
<div class="col-md-4">Side</div>
</div>
گام های عملی
- یک
containerبگذار تا عرض مدیریت شود. - داخلش یک
rowبساز برای هر ردیف. - ستون ها را با
.colیا.col-*اضافه کن. - مجموع اعداد هر ردیف حداکثر 12 باشد.
- در موبایل تست کن و برِک پوینت ها را تنظیم کن.
نکته: اگر برای md مقدار دادی، برای lg هم اثر دارد. یعنی کلاس ها رو به بالا گسترش می یابند.
هشدار: از ستون های خیلی زیاد در یک ردیف پرهیز کن. خوانایی افت می کند.
لینک های مرتبط
ببین: گرید بوتسترپ برای چیدمان پله ای. و این هم منوی کشویی برای ناوبری بهتر.
جمع بندی سریع
- صفحه 12 ستون دارد.
- از
.colبرای مساوی استفاده کن. - از
.col-sm|md|...برای واکنش گرایی بهره ببر. - مجموع هر ردیف حداکثر 12 باشد.
- در موبایل حتماً تست کن.