צֶבַע
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
בקובץ. כדי למנוע גדלי קבצים מוגדלים, איננו יוצרים כיתות טקסט או צבעי רקע עבור כל אחד מהמשתנים הללו. במקום זאת, אנו בוחרים קבוצת משנה של צבעים אלה עבור פלטת נושא .
הקפד לעקוב אחר יחסי ניגודיות בעת התאמה אישית של צבעים. כפי שמוצג להלן, הוספנו שלושה יחסי ניגודיות לכל אחד מהצבעים העיקריים - אחד עבור הצבעים הנוכחיים של הדוגמית, אחד נגד לבן ואחד נגד שחור.
הערות על Sass
Sass לא יכול ליצור משתנים באופן תכנותי, אז יצרנו בעצמנו משתנים עבור כל גוון וגוון באופן ידני. אנו מציינים את ערך נקודת האמצע (למשל, $blue-500
) ומשתמשים בפונקציות צבע מותאמות אישית כדי לגוון (להבהיר) או לגוון (להכהות) את הצבעים שלנו באמצעות mix()
פונקציית הצבע של Sass.
השימוש mix()
אינו זהה lighten()
ל darken()
--הראשון ממזג את הצבע שצוין עם לבן או שחור, בעוד שהאחרון מכוון רק את ערך הבהירות של כל צבע. התוצאה היא חבילת צבעים הרבה יותר שלמה, כפי שמוצג בהדגמה זו של CodePen .
הפונקציות שלנו tint-color()
ומשתמשות לצד המשתנה שלנו, המציין ערך אחוז מדורג עבור כל צבע מעורב שאנו מייצרים. ראה את הקבצים ו עבור קוד המקור המלא.shade-color()
mix()
$theme-color-interval
scss/_functions.scss
scss/_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
יצירת כלי עזר
נוסף בגרסה 5.1.0
Bootstrap לא כולל color
כלי background-color
עזר עבור כל משתנה צבע, אבל אתה יכול ליצור אותם בעצמך עם ה-API של השירות שלנו ומפות Sass המורחבות שלנו שנוספו בגרסה 5.1.0.
- כדי להתחיל, ודא שייבאת את הפונקציות, המשתנים, המיקסים וכלי השירות שלנו.
- השתמש
map-merge-multiple()
בפונקציה שלנו כדי למזג במהירות מספר מפות Sass יחד במפה חדשה. - מיזוג את המפה המשולבת החדשה הזו כדי להרחיב כל כלי שירות עם
{color}-{level}
שם מחלקה.
הנה דוגמה המייצרת כלי עזר לצבע טקסט (למשל, .text-purple-500
) באמצעות השלבים שלמעלה.
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";
$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);
$utilities: map-merge(
$utilities,
(
"color": map-merge(
map-get($utilities, "color"),
(
values: map-merge(
map-get(map-get($utilities, "color"), "values"),
(
$all-colors
),
),
),
),
)
);
@import "bootstrap/scss/utilities/api";
זה ייצור .text-{color}-{level}
כלי עזר חדשים לכל צבע ורמה. אתה יכול לעשות את אותו הדבר גם עבור כל שירות ונכס אחר.