in English

Theming Bootstrap

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

مقدمة

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

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

ساس

استخدم ملفات Sass المصدر الخاصة بنا للاستفادة من المتغيرات والخرائط والمزج والمزيد عند تجميع 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

// Include any default variable overrides here (though functions won't be available)

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

// Then add additional custom code here

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

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@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 !defaultعلامة تتيح لك تجاوز القيمة الافتراضية للمتغير في Sass الخاص بك دون تعديل كود مصدر Bootstrap. انسخ المتغيرات والصقها حسب الحاجة ، وعدّل قيمها ، وأزل !defaultالعلامة. إذا تم تعيين متغير بالفعل ، فلن تتم إعادة تعيينه بالقيم الافتراضية في Bootstrap.

ستجد القائمة الكاملة لمتغيرات Bootstrap بتنسيق scss/_variables.scss. يتم تعيين بعض المتغيرات على nullهذه المتغيرات لا تُخرج الخاصية ما لم يتم تجاوزها في التكوين الخاص بك.

يجب أن تأتي تجاوزات المتغيرات بعد استيراد الوظائف والمتغيرات والمزج ، ولكن قبل باقي الواردات.

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

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

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

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

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

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

ابدأ مع Bootstrap عبر npm من خلال مشروعنا المبدئي! توجه إلى مستودع قوالب twbs / bootstrap-npm-starter لمعرفة كيفية إنشاء Bootstrap وتخصيصه في مشروع npm الخاص بك. يتضمن برنامج Sass compiler و Autoprefixer و Stylelint و PurgeCSS و Bootstrap Icons.

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

يتضمن 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`
}

هروب SVG

نستخدم escape-svgالوظيفة للهروب من <، >وحروف #صور خلفية SVG. يجب تخطي هذه الأحرف لعرض صور الخلفية بشكل صحيح في IE. عند استخدام escape-svgالوظيفة ، يجب اقتباس عناوين URL للبيانات.

إضافة وطرح وظائف

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

مثال حيث يكون الحساب صحيحًا:

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

مثال حيث الحساب غير صالح:

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

خيارات ساس

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

اللون

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

جميع الالوان

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

$ الأزرق # 007bff
$ النيلي # 6610f2
$ الأرجواني # 6f42c1
$ الوردي # e83e8c
$ الأحمر # dc3545
البرتقالي $ # fd7e14
$ الأصفر # ffc107
$ الأخضر # 28a745
$ البط البري # 20c997
$ سماوي # 17a2b8

إليك كيف يمكنك استخدام هذه في 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ملف Bootstrap.

$ الأساسي # 007bff
$ ثانوي # 6c757d
النجاح # 28a745
خطر دولار # dc3545
تحذير $ # ffc107
معلومات $ # 17a2b8
ضوء $ # f8f9fa
$ الظلام # 343a40

جرايز

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

رمادي - 100 دولار # f8f9fa
رمادي - 200 دولار # e9ecef
رمادي - 300 دولار # dee2e6
رمادي - 400 دولار # ced4da
الرمادي - 500 دولار # adb5bd
رمادي - 600 دولار # 6c757d
رمادي - 700 دولار # 495057
رمادي - 800 دولار # 343a40
رمادي - 900 دولار # 212529

في الداخل 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, "Noto Sans", "Liberation 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);
}

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

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

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

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

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

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