האָפּקען צו הויפּט אינהאַלט האָפּקען צו דאָקס נאַוויגאַציע
in English

פאַרב

באָאָטסטראַפּ איז געשטיצט דורך אַ ברייט קאָליר סיסטעם וואָס טימז אונדזער סטיילז און קאַמפּאָונאַנץ. דאָס ינייבאַלז מער פולשטענדיק קוסטאָמיזאַטיאָן און פאַרלענגערונג פֿאַר קיין פּרויעקט.

אויף דעם בלאַט

טעמע פארבן

מיר נוצן אַ סאַבסעט פון אַלע פארבן צו שאַפֿן אַ קלענערער קאָליר פּאַליטרע פֿאַר דזשענערייטינג קאָליר סקימז, אויך בנימצא ווי Sass וועריאַבאַלז און אַ Sass מאַפּע אין Bootstrap ס scss/_variables.scssטעקע.

ערשטיק
צווייטיק
הצלחה
געפאַר
ווארענונג
אינפֿאָרמאַציע
ליכט
טונקל

אַלע די פארבן זענען בנימצא ווי אַ Sass מאַפּע, $theme-colors.

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

קוק אונדזער Sass מאַפּס און לופּס דאָקס פֿאַר ווי צו מאָדיפיצירן די פארבן.

אַלע פארבן

כל באָאָטסטראַפּ פארבן זענען בנימצא ווי סאַסס וועריאַבאַלז און אַ סאַסס מאַפּע אין scss/_variables.scssטעקע. צו ויסמיידן געוואקסן טעקע סיזעס, מיר טאָן ניט מאַכן טעקסט אָדער הינטערגרונט פֿאַרב קלאסן פֿאַר יעדער פון די וועריאַבאַלז. אַנשטאָט, מיר קלייַבן אַ סאַבסעט פון די פארבן פֿאַר אַ טעמע פּאַליטרע .

זייט זיכער צו מאָניטאָר קאַנטראַסט ריישיאָוז ווען איר קאַסטאַמייז פארבן. ווי געוויזן אונטן, מיר האָבן צוגעלייגט דריי קאַנטראַסט ריישיאָוז צו יעדער פון די הויפּט פארבן - איינער פֿאַר די קראַנט פארבן פון די סוואַטש, איינער פֿאַר קעגן ווייַס און איינער פֿאַר שוואַרץ.

$בלוי#0d6efd
$בלוי-100
$בלוי-200
$בלוי-300
$ בלוי-400
$ בלוי-500
$בלוי-600
$ בלוי-700
$ בלוי-800
$ בלוי-900
$indigo#6610f2
$ ינדיגאָ-100
$ ינדיגאָ-200
$ ינדיגאָ-300
$ ינדיגאָ-400
$ ינדיגאָ-500
$ ינדיגאָ-600
$ ינדיגאָ-700
$ ינדיגאָ-800
$ ינדיגאָ-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
$טייל#20c997
$ טיל-100
$ טיל-200
$ טיל-300
$ טיל-400
$ טיל-500
$ טיל-600
$ טיל-700
$ טיל-800
$ טיל-900
$סיאַן#0dcaf0
$סיאַן-100
$סיאַן-200
$סיאַן-300
$סיאַן-400
$סיאַן-500
$סיאַן-600
$סיאַן-700
$סיאַן-800
$סיאַן-900
$ גרוי - 500#adb5bd
$גרוי-100
$ גרוי - 200
$ גרוי - 300
$ גרוי - 400
$ גרוי - 500
$ גרוי - 600
$ גרוי - 700
$ גרוי - 800
$ גרוי - 900
$שוואַרץ#000
$ווייס#פף

הערות אויף סאַסס

סאַס קענען נישט פּראָגראַממאַטיק דזשענערייט וועריאַבאַלז, אַזוי מיר מאַניואַלי באשאפן וועריאַבאַלז פֿאַר יעדער טינט און שאָטן זיך. מיר ספּעציפיצירן די מידפּוינט ווערט (למשל, $blue-500) און נוצן מנהג קאָליר פאַנגקשאַנז צו טינט (ליטאַן) אָדער שאָטן (פינצטער) אונדזער פארבן דורך Sass ס mix()קאָליר פונקציע.

די נוצן mix()איז נישט די זעלבע ווי lighten()און darken()- די ערשטע בלענדז די ספּעסיפיעד קאָליר מיט ווייַס אָדער שוואַרץ, בשעת די יענער בלויז אַדזשאַסטיד די לייטנאַס ווערט פון יעדער קאָליר. דער רעזולטאַט איז אַ פיל מער פולשטענדיק סוויט פון פארבן, ווי געוויזן אין דעם CodePen דעמאָ .

אונדזער tint-color()און shade-color()פאַנגקשאַנז נוצן mix()צוזאמען אונדזער $theme-color-intervalבייַטעוודיק, וואָס ספּעציפיצירן אַ סטעפּט פּראָצענט ווערט פֿאַר יעדער געמישט קאָליר מיר פּראָדוצירן. זען די scss/_functions.scssאון scss/_variables.scssטעקעס פֿאַר די פול מקור קאָד.

קאָליר סאַס מאַפּס

באָאָטסטראַפּ ס מקור סאַס טעקעס אַרייַננעמען דריי מאַפּס צו העלפֿן איר געשווינד און לייכט שלייף איבער אַ רשימה פון פארבן און זייער העקס וואַלועס.

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

ין scss/_variables.scss, איר וועט געפֿינען Bootstrap ס קאָליר וועריאַבאַלז און Sass מאַפּע. דאָ ס אַ ביישפּיל פון די $colorsSass מאַפּע:

$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קאָליר וואַלועס.