محفظهها (Containers) در بوتاسترپ ۵
محفظهها یا Containers ابتداییترین عنصر چیدمان در بوتاسترپ هستند و برای بستهبندی (Padding) و تراز کردن (Aligning) محتوا در یک دستگاه یا Viewport خاص مورد نیاز میباشند.
انواع کانتینرها:
بوتاسترپ ۵ دارای دو نوع کانتینر اصلی است:
- .container: یک کانتینر با عرض ثابت (Responsive Fixed Width) که در هر نقطه شکست (Breakpoint) عرض آن تغییر میکند.
- .container-fluid: یک کانتینر با عرض کامل (Full Width) که همیشه ۱۰۰٪ عرض صفحه را اشغال میکند.
۱. کانتینر با عرض ثابت (.container)
کلاس .container یک کانتینر با عرض ثابت در نقاط شکست مختلف ایجاد میکند. یعنی وقتی اندازه صفحه تغییر میکند، عرض کانتینر به صورت پلهای تغییر میکند نه به صورت روان.
<div class=”container”>
<h1>My First Bootstrap Page</h1>
<p>This is some text inside a fixed-width container.</p>
</div>
خروجی شبیهسازی شده: (دقت کنید که در دسکتاپ، این کانتینر دارای حاشیه در طرفین است)
Fixed Width Container
This element has margins on the left and right.
۲. کانتینر تمامعرض (.container-fluid)
کلاس .container-fluid محفظهای ایجاد میکند که همیشه کل عرض صفحه (۱۰۰٪) را پوشش میدهد، بدون توجه به اینکه اندازه صفحه چقدر است.
<div class=”container-fluid”>
<h1>My First Bootstrap Page</h1>
<p>This is a full-width container.</p>
</div>
خروجی شبیهسازی شده: (این کانتینر کل عرض فضای موجود را پر میکند)
Full Width Container
This element spans the entire width of the screen.
۳. پدینگ در کانتینرها (Container Padding)
به طور پیشفرض، کانتینرها دارای ۱۵ پیکسل پدینگ در سمت چپ و راست هستند و هیچ پدینگی در بالا یا پایین ندارند. برای اضافه کردن پدینگهای بیشتر، از Utilityهای فواصل استفاده میکنیم (مانند .pt-5 برای پدینگ بالا).
<div class=”container
p-5 my-5 bg-dark text-white“>
<h1>Custom Container</h1>
<p>Container with extra padding and margins.</p>
</div>
۴. کانتینرهای واکنشگرا (Responsive Containers)
شما میتوانید از کلاس .container-{breakpoint} استفاده کنید تا مشخص کنید کانتینر تا چه زمانی تمامعرض باشد و از چه نقطهای به بعد عرض ثابت پیدا کند.
| Class | Extra Small (<576px) | Small (≥576px) | Medium (≥768px) | Large (≥992px) |
|---|
| .container | 100% | 540px | 720px | 960px |
| .container-sm | 100% | 540px | 720px | 960px |
| .container-md | 100% | 100% | 720px | 960px |
| .container-lg | 100% | 100% | 100% | 960px |
