Theming Bootstrap

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

مقدمة

في Bootstrap 3 ، كانت السمات مدفوعة إلى حد كبير بالتجاوزات المتغيرة في LESS و CSS المخصص وورقة أنماط سمة منفصلة قمنا بتضمينها في distملفاتنا. مع بعض الجهد ، يمكن للمرء إعادة تصميم مظهر Bootstrap 3 بالكامل دون لمس الملفات الأساسية. يوفر Bootstrap 4 نهجًا مألوفًا ولكنه مختلف قليلاً.

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

ساس

استخدم ملفات Sass المصدر الخاصة بنا للاستفادة من المتغيرات والخرائط والمزج والمزيد.

هيكل الملف

كلما أمكن ، تجنب تعديل ملفات 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 ، أو اختيار الأجزاء التي تريدها. نحن نشجع هذا الأخير ، على الرغم من إدراك أن هناك بعض المتطلبات والتبعيات عبر مكوناتنا. ستحتاج أيضًا إلى تضمين بعض JavaScript لملحقاتنا.

// Custom.scss
// Option A: Include all of Bootstrap

@import "../node_modules/bootstrap/scss/bootstrap";

// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@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 أسفل // Optionalالقسم حسب الحاجة. نقترح استخدام مكدس الاستيراد الكامل من ملفنا bootstrap.scssكنقطة انطلاق لك.

افتراضات متغيرة

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

ستجد القائمة الكاملة لمتغيرات Bootstrap بتنسيق scss/_variables.scss.

يمكن أن تأتي التجاوزات المتغيرة داخل نفس ملف Sass قبل المتغيرات الافتراضية أو بعدها. ومع ذلك ، عند التجاوز عبر ملفات Sass ، يجب أن تأتي التجاوزات قبل استيراد ملفات Sass من Bootstrap.

في ما يلي مثال يغير لـ background-colorand عند استيراد Bootstrap وتجميعه عبر npm:color<body>

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

كرر حسب الضرورة لأي متغير في Bootstrap ، بما في ذلك الخيارات العامة أدناه.

الخرائط والحلقات

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

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

تعديل الخريطة

لتعديل لون موجود في $theme-colorsخريطتنا ، أضف ما يلي إلى ملف Sass المخصص الخاص بك:

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

أضف إلى الخريطة

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

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

إزالة من الخريطة

لإزالة الألوان من $theme-colors، أو أي خريطة أخرى ، استخدم map-remove. كن على علم أنه يجب عليك إدخاله بين متطلباتنا وخياراتنا:

// Required
@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");

// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...

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

يفترض Bootstrap وجود بعض المفاتيح المحددة داخل خرائط Sass كما استخدمناها ووسعناها بأنفسنا. أثناء تخصيص الخرائط المضمنة ، قد تواجه أخطاء عند استخدام مفتاح خريطة Sass محدد.

primaryعلى سبيل المثال ، نستخدم المفاتيح successو و و من للروابط والأزرار وحالات النموذج. يجب ألا يؤدي استبدال قيم هذه المفاتيح إلى حدوث مشكلات ، ولكن قد تتسبب إزالتها في حدوث مشكلات في تجميع Sass. في هذه الحالات ، ستحتاج إلى تعديل كود Sass الذي يستخدم هذه القيم.danger$theme-colors

المهام

يستخدم 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 يشبه إلى حد كبير كيفية استخدام متغير اللون من v3.

.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(على سبيل المثال ، أساسي أو خطر) ومستوى رقمي.

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

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

تباين اللون

