Source

نظام الشبكة

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

كيف تعمل

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

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

واحد من ثلاثة أعمدة

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

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

تقسيمها ، وإليك كيفية عملها:

توفر الحاويات وسيلة لتوسيط محتويات موقعك ووضعها أفقيًا. استخدمه .containerلعرض بكسل سريع الاستجابة أو .container-fluidلجميع width: 100%أحجام منفذ العرض والأجهزة.
الصفوف هي أغلفة للأعمدة. يحتوي كل عمود على أفقي padding(يسمى ميزاب) للتحكم في المسافة بينهما. ثم paddingيتم إبطال ذلك في الصفوف ذات الهوامش السالبة. بهذه الطريقة ، يتم محاذاة كل المحتوى الموجود في الأعمدة بشكل مرئي لأسفل الجانب الأيسر.
في تخطيط الشبكة ، يجب وضع المحتوى داخل أعمدة ويمكن أن تكون الأعمدة فقط عناصر فرعية مباشرة للصفوف.
بفضل flexbox ، widthسيتم تخطيط أعمدة الشبكة بدون تحديد تلقائيًا كأعمدة عرض متساوية. على سبيل المثال ، أربع مثيلات .col-smسيكون عرض كل منها تلقائيًا بنسبة 25٪ من نقطة الإيقاف الصغيرة وما فوق. راجع قسم أعمدة التخطيط التلقائي لمزيد من الأمثلة.
تشير فئات الأعمدة إلى عدد الأعمدة التي ترغب في استخدامها من بين 12 عمودًا ممكنًا في كل صف. لذلك ، إذا كنت تريد عرض ثلاثة أعمدة متساوية العرض ، فيمكنك استخدام .col-4.
يتم تعيين الأعمدة widthبالنسب المئوية ، لذلك فهي دائمًا مائعة وحجم بالنسبة للعنصر الأصلي.
الأعمدة لها أفقي paddingلإنشاء المزاريب بين الأعمدة الفردية ، ومع ذلك ، يمكنك إزالة marginمن الصفوف ومن paddingالأعمدة مع .no-guttersعلى .row.
لجعل الشبكة تستجيب ، هناك خمس نقاط توقف للشبكة ، واحدة لكل نقطة توقف متجاوبة : جميع نقاط التوقف (صغيرة جدًا) ، صغيرة ، متوسطة ، كبيرة ، وكبيرة جدًا.
تعتمد نقاط توقف الشبكة على استعلامات وسائط عرض الحد الأدنى ، مما يعني أنها تنطبق على نقطة الفصل هذه وجميع تلك الموجودة فوقها (على سبيل المثال ، .col-sm-4تنطبق على الأجهزة الصغيرة والمتوسطة والكبيرة والكبيرة جدًا ، ولكن ليس xsنقطة التوقف الأولى).
يمكنك استخدام فئات الشبكة المحددة مسبقًا (مثل .col-4) أو مزيج Sass لمزيد من الترميز الدلالي.

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

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

بينما يستخدم Bootstrap ems أو rems لتحديد معظم الأحجام ، pxيتم استخدام s لنقاط توقف الشبكة وعرض الحاوية. هذا لأن عرض منفذ العرض بالبكسل ولا يتغير مع حجم الخط .

تعرف على كيفية عمل جوانب نظام شبكة Bootstrap عبر أجهزة متعددة باستخدام جدول سهل الاستخدام.

	صغير جدًا <576 بكسل	صغير ≥576 بكسل	متوسط ≥ 768 بكسل	كبير ≥992 بكسل	كبير جدًا ≥1200 بكسل
أقصى عرض للحاوية	لا شيء (تلقائي)	540 بكسل	720 بكسل	960 بكسل	1140 بكسل
بادئة الفئة	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# من الأعمدة	12
عرض مزراب	30 بكسل (15 بكسل على كل جانب من جوانب العمود)
عش	نعم
ترتيب العمود	نعم

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

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

عرض متساوٍ

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

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>

يمكن تقسيم الأعمدة المتساوية العرض إلى عدة أسطر ، ولكن كان هناك خطأ في Safari flexbox منع هذا من العمل بدون flex-basisملف border. هناك حلول بديلة لإصدارات المستعرض الأقدم ، ولكن لا ينبغي أن تكون ضرورية إذا كنت محدثًا.

عمودي

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</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>

صفوف متعددة متساوية العرض

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

