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