Koulè

Bootstrap sipòte pa yon sistèm koulè vaste ki tèm estil nou yo ak konpozan. Sa pèmèt personnalisation ak ekstansyon plis konplè pou nenpòt pwojè.

Nan paj sa a

Koulè tèm

Nou itilize yon sou-ansanm tout koulè pou kreye yon palèt koulè ki pi piti pou jenere plan koulè, ki disponib tou kòm varyab Sass ak yon kat Sass nan scss/_variables.scssdosye Bootstrap la.

Prensipal

Segondè

Siksè

Danje

Avètisman

Info

Limyè

Fè nwa

Tout koulè sa yo disponib kòm yon kat Sass, $theme-colors.

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

Tcheke kat Sass ak dokiman bouk nou yo pou konnen kijan pou modifye koulè sa yo.

Tout koulè

Tout koulè Bootstrap yo disponib kòm varyab Sass ak yon kat Sass nan scss/_variables.scssdosye. Pou evite ogmante gwosè dosye, nou pa kreye tèks oswa klas koulè background pou chak nan varyab sa yo. Olye de sa, nou chwazi yon pati nan koulè sa yo pou yon palèt tèm .

Asire w ou kontwole rapò kontras jan ou personnaliser koulè. Jan yo montre pi ba a, nou te ajoute twa rapò kontras nan chak koulè prensipal yo—yon sèl pou koulè aktyèl echantiyon an, youn pou kont blan, ak youn pou kont nwa.

$ble#0d6efd

$ ble-100

$ ble-200

$ ble-300

$ ble-400

$ ble-500

$ ble-600

$ ble-700

$ ble-800

$ ble-900

$indigo#6610f2

$indigo-100

$indigo-200

$indigo-300

$indigo-400

$indigo-500

$indigo-600

$indigo-700

$indigo-800

$indigo-900

$vyolèt#6f42c1

$ vyolèt-100

$ vyolèt-200

$ vyolèt-300

$ vyolèt-400

$ vyolèt-500

$ vyolèt-600

$ vyolèt-700

$ vyolèt-800

$ vyolèt-900

$woz#d63384

$woz-100

$woz-200

$woz-300

$woz-400

$woz-500

$woz-600

$woz-700

$woz-800

$woz-900

$wouj#dc3545

$wouj-100

$wouj-200

$wouj-300

$ wouj-400

$wouj-500

$wouj-600

$ wouj-700

$wouj-800

$ wouj-900

$oranj#fd7e14

$ zoranj-100

$ zoranj-200

$ zoranj-300

$ zoranj-400

$ zoranj-500

$ zoranj-600

$ zoranj-700

$ zoranj-800

$ zoranj-900

$jòn#ffc107

$jòn-100

$jòn-200

$jòn-300

$jòn-400

$ jòn-500

$jòn-600

$jòn-700

$jòn-800

$ jòn-900

$vèt#198754

$ vèt-100

$ vèt-200

$ vèt-300

$ vèt-400

$ vèt-500

$ vèt-600

$ vèt-700

$ vèt-800

$ vèt-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

$syan-700

$syan-800

$cyan-900

$gri-500#adb5bd

$gri-100

$gri-200

$gri-300

$gri-400

$gri-500

$gri-600

$gri-700

$gri-800

$gri-900

$nwa#000

$ blan#fff

Nòt sou Sass

Sass pa ka jenere varyab pwogramasyon, kidonk nou te kreye varyab manyèlman pou chak tente ak lonbraj tèt nou. Nou presize valè mitan pwen an (egzanp, $blue-500) epi sèvi ak fonksyon koulè koutim pou tente (aleje) oswa lonbraj (fè nwa) koulè nou yo atravè mix()fonksyon koulè Sass la.

Sèvi ak mix()se pa menm lighten()ak ak darken()—ansyen an melanje koulè espesifye a ak blan oswa nwa, pandan y ap lèt la sèlman ajiste valè a légèreté nan chak koulè. Rezilta a se yon seri koulè pi konplè, jan yo montre nan Demo CodePen sa a .

Nou tint-color()ak shade-color()fonksyon yo itilize mix()ansanm ak $theme-color-intervalvaryab nou an, ki espesifye yon valè pousantaj etap pou chak koulè melanje nou pwodwi. Gade scss/_functions.scssak scss/_variables.scssfichye yo pou tout kòd sous la.

Koulè Sass kat

Fichye Sass sous Bootstrap yo genyen twa kat pou ede w byen vit ak fasilman bouk sou yon lis koulè ak valè hex yo.

$colorsbay lis tout 500koulè baz ( ) disponib nou yo
$theme-colorslis tout koulè tèm yo rele semantik (yo montre anba a)
$graysbay lis tout koulè ak tout koulè gri

Nan scss/_variables.scss, w ap jwenn varyab koulè Bootstrap ak kat Sass. Men yon egzanp $colorskat Sass la:

$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
);

Ajoute, retire oswa modifye valè nan kat la pou mete ajou fason yo itilize yo nan anpil lòt konpozan. Malerezman nan moman sa a, se pa tout eleman ki itilize kat Sass sa a. Mizajou nan lavni yo pral fè efò pou amelyore sa a. Jiska lè sa a, planifye pou sèvi ak ${color}varyab yo ak kat Sass sa a.

Egzanp

Men ki jan ou ka itilize sa yo nan Sass ou a:

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

Koulè ak klas sèvis piblik yo disponib tou pou mete colorak background-coloritilize 500valè koulè yo.