گرید XXL (Grid XXL)
در «گرید XXL» از کلاس های .col-xxl-* استفاده می کنیم. «گرید (Grid)» یعنی چیدن ستون ها در ردیف. نقطه شکست XXL از عرض 1400 پیکسل شروع می شود. اینجا نسبت ستون ها را برای صفحه های خیلی پهن تنظیم می کنیم.
نمونه گرید XXL با نسبت 25/75
در اندازه های md/lg/xl تقسیم 50/50 داریم. اما در XXL می خواهیم 25/75 بسازیم.
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-xxl-3 bg-primary text-white">
<p>ستون 1</p>
</div>
<div class="col-md-6 col-xxl-9 bg-dark text-white">
<p>ستون 2</p>
</div>
</div>
</div>
فقط XXL: مساوی روی نمایشگرهای خیلی پهن
با .col-xxl-6 از 1400 پیکسل به بالا 50/50 می شود. زیر آن، ستون ها عمودی می شوند.
<div class="container-fluid">
<div class="row">
<div class="col-xxl-6">
<p>نیمه چپ</p>
</div>
<div class="col-xxl-6">
<p>نیمه راست</p>
</div>
</div>
</div>
ستون های برابر با Auto Layout در XXL
اگر عدد را حذف کنیم و .col-xxl بنویسیم، همه ستون ها هم عرض می شوند. زیر 1400 پیکسل، ستون ها عمودی می شوند.
<!-- دو ستون برابر در XXL+ -->
<div class="row">
<div class="col-xxl">1 of 2</div>
<div class="col-xxl">2 of 2</div>
</div>
<!-- چهار ستون برابر در XXL+ -->
<div class="row">
<div class="col-xxl">1 of 4</div>
<div class="col-xxl">2 of 4</div>
<div class="col-xxl">3 of 4</div>
<div class="col-xxl">4 of 4</div>
</div>
گام های عملی
- یک
containerیاcontainer-fluidبساز. - یک
rowاضافه کن برای هر ردیف. - ستون ها را با
.col-xxl-*یا.col-xxlبساز. - مجموع اعداد هر ردیف حداکثر 12 باشد.
- نمایش زیر 1400 پیکسل را تست کن.
نکته: کلاس ها از breakpoint خود به بالا اثر دارند. پس xxl روی همه بزرگ ترها هم کار می کند.
هشدار: ستون های خیلی باریک متن را می شکنند. متن را کوتاه نگه دار.
لینک های داخلی
مسیر مطالعه: از گرید خیلی بزرگ به گرید XXL و سپس نمونه های گرید.
جمع بندی سریع
.col-xxl-*از 1400px فعال می شود.- می توانی 25/75 یا 50/50 بسازی.
.col-xxlستون های برابر می دهد.- زیر 1400px ستون ها عمودی می شوند.
- همیشه مجموع ستون ها حداکثر 12 باشد.