شو الفرق بين container , container-fluid في بوتستراب

container هو محدد من بوتستراب تنشئ منطقة مركزية على الصفحة حيث يمكننا وضع محتوى موقعنا بداخله ويمكن استخدامه في تغليف الموقع كاملاً والفرق بين :

class “container”

يحتوي على هامش أيمن وأيسر ثابت ولن يأخذ العرض الكامل للصفحة الرئيسية أو متصفح العرض.

class “container-fluid”

سيأخذ العرض الكامل لمتصفح العرض وسيتوسع أو يتقلص عندما يتم تغيير حجم متصفح العرض.

container و container-fluid عبارة عن أصناف جاهزة في بوتستراب, كلاهما يعملان كحاوية للعناصر, ولهما نفس التنسيقات , لاحظ ذلك

.container, .container-fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

الاختلاف الأساسي هو أن container متجاوب مع مختلف الشاشات وسوف تجد أن العرض الخاص به يختلف باختلاف الشاشات, لاحظ ذلك

@media (min-width: 992px)
.container {
    max-width: 960px;
}

@media (min-width: 768px)
.container {
    max-width: 720px;
}

@media (min-width: 576px)
.container{
    max-width: 540px;
}

، بينما container-fluid دائمًا عرضه 100٪ ولن يختلف باختلاف الشاشات

لفرق بين هاتين الفئتين هو: فئة container هي ذات العرض الثابت. هذا لا يعني أنه لا يستجيب. إنه متجاوب. ومع ذلك ، تم إصلاحه بناءً على حجم الشاشة. تشمل أحجام الشاشة:

• Xs للأجهزة الصغيرة جداً (تستخدم لأقل من 768 مثل الهواتف الذكية والجوال وما إلى ذلك).
• Sm للشاشات الصغيرة (من 768 بكسل وما فوق على سبيل المثال الأجهزة اللوحية).
• Md للشاشة المتوسطة (> = 992 بكسل. أجهزة الكمبيوتر المكتبية / أجهزة الكمبيوتر المحمولة).
• Lg للشاشات الكبيرة (> = 1200. بكسل مثل أجهزة الكمبيوتر المكتبية الكبيرة).

إذا كنت تستخدم فئة ال container والتحقق من صفحة الويب في المتصفح ، فسيتم ضبطها وفقاً للشاشة وحجم المتصفح. على سبيل المثال، إذا كان عرض متصفحك الحالي يزيد عن 1200، فسيتم ضبطه على 1170 بكسل. إذا قمت بتغيير حجم المتصفح إلى حجم صغير ، فسيظل كما هو حتى يصل إلى 992 بكسل. وفي هذه المرحلة سيتم ضبط فئة ال container على 970 بكسل. (من الناحية التقنية يمكننا القول إنه "عرض ثابت" لأن قيم البكسل محددة).
من ناحية أخرى ، ستأخذ فئة ال container-fluid العرض (width) الكامل لإطار العرض (حجم نافذة المتصفح). وإذا كنت تستخدم container-fluid وقمت بتغيير حجم نافذة المتصفح، فقد تلاحظ أن المحتوى الموجود بداخله سيتم ضبطه مع كل بكسل لأخذ العرض المتاح بالكامل (أي دوماً سيكون 100% من حجمه). وبالتالي يكون العرض width مرتبط بعرض منفذ العرض (عرض نافذة المتصفح)، وبالتالي تكون الشاشة ديناميكية.  وبالتالي نستنتج أنها مفيدة أكثر في حالة أردت تغيير شكل صفحتك مع كل اختلاف بسيط في حجم منفذ العرض الخاص بها. بينما نستخدم الcontainer عندما تريد تغيير شكل صفحتك إلى 5 أنواع فقط من الأحجام ، والتي تُعرف أيضاً باسم "نقاط التوقف".