تخصيص مظهر إطار Bootstrap

من موسوعة حسوب

خصِّص إطار العمل Bootstrap بمتغيّرات Sass الجديدة - المعدَّة مسبقًا - الخاصّة بتفضيلات التنسيق العامّ من أجل تهيئة القوالب Theming والتعديل على العناصر بسهولة.

مقدّمة

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

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

Sass

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

بنية الملفات

تجنّب تغيير ملفات Bootstrap الداخليّة كلّ ما أمكنك ذلك. يعني هذا - على مستوى Sass - إنشاء صفحات أنماط خاصّة تستورد تنسيقات Bootstrap لكي تعدّل عليها وتمدّدها. ستكون لديك، على اعتبار أنك تستخدم مدير حزم مثل npm، بنية ملفات تشبه التالي:

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

إن نزّلت الملفات المصدرية بدون استخدام مدير حزم فستحتاج لإعداد بنية مشابهة لما سبق يدويّا. أبقِ ملفات Bootstrap المصدرية منفصلةً عن ملفاتك الخاصّة.

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

الاستيراد

يستورد الملف custom.scss ملفات Sass المصدرية من إطار العمل Bootstrap. لديك خياران: تضمين جميع الملفات المصدرية من Bootstrap أو اختيار الأجزاء التي تحتاجها. يشجّع مطوّرو Bootstrap الخيار الثاني، لكن انتبه إلى أنه توجد متطلّبات واعتماديّات بين عناصر إطار العمل. تحتاج أيضًا لتضمين بعض ملفات JavaScript لتعمل الملحقات.

// 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";

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

القيم المبدئية للمتغيّرات

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

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

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

في ما يلي مثال على تغيير لون الخلفية ولون النّص بالنسبة للعنصر <body> عند استيراد Bootstrap وتجميعه بواسطة npm:

// إبطال القيم المبدئية
$body-bg: #000;
$body-color: #111;

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

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

الجداول والحلقات

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

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

تغيير جدول

أضف التالي إلى ملفّ Sass المخصَّص الخاصّ بك لتغيير اللون في جدول ألوان القالب ‎$theme-colors:

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

الإضافة إلى جدول

أضف مفتاحًا وقيمة جديديْن إلى ‎$theme-colors لإضافة لون جديد:

$theme-colors: (
  "custom-color": #900
);

الحذف من جدول

استخدم map-remove لحذف الألوان من ‎$theme-colors، أو أي جدول آخر. انتبه إلى أنه يتوجّب إدراج العنصُر بين الملفات المطلوبة من إطار العمل والملفات الاختيارية:

// مطلوب
@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";
...

المفاتيح المطلوبة

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

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

الدوال

يستخدم Bootstrap دوالّ 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);
}

تستطيع استخدام هذه الدوالّ لاختيار لون من جدول Sass بنفس الطريقة التي كنت تستخدم بها متغيّر لون في الإصدار 3 من Bootstrap.

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

توجد دالّة أخرى تمكّن من الحصول على مستوى معيَّن من لون في جدول ‎$theme-colors. تخفّف القيم السالبة من كثافة اللون، في ما تزيد القيم الموجبة هذه الكثافة.

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

يعني هذا عمليًا أن تستدعي الدالة وتمرّر لها معامليْن: اسم اللون في ‎$theme-colors (مثلًا primary أو danger) ومستوى عددي.

.custom-element {
  color: theme-color-level(primary, -10);
}

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

تباين الألوان

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

يوضّح المثال التالي توليد عيّنات ألوان من الجدول ‎$theme-colors:

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-yiq($value);
  }
}

يمكن كذلك أن تستخدَم للحصول على تباين وحيد عند الحاجة:

