عرض مصدر Bootstrap/theming

<noinclude>{{DISPLAYTITLE:تخصيص مظهر إطار Bootstrap}}</noinclude>
خصِّص إطار العمل Bootstrap بمتغيّرات Sass الجديدة - المعدَّة مسبقًا - الخاصّة بتفضيلات التنسيق العامّ من أجل '''تهيئة القوالب''' Theming والتعديل على العناصر بسهولة.

== مقدّمة ==
كانت تهيئة القوالب في الإصدار الثالث من إطار العمل Bootstrap  تعتمد كثيرًا على تعديل متغيّرات LESS، وصفحات أنماط مخصَّصة، وقالب [[CSS]] يُضمَّن في ملفات المُجلَّد <code>dist</code>. يمكن ببذل جهد يسير إعادة تصميم مظهر في الإصدار الثالث من Bootstrap  دون المساس بالملفات الأصلية لإطار العمل. يوفّر الإصدار الرابع من إطار العمل Bootstrap  مقاربة اعتيادية للمطورين، ولكنّها مختلفة قليلاً عن الإصدار الذي يسبقه.

أصبحت القوالب تهيَّأ الآن بمتغيّرات [[Sass]]، وخرائط [[Sass]]، وبصفحات [[CSS]] مخصَّصة. لم يعد يوجد قالب [[CSS]] مخصَّص؛ يمكنك بدلًا من ذلك تفعيل القالب المُعدّ مسبقًا لإضافة التدرّجات اللونية والظلال وغيرها.

=== Sass ===
استخدم ملفات [[Sass]] المصدرية للاستفادة من المتغيّرات، والمخاليط (mixins)، والجداول (maps) وغيرها. لقد غيرنا دقة التقريب في Sass إلى 6 (افتراضيا تساوي 5) لتجنب المشاكل الناجمة عن تقريب المتصفحات.

=== بنية الملفات ===
تجنّب تغيير ملفات [[Bootstrap]] الداخليّة كلّ ما أمكنك ذلك. يعني هذا - على مستوى Sass - إنشاء صفحات أنماط خاصّة تستورد تنسيقات [[Bootstrap]] لكي تعدّل عليها وتمدّدها. ستكون لديك، على اعتبار أنك تستخدم مدير حزم مثل <code>npm</code>، بنية ملفات تشبه التالي:<syntaxhighlight lang="text">
your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss
</syntaxhighlight>إن نزّلت الملفات المصدرية بدون استخدام مدير حزم فستحتاج لإعداد بنية مشابهة لما سبق يدويّا. أبقِ ملفات [[Bootstrap]] المصدرية منفصلةً عن ملفاتك الخاصّة.<syntaxhighlight lang="text">
your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss
</syntaxhighlight>

=== الاستيراد ===
يستورد الملف <code>custom.scss</code> ملفات Sass المصدرية من إطار العمل [[Bootstrap]]. لديك خياران: تضمين جميع الملفات المصدرية من Bootstrap أو اختيار الأجزاء التي تحتاجها. يشجّع مطوّرو Bootstrap الخيار الثاني، لكن انتبه إلى أنه توجد متطلّبات واعتماديّات بين عناصر إطار العمل. تحتاج أيضًا لتضمين بعض ملفات [[JavaScript]] لتعمل الملحقات.<syntaxhighlight lang="sass">
// Custom.scss
// الخيار الأول: تضمين إطار العمل كاملا 
@import "../node_modules/bootstrap/scss/bootstrap";

// Custom.scss
// الخيار الثاني: تضمين أجزاء من إطار العمل 

// مطلوب
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// اختياري
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

</syntaxhighlight>يمكن بعد إعدادات الضّبط أعلاه البدء في التعديل على متغيّرات Sass وجداوله ضمن الملف <code>custom.scss</code>. يمكنك إضافة أجزاء من إطار العمل Bootstrap ضمن المقطع الاختياري حسب الحاجة. نقترح إضافة القائمة الكاملة للاستيرادات من ملف <code>bootstrap.scss</code> لتكون نقطة بداية لك.

=== القيم المبدئية للمتغيّرات ===
يحوي كلّ متغيّر Sass في إطار العمل Bootstrap  العلامة ‎<code>!default</code> ليعطيك إمكانية إبطال القيمة المبدئية للمتغيّر في ملفات Sass الخاصّة بك دون الحاجة للتعديل على الملفات المصدرية لإطار العمل. انسخ المتغيّرات وألصقها حسب الحاجة، غيّر قيمها واحذف العلامة  ‎<code>!default</code>. إن أسندت قيمةً إلى متغيّر فلن يعيد Bootstrap إسنادها بالقيم المبدئية.

