شبکه‌بندی
سیستم شبکه ای بوت استرپ ۴
سیستم شبکه بندی بوت استرپ از flexbox ساخته شده و امکان ایجاد ۱۲ ستون در صفحه را فراهم می‌کند.[۱]
اگر نمی‌خواهید همه ۱۲ ستون را جداگانه استفاده کنید، می‌توانید ستون‌ها را با هم گروه‌بندی کرده تا ستون‌های عریض‌تری ایجاد شوند:
سیستم شبکه بندی واکنش گرا است و ستون‌ها برحسب سایز صفحه نمایش هر دستگاهی مجدداً تنظیم می‌شوند.
دقت کنید مجموع تعداد ستون‌ها ۱۲ یا کمتر شود (نیازی به استفاده از همه ۱۲ ستون نیست).
کلاسهای شبکه
بوت استرپ ۴ پنج کلاس برای شبکه بندی دارد
.col- (دستگاه‌های خیلی کوچک - عرض صفحه کمتر از ۵۷۶ پیکسل باشد)
.col-sm- (دستگاه‌های کوچک - عرض صفحه برابر با ۵۷۶ پیکسل یا بزرگتر باشد)
.col-md- (دستگاه ای با سایز متوسط - عرض صفحه نمایش برابر با ۷۶۸ پیکسل یا بیشتر باشد)
.col-lg- (دستگاه‌های بزرگ - عرض صفحه برابر با ۹۹۲ پیکسل یا بیشتر باشد)
.col-xl- (دستگاه‌های خیلی بزرگ - عرض صفحه برابر با ۱۲۰۰ پیکسل یا بیشتر باشد)
کلاسهای بالا را می‌توان ترکیب کرد تا چیدمان پویاتر یا منعطف تری ایجاد شود.
sm و md عرض‌های مشابهی تنظیم کنید، تنها لازم است sm را مشخص کنید.ساختار پایه شبکه بندی بوت استرپ ۴
ساختار پایه یک شبکه بوت استرپ ۴ به شکل زیر است:
1 <!-- Control the column width, and how they should appear on different devices -->
2 <div class="row">
3 <div class="col-*-*"></div>
4 <div class="col-*-*"></div>
5 </div>
6 <div class="row">
7 <div class="col-*-*"></div>
8 <div class="col-*-*"></div>
9 <div class="col-*-*"></div>
10 </div>
11
12 <!-- Or let Bootstrap automatically handle the layout -->
13 <div class="row">
14 <div class="col"></div>
15 <div class="col"></div>
16 <div class="col"></div>
17 </div>
برای مثال: یک ردیف ایجاد کنید (<div class="row">). سپس، تعداد مورد نظر ستون‌ها را اضافه کنید (تگ‌های با کلاسهای .col-*-*). ستاره * اول واکنش گرایی (به انگلیسی: Responsiveness) را نشان می‌دهد: sm, md, lg یا xl، در حالیکه ستاره دوم * نشان دهندهٔ تعداد است که مجموع آن به ازاء هر ردیف باید حداکثر ۱۲ تا باشد.
مثال دوم: بجای اضافه کردن عدد به هر col، بهتر است بوت استرپ چیدمان را مدیریت کند تا ستون‌های برابر ایجاد شود: دو عنصر "col" با عرض ۵۰٪ برای هر col. سه عنصر col با عرض ۳۳/۳۳٪ برای هرکدام. چهار عنصر col با عرض ۲۵٪ برای هر کدام و غیره. همچنین می‌توان از .col-sm|md|lg|xl برای ایجاد ستون‌های واکنش گرا استفاده کرد.
در ادامه چند مثال از شبکه بندی سادهٔ بوت استرپ ۴ ارائه می‌شود.
سه ستون برابر
مثال زیر نشان می‌دهد چگونه سه ستون برابر در همهٔ دستگاه‌ها و صفحه نمایش‌های مختلف ایجاد کنیم:
مثال
1 <div class="row">
2 <div class="col">.col</div>
3 <div class="col">.col</div>
4 <div class="col">.col</div>
5 </div>
ستون های واکنش گرا (به انگلیسی: Responsive)
مثال زیر نحوه ایجاد چهار ستون با عرض برابر را که ابتدا با تبلت آغاز می‌شود و سپس در رایانه‌های رومیزی خیلی بزرگ افزایش مقیاس می‌دهد نشان می‌دهد. در موبایل‌ها یا صفحه نمایش‌هایی که عرض آنها کمتر از ۵۷۶ پیکسل است، ستون‌ها بطور خودکار روی هم قرار می‌گیرند:
مثال
1 <div class="row">
2 <div class="col-sm-3">.col-sm-3</div>
3 <div class="col-sm-3">.col-sm-3</div>
4 <div class="col-sm-3">.col-sm-3</div>
5 <div class="col-sm-3">.col-sm-3</div>
6 </div>
دو ستون واکنش گرای نامساوی
مثال زیر نحوه ایجاد ستون‌های نامساوی را نشان می‌دهد که با تبلت آغاز می‌شود و در رایانه‌های رومیزی بسیار بزرگ گسترش می‌یابد:
مثال
1 <div class="row">
2 <div class="col-sm-4">.col-sm-4</div>
3 <div class="col-sm-8">.col-sm-8</div>
4 </div>
منابع آموزشی