الحاويات (Containers)

كيفية عملها !

تعتبر الحاويات (Containers) العنصر الأساسي للتخطيط في الـ Bootstrap وهي مطلوبة عند استخدام نظام الشبكة (grid system) الافتراضي الخاص بنا. تُستخدم الحاويات لاحتواء، وإضافة الهامش الداخلي (padding)، و(أحياناً) توسيط المحتوى الموجود بداخلها. وبينما يمكن تداخل الحاويات، فإن معظم التخطيطات لا تتطلب حاوية متداخلة.

يأتي الـ Bootstrap مع ثلاث حاويات مختلفة:

• .container، والتي تحدد max-width عند كل نقطة توقف متوافقة مع الشاشات (responsive breakpoint)
• .container-{breakpoint}، والتي تكون width: 100% حتى الوصول إلى نقطة التوقف المحددة
• .container-fluid، والتي تكون width: 100% عند جميع نقاط التوقف

يوضح الجدول أدناه كيف تقارن max-width لكل حاوية مع .container و .container-fluid الأصلية عبر كل نقطة توقف.

شاهدها في عملها وقارن بينها في مثال الشبكة (Grid example).

الحاوية الافتراضية (container)

الفئة (class) .container الافتراضية لدينا هي حاوية ذات عرض ثابت ومتوافقة مع الشاشات (Responsive)، مما يعني أن max-width الخاصة بها تتغير عند كل نقطة توقف (breakpoint).

<div class="container">
  <!-- Content here -->
</div>

الحاويات المتوافقة مع جميع احجام الشاشات

تسمح لك الحاويات المتوافقة مع الشاشات (Responsive) بتحديد فئة (class) تكون بعرض 100% حتى الوصول إلى نقطة التوقف المحددة، وبعد ذلك نقوم بتطبيق max-width لكل من نقاط التوقف الأعلى. على سبيل المثال، .container-sm تكون بعرض 100% في البداية حتى الوصول إلى نقطة التوقف sm حيث ستقوم بالتوسع مع md و lg و xl و xxl.

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>

الحاويات المرنة (Fluid)

استخدم .container-fluid للحصول على حاوية بعرض كامل، تمتد على كامل عرض نافذة العرض (viewport).

<div class="container-fluid">
  ...
</div>

الـ (CSS)

متغيرات الـ (Sass)

كما هو موضح أعلاه، يقوم الـ Bootstrap بتوليد سلسلة من الفئات (classes) المحددة مسبقاً للحاويات لمساعدتك في بناء التخطيطات التي ترغب بها. يمكنك تخصيص هذه الفئات (classes) المحددة مسبقاً عن طريق تعديل الخريطة (map) الخاصة بالـ Sass (الموجودة في _variables.scss) التي تشغلها:

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

لمزيد من المعلومات وأمثلة حول كيفية تعديل خرائط (maps) ومتغيرات الـ Sass الخاصة بنا، يرجى الرجوع إلى قسم الـ Sass في مستندات الـ Grid.

دمج/مزج الـ (Sass mixins)

بالإضافة إلى تخصيص الـ Sass، يمكنك أيضاً إنشاء الحاويات الخاصة بك باستخدام المزج (mixin) الخاص بالـ Sass.

// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
  width: 100%;
  padding-right: $padding-x;
  padding-left: $padding-x;
  margin-right: auto;
  margin-left: auto;
}

// Usage
.custom-container {
  @include make-container();
}