يمكنك العثور على القائمة الكاملة لمتغيرات Bootstrap في الملف <code>scss/_variables.scss</code>. بعض المتغيرات مُعيَّنة إلى القيمة <code>null</code>. لا تُخرج هذه المتغيرات الخاصية إلا في حال أعدت تعريفهما في الإعدادات.

يمكن أن تُسند قيمةٌ إلى متغيّر في ملفّ Sass قبل المتغيّرات المبدئية أو بعدها؛ إلا أن القيم العابرة للملفات يجب أن تأتي قبل استيراد ملفات Sass الخاصّة بإطار العمل Bootstrap.

في ما يلي مثال على تغيير لون الخلفية ولون النّص بالنسبة للعنصر <code>[[HTML/body|<body>]]</code> عند استيراد Bootstrap وتجميعه بواسطة <code>npm</code>:<syntaxhighlight lang="sass">
// إبطال القيم المبدئية
$body-bg: #000;
$body-color: #111;

// Bootstrap ومتغيّراته المبدئية
@import "node_modules/bootstrap/scss/bootstrap";

</syntaxhighlight>كرّر العمليّة حسب الحاجة على أي متغيّر في إطار العمل [[Bootstrap]]، بما في ذلك الخيارات العامة أدناه.

=== الجداول والحلقات ===
يحوي إطار العمل [[Bootstrap]] مجموعةً من جداول Sass، وهي أزواج من المفاتيح والقيم المصاحبة لها تسهّل توليد مجموعات من صفحات [[CSS]] المترابطة. يستخدم Bootstrap الجداول للألوان، وحدود الشبكة (grid breakpoints)، وغيرها. تتضمّن جدوال Sass جميعًا - كما في المتغيّرات - العلامة ‎<code>!default</code> ويمكن إبطال مفعولها وتمديدها.

بعض الجداول تُدمج في جدول فارغا افتراضيا وذلك لتسهيل توسيع الجدول. بيد أنّ ذلك على حساب جعل إزالة العناصر من الجدول أصعب قليلا.

==== تغيير جدول ====
أضف التالي إلى ملفّ Sass المخصَّص الخاصّ بك لتغيير اللون في جدول ألوان القالب ‎<code>$theme-colors</code>:<syntaxhighlight lang="sass">
$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);
</syntaxhighlight>

==== الإضافة إلى جدول ====
أضف مفتاحًا وقيمة جديديْن إلى  ‎<code>$theme-colors</code> لإضافة لون جديد:<syntaxhighlight lang="sass">
$theme-colors: (
  "custom-color": #900
);
</syntaxhighlight>

==== الحذف من جدول ====
استخدم <code>map-remove</code> لحذف الألوان من ‎<code>$theme-colors</code>، أو أي جدول آخر. انتبه إلى أنه يتوجّب إدراج العنصُر بين الملفات المطلوبة من إطار العمل والملفات الاختيارية:<syntaxhighlight lang="sass">
// مطلوب
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

// اختياري
@import "node_modules/bootstrap/scss/root";
@import "node_modules/bootstrap/scss/reboot";
@import "node_modules/bootstrap/scss/type";
...
</syntaxhighlight>

==== المفاتيح المطلوبة ====
يفترض إطار العمل Bootstrap تواجد بعض المفاتيح المحدَّدة في جداول Sass؛ يستخدم Bootstrap هذه المفاتيح ويمدّدها (extend). عند تخصيص الجداول المُضمَّنة، قد تلاقي أخطاء في أماكن يُستخدَم فيها مفتاح Sass مُحدَّد.

على سبيل المثال، يستخدم Bootstrap المفاتيح <code>success</code>، <code>primary</code> و<code>danger</code> من الجدول ‎<code>$theme-colors</code> في تنسيق الروابط، والأزرار، وحالات النماذج (form states). لا يمثّل إبدال قيم هذه المفاتيح أية مشكلة؛ إلا أن حذفها قد يتسبّب في أخطاء عند تجميع Sass. يتوجّب في هذه الحالات تعديل شفرة Sass التي تستخدم هذه القيم.

