چیدمان عمودی/افقی (Stacked/Horizontal)
اینجا با «چیدمان افقی» در بوتسترپ آشنا می شویم. «عمودی/افقی» یعنی ستون ها در موبایل زیرهم می آیند و بعد افقی می شوند. «برِک پوینت (Breakpoint)» نقطه ای از عرض صفحه است که چیدمان تغییر می کند.
نمونه چیدمان افقی از حالت عمودی
با .col-sm-6 دو ستون می سازیم. در موبایل عمودی است. سپس از عرض 576 پیکسل افقی می شود.
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 bg-primary text-white">
<p>ستون چپ</p>
</div>
<div class="col-sm-6 bg-dark text-white">
<p>ستون راست</p>
</div>
</div>
</div>
تبدیل کانتینر سیال به ثابت
«کانتینر سیال (container-fluid)» تمام عرض را می گیرد. اما «کانتینر ثابت (container)» در عرض های بزرگ محدود می شود.
<div class="container">
<div class="row">
<div class="col-sm-6">
<p>محتوای چپ</p>
</div>
<div class="col-sm-6">
<p>محتوای راست</p>
</div>
</div>
</div>
ستون های خودکار (Auto Layout)
اگر عدد را حذف کنی و فقط .col-sm بدهی، همه ستون ها برابر می شوند. در موبایل عمودی هستند.
<div class="row">
<div class="col-sm">1 of 2</div>
<div class="col-sm">2 of 2</div>
</div>
<div class="row">
<div class="col-sm">1 of 4</div>
<div class="col-sm">2 of 4</div>
<div class="col-sm">3 of 4</div>
<div class="col-sm">4 of 4</div>
</div>
گام های عملی
- یک
containerیاcontainer-fluidبساز. - یک
rowاضافه کن برای ردیف. - ستون ها را با
.col-sm-*یا.col-smبساز. - مجموع اعداد حداکثر دوازده باشد.
- چیدمان افقی را در تبلت بررسی کن.
نکته: عدد در .col-sm-* تعداد ستون از 12 است. مثلا 6 یعنی نصف.
هشدار: متن کم کنتراست روی پس زمینه تیره نگذار. دسترس پذیری مهم است.
لینک های مرتبط
برای مقدمه به سیستم گرید سر بزن. همچنین نمونه های چیدمان در نمایشگر خیلی کوچک را ببین. و اگر خواستی، با انکر چیدمان افقی همین صفحه را ارجاع بده.
جمع بندی سریع
- در موبایل عمودی است.
- از 576 پیکسل افقی می شود.
.col-smستون برابر می سازد.containerثابت است؛container-fluidسیال است.- مجموع ستون ها حداکثر 12 باشد.