العمود

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100"></div>
    <div class="col">col</div>
    <div class="col">col</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-12 .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-12 col-md-8">.col-12 .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. قد يحتاج الوالد .containerأو .container-fluidالوالد إلى الضبط أيضًا لتجنب التدفق الزائد غير المرغوب فيه ، باستخدام أداة الحشو المطابقة مرة أخرى.

فيما يلي مثال على تخصيص شبكة Bootstrap عند lgنقطة الإيقاف الكبيرة () وما فوقها. لقد زدنا .colالحشوة .px-lg-5، وقمنا بإبطال ذلك .mx-lg-n5على الوالد .row، ثم قمنا بتعديل .containerالغلاف باستخدام .px-lg-5.

مساحة أعمدة مخصصة

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
  </div>
</div>

محاذاة

استخدم أدوات المحاذاة المرنة لمحاذاة الأعمدة رأسيًا وأفقيًا.

انحياز عمودي

واحد من ثلاثة أعمدة

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

واحد من ثلاثة أعمدة

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

محاذاة أفقية

واحد من عمودين

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

لا المزاريب

يمكن إزالة المزاريب بين الأعمدة في فئات الشبكة المحددة مسبقًا باستخدام .no-gutters. هذا يزيل margins السلبية من .rowوالأفقي paddingمن جميع الأعمدة الفرعية المباشرة.

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

هل تحتاج إلى تصميم من الحافة إلى الحافة؟ إسقاط الوالد .containerأو .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

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

.col-12 .col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

التفاف العمود

إذا تم وضع أكثر من 12 عمودًا في صف واحد ، فستلتف كل مجموعة من الأعمدة الإضافية كوحدة واحدة في سطر جديد.

.col-9

.col-4
بما أن 9 + 4 = 13> 12 ، يتم لف هذا المكون من 4 أعمدة على سطر جديد كوحدة واحدة متجاورة.

.col-6
تستمر الأعمدة التالية على طول الخط الجديد.

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
    <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
  </div>
</div>

عمود فواصل

يتطلب تقسيم الأعمدة إلى سطر جديد في flexbox اختراقًا صغيرًا: أضف عنصرًا مع المكان width: 100%الذي تريد لف الأعمدة الخاصة بك إلى سطر جديد. عادةً ما يتم تحقيق ذلك باستخدام عدة .rowقواطع ، ولكن ليس كل طريقة تنفيذ يمكن أن تفسر ذلك.

.col-6 .col-sm-3

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
</div>

يمكنك أيضًا تطبيق هذا الفاصل عند نقاط توقف معينة باستخدام أدوات العرض سريعة الاستجابة الخاصة بنا .

.col-6 .col-sm-4

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div class="w-100 d-none d-md-block"></div>

    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  </div>
</div>

إعادة الترتيب

ترتيب الفصول

استخدم .order-الفئات للتحكم في الترتيب المرئي للمحتوى الخاص بك. هذه الفئات متجاوبة ، لذا يمكنك تعيين orderنقطة التوقف حسب (على سبيل المثال ، .order-1.order-md-2). يتضمن دعمًا 1عبر 12جميع طبقات الشبكة الخمسة.

أولاً ، لكن بدون ترتيب

ثانيًا ، لكن أخيرًا

ثالثًا ، لكن أولاً

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

هناك أيضًا فئات مستجيبة .order-firstوفئات .order-lastتغير orderعنصر العنصر عن طريق تطبيق order: -1و order: 13( order: $columns + 1) على التوالي. يمكن أيضًا خلط هذه الفئات مع .order-*الفئات المرقمة حسب الحاجة.

أولاً ، لكن أخيرًا

ثانيًا ، لكن بدون ترتيب

ثالثًا ، لكن أولاً

<div class="container">
  <div class="row">
    <div class="col order-last">
      First, but last
    </div>
    <div class="col">
      Second, but unordered
    </div>
    <div class="col order-first">
      Third, but first
    </div>
  </div>
</div>

موازنة الأعمدة

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

فئات الأوفست

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

.col-md-4

.col-md-4. offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

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

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5. offset-md-2 .col-lg-6 .offset-lg-0

<div class="container">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

مرافق الهامش

مع الانتقال إلى flexbox في الإصدار 4 ، يمكنك استخدام أدوات الهامش مثل .mr-autoإبعاد الأعمدة الشقيقة عن بعضها البعض.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto mr-auto">.col-auto .mr-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

التعشيش

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

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

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

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

<div class="container">
  <div class="row">
    <div class="col-sm-9">
      Level 1: .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: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

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

الخلطات

يتم استخدام 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();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

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

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

.example-container {
  width: 800px;
  @include make-container();
}

.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: 30px !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أو %).