Aqbeż għall-kontenut prinċipali Aqbeż għan-navigazzjoni tad-dokumenti

Bootstrap huwa appoġġjat minn sistema estensiva tal-kulur li tissemma l-istili u l-komponenti tagħna. Dan jippermetti customizzazzjoni u estensjoni aktar komprensiva għal kwalunkwe proġett.

Kuluri tat-tema

Aħna nużaw subsett tal-kuluri kollha biex noħolqu paletta tal-kuluri iżgħar għall-ġenerazzjoni ta 'skemi ta' kuluri, disponibbli wkoll bħala varjabbli Sass u mappa Sass fil- scss/_variables.scssfajl ta 'Bootstrap.

Primarja
Sekondarja
Suċċess
Periklu
Twissija
Info
Dawl
Dlam

Dawn il-kuluri kollha huma disponibbli bħala mappa Sass $theme-colors,.

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

Iċċekkja l -mapep u l-loops tagħna ta’ Sass għal kif timmodifika dawn il-kuluri.

Kuluri kollha

Il-kuluri kollha tal-Bootstrap huma disponibbli bħala varjabbli Sass u mappa Sass fil- scss/_variables.scssfajl. Biex nevitaw iż-żieda fid-daqsijiet tal-fajls, aħna ma noħolqux klassijiet tal-kulur tat-test jew tal-isfond għal kull waħda minn dawn il-varjabbli. Minflok, nagħżlu subsett ta 'dawn il-kuluri għal paletta ta' temi .

Kun żgur li tissorvelja l-proporzjonijiet tal-kuntrast hekk kif tippersonalizza l-kuluri. Kif muri hawn taħt, żidna tliet proporzjonijiet ta’ kuntrast għal kull wieħed mill-kuluri ewlenin—wieħed għall-kuluri attwali tal-kampjun, wieħed kontra l-abjad, u wieħed kontra l-iswed.

$blu#0d6efd
$ blu-100
$ blu-200
$ blu-300
$ blu-400
$ blu-500
$ blu-600
$ blu-700
$ blu-800
$ blu-900
$indigo#6610f2
$indigo-100
$indigo-200
$indigo-300
$indigo-400
$indigo-500
$indigo-600
$indigo-700
$indigo-800
$indigo-900
$vjola#6f42c1
$ vjola-100
$ vjola-200
$ vjola-300
$ vjola-400
$ vjola-500
$ vjola-600
$vjola-700
$ vjola-800
$vjola-900
$roża#d63384
$roża-100
$roża-200
$roża-300
$roża-400
$roża-500
$roża-600
$roża-700
$roża-800
$roża-900
$aħmar#dc3545
$ aħmar-100
$ aħmar-200
$ aħmar-300
$ aħmar-400
$ aħmar-500
$ aħmar-600
$ aħmar-700
$ aħmar-800
$ aħmar-900
$oranġjo#fd7e14
$ oranġjo-100
$ oranġjo-200
$ oranġjo-300
$ oranġjo-400
$ oranġjo-500
$ oranġjo-600
$ oranġjo-700
$ oranġjo-800
$ oranġjo-900
$isfar#ffc107
$isfar-100
$isfar-200
$isfar-300
$isfar-400
$isfar-500
$isfar-600
$isfar-700
$isfar-800
$isfar-900
$aħdar#198754
$ aħdar-100
$ aħdar-200
$ aħdar-300
$ aħdar-400
$ aħdar-500
$ aħdar-600
$ aħdar-700
$ aħdar-800
$ aħdar-900
$teal#20c997
$ teal-100
$teal-200
$ teal-300
$ teal-400
$ teal-500
$ teal-600
$ teal-700
$ teal-800
$ teal-900
$cyan#0dcaf0
$cyan-100
$cyan-200
$cyan-300
$cyan-400
$cyan-500
$cyan-600
$cyan-700
$cyan-800
$cyan-900
$ griż-500#adb5bd
$ griż-100
$ griż-200
$ griż-300
$ griż-400
$ griż-500
$ griż-600
$ griż-700
$ griż-800
$ griż-900
$iswed#000
$abjad#fff

Noti dwar Sass

Sass ma jistax jiġġenera varjabbli b'mod programmatiku, għalhekk ħloqna manwalment varjabbli għal kull lewn u dell lilna nfusna. Aħna nispeċifikaw il-valur tal-punt tan-nofs (eż., $blue-500) u nużaw funzjonijiet tal-kulur tad-dwana biex intewnu (itħaffef) jew tilfu (jiskuraw) il-kuluri tagħna permezz tal mix()-funzjoni tal-kulur ta 'Sass.

L- użu mix()mhuwiex l-istess bħal lighten()u darken()—tal-ewwel iħallat il-kulur speċifikat bl-abjad jew bl-iswed, filwaqt li l-aħħar jaġġusta biss il-valur tad-dawl ta 'kull kulur. Ir-riżultat huwa sett ta 'kuluri ħafna aktar komplut, kif muri f'din id-demo CodePen .

Il-funzjonijiet tagħna tint-color()u shade-color()l-użu mix()flimkien mal- $theme-color-intervalvarjabbli tagħna, li jispeċifika valur perċentwali imkabbar għal kull kulur imħallat li nipproduċu. Ara l- scss/_functions.scssu scss/_variables.scssfajls għall-kodiċi tas-sors sħiħ.

Mapep tal-Kulur Sass

Is-sors tal-fajls Sass ta' Bootstrap jinkludu tliet mapep biex jgħinuk tgħaddi malajr u faċilment fuq lista ta' kuluri u l-valuri hex tagħhom.

  • $colorstelenka l- 500kuluri bażi ( ) disponibbli kollha tagħna
  • $theme-colorstelenka l-kuluri kollha tat-tema bl-isem semantika (li jidhru hawn taħt)
  • $graystelenka l-lewn u l-ilwien kollha tal-griż

Fi ħdan scss/_variables.scss, issib il-varjabbli tal-kulur ta' Bootstrap u l-mappa ta' Sass. Hawn eżempju tal- $colorsmappa 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
);

Żid, neħħi jew immodifika valuri fil-mappa biex taġġorna kif jintużaw f'ħafna komponenti oħra. Sfortunatament f'dan iż-żmien, mhux kull komponent juża din il-mappa Sass. Aġġornamenti futuri se jagħmlu ħilithom biex itejbu dan. Sa dakinhar, ippjana li tagħmel użu mill- ${color}varjabbli u din il-mappa Sass.

Eżempju

Hawn kif tista' tuża dawn fis-Sass tiegħek:

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

Il -klassijiet tal-utilità tal- kulur u l- isfondcolor huma wkoll disponibbli għall-issettjar u background-colorl-użu tal- 500valuri tal-kulur.