דלג לתוכן הראשי דלג לניווט במסמכים
in English

צֶבַע

Bootstrap נתמך על ידי מערכת צבעים נרחבת המעצבת את הסגנונות והרכיבים שלנו. זה מאפשר התאמה אישית והרחבה מקיפים יותר לכל פרויקט.

צבעי נושא

אנו משתמשים בתת-קבוצה של כל הצבעים כדי ליצור פלטת צבעים קטנה יותר ליצירת ערכות צבעים, זמינות גם כמשתני Sass ומפת Sass scss/_variables.scssבקובץ של Bootstrap.

יְסוֹדִי
מִשׁנִי
הַצלָחָה
סַכָּנָה
אַזהָרָה
מידע
אוֹר
אפל

כל הצבעים הללו זמינים כמפת Sass, $theme-colors.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

עיין במסמכי המפות והלולאות של Sass שלנו כיצד לשנות צבעים אלה.

כל הצבעים

כל צבעי Bootstrap זמינים כמשתני Sass ומפת Sass scss/_variables.scssבקובץ. כדי למנוע גדלי קבצים מוגדלים, איננו יוצרים כיתות טקסט או צבעי רקע עבור כל אחד מהמשתנים הללו. במקום זאת, אנו בוחרים קבוצת משנה של צבעים אלה עבור פלטת נושא .

הקפד לעקוב אחר יחסי ניגודיות בעת התאמה אישית של צבעים. כפי שמוצג להלן, הוספנו שלושה יחסי ניגודיות לכל אחד מהצבעים העיקריים - אחד עבור הצבעים הנוכחיים של הדוגמית, אחד נגד לבן ואחד נגד שחור.

$כחול#0d6efd
$כחול-100
$כחול-200
$ כחול-300
$כחול-400
$ כחול-500
$כחול-600
$כחול-700
$כחול-800
$כחול-900
$אינדיגו#6610f2
$indigo-100
$indigo-200
$indigo-300
$indigo-400
$indigo-500
$indigo-600
$indigo-700
$indigo-800
$indigo-900
$סגול#6f42c1
$ סגול-100
$סגול-200
$ סגול-300
$ סגול-400
$ סגול-500
$ סגול-600
$ סגול-700
$ סגול-800
$ סגול-900
$ורוד#d63384
ורוד-100 דולר
ורוד-200 דולר
ורוד-300 דולר
ורוד-400 דולר
ורוד-500 דולר
ורוד-600 דולר
ורוד-700 דולר
ורוד-800 דולר
ורוד-900 דולר
$אדום#dc3545
$אדום-100
$אדום-200
$אדום-300
$אדום-400
אדום-500 דולר
$אדום-600
$אדום-700
$אדום-800
$אדום-900
כתום $#fd7e14
כתום-100 דולר
כתום-200 דולר
כתום $300
כתום-400 דולר
כתום-$500
כתום-600 דולר
כתום-700 דולר
כתום-800 דולר
כתום-900 דולר
$ צהוב#ffc107
$ צהוב-100
$ צהוב-200
$ צהוב-300
$ צהוב-400
$ צהוב-500
$ צהוב-600
$ צהוב-700
$ צהוב-800
$ צהוב-900
$ירוק#198754
ירוק-100 דולר
ירוק-200 דולר
ירוק-300 דולר
ירוק-400 דולר
ירוק-500 דולר
ירוק-600 דולר
ירוק-700 דולר
ירוק-800 דולר
ירוק-900 דולר
$teal#20c997
$ teal-100
200$
צהוב-300 דולר
$ teal-400
$ teal-500
$ צהוב-600
$ teal-700
$ teal-800
$ teal-900
$ציאן#0dcaf0
$ציאן-100
$ציאן-200
$ציאן-300
$ציאן-400
$ציאן-500
$ציאן-600
$ציאן-700
$ציאן-800
$ציאן-900
$ אפור-500#adb5bd
$ אפור-100
$ אפור-200
$ אפור-300
$ אפור-400
$ אפור-500
$ אפור-600
$ אפור-700
$ אפור-800
$ אפור-900
$שחור#000
$ לבן#fff

הערות על Sass

Sass לא יכול ליצור משתנים באופן תכנותי, אז יצרנו בעצמנו משתנים עבור כל גוון וגוון באופן ידני. אנו מציינים את ערך נקודת האמצע (למשל, $blue-500) ומשתמשים בפונקציות צבע מותאמות אישית כדי לגוון (להבהיר) או לגוון (להכהות) את הצבעים שלנו באמצעות mix()פונקציית הצבע של Sass.

השימוש mix()אינו זהה lighten()ל darken()--הראשון ממזג את הצבע שצוין עם לבן או שחור, בעוד שהאחרון מכוון רק את ערך הבהירות של כל צבע. התוצאה היא חבילת צבעים הרבה יותר שלמה, כפי שמוצג בהדגמה זו של CodePen .

הפונקציות שלנו tint-color()ומשתמשות לצד המשתנה שלנו, המציין ערך אחוז מדורג עבור כל צבע מעורב שאנו מייצרים. ראה את הקבצים ו עבור קוד המקור המלא.shade-color()mix()$theme-color-intervalscss/_functions.scssscss/_variables.scss

מפות צבעוניות של Sass

קובצי המקור Sass של Bootstrap כוללים שלוש מפות שיעזרו לך במהירות ובקלות לעבור בלולאה על רשימת צבעים וערכי הקש שלהם.

  • $colorsמפרט את כל 500צבעי הבסיס ( ) הזמינים שלנו
  • $theme-colorsמפרט את כל צבעי הנושא בעלי שם סמנטי (מוצג להלן)
  • $graysמפרט את כל הגוונים והגוונים של אפור

בתוך 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
);

הוסף, הסר או שנה ערכים בתוך המפה כדי לעדכן את אופן השימוש בהם ברכיבים רבים אחרים. לרוע המזל בשלב זה, לא כל רכיב משתמש במפת Sass זו. עדכונים עתידיים ישאפו לשפר זאת. עד אז, תכנן לעשות שימוש ${color}במשתנים ובמפת Sass הזו.

דוגמא

כך תוכל להשתמש באלה ב-Sass שלך:

.alpha { color: $purple; }
.beta {
  color: $yellow-300;
  background-color: $indigo-900;
}

כיתות עזר צבע ורקע זמינות גם להגדרה colorושימוש בערכי הצבע background-color.500