إحدى الوظائف الإضافية التي ندرجها في Bootstrap هي وظيفة تباين الألوان ، color-yiq. يستخدم مساحة اللون YIQ لإرجاع لون فاتح ( #fff) أو غامق ( #111) تلقائيًا استنادًا إلى اللون الأساسي المحدد. هذه الوظيفة مفيدة بشكل خاص للمزج أو الحلقات حيث تقوم بإنشاء فئات متعددة.

على سبيل المثال ، لإنشاء عينات ألوان من $theme-colorsخريطتنا:

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

يمكن استخدامه أيضًا لتلبية احتياجات التباين لمرة واحدة:

.custom-element {
  color: color-yiq(#000); // returns `color: #fff`
}

يمكنك أيضًا تحديد لون أساسي من خلال وظائف خريطة الألوان الخاصة بنا:

.custom-element {
  color: color-yiq(theme-color("dark")); // returns `color: #fff`
}

خيارات ساس

قم بتخصيص Bootstrap 4 باستخدام ملف المتغيرات المخصصة المضمنة لدينا وتبديل تفضيلات CSS العامة بسهولة باستخدام $enable-*متغيرات Sass الجديدة. تجاوز قيمة متغير وأعد التحويل البرمجي باستخدامه npm run testحسب الحاجة.

يمكنك العثور على هذه المتغيرات وتخصيصها للخيارات العامة الرئيسية في scss/_variables.scssملف Bootstrap.

عامل	قيم	وصف
`$spacer`	`1rem`(افتراضي) ، أو أي قيمة> 0	يحدد قيمة الفاصل الافتراضية لإنشاء أدوات المباعد المساعدة برمجيًا .
`$enable-rounded`	`true`(افتراضي) أو`false`	لتمكين `border-radius`أنماط محددة مسبقًا على مكونات مختلفة.
`$enable-shadows`	`true`أو `false`(افتراضي)	لتمكين `box-shadow`أنماط محددة مسبقًا على مكونات مختلفة.
`$enable-gradients`	`true`أو `false`(افتراضي)	لتمكين التدرجات المحددة مسبقًا عبر `background-image`الأنماط على المكونات المختلفة.
`$enable-transitions`	`true`(افتراضي) أو`false`	تمكن `transition`s المعرفة مسبقًا على مكونات مختلفة.
`$enable-hover-media-query`	`true`أو `false`(افتراضي)	إهمال
`$enable-grid-classes`	`true`(افتراضي) أو`false`	يُمكّن من إنشاء فئات CSS لنظام الشبكة (على سبيل المثال ، `.container`، `.row`، `.col-md-1`، إلخ).
`$enable-caret`	`true`(افتراضي) أو`false`	تفعيل علامة الإقحام الزائفة `.dropdown-toggle`.
`$enable-print-styles`	`true`(افتراضي) أو`false`	تمكن الأنماط لتحسين الطباعة.

اللون

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

جميع الالوان

تتوفر جميع الألوان المتوفرة في Bootstrap 4 كمتغيرات Sass وخريطة Sass في scss/_variables.scssالملف. سيتم توسيع هذا في الإصدارات الثانوية اللاحقة لإضافة ظلال إضافية ، مثل لوحة درجات الرمادي التي قمنا بتضمينها بالفعل.

أزرق

نيلي

أرجواني

لون القرنفل

أحمر

البرتقالي

الأصفر

لون أخضر

بط نهري صغير

ازرق سماوي

إليك كيف يمكنك استخدام هذه في Sass الخاص بك:

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

تتوفر أيضًا فئات أدوات الألوانcolor للإعداد و background-color.

في المستقبل ، سنهدف إلى توفير خرائط ومتغيرات Sass لظلال كل لون كما فعلنا مع الألوان الرمادية أدناه.

ألوان الموضوع

نستخدم مجموعة فرعية من جميع الألوان لإنشاء لوحة ألوان أصغر لإنشاء مخططات ألوان ، وهي متوفرة أيضًا كمتغيرات Sass وخريطة Sass في scss/_variables.scssملف Bootstraps.

الأولية

ثانوي

النجاح

خطر

تحذير

معلومات

خفيفة

مظلم

جرايز

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

100

200

300

400

500

600

700

800

900

في الداخل scss/_variables.scss، ستجد متغيرات ألوان Bootstrap وخريطة Sass. فيما يلي مثال على $colorsخريطة 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;

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

عناصر

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

الصفات التعريفية

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

فيما يلي مثالان على كيفية قيامنا بعمل حلقة فوق $theme-colorsالخريطة لإنشاء مُعدِّلات .alertللمكوِّن وجميع أدواتنا .bg-*المساعدة في الخلفية.

// Generate alert modifier classes
@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));
  }
}

// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
  @include bg-variant('.bg-#{$color}', $value);
}

متجاوب

لا تقتصر حلقات Sass هذه على الخرائط الملونة أيضًا. يمكنك أيضًا إنشاء أشكال متجاوبة لمكوناتك أو أدواتك المساعدة. خذ على سبيل المثال أدوات محاذاة النص سريعة الاستجابة حيث نمزج @eachحلقة $grid-breakpointsلخريطة 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; }
  }
}

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

متغيرات CSS

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

المتغيرات المتاحة

فيما يلي المتغيرات التي نقوم بتضمينها (لاحظ أن :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, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --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);
}

متغيرات نقطة التوقف

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

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

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

وإليك مثال على ما هو مدعوم:

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