محفظه‌های Bootstrap 5

محفظه‌های Bootstrap 5

در فصل قبلی آموختید که Bootstrap نیاز به یک عنصر برای بسته‌بندی محتوای وب‌سایت دارد.

ما محتوای خود را در جعبه‌ها پر می‌کنیم و دو جعبه‌ی مختلف قابل استفاده داریم:

  • .container کلاس‌ها جعبه‌های عرض ثابت واکنش‌پذیر را فراهم می‌کنند
  • .container-fluid کلاس‌ها عرض کامل صفحه نمایش را پوشش می‌دهند

جعبه‌های ثابت

استفاده از .container کلاس برای ایجاد جعبه‌های واکنش‌پذیر و عرض ثابت ایجاد می‌کند.

لطفاً توجه داشته باشید که عرض آن (max-width) در اندازه‌های مختلف صفحه نمایش متفاوت خواهد بود:

کوچک‌تر از
<576px 		کوچک
≥576px 		متوسط
≥768px 		بزرگ
≥992px 		بزرگ‌تر
≥1200px 		XXL
≥1400px
max-width 100% 540px 720px 960px 1140px 1320px

لطفاً مثال زیر را باز کنید و اندازه پنجره مرورگر را تغییر دهید تا تغییرات عرض جعبه‌ها در نقاط مختلف پایان‌بندی‌ها را مشاهده کنید:

مثال

<div class="container">
  <h1>صفحه اول من با Bootstrap</h1>
  <p>این یک متن است.</p>
</div>

آزمایش کنید

پایان‌بندی XXL (≥1400px) در Bootstrap 5 اضافه شده است، در حالی که بزرگترین پایان‌بندی در Bootstrap 4 بزرگ‌تر (≥1200px) است.

جعبه‌های سیال

استفاده از .container-fluid کلاس برای ایجاد جعبه‌های کامل عرض، که همیشه عرض کل صفحه نمایش را پوشش می‌دهد (width همیشه 100%):

مثال

<div class="container-fluid">
  <h1>صفحه اول من با Bootstrap</h1>
  <p>این یک متن است.</p>
</div>

آزمایش کنید

جعبه‌های پرکننده

به صورت پیش‌فرض، جعبه‌ها دارای فضای چپ و راست (حاشیه داخلی چپ و راست) هستند، بدون فضای بالا و پایین (حاشیه داخلی بالا و پایین). بنابراین، ما معمولاً از ابزار فضاسازیمثل اضافه کردن فضای اضافی و حاشیه، تا بهتر به نظر برسند. به عنوان مثال،.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>

آزمایش کنید

در فصل‌های بعدی بیشتر درباره ابزارهای رنگ و حاشیه یاد خواهید گرفت.

کانتینرهای پاسخگو

شما همچنین می‌توانید از .container-sm|md|lg|xl برای تعیین زمان پاسخگویی کانتینر استفاده می‌شود.

کلاس‌های max-width در اندازه‌های مختلف صفحه نمایش/ورودی نمایش تغییر خواهد کرد:

طبقه کوچک‌تر از
<576px		 کوچک
≥576px		 متوسط
≥768px		 بزرگ
≥992px		 بزرگ‌تر از
≥1200px		 XXL
≥1400px
.container-sm 100% 540px 720px 960px 1140px 1320px
.container-md 100% 100% 720px 960px 1140px 1320px
.container-lg 100% 100% 100% 960px 1140px 1320px
.container-xl 100% 100% 100% 100% 1140px 1320px
.container-xxl 100% 100% 100% 100% 100% 1320px

مثال

<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>

آزمایش کنید