بوت اسٹرپ 5 کنٹینر

بوت اسٹرپ 5 کنٹینر

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

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

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

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

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

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

ایکسرا سمل
<576 پیکسل 		سمال
≥576 پیکسل 		میڈیم
≥768 پیکسل 		لارج
≥992 پیکسل 		بزرگ‌تر
≥1200 پیکسل 		XXL
≥1400 پیکسل
max-width 100% 540 پیکسل 720 پیکسل 960 پیکسل 1140 پیکسل 1320 پیکسل

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

مثال

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

خود کا تجربہ کریئن

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

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

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

مثال

<div class="container-fluid"></div>
  <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 مختلف اسکرین سائزز/ویو پورٹ پر تبدیل ہوتی ہیں:

کلاس ایکسرا سمل
<576 پیکسل		 سمال
≥576 پیکسل		 میڈیم
≥768 پیکسل		 لارج
≥992 پیکسل		 ایکسرا لارج
≥1200 پیکسل		 XXL
≥1400 پیکسل
.container-sm 100% 540 پیکسل 720 پیکسل 960 پیکسل 1140 پیکسل 1320 پیکسل
.container-md 100% 100% 720 پیکسل 960 پیکسل 1140 پیکسل 1320 پیکسل
.container-lg 100% 100% 100% 960 پیکسل 1140 پیکسل 1320 پیکسل
.container-xl 100% 100% 100% 100% 1140 پیکسل 1320 پیکسل
.container-xxl 100% 100% 100% 100% 100% 1320 پیکسل

مثال

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

خود کا تجربہ کریئن