نظام الشبكة (Grid)

استخدم شبكة الـ flexbox القوية التي تعتمد على الهاتف أولاً لبناء تخطيطات من جميع الأشكال والأحجام بفضل نظام مكون من اثني عشر عموداً، وست مستويات استجابة افتراضية، ومتغيرات ومزجات الـ Sass، والعشرات من الفئات (classes) المحددة مسبقاً.

في هذه الصفحة

مثال

يستخدم نظام الشبكة في الـ Bootstrap سلسلة من الحاويات (containers)، والصفوف (rows)، والأعمدة (columns) لتخطيط ومحاذاة المحتوى. وقد تم بناؤه باستخدام flexbox وهو متوافق مع الشاشات (Responsive) بالكامل. فيما يلي مثال وشرح مفصل لكيفية عمل نظام الشبكة معاً.

هل أنت جديد أو غير ملم بالـ flexbox؟ اقرأ دليل flexbox من CSS Tricks لمعرفة الخلفية، والمصطلحات، والإرشادات، ومقتطفات الكود.

Column

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

ينشئ المثال أعلاه ثلاثة أعمدة متساوية العرض عبر جميع الأجهزة وشاشات العرض باستخدام الفئات (classes) المحددة مسبقاً لنظام الشبكة. هذه الأعمدة ممركزة في الصفحة باستخدام العنصر الأب .container.

كيف يعمل ؟

بتحليل الأمر، إليك كيف يعمل نظام الشبكة معاً:

يدعم نظام الشبكة لدينا ست نقاط توقف متوافقة مع الشاشات (responsive breakpoints). تعتمد نقاط التوقف على استعلامات الوسائط min-width، مما يعني أنها تؤثر على نقطة التوقف تلك وجميع النقاط التي تعلوها (على سبيل المثال، .col-sm-4 تنطبق على sm و md و lg و xl و xxl). وهذا يعني أنه يمكنك التحكم في حجم وسلوك الحاوية والعمود من خلال كل نقطة توقف.
تقوم الحاويات (Containers) بتمركز محتواك وإضافة هامش داخلي أفقي. استخدم .container لعرض بكسل متوافق مع الشاشات، أو .container-fluid لعرض width: 100% عبر جميع منافذ العرض والأجهزة، أو حاوية متوافقة مع الشاشات (على سبيل المثال، .container-md) لمزيج من العروض السائلة وعروض البكسل.
الصفوف (Rows) هي أغلفة للأعمدة. يحتوي كل عمود على padding أفقي (يسمى الفراغات الفاصلة - gutter) للتحكم في المساحة بين الأعمدة. يتم بعد ذلك موازنة هذا الـ padding في الصفوف بهوامش سلبية لضمان محاذاة المحتوى في أعمدتك بصرياً من الجانب الأيسر. تدعم الصفوف أيضاً فئات معدلة لـ تطبيق حجم الأعمدة بشكل موحد و فئات الفراغات الفاصلة (gutter classes) لتغيير تباعد محتواك.
الأعمدة مرنة للغاية. هناك 12 عموداً نموذجياً متاحاً لكل صف، مما يسمح لك بإنشاء تركيبات مختلفة من العناصر التي تمتد عبر أي عدد من الأعمدة. تشير فئات الأعمدة إلى عدد الأعمدة النموذجية التي سيتم امتدادها (على سبيل المثال، col-4 تمتد لأربعة). يتم تعيين العروض width بنسب مئوية بحيث يكون لديك دائماً نفس الحجم النسبي.
الفراغات الفاصلة (Gutters) متوافقة مع الشاشات وقابلة للتخصيص أيضاً. فئات الفراغات الفاصلة متاحة عبر جميع نقاط التوقف، وبجميع الأحجام نفسها مثل تباعد الهوامش الداخلية والخارجية. قم بتغيير الفراغات الفاصلة الأفقية باستخدام فئات .gx-*، والفراغات الفاصلة الرأسية باستخدام .gy-*، أو جميع الفراغات الفاصلة باستخدام فئات .g-*. تتوفر أيضاً .g-0 لإزالة الفراغات الفاصلة.
متغيرات الـ Sass والخرائط (maps) والمزجات (mixins) هي التي تشغل الشبكة. إذا كنت لا تريد استخدام فئات الشبكة المحددة مسبقاً في Bootstrap، يمكنك استخدام مصدر Sass الخاص بالشبكة لإنشاء شبكتك الخاصة بتحديد دلالي أكثر. كما قمنا بتضمين بعض خصائص CSS المخصصة لاستهلاك متغيرات Sass هذه من أجل مرونة أكبر لك.

