حاويات

الحاويات عبارة عن لبنة أساسية في Bootstrap تحتوي على المحتوى الخاص بك ولوحة ومحاذاة داخل جهاز أو منفذ عرض معين.

على هذه الصفحة

كيف هؤلاء يعملون

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

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

.container، والتي تحدد max-widthعند كل نقطة توقف سريعة الاستجابة
.container-fluid، وهو width: 100%في جميع نقاط التوقف
.container-{breakpoint}، وهو width: 100%حتى نقطة التوقف المحددة

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

شاهدهم في العمل وقارنهم في مثالنا على الشبكة .

	صغير جدًا <576 بكسل	صغير ≥576 بكسل	متوسط ≥ 768 بكسل	كبير ≥992 بكسل	X- كبير ≥1200 بكسل	XX- كبير ≥1400 بكسل
`.container`	100٪	540 بكسل	720 بكسل	960 بكسل	1140 بكسل	1320 بكسل
`.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 بكسل
`.container-fluid`	100٪	100٪	100٪	100٪	100٪	100٪

الحاوية الافتراضية

صنفنا الافتراضي .containerعبارة عن حاوية سريعة الاستجابة ذات عرض ثابت ، مما يعني max-widthتغييراتها في كل نقطة توقف.

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

حاويات مستجيبة

تسمح لك الحاويات المستجيبة بتحديد فئة بعرض 100٪ حتى يتم الوصول إلى نقطة التوقف المحددة ، وبعد ذلك نطبق max-widths لكل نقطة من نقاط التوقف الأعلى. على سبيل المثال ، .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>

حاويات السوائل

استخدمه .container-fluidلحاوية كاملة العرض ، تغطي العرض الكامل لإطار العرض.

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

ساس

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

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

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

// 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();
}

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