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

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


مثال شبکه بندی خیلی بزرگ

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

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

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>

اما در دستگاه‌های خیلی بزرگ بهتر است تقسیم‌بندی ۲۰٪-۸۰٪ باشد.

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

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

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

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

مثال

 1 <div class="container-fluid">
 2   <div class="row">
 3     <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
 4       <p>Lorem ipsum...</p>
 5     </div>
 6     <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
 7       <p>Sed ut perspiciatis...</p>
 8     </div>
 9   </div>
10 </div>
مشاهدهٔ نتیجه
نکته: مطمئن شوید که مجموع کلی همیشه حداکثر ۱۲ باشد.

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

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

مثال

 1 <div class="container-fluid">
 2   <div class="row">
 3     <div class="col-xl-6">
 4       <p>Lorem ipsum...</p>
 5     </div>
 6     <div class="col-xl-6">
 7       <p>Sed ut perspiciatis...</p>
 8     </div>
 9   </div>
10 </div>
مشاهدهٔ نتیجه


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

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

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


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


منابع آموزشی