=== الدوال ===
يستخدم Bootstrap دوالّ Sass عدّة، إلا أنه لا يمكن تطبيق سوى جزء منها لتهيئة القوالب بصفة عامة. توجد ثلاث دوالّ للحصول على قيم من جداول الألوان:<syntaxhighlight lang="sass">
@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}
</syntaxhighlight>تستطيع استخدام هذه الدوالّ لاختيار لون من جدول Sass بنفس الطريقة التي كنت تستخدم بها متغيّر لون في الإصدار 3 من Bootstrap.<syntaxhighlight lang="sass">
.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}
</syntaxhighlight>توجد دالّة أخرى تمكّن من الحصول على ''مستوى'' معيَّن من لون في جدول ‎<code>$theme-colors</code>. تخفّف القيم السالبة من كثافة اللون، في ما تزيد القيم الموجبة هذه الكثافة.<syntaxhighlight lang="sass">
@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, #000, #fff);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

</syntaxhighlight>يعني هذا عمليًا أن تستدعي الدالة وتمرّر لها معامليْن: اسم اللون في ‎<code>$theme-colors</code> (مثلًا <code>primary</code> أو <code>danger</code>) ومستوى عددي.<syntaxhighlight lang="sass">
.custom-element {
  color: theme-color-level(primary, -10);
}
</syntaxhighlight>تمكن إضافة دوالّ في المستقبل أو عن طريق Sass مخصَّص لإنشاء دوالّ مستوى لجداول Sass أخرى، أو ربما دوالّ عمومية إن كنت تريد الإسهاب.

