in English

Koloro

Bootstrap estas subtenata de ampleksa kolorsistemo, kiu temas pri niaj stiloj kaj komponantoj. Ĉi tio ebligas pli ampleksan personigon kaj etendon por ajna projekto.

Sur ĉi tiu paĝo

Temaj koloroj

Ni uzas subaron de ĉiuj koloroj por krei pli malgrandan kolorpaletron por generi kolorskemojn, ankaŭ haveblajn kiel Sass-variablojn kaj Sass-mapon en la scss/_variables.scssdosiero de Bootstrap.

Primaraj

Sekundara

Sukceso

Danĝero

Averto

Info

Lumo

Mallumo

Ĉiuj ĉi tiuj koloroj estas haveblaj kiel Sass-mapo, $theme-colors.

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

Rigardu niajn dokumentojn pri mapoj kaj bukloj de Sass por kiel modifi ĉi tiujn kolorojn.

Ĉiuj koloroj

Ĉiuj Bootstrap-koloroj haveblas kiel Sass-variabloj kaj Sass-mapo en scss/_variables.scssdosiero. Por eviti pliigitajn dosiergrandojn, ni ne kreas tekstajn aŭ fonkolorajn klasojn por ĉiu el ĉi tiuj variabloj. Anstataŭe, ni elektas subaron de ĉi tiuj koloroj por temopaletro .

Nepre monitoru kontrastproporciojn dum vi agordas kolorojn. Kiel montrite sube, ni aldonis tri kontrastajn proporciojn al ĉiu el la ĉefaj koloroj—unu por la nunaj koloroj de la specimeno, unu por kontraŭ blanka, kaj unu por kontraŭ nigra.

$blua#0d6efd

$blua-100

$blua-200

$blua-300

$blua-400

$blua-500

$blua-600

$blua-700

$blua-800

$blua-900

$indigo#6610f2

$indigo-100

$indigo-200

$indigo-300

$indigo-400

$indigo-500

$indigo-600

$indigo-700

$indigo-800

$indigo-900

$purpuro#6f42c1

$purpuro-100

$purpuro-200

$purpuro-300

$purpuro-400

$purpuro-500

$purpuro-600

$purpuro-700

$purpuro-800

$purpura-900

$rozkolora#d63384

$rozkolora-100

$rozkolora-200

$rozkolora-300

$rozkolora-400

$rozkolora-500

$rozkolora-600

$rozkolora-700

$rozkolora-800

$rozkolora-900

$ruĝa#dc3545

$ruĝa-100

$ruĝa-200

$ruĝa-300

$ruĝa-400

$ruĝa-500

$ruĝa-600

$ruĝa-700

$ruĝa-800

$ruĝa-900

$oranĝo#fd7e14

$oranĝo-100

$oranĝo-200

$oranĝo-300

$oranĝo-400

$oranĝo-500

$oranĝo-600

$oranĝo-700

$oranĝo-800

$oranĝo-900

$flava#ffc107

$flava-100

$flava-200

$flava-300

$flava-400

$flava-500

$flava-600

$flava-700

$flava-800

$flava-900

$verda#198754

$verda-100

$verda-200

$verda-300

$verda-400

$verda-500

$verda-600

$verda-700

$verda-800

$verda-900

$teal#20c997

$ teal-100

$ kreko-200

$ teal-300

$ teal-400

$ teal-500

$ teal-600

$ teal-700

$ teal-800

$ teal-900

$ciano#0dcaf0

$ cian-100

$ cian-200

$ cian-300

$ cian-400

$ cian-500

$ cian-600

$ cian-700

$ cian-800

$ cian-900

$griza-500#adb5bd

$griza-100

$griza-200

$griza-300

$griza-400

$griza-500

$griza-600

$griza-700

$griza-800

$griza-900

$nigra#000

$blanka#fff

Notoj pri Sass

Sass ne povas programe generi variablojn, do ni permane kreis variablojn por ĉiu nuanco kaj ombro mem. Ni specifas la mezpunktan valoron (ekz., $blue-500) kaj uzas kutimajn kolorfunkciojn por nuanci (malpezigi) aŭ ombrigi (malheligi) niajn kolorojn per la kolorfunkcio de Sass mix().

Uzado mix()ne samas kiel lighten()kaj darken()—la unua miksas la specifitan koloron kun blanka aŭ nigra, dum la dua nur ĝustigas la lumvaloron de ĉiu koloro. La rezulto estas multe pli kompleta serio de koloroj, kiel montrite en ĉi tiu CodePen-demo .

Niaj tint-color()kaj shade-color()funkcioj uzas mix()kune kun nia $theme-color-intervalvariablo, kiu specifas paŝitan procentan valoron por ĉiu miksita koloro, kiun ni produktas. Vidu la scss/_functions.scsskaj scss/_variables.scssdosierojn por la plena fontkodo.

Koloraj Sass-mapoj

La fontaj Sass-dosieroj de Bootstrap inkluzivas tri mapojn por helpi vin rapide kaj facile trarigardi liston de koloroj kaj iliaj heksaj valoroj.

$colorslistigas ĉiujn niajn disponeblajn bazajn ( 500) kolorojn
$theme-colorslistigas ĉiujn semantike nomitajn etkolorojn (montritajn malsupre)
$grayslistigas ĉiujn nuancojn kaj nuancojn de griza

Ene scss/_variables.scssde , vi trovos la kolorajn variablojn de Bootstrap kaj Sass-mapon. Jen ekzemplo de la $colorsSass-mapo:

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

Aldonu, forigu aŭ modifi valorojn en la mapo por ĝisdatigi kiel ili estas uzataj en multaj aliaj komponantoj. Bedaŭrinde nuntempe, ne ĉiuj komponantoj uzas ĉi tiun Sass-mapon. Estontaj ĝisdatigoj klopodos plibonigi ĉi tion. Ĝis tiam, planu uzi la ${color}variablojn kaj ĉi tiun Sass-mapon.

Ekzemplo

Jen kiel vi povas uzi ĉi tiujn en via Sass:

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

Koloraj kaj fonaj utilaj klasoj ankaŭ disponeblas por agordi colorkaj background-coloruzi la 500kolorvalorojn.