كن على دراية بالقيود و الأخطاء المتعلقة بالـ flexbox، مثل عدم القدرة على استخدام بعض عناصر HTML كحاويات flex.

خيارات الشبكة (Grid)

يمكن لنظام الشبكة في الـ Bootstrap التكيف عبر جميع نقاط التوقف الست الافتراضية، وأي نقاط توقف تقوم بتخصيصها. مستويات الشبكة الست الافتراضية هي كما يلي:

صغيرة جداً (xs)
صغيرة (sm)
متوسطة (md)
كبيرة (lg)
كبيرة جداً (xl)
كبيرة جداً جداً (xxl)

كما ذكرنا أعلاه، لكل من نقاط التوقف هذه الحاوية الخاصة بها، وبادئة فئة فريدة، ومعدلات. إليك كيف تتغير الشبكة عبر نقاط التوقف هذه:

	xs <576px	sm ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
Container `max-width`	None (auto)	540px	720px	960px	1140px	1320px
Class prefix	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
# of columns	12
Gutter width	1.5rem (.75rem on left and right)
Custom gutters	Yes
Nestable	Yes
Column ordering	Yes

أعمدة التخطيط التلقائي (Auto-layout columns)

استخدم الفئات (classes) الخاصة بالأعمدة والمحددة لنقاط توقف معينة لتحديد حجم العمود بسهولة دون الحاجة إلى فئة مرقمة صريحة مثل .col-sm-6.

عرض متساوٍ (Equal-width)

على سبيل المثال، إليك تخطيطان للشبكة ينطبقان على كل جهاز ومنفذ عرض، من xs إلى xxl. أضف أي عدد من الفئات (classes) غير المحددة بوحدات لكل نقطة توقف تحتاجها وسيكون لكل عمود نفس العرض.

1 of 2

2 of 2

1 of 3

2 of 3

3 of 3

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

تحديد عرض عمود واحد

يعني التخطيط التلقائي لأعمدة شبكة الـ flexbox أيضاً أنه يمكنك تحديد عرض عمود واحد وجعل الأعمدة الشقيقة تعيد تحجيم نفسها تلقائياً حوله. يمكنك استخدام فئات الشبكة المحددة مسبقاً (كما هو موضح أدناه)، أو مزجات (mixins) الشبكة، أو عروض مضمنة (inline widths). لاحظ أن الأعمدة الأخرى ستعيد تحجيم نفسها بغض النظر عن عرض العمود المركزي.

1 of 3

2 of 3 (wider)

3 of 3

1 of 3

2 of 3 (wider)

3 of 3

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

محتوى بعرض متغير

استخدم الفئات (classes) col-{breakpoint}-auto لتحديد حجم الأعمدة بناءً على العرض الطبيعي لمحتواها.

1 of 3

Variable width content

3 of 3

1 of 3

Variable width content

3 of 3

html

<div class="container text-center">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

الفئات المتوافقة مع الشاشات (Responsive classes)

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

جميع نقاط التوقف (All breakpoints)

بالنسبة للشبكات التي تكون متماثلة من أصغر الأجهزة إلى أكبرها، استخدم الفئات .col و .col-*. حدد فئة مرقمة عندما تحتاج إلى عمود بحجم معين؛ خلاف ذلك، لا تتردد في استخدام .col.

col

col-8

col-4

html

<div class="container text-center">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

من التكديس إلى الأفقي (Stacked to horizontal)

باستخدام مجموعة واحدة من الفئات .col-sm-*، يمكنك إنشاء نظام شبكة أساسي يبدأ مكدساً ويصبح أفقياً عند نقطة التوقف الصغيرة (sm).

col-sm-8

col-sm-4

col-sm

html

<div class="container text-center">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

المزج والمطابقة (Mix and match)

ألا تريد أن يتم تكديس أعمدتك ببساطة في بعض مستويات الشبكة؟ استخدم مجموعة من الفئات (classes) المختلفة لكل مستوى حسب الحاجة. انظر إلى المثال أدناه للحصول على فكرة أفضل عن كيفية عمل كل ذلك.

.col-md-8

.col-6 .col-md-4

.col-6

html

<div class="container text-center">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

أعمدة الصفوف (Row columns)

استخدم فئات .row-cols-* المتوافقة مع الشاشات (Responsive) لتحديد عدد الأعمدة التي تعرض محتواك وتخطيطك بشكل أفضل وبسرعة. بينما تنطبق فئات .col-* العادية على الأعمدة الفردية (على سبيل المثال، .col-md-4)، يتم تعيين فئات أعمدة الصفوف على العنصر الأب .row كاختصار. ومع .row-cols-auto يمكنك إعطاء الأعمدة عرضها الطبيعي.