=== تباين الألوان ===
يتضمّن Bootstrap دالة إضافية لتباين الألوان: <code>color-yiq</code>.تستخدم هذه الدالة [[wikipedia:YIQ|فضاء الألوان YIQ]] للحصول تلقائيًا على تباين لوني مضيء (<code>#fff</code>) أو مظلم (<code>#111</code>) بالاعتماد على اللون القاعدي الأساسي المحدَّد. هذه الدالة مفيدة، خصوصا في المخاليط (mixins) والحلقات (loops) عندما تولّد أصنافًا (classes) عدّة.

يوضّح المثال التالي توليد عيّنات ألوان من الجدول ‎<code>$theme-colors</code>:<syntaxhighlight lang="sass">
@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-yiq($value);
  }
}
</syntaxhighlight>يمكن كذلك أن تستخدَم للحصول على تباين وحيد عند الحاجة:<syntaxhighlight lang="sass">
.custom-element {
  color: color-yiq(#000); // ترجع `color: #fff`
}
</syntaxhighlight>كما يمكن أن تستخدم لتحديد لون قاعدي بالتزامن مع دوال جدول الألوان:<syntaxhighlight lang="sass">
.custom-element {
  color: color-yiq(theme-color("dark")); // ترجع `color: #fff`
}
</syntaxhighlight>

=== تهريب SVG ===
نستخدم الدالة escape-svg لتهريب المحارف <code>></code> و <code><</code> و <code>#</code>في خلفية صور SVG. لا بد من تهريب هذه المحارف لضمان عرض سليم لخلفيات الصور في IE.

=== دوال الجمع والطرح ===
نستخدم الدالتين <code>add</code>  و <code>subtract</code> لتغليف دالة <code>calc</code>في CSS. الغاية الأساسية من هاتين الدالتين هي تجنب  وقوع الأخطاء في حال تمرير القيمة <code>0</code> بلا وحدة إلى الدالة <code>calc</code>. مثلا، يطلق التعبير  <code>calc(10px - 0)‎</code>خطأ في جميع المتصفحات، رغم أنّه صحيح رياضيا.

هذا مثال على استخدام صحيح للدالة <code>calc</code>:<syntaxhighlight lang="sass">
$border-radius: .25rem;
$border-width: 1px;

.element {
  // Output calc(.25rem - 1px) is valid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output the same calc(.25rem - 1px) as above
  border-radius: subtract($border-radius, $border-width);
}
</syntaxhighlight>هذا مثال على استخدام غير صحيح للدالة <code>calc</code>:<syntaxhighlight lang="sass">
$border-radius: .25rem;
$border-width: 0;

.element {
  // Output calc(.25rem - 0) is invalid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output .25rem
  border-radius: subtract($border-radius, $border-width);
}
</syntaxhighlight>

== خيارات Sass ==
استخدم ملف المتغيّرات المخصَّصة المُضمّن لتخصيص Bootstrap وبدّل تفضيلات CSS العامّة بمتغيّرات Sass الجديدة ‎<code>$enable-*‎</code>. أبطل قيمة المتغيّرات وأعد تجميع الشفرة المصدرية حسب الحاجة بالأمر <code>npm run test</code>.

يمكن أن تعثُر على هذه المتغيّرات وتخصّص عبرها الخيارات الأساسية العامّة في الملف <code>scss/_variables.scss</code> ضمن إطار العمل Bootstrap.
{| class="wikitable"
!المتغيّر
!القيم
!الوصف
|-
|‎<code>$spacer</code>
|<code>1rem</code> (مبدئيًا)، أو أي قيمة > 0
|يحدّد قيمة التباعد Spacer المبدئية لتوليد أدوات التباعد برمجيا.
|-
|‎<code>$enable-rounded</code>
|<code>true</code> (مبدئيًا) أو <code>false</code>
|يفعّل تنسيقات <code>[[CSS/border-radius|border-radius]]</code> المعرَّفة مسبقًا على عناصر مختلفة.
|-
|‎<code>$enable-shadows</code>
|<code>true</code> أو <code>false</code> (مبدئيًا)
|يفعّل تنسيقات <code>[[CSS/box-shadow|box-shadow]]</code> المعرَّفة مسبقًا على عناصر مختلفة.
|-
|‎<code>$enable-gradients</code>
|<code>true</code> أو <code>false</code> (مبدئيًا)
|يفعّل التدرّجات المعرَّفة مسبقًا عبر تنسيقات   <code>background-image</code>.
|-
|‎<code>$enable-transitions</code>
|<code>true</code> (مبدئيًا) أو <code>false</code>
|يفعّل الانتقالات (transitions) المُعرَّفة مسبقًا على  عناصر مختلفة.
|-
|‎<code>$enable-hover-media-query</code>
|<code>true</code> or <code>false</code> (مبدئيًا)
|'''لم يعد منصوحًا به'''
|-
|‎<code>$enable-grid-classes</code>
|<code>true</code> (مبدئيًا) أو <code>false</code>
|يفعّل أصناف CSS لنظام الشبكة (مثلًا ‎<code>.container</code> و ‎<code>.row</code> و ‎<code>.col-md-1</code> ).
|-
|‎<code>$enable-caret</code>
|<code>true</code> (مبدئيًا) أو <code>false</code>
|يفعّل العنصر المزيَّف <code>caret</code> على ‎<code>.dropdown-toggle</code>.
|-
|‎<code>$enable-print-styles</code>
|<code>true</code> (مبدئيًا) أو <code>false</code>
|يفعّل تنسيقات لتحسين الطباعة.
|-
|<code>$enable-prefers-reduced-motion-media-query</code>
|<code>true</code> (مبدئيًا) أو <code>false</code>
|إتاحة استعلام الوسائط  <code>prefers-reduced-motion</code>، الذي يزيل بعض الحركات/النقلات حسب تفضيلات متصفح/نظام تشغيل المستخدم
|-
|<code>$enable-pointer-cursor-for-buttons</code>
|<code>true</code> (مبدئيًا) أو <code>false</code>
|إضافة مؤشر اليد إلى الأزرار غير المعطلة
|-
|$enable-responsive-font-sizes
|<code>true</code> (مبدئيًا) أو <code>false</code>
|إتاحة أحجام خطوط متجاوبة
|-
|<code>$enable-validation-icons</code>
|<code>true</code> (مبدئيًا) أو <code>false</code>
|إتاحة أيقونات <code>background-image</code> في مربعات الإدخال النصية  وبعض الاستمارات المخصصة لتصحيح الحالة
|-
|<code>$enable-deprecation-messages</code>
|<code>true</code> (مبدئيًا) أو <code>false</code>
|إن أردت عرض تنبيهات بخصوص استخدام أي دوال أو مخاليط متجاوزة يُتوقع إزالتها فعيّن قيمتها إلى <code>true</code>.
|}

== الألوان ==
تنشئ سلسلة من الألوان المُعرَّفة مسبقًا في جدول Sass عناصر وأدوات متعدّدة في Bootstrap. يمكن تنفيذ حلقات تكرارية في Sass على هذا الجدول لتوليد سلسلة من مجموعات القواعد بسرعة.

=== جميع الألوان ===
تتوفّر الألوان التالية في Bootstrap 4 عبر متغيّرات Sass وجدول Sass ضمن الملف <code>scss/_variables.scss</code>. تمدّد الإصداراتُ الفرعية المقبلة هذا الملف لإضافة درجات ألوان جديدة، على شاكلة لوحة تدرّجات البنّي أدناه.
* الأزرق Blue
* النيلي Indigo
* الأرجواني Purple
* الوردي Pink
* الأحمر Red
* البرتقالي Orange
* الأصفر Yellow
* الأخضر Green
* الأزرق المخضرّ Teal
* الأزرق السماوي Cyan
في ما يلي كيفية استخدام هذه الألوان في شفرة Sass الخاصّة بك:<syntaxhighlight lang="sass">
// باستخدام المتغيّر
.alpha { color: $purple; }

// بالاختيار من جدول Sass عبر الدالة color()
.beta { color: color("purple"); }
</syntaxhighlight>تتوفّر كذلك أصناف أدوات الألوان لتعيين لونيْ النص <code>[[CSS/color|color]]</code> والخلفية <code>[[CSS/background-color|background-color]]</code>.

'''ملحوظة:''' يهدف مطوّرو Bootstrap في المستقبل إلى توفير جداول ومتغيّرات [[Sass]] لدرجات كلّ لون، كما هي حال لوحة تدرّجات اللون البني أدناه.

=== ألوان القوالب ===
يستخدم Bootstrap مجموعة مُصغَّرة من الألوان السابقة لإنشاء لوحة ألوان لتوليد تخطيطات لونية تتوفّر بصيغة متغيّرات وجدول Sass ضمن الملف <code>scss/_variables.scss</code>.
* اللون الأولي Primary
* الثانوي Secondary
* لون النجاح Success
* لون الخطر Danger
* لون التحذير Warning
* لون المعلومات Info
* اللون الخفيف Light
* اللون الغامق Dark

=== تدرجات البني Gray scale ===
توجد مجموعة واسعة من متغيّرات اللون البني وجدول Sass في الملف <code>scss/_variables.scss</code> للحصول على درجات متناغمة من اللون البنّي عبر مشروعك.
* gray-100
* gray-200
* gray-300
* gray-400
* gray-500
* gray-600
* gray-700
* gray-800
* gray-900
تجد في الملف <code>scss/_variables.scss</code> المتغيّرات وجدول Sass الخاصّين بالألوان. في ما يلي مثال على الجدول ‎<code>$colors</code>:<syntaxhighlight lang="sass">
$colors: (
  "blue": $blue,
  "indigo": $indigo,
  "purple": $purple,
  "pink": $pink,
  "red": $red,
  "orange": $orange,
  "yellow": $yellow,
  "green": $green,
  "teal": $teal,
  "cyan": $cyan,
  "white": $white,
  "gray": $gray-600,
  "gray-dark": $gray-800
) !default;
</syntaxhighlight>أضف قيمًا جديدة، وغيّر أو احذف قيما موجودة في الجدول لتحديث كيف تستخدم هذه الألوان في العناصر الأخرى من إطار العمل. للأسف، لا تعتمد ''جميع'' العناصر على هذا الجدول. ستسعى التحديثات المقبلة لإطار العمل من أجل تحسين هذا الأمر. خطّط في انتظار ذلك لاستخدام متغيّرات ‎<code>${color}‎</code> والجدول ‎<code>$colors</code>.

== العناصر ==
تُنشَأ عناصر وأدوات كثيرة في Bootstrap بحلقة ‎<code>@each</code> تمرّ على جدول Sass. يساعد هذا الأمر كثيرًا في توليد تنويعات على عنصُر بتمديد الجدول ‎<code>$theme-colors</code> وإنشاء تنويعات متجاوبة لكلّ نقطة حدية. سترى انعكاس التغييرات مباشرة في الحلقات بعد تخصيص جداول Sass وتجميع الشفرة.

=== المعدّلات Modifiers ===
تُنشَأ الكثير من عناصر Bootstrap حسب مقاربة تعتمد على صنف معدِّل قاعدي. يعني هذا أن التنسيق المُجمَل للعنصُر محتوًى في صنف قاعدي (مثل ‎<code>.btn</code>) بينما تُضمَّن تنويعات التنسيق ضمن أصناف معدِّلة (مثل ‎<code>.btn-danger</code>). تُنشَأ الأصناف المعدِّلة من الجدول ‎<code>$theme-colors</code> من أجل تخصيص عدد الأصناف المعدِّلة وأسمائها.

في ما يلي مثالان لكيفية المرور على الجدول ‎<code>$theme-colors</code>  لتوليد أصناف معدِّلة على العنصُر ‎<code>.alert</code> (تنبيه) وجميع أدوات الخلفية ‎<code>.bg-*‎</code>.<syntaxhighlight lang="sass">
// توليد الأصناف المعدِّلة للعنصُر alert
@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
  }
}


