شبکه‌بندی

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp4-menu.png
موارد آموزشی
۱خانه
۲شروع
۳ظرف‌ها
۴شبکه‌بندی پایه
۵تایپوگرافی
۶رنگ‌ها
۷جدول‌ها
۸تصاویر
۹جامبوترون
۱۰هشدارها
۱۱کلیدها
۱۲گروه‌های کلید
۱۳نشان‌ها (Badges)
۱۴نوارهای پیشرفت
۱۵Spinnerها
۱۶صفحه‌بندی
۱۷گروه‌های لیست
۱۸کارت‌ها
۱۹منوهای کرکره‌ای
۲۰Collapse
۲۱Navها
۲۲Navbar
۲۳فرم‌ها
۲۴ورودی‌ها
۲۵گروه‌های ورودی
۲۶فرم‌های سفارشی
۲۷Carousel
۲۸Modal
۲۹راهنمای ابزار
۳۰Popover
۳۱Toast
۳۲Scrollspy
۳۳امکانات
۳۴Flex
۳۵آیکن‌ها
۳۶Media Objects
۳۷فیلترها
شبکه‌بندی
Theme
مرجع

سیستم شبکه ای بوت استرپ ۴

سیستم شبکه بندی بوت استرپ از 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>


مشاهدهٔ نتیجه


نکته: در آینده در این آموزش در مورد شبکه‌های بوت استرپ ۴ بیشتر خواهید آموخت.


منابع آموزشی