شبکه‌بندی متوسط

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp4-menu.png
موارد آموزشی
شبکه‌بندی
۱سیستم شبکه‌بندی
۲stacked/افقی
۳شبکه‌بندی خیلی‌کوچک
۴شبکه‌بندی کوچک
۵شبکه‌بندی متوسط
۶شبکه‌بندی بزرگ
۷شبکه‌بندی خیلی‌بزرگ
۸مثال‌های شبکه‌بندی
Theme
مرجع

مثال شبکه بندی متوسط

خیلی کوچک کوچک متوسط بزرگ خیلی بزرگ
پیشوند کلاس .col- .col-sm- .col-md- .col-lg- .col-xl-
عرض صفحه نمایش <576px >=576px >=768px >=992px >=1200px

در بخش قبلی، مثالی از شبکه بندی با کلاس‌های مخصوص دستگاه‌های کوچک ارائه دادیم. از دو div (ستون) استفاده کردیم و به آنها تقسیم‌بندی ۲۵٪-۷۵٪ دادیم:[۱]

1 <div class="col-sm-3">....</div>
2 <div class="col-sm-9">....</div>

اما در دستگاه‌های متوسط طراحی بهتر است ۵۰٪-۵۰٪ باشد.

دستگاه‌های متوسط بعنوان صفحه نمایش‌هایی با عرض ۷۶۸ پیکسل تا ۹۹۱ پیکسل تعریف می‌شوند.

برای دستگاه‌های متوسط از کلاس‌های .col-md-* استفاده می‌کنیم:

1 <div class="col-sm-3 col-md-6">....</div>
2 <div class="col-sm-9 col-md-6">....</div>

اکنون بوت استرپ خواهد گفت «برای اندازه‌های کوچک، به دنبال کلاس‌هایی با -sm- بگردید و از آنها استفاده کنید. در دستگاه‌های متوسط، کلاس‌های دارای عبارت -md- را جستجو کرده و از آنها استفاده کنید.»

مثال زیر منجر به ایجاد تقسیم‌بندی ۷۵٪-۲۵٪ در دستگاه‌های کوچک و تقسیم‌بندی ۵۰٪-۵۰٪ در دستگاه‌های متوسط (و بزرگ و خیلی بزرگ) می‌شود. در دستگاه‌های بسیار کوچک، بطور خودکار به حالت بالای هم (به انگلیسی: stack) تبدیل می‌شود (۱۰۰٪).

مثال

 1 <div class="container-fluid">
 2   <div class="row">
 3     <div class="col-sm-3 col-md-6">
 4       <p>Lorem ipsum...</p>
 5     </div>
 6     <div class="col-sm-9 col-md-6">
 7       <p>Sed ut perspiciatis...</p>
 8     </div>
 9   </div>
10 </div>


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


نکته: مطمئن شوید که مجموع کلی همیشه حداکثر ۱۲ یا کمتر باشد (لزومی ندارد که از همهٔ ۱۲ ستون موجود استفاده کنید):

فقط از اندازه متوسط استفاده کنید

در مثال پایین، فقط کلاس .col-md-6 را به کار برده‌ایم (بدون استفاده از .col-sm-*). این یعنی دستگاه‌های متوسط، بزرگ و خیلی بزرگ تقسیم‌بندی ۵۰٪-۵۰٪ دارند زیرا کلاس افزایش مقیاس می‌دهد. با این حال، برای دستگاه‌های کوچک و خیلی کوچک، بطور عمودی بالای هم (به انگلیسی: stack vertically) قرار می‌گیرد (عرض ۱۰۰٪):

مثال

1 <div class="row">
2   <div class="col-md-6">
3     <p>Lorem ipsum...</p>
4   </div>
5   <div class="col-md-6">
6     <p>Sed ut perspiciatis...</p>
7   </div>
8 </div>


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


ستون‌هایی با چیدمان خودکار (به انگلیسی: Auto Layout)

در بوت استرپ ۴، روش ساده ای برای ایجاد ستون‌هایی با عرض مساوی در همهٔ دستگاه‌ها وجود دارد: تنها باید عدد را از .col-md-* حذف کنید و فقط از کلاس .col-md با تعداد مشخصی از عناصر col استفاده کنید. بوت استرپ تشخیص خواهد داد چند ستون وجود دارد و هر ستون عرض برابر می‌گیرد.

اگر سایز صفحه نمایش کمتر از ۷۶۸ پیکسل باشد، ستون‌ها بطور افقی بالای هم (به انگلیسی: stack) قرار می‌گیرند:

 1 <!-- Two columns: 50% width on medium and up-->
 2 <div class="row">
 3   <div class="col-md">1 of 2</div>
 4   <div class="col-md">2 of 2</div>
 5 </div>
 6 
 7 <!-- Four columns: 25% width on medium and up -->
 8 <div class="row">
 9   <div class="col-md">1 of 4</div>
10   <div class="col-md">2 of 4</div>
11   <div class="col-md">3 of 4</div>
12   <div class="col-md">4 of 4</div>
13 </div>


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


بخش بعدی نحوهٔ اضافه کردن درصد تقسیم‌بندی‌های متفاوت در دستگاه‌های بزرگ را نشان می‌دهد.


منابع آموزشی