Bootstrap 5: الصناديق

Bootstrap 5: الصناديق

من خلال الفصل السابق تعلمت أن Bootstrap يحتاج إلى عنصر لتغليف محتوى الموقع.

نقوم بملء المحتوى بالمعدة ونحن نملك فئتين للمعدة:

  • .container تقدم الفئة المعدة الم��رة بعرض ثابت
  • .container-fluid تقدم الفئة المعدة الكاملة العرض، التي تغطي عرض النافذة بأكمله

المعدة الثابتة

استخدام .container فئة تنشئ معدة م��رة وقابلة للتكيف بعرض ثابت.

لاحظ، عرضه (max-width) يتغير عرضه عند أبعاد الشاشة المختلفة:

Extra small
<576px 		Small
≥576px 		Medium
≥768px 		Large
≥992px 		Extra Large
≥1200px 		XXL
≥1400px
max-width 100% 540px 720px 960px 1140px 1320px

الرجاء فتح المثال أدناه وتغيير حجم نافذة المتصفح لرؤية تغييرات عرض المعدة عند نقاط التمييز المختلفة:

مثال

<div class="container"></div>
  <h1>صفحة Bootstrap الأولى لي</h1>
  <p>هذه بعض النصوص.</p>
</div>

جرب بنفسك

النقطة XXL (≥1400px) هي إضافة جديدة في Bootstrap 5، بينما هو أكبر نقطة في Bootstrap 4 وهي Extra large (≥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 ستتغير في أبعاد الشاشة/المنظور المختلفة:

فئة Extra small
<576px		 Small
≥576px		 Medium
≥768px		 Large
≥992px		 Extra large
≥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>

جرب بنفسك