نظام الشبكة

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

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

مثال

يستخدم نظام شبكة Bootstrap سلسلة من الحاويات والصفوف والأعمدة لتخطيط المحتوى ومحاذاة. تم تصميمه باستخدام flexbox وهو سريع الاستجابة. يوجد أدناه مثال وشرح متعمق لكيفية تكامل نظام الشبكة معًا.

جديد أو غير مألوف مع Flexbox؟ اقرأ دليل Flexbox Tricks CSS هذا للحصول على الخلفية والمصطلحات والإرشادات ومقتطفات التعليمات البرمجية.

عمودي

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

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

كيف تعمل

عند تقسيمها ، إليك كيفية توحيد نظام الشبكة:

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

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

خيارات الشبكة

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

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

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

	xs <576 بكسل	سم ≥576 بكسل	md ≥768px	إل جي ≥992 بكسل	xl ≥ 1200 بكسل	xxl ≥1400 بكسل
وعاء`max-width`	لا شيء (تلقائي)	540 بكسل	720 بكسل	960 بكسل	1140 بكسل	1320 بكسل
بادئة الفئة	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
# من الأعمدة	12
عرض مزراب	1.5rem (.75rem على اليسار واليمين)
المزاريب المخصصة	نعم
عش	نعم
ترتيب العمود	نعم

أعمدة التخطيط التلقائي

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

عرض متساوٍ

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

1 من 2

2 من 2

1 من 3

2 من 3

3 من 3

<div class="container">
  <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 أيضًا أنه يمكنك تعيين عرض عمود واحد وتغيير حجم أعمدة الأخوة تلقائيًا حوله. يمكنك استخدام فئات الشبكة المحددة مسبقًا (كما هو موضح أدناه) ، أو مزيج الشبكة ، أو العروض المضمنة. لاحظ أنه سيتم تغيير حجم الأعمدة الأخرى بغض النظر عن عرض العمود الأوسط.

1 من 3

2 من 3 (أوسع)

3 من 3

1 من 3

2 من 3 (أوسع)

3 من 3

<div class="container">
  <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>

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

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

1 من 3

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

3 من 3

1 من 3

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

3 من 3

<div class="container">
  <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>

فصول مستجيبة

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

جميع نقاط التوقف

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

العمود

عمود -8

العمود 4

<div class="container">
  <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>

مكدس إلى أفقي

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

col-sm-8

العمود- SM-4

كول سم

<div class="container">
  <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>

مزج وو صل

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

.col-md-8

.col-6 .col-md-4

.col-6

<div class="container">
  <!-- 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-cols-*الفئات المتجاوبة لتعيين عدد الأعمدة التي تقدم المحتوى والتخطيط بشكل أفضل. .col-*بينما تنطبق الفئات العادية على الأعمدة الفردية (على سبيل المثال ، .col-md-4) ، يتم تعيين فئات أعمدة الصف على الأصل .rowكاختصار. مع .row-cols-autoيمكنك إعطاء الأعمدة عرضها الطبيعي.

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

عمودي

<div class="container">
  <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>

عمودي

<div class="container">
  <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>

عمودي

<div class="container">
  <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>

عمودي

<div class="container">
  <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>

عمودي

<div class="container">
  <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>

عمودي

<div class="container">
  <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>

يمكنك أيضًا استخدام Sass mixin المصاحب 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);
  }
}

التعشيش

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

المستوى 1: .col-sm-3

المستوى 2: .col-8 .col-sm-6

المستوى 2: col-4 .col-sm-6

<div class="container">
  <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>

ساس

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

المتغيرات

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

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

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

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

الخلطات

يتم استخدام 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);

مثال على الاستخدام

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

.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);
  }
}

المحتوى الرئيسي

المحتوى الثانوي

<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>

تخصيص الشبكة

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

الأعمدة والمزاريب

يمكن تعديل عدد أعمدة الشبكة عبر متغيرات Sass. $grid-columnsيستخدم لتوليد العروض (بالنسبة المئوية) لكل عمود على حدة مع $grid-gutter-widthضبط عرض مزاريب العمود.

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

طبقات الشبكة

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

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

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

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