Bootstrap 4 حاويات
حاويات
لقد تعلمت من الفصل السابق أن Bootstrap يتطلب عنصرًا يحتوي على محتويات الموقع.
تُستخدم الحاويات لتغليف المحتوى بداخلها ، وهناك فئتان متاحتان من الحاويات:
- توفر
.containerالفئة حاوية عرض ثابتة سريعة الاستجابة - يوفر
.container-fluidالفصل حاوية كاملة العرض ، تغطي العرض الكامل لإطار العرض
حاوية ثابتة
استخدم .containerالفئة لإنشاء حاوية سريعة الاستجابة وذات عرض ثابت.
لاحظ أن عرضه ( max-width) سيتغير باختلاف أحجام الشاشات:
|
صغير جدًا <576 بكسل |
صغير ≥576 بكسل |
متوسط ≥ 768 بكسل |
كبير ≥992 بكسل |
كبير جدًا ≥1200 بكسل |
|
|---|---|---|---|---|---|
| أقصى عرض | 100٪ | 540 بكسل | 720px | 960px | 1140 بكسل |
افتح المثال أدناه وقم بتغيير حجم نافذة المتصفح لترى أن عرض الحاوية سيتغير عند نقاط توقف مختلفة:
مثال
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
حاوية السوائل
استخدم .container-fluidالفئة لإنشاء حاوية كاملة العرض ، والتي ستمتد دائمًا بعرض الشاشة بالكامل ( widthدائمًا 100%):
مثال
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
حشوة الحاوية
بشكل افتراضي ، تحتوي الحاويات على حشوة يسرى ويمنى 15 بكسل ، مع عدم وجود حشوة علوية أو سفلية. لذلك ، غالبًا ما نستخدم أدوات مساعدة للمسافات ، مثل الحشو الإضافي والهوامش لجعلها تبدو أفضل. على سبيل المثال ، .pt-3يعني "إضافة مساحة متروكة علوية 16 بكسل":
مثال
<div class="container pt-3"></div>
سوف تتعلم المزيد عن أدوات التباعد ، في BS4 Utilities Chapter .
حدود الحاوية ولونها
غالبًا ما تُستخدم الأدوات المساعدة الأخرى ، مثل الحدود والألوان ، مع الحاويات:
مثال
أول صفحة تمهيد
تحتوي هذه الحاوية على حد وبعض المساحة المتروكة والهوامش الإضافية.
أول صفحة تمهيد
تحتوي هذه الحاوية على لون خلفية داكن ونص أبيض ، وبعض المساحة المتروكة والهوامش الإضافية.
أول صفحة تمهيد
تحتوي هذه الحاوية على لون خلفية أزرق ونص أبيض ، وبعض المساحة المتروكة والهوامش الإضافية.
<div class="container p-3 my-3 border"></div>
<div class="container
p-3 my-3 bg-dark
text-white"></div>
<div class="container p-3 my-3 bg-primary
text-white"></div>
سوف تتعلم المزيد عن الألوان وأدوات الحدود ، في BS4 Colors Chapter و BS4 Utilities Chapter .
حاويات مستجيبة
يمكنك أيضًا استخدام .container-sm|md|lg|xlالفئات لإنشاء حاويات متجاوبة.
max-widthستتغير الحاوية على أحجام الشاشات / إطارات العرض المختلفة :
| فصل |
صغير جدًا <576 بكسل |
صغير ≥576 بكسل |
متوسط ≥ 768 بكسل |
كبير ≥992 بكسل |
كبير جدًا ≥1200 بكسل |
|---|---|---|---|---|---|
.container-sm |
100٪ | 540 بكسل | 720px | 960px | 1140 بكسل |
.container-md |
100٪ | 100٪ | 720px | 960px | 1140 بكسل |
.container-lg |
100٪ | 100٪ | 100٪ | 960px | 1140 بكسل |
.container-xl |
100٪ | 100٪ | 100٪ | 100٪ | 1140 بكسل |
مثال
<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>
هل كنت تعلم؟
W3.CSS هو بديل ممتاز لـ Bootstrap 4.
W3.CSS أصغر وأسرع وأسهل في الاستخدام.
إذا كنت تريد تعلم W3.CSS ، فانتقل إلى برنامج W3.CSS التعليمي الخاص بنا .