سیستم گرید بوتاسترپ ۵ چیست؟
سیستم گرید بوتاسترپ با استفاده از Flexbox ساخته شده است و اجازه میدهد تا ۱۲ ستون در کل عرض صفحه داشته باشید. اگر نمیخواهید از هر ۱۲ ستون به صورت جداگانه استفاده کنید، میتوانید ستونها را با هم ترکیب کرده و ستونهای پهنتری ایجاد کنید.
سیستم گرید بوتاسترپ واکنشگرا است و ستونها بر اساس اندازه صفحه نمایش (موبایل، تبلت، دسکتاپ) به طور خودکار بازآرایی میشوند.
ساختار پایه گرید
برای ایجاد یک چیدمان گرید، رعایت سلسله مراتب زیر الزامی است:
- ابتدا یک ردیف ایجاد کنید:
<div class="row"> - سپس تعداد ستونهای مورد نظر را داخل ردیف اضافه کنید:
<div class="col-*-*">
<div class=”row”>
<div class=”col”>Column 1</div>
<div class=”col”>Column 2</div>
<div class=”col”>Column 3</div>
</div>
قانون ۱۲ ستون: جمع اعداد ستونها در یک ردیف باید حداکثر ۱۲ باشد. برای مثال: col-4 + col-8 = 12.
کلاسهای سیستم گرید
بوتاسترپ ۵ دارای ۶ کلاس اصلی برای دستگاههای مختلف است:
.col- (خیلی کوچک – کمتر از ۵۷۶ پیکسل).col-sm- (کوچک – مساوی یا بیشتر از ۵۷۶ پیکسل).col-md- (متوسط – مساوی یا بیشتر از ۷۶۸ پیکسل).col-lg- (بزرگ – مساوی یا بیشتر از ۹۹۲ پیکسل).col-xl- (خیلی بزرگ – مساوی یا بیشتر از ۱۲۰۰ پیکسل).col-xxl- (فوق بزرگ – مساوی یا بیشتر از ۱۴۰۰ پیکسل)
مثال ۱: سه ستون با عرض مساوی
در این مثال، سه ستون ایجاد میکنیم که در تمامی دستگاهها (از موبایل تا دسکتاپ) عرض یکسانی خواهند داشت (۳۳.۳٪ برای هر کدام).
<div class=”row”>
<div class=”col”>.col</div>
<div class=”col”>.col</div>
<div class=”col”>.col</div>
</div>
خروجی شبیهسازی شده:
مثال ۲: ستونهای واکنشگرا
در کد زیر، ستونها در تبلت (md) به صورت ۵۰٪ و در دسکتاپ به صورت ستونهای مشخص شده نمایش داده میشوند.
<div class=”row”>
<div class=”col-sm-4″>4 ستون در ابعاد کوچک</div>
<div class=”col-sm-8″>8 ستون در ابعاد کوچک</div>
</div>
نکات مهم سیستم گرید
- ردیفها (Rows) باید حتماً درون یک Container قرار بگیرند.
- از ردیفها برای ایجاد گروههای افقی از ستونها استفاده میشود.
- محتوا باید حتماً درون ستونها (Columns) قرار بگیرد و فقط ستونها میتوانند فرزند مستقیم ردیفها باشند.
- فاصله بین ستونها (Gutter) با استفاده از پدینگ ایجاد میشود که با کلاسهای
g-* قابل تنظیم است.