// توليد ألوان أدوات `.bg-*`
@each $color, $value in $theme-colors {
  @include bg-variant('.bg-#{$color}', $value);
}
</syntaxhighlight>

=== التجاوب ===
لا تقتصر حلقات Sass على جداول الألوان، بل يمكنك كذلك توليد تنويعات متجاوبة من عناصر إطار العمل وأدواته. خذ على سبيل المثال الأدوات المتجاوبة لمحاذاة النصّ حيث نجمع بين تطبيق الحلقة ‎<code>@each</code> على الجدول ‎<code>$grid-breakpoints</code> مع تضمين [[CSS/@media|استعلامات الوسائط]] Media query.<syntaxhighlight lang="sass">
@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}
</syntaxhighlight>إن احتجت للتعديل على الجدول ‎<code>$grid-breakpoints</code> الخاصّ بك فستُطبَّق جميع تغييراتك على الحلقات المارّة على هذا الجدول.

== متغيّرات CSS ==
يحوي Bootstrap 4 ضمن شفرته المُجمَّعة حوالي دزينتيْن من [[CSS/--*|خاصيّات CSS المُخصَّصة (متغيّرات)]]. توفّر هذه المتغيّرات وصولًا سهلًا إلى القيم التي يكثُر استخدامها مثل ألوان القالب، والنقاط الحديّة، وحزمة الخطوط الأساسية للعمل عليها في مفتّش المتصفّح (browser’s inspector)، وآلية تحديد الوصول إلى شفرة برمجية (sandbox)، والنمذجة (prototyping) العامة.

=== المتغيّرات المتوفّرة ===
في ما يلي متغيّرات [[CSS]] المُضمَّنة في Bootstrap 4 (لاحظ أنَّ الصنف الزائف [[CSS/:root|‎<code>:root</code>]] مطلوب). توجد هذه المتغيّرات في الملف ‎<code>_root.scss</code>.<syntaxhighlight lang="css">
:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

</syntaxhighlight>

=== أمثلة ===
توفّر متغيّرات CSS مرونة مشابهة لمتغيّرات Sass، لكن بدون الحاجة لتجميعها قبل التقديم إلى المتصفّح. على سبيل المثال، نعيد أدناه إعداد تنسيق خطوط الصفحة وروابطها بمتغيّرات CSS.<syntaxhighlight lang="css">
body {
  font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
  color: var(--blue);
}
</syntaxhighlight>يمكن كذلك استخدام متغيّرات النقاط الحدّيّة (breakpoints) في استعلامات الوسائط:<syntaxhighlight lang="sass">
.content-secondary {
  display: none;
}

@media (min-width(var(--breakpoint-sm))) {
  .content-secondary {
    display: block;
  }
}
</syntaxhighlight>

=== متغيرات النقاط الحدية ===
لقد أضفنا نقاطا حدية إلى إلى متغيرات CSS (مثل ‎<code>--breakpoint-md</code>)، لكنها '''غير مدعومة في استعلامات الوسائط'''. مع ذلك يمكنك استخدامها في مجموعات القواعد (rulesets) في استعلامات الوسائط. تبقى متغيرات النقاط الحدية في ملف CSS المُصرّف لأغراض التوافقية نظرا لأنها تُستخدم من قبل جافاسكربت.

هذا مثال غير مدعوم:<syntaxhighlight lang="sass">
@media (min-width: var(--breakpoint-sm)) {
  ...
}
</syntaxhighlight>هذا مثال مدعوم.:<syntaxhighlight lang="sass">
@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}
</syntaxhighlight>

== المصادر ==
* صفحة [https://getbootstrap.com/docs/4.5/getting-started/theming/ Theming Bootstrap] في توثيق Bootstrap.
[[تصنيف:Bootstrap|{{SUBPAGENAME}}]]
[[تصنيف:Bootstrap Getting Started|{{SUBPAGENAME}}]]