شبکه‌بندی بزرگ

از ویکی‌کد
پرش به ناوبری پرش به جستجو
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 col-md-6">....</div>
2 <div class="col-sm-9 col-md-6">....</div>

اما بهتر است در دستگاه‌های بزرگ از طراحی ۳۳٪-۶۶٪ استفاده کنیم.

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

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

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

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

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

مثال

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

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


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

فقط از اندازه بزرگ استفاده کنید

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

مثال

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

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


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

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

اگر سایز صفحه نمایش کمتر از ۹۹۲ پیکسل باشد، ستون‌ها بطور افقی بالای هم (به انگلیسی: stack) قرار می‌گیرند:
 1 <!-- Two columns: 50% width on large and up-->
 2 <div class="row">
 3   <div class="col-lg">1 of 2</div>
 4   <div class="col-lg">2 of 2</div>
 5 </div>
 6 
 7 <!-- Four columns: 25% width on large and up -->
 8 <div class="row">
 9   <div class="col-lg">1 of 4</div>
10   <div class="col-lg">2 of 4</div>
11   <div class="col-lg">3 of 4</div>
12   <div class="col-lg">4 of 4</div>
13 </div>

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



منابع آموزشی