.custom-element {
  color: color-yiq(#000); // ترجع `color: #fff`
}

كما يمكن أن تستخدم لتحديد لون قاعدي بالتزامن مع دوال جدول الألوان:

.custom-element {
  color: color-yiq(theme-color("dark")); // ترجع `color: #fff`
}

تهريب SVG

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

دوال الجمع والطرح

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

هذا مثال على استخدام صحيح للدالة calc:

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

هذا مثال على استخدام غير صحيح للدالة calc:

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

خيارات Sass

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

يمكن أن تعثُر على هذه المتغيّرات وتخصّص عبرها الخيارات الأساسية العامّة في الملف scss/_variables.scss ضمن إطار العمل Bootstrap.

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

الألوان

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

جميع الألوان

تتوفّر الألوان التالية في Bootstrap 4 عبر متغيّرات Sass وجدول Sass ضمن الملف scss/_variables.scss. تمدّد الإصداراتُ الفرعية المقبلة هذا الملف لإضافة درجات ألوان جديدة، على شاكلة لوحة تدرّجات البنّي أدناه.

  • الأزرق Blue
  • النيلي Indigo
  • الأرجواني Purple
  • الوردي Pink
  • الأحمر Red
  • البرتقالي Orange
  • الأصفر Yellow
  • الأخضر Green
  • الأزرق المخضرّ Teal
  • الأزرق السماوي Cyan

في ما يلي كيفية استخدام هذه الألوان في شفرة Sass الخاصّة بك:

// باستخدام المتغيّر
.alpha { color: $purple; }

// بالاختيار من جدول Sass عبر الدالة color()
.beta { color: color("purple"); }

تتوفّر كذلك أصناف أدوات الألوان لتعيين لونيْ النص color والخلفية background-color.

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

ألوان القوالب

يستخدم Bootstrap مجموعة مُصغَّرة من الألوان السابقة لإنشاء لوحة ألوان لتوليد تخطيطات لونية تتوفّر بصيغة متغيّرات وجدول Sass ضمن الملف scss/_variables.scss.

  • اللون الأولي Primary
  • الثانوي Secondary
  • لون النجاح Success
  • لون الخطر Danger
  • لون التحذير Warning
  • لون المعلومات Info
  • اللون الخفيف Light
  • اللون الغامق Dark

تدرجات البني Gray scale

توجد مجموعة واسعة من متغيّرات اللون البني وجدول Sass في الملف scss/_variables.scss للحصول على درجات متناغمة من اللون البنّي عبر مشروعك.

  • gray-100
  • gray-200
  • gray-300
  • gray-400
  • gray-500
  • gray-600
  • gray-700
  • gray-800
  • gray-900

تجد في الملف scss/_variables.scss المتغيّرات وجدول Sass الخاصّين بالألوان. في ما يلي مثال على الجدول ‎$colors:

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

أضف قيمًا جديدة، وغيّر أو احذف قيما موجودة في الجدول لتحديث كيف تستخدم هذه الألوان في العناصر الأخرى من إطار العمل. للأسف، لا تعتمد جميع العناصر على هذا الجدول. ستسعى التحديثات المقبلة لإطار العمل من أجل تحسين هذا الأمر. خطّط في انتظار ذلك لاستخدام متغيّرات ‎${color}‎ والجدول ‎$colors.

العناصر

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

المعدّلات Modifiers

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

في ما يلي مثالان لكيفية المرور على الجدول ‎$theme-colors لتوليد أصناف معدِّلة على العنصُر ‎.alert (تنبيه) وجميع أدوات الخلفية ‎.bg-*‎.

// توليد الأصناف المعدِّلة للعنصُر 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);
}

التجاوب

لا تقتصر حلقات Sass على جداول الألوان، بل يمكنك كذلك توليد تنويعات متجاوبة من عناصر إطار العمل وأدواته. خذ على سبيل المثال الأدوات المتجاوبة لمحاذاة النصّ حيث نجمع بين تطبيق الحلقة ‎@each على الجدول ‎$grid-breakpoints مع تضمين استعلامات الوسائط Media query.

@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; }
  }
}

إن احتجت للتعديل على الجدول ‎$grid-breakpoints الخاصّ بك فستُطبَّق جميع تغييراتك على الحلقات المارّة على هذا الجدول.

متغيّرات CSS

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

المتغيّرات المتوفّرة

في ما يلي متغيّرات CSS المُضمَّنة في Bootstrap 4 (لاحظ أنَّ الصنف الزائف ‎:root مطلوب). توجد هذه المتغيّرات في الملف ‎_root.scss.

: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;
}

أمثلة

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

body {
  font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
  color: var(--blue);
}

يمكن كذلك استخدام متغيّرات النقاط الحدّيّة (breakpoints) في استعلامات الوسائط:

.content-secondary {
  display: none;
}

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

متغيرات النقاط الحدية

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

هذا مثال غير مدعوم:

@media (min-width: var(--breakpoint-sm)) {
  ...
}

هذا مثال مدعوم.:

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}

المصادر

مجلوبة من «https://wiki.hsoub.com/index.php?title=Bootstrap/theming&oldid=29702»