استخدم فئات أعمدة الصفوف هذه لإنشاء تخطيطات شبكة أساسية بسرعة أو للتحكم في تخطيطات البطاقات الخاصة بك.

Column

html

<div class="container text-center">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Column

html

<div class="container text-center">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Column

html

<div class="container text-center">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Column

html

<div class="container text-center">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Column

html

<div class="container text-center">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Column

html

<div class="container text-center">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

يمكنك أيضاً استخدام المزج (mixin) الخاص بالـ Sass المصاحب، row-cols():

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

التداخل (Nesting)

لتداخل محتواك مع الشبكة الافتراضية، أضف .row جديدة ومجموعة من أعمدة .col-sm-* ضمن عمود .col-sm-* موجود. يجب أن تتضمن الصفوف المتداخلة مجموعة من الأعمدة التي يصل مجموعها إلى 12 أو أقل (ليس من الضروري استخدام جميع الأعمدة الـ 12 المتاحة).

Level 1: .col-sm-3

Level 2: .col-8 .col-sm-6

Level 2: .col-4 .col-sm-6

html

<div class="container text-center">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="col-sm-9">
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

الـ (CSS)

عند استخدام ملفات الـ Sass المصدرية الخاصة بـ Bootstrap، يكون لديك خيار استخدام متغيرات ومزجات (mixins) الـ Sass لإنشاء تخطيطات صفحات مخصصة ودلالية ومتوافقة مع الشاشات (Responsive). تستخدم فئات الشبكة المحددة مسبقاً لدينا هذه المتغيرات والمزجات نفسها لتوفير مجموعة كاملة من الفئات الجاهزة للاستخدام لتخطيطات متوافقة مع الشاشات بسرعة.

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

تحدد المتغيرات والخرائط (maps) عدد الأعمدة، وعرض الـ gutter، ونقطة استعلام الوسائط التي يبدأ عندها تعويم الأعمدة. نحن نستخدم هذه لإنشاء فئات الشبكة المحددة مسبقاً الموثقة أعلاه، وكذلك للمزجات (mixins) المخصصة المدرجة أدناه.

$grid-columns:      12;
$grid-gutter-width: 1.5rem;
$grid-row-columns:  6;

scss/_variables.scss

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

scss/_variables.scss

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

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

تُستخدم المزجات/الدمج (mixins) بالاقتران مع متغيرات الشبكة لإنشاء CSS دلالي لأعمدة الشبكة الفردية.

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Offset with margins
@include make-col-offset($size, $columns: $grid-columns);

مثال للإستخدام

يمكنك تعديل المتغيرات إلى قيمك المخصصة، أو مجرد استخدام المزجات (mixins) بقيمها الافتراضية. إليك مثال على استخدام الإعدادات الافتراضية لإنشاء تخطيط من عمودين مع وجود فجوة بينهما.

.example-container {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

Main content

Secondary content

html

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

تخصيص الشبكة (grid)

باستخدام متغيرات وخرائط (maps) الـ Sass المدمجة للشبكة، من الممكن تخصيص الفئات (classes) المحددة مسبقاً للشبكة بالكامل. قم بتغيير عدد المستويات، وأبعاد استعلامات الوسائط، وعروض الحاويات—ثم أعد التجميع.

الأعمدة والفراغات الفاصلة (Columns and gutters)

يمكن تعديل عدد أعمدة الشبكة عبر متغيرات الـ Sass. يتم استخدام $grid-columns لإنشاء العروض (كنسبة مئوية) لكل عمود فردي، بينما يحدد $grid-gutter-width عرض الفراغات الفاصلة (gutters) للأعمدة. ويُستخدم $grid-row-columns لتحديد الحد الأقصى لعدد الأعمدة في .row-cols-*، وأي عدد يتجاوز هذا الحد سيتم تجاهله.

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !default;

مستويات الشبكة (Grid tiers)

بعيداً عن الأعمدة نفسها، يمكنك أيضاً تخصيص عدد مستويات الشبكة. إذا كنت تريد أربعة مستويات فقط للشبكة، فستقوم بتحديث $grid-breakpoints و $container-max-widths لتصبح على النحو التالي:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

عند إجراء أي تغييرات على متغيرات أو خرائط (maps) الـ Sass، ستحتاج إلى حفظ تغييراتك وإعادة التجميع. سيؤدي ذلك إلى إخراج مجموعة جديدة تماماً من الفئات (classes) المحددة مسبقاً للشبكة لعروض الأعمدة، والإزاحات، والترتيب. كما سيتم تحديث أدوات الرؤية المتوافقة مع الشاشات (Responsive) لاستخدام نقاط التوقف المخصصة. تأكد من تعيين قيم الشبكة بـ px (وليس rem أو em أو %).