کانتینرها (Containers)
اینجا «کانتینر بوت استرپ 5» را می شناسی. «کانتینر (Container)» جعبه ای برای چیدمان محتواست. همچنین «فلوید (Fluid)» یعنی تمام عرض صفحه. اکنون با مثال های منبع تمرین کنیم و تفاوت ها را ببینیم.
دو نوع اصلی کانتینر
دو کلاس داریم: .container با عرض ثابتِ پاسخ گو و .container-fluid با عرض کاملاً کشیده. مثل کیف دستی در برابر کوله پشتی.
کانتینر ثابت (Fixed)
این کانتینر بسته به اندازه صفحه، حداکثرعرض را تغییر می دهد. در شکست ها، عرض جدید می گیرد. XXL در نسخه 5 تازه است.
نمونه
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
کانتینر فلوید (Fluid)
این کانتینر همیشه تمام عرض نمایشگر است. عرض آن همیشه 100% می ماند.
نمونه
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
پدینگ و فاصله ها
کانتینرها چپ و راست پدینگ دارند. برای زیبایی بیشتر، از Utilities فاصله استفاده کن. مثل .pt-5 برای بالاپدینگ زیاد.
نمونه
<div class="container pt-5"></div>
بوردر و رنگ
می توانی همراه کانتینر از رنگ و بوردر هم استفاده کنی. این کار کادرها را روشن تر می کند.
نمونه
<div class="container p-5 my-5 border"></div>
<div class="container p-5 my-5 bg-dark text-white"></div>
<div class="container p-5 my-5 bg-primary text-white"></div>
کانتینرهای پاسخ گو (Responsive)
با .container-sm تا .container-xxl زمانِ تغییر عرض را تعیین کن. در هر شکست، max-width عوض می شود.
نمونه
<div class="container-sm">.container-sm</div>
<div class="container-md">.container-md</div>
<div class="container-lg">.container-lg</div>
<div class="container-xl">.container-xl</div>
<div class="container-xxl">.container-xxl</div>
گام های عملی
- نوع کانتینر مناسب را انتخاب کن.
- Utilities فاصله را اضافه کن.
- رنگ یا بوردر را تست کن.
نکته: XXL در نسخه 5 اضافه شده است. بنابراین نمایشگرهای خیلی بزرگ بهتر مدیریت می شوند.
جمع بندی سریع
- .container عرض ثابتِ پاسخ گو دارد.
- .container-fluid همیشه تمام عرض است.
- با Utilities فاصله و استایل بده.
- کلاس های sm تا xxl شکست ها را کنترل می کنند.