Kulay

Ang Bootstrap ay sinusuportahan ng isang malawak na sistema ng kulay na may tema sa aming mga estilo at bahagi. Nagbibigay-daan ito sa mas malawak na pagpapasadya at extension para sa anumang proyekto.

Sa pahinang ito

Mga kulay ng tema

Gumagamit kami ng subset ng lahat ng mga kulay upang lumikha ng mas maliit na paleta ng kulay para sa pagbuo ng mga scheme ng kulay, magagamit din bilang mga variable ng Sass at isang mapa ng Sass sa scss/_variables.scssfile ng Bootstrap.

Pangunahin

Pangalawa

Tagumpay

Panganib

Babala

Impormasyon

Liwanag

Madilim

Ang lahat ng mga kulay na ito ay magagamit bilang isang mapa ng Sass, $theme-colors.

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

Tingnan ang aming Sass maps at loops docs para sa kung paano baguhin ang mga kulay na ito.

Lahat ng mga kulay

Ang lahat ng mga kulay ng Bootstrap ay magagamit bilang mga variable ng Sass at isang mapa ng Sass sa scss/_variables.scssfile. Upang maiwasan ang pagtaas ng laki ng file, hindi kami gumagawa ng mga klase ng kulay ng text o background para sa bawat isa sa mga variable na ito. Sa halip, pumili kami ng subset ng mga kulay na ito para sa palette ng tema .

Tiyaking subaybayan ang mga contrast ratio habang nagko-customize ka ng mga kulay. Gaya ng ipinapakita sa ibaba, nagdagdag kami ng tatlong contrast ratio sa bawat isa sa mga pangunahing kulay—isa para sa mga kasalukuyang kulay ng swatch, isa para sa laban sa puti, at isa para sa laban sa itim.

$asul#0d6efd

$asul-100

$asul-200

$asul-300

$asul-400

$asul-500

$asul-600

$asul-700

$asul-800

$asul-900

$indigo#6610f2

$indigo-100

$indigo-200

$indigo-300

$indigo-400

$indigo-500

$indigo-600

$indigo-700

$indigo-800

$indigo-900

$purple#6f42c1

$purple-100

$purple-200

$purple-300

$purple-400

$purple-500

$purple-600

$purple-700

$purple-800

$purple-900

$pink#d63384

$pink-100

$pink-200

$pink-300

$pink-400

$pink-500

$pink-600

$pink-700

$pink-800

$pink-900

$pula#dc3545

$pula-100

$pula-200

$pula-300

$pula-400

$pula-500

$pula-600

$pula-700

$pula-800

$pula-900

$orange#fd7e14

$orange-100

$orange-200

$orange-300

$orange-400

$orange-500

$orange-600

$orange-700

$orange-800

$orange-900

$dilaw#ffc107

$dilaw-100

$dilaw-200

$dilaw-300

$dilaw-400

$dilaw-500

$dilaw-600

$dilaw-700

$dilaw-800

$dilaw-900

$berde#198754

$berde-100

$berde-200

$berde-300

$berde-400

$berde-500

$berde-600

$berde-700

$berde-800

$berde-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

$abo-500#adb5bd

$abo-100

$abo-200

$abo-300

$abo-400

$abo-500

$abo-600

$abo-700

$abo-800

$abo-900

$itim#000

$puti#fff

Mga Tala sa Sass

Hindi makakabuo ng mga variable ang Sass, kaya manu-mano kaming gumawa ng mga variable para sa bawat tint at shade sa aming sarili. Tinukoy namin ang halaga ng midpoint (hal., $blue-500) at gumagamit ng mga custom na function ng kulay upang kulayan (lighten) o lilim (dilimin) ang aming mga kulay sa pamamagitan ng mix()color function ni Sass.

Ang paggamit mix()ay hindi katulad ng lighten()at darken()—pinaghahalo ng dating ang tinukoy na kulay sa puti o itim, habang ang huli ay nagsasaayos lamang ng liwanag na halaga ng bawat kulay. Ang resulta ay isang mas kumpletong hanay ng mga kulay, tulad ng ipinapakita sa CodePen demo na ito .

Ang aming tint-color()at ang shade-color()mga function ay ginagamit sa mix()tabi ng aming $theme-color-intervalvariable, na tumutukoy sa isang stepped percentage value para sa bawat halo-halong kulay na aming ginagawa. Tingnan ang scss/_functions.scssat mga scss/_variables.scssfile para sa buong source code.

Mga mapa ng Color Sass

Ang mga Sass file na pinagmumulan ng Bootstrap ay may kasamang tatlong mapa upang matulungan kang mabilis at madaling mag-loop sa isang listahan ng mga kulay at mga halaga ng hex ng mga ito.

$colorsnaglilista ng lahat ng aming available na base ( 500) na kulay
$theme-colorsnililista ang lahat ng mga kulay ng tema na pinangalanang semantiko (ipinapakita sa ibaba)
$graysnaglilista ng lahat ng tints at shades of grey

Sa loob scss/_variables.scssng , makikita mo ang mga variable ng kulay ng Bootstrap at mapa ng Sass. Narito ang isang halimbawa ng $colorsmapa ng Sass:

$colors: (
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "black":      $black,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
);

Magdagdag, mag-alis, o magbago ng mga halaga sa loob ng mapa upang i-update kung paano ginagamit ang mga ito sa maraming iba pang bahagi. Sa kasamaang palad sa oras na ito, hindi lahat ng bahagi ay gumagamit ng mapa ng Sass na ito. Ang mga update sa hinaharap ay magsusumikap na mapabuti ito. Hanggang sa panahong iyon, magplano sa paggamit ng mga ${color}variable at ang mapa ng Sass na ito.

Halimbawa

Narito kung paano mo magagamit ang mga ito sa iyong Sass:

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

Ang mga klase ng utility sa kulay at background ay magagamit din para sa pagtatakda colorat background-colorpaggamit ng mga 500halaga ng kulay.

Pagbuo ng mga kagamitan

Idinagdag sa v5.1.0

Ang Bootstrap ay hindi kasama colorat background-colormga utility para sa bawat variable ng kulay, ngunit maaari mong buuin ang mga ito sa iyong sarili gamit ang aming utility API at ang aming pinalawig na mga mapa ng Sass na idinagdag sa v5.1.0.

Upang magsimula, tiyaking na-import mo ang aming mga function, variable, mixin, at utility.
Gamitin ang aming map-merge-multiple()function para mabilis na pagsamahin ang maraming Sass na mapa sa isang bagong mapa.
Pagsamahin ang bagong pinagsamang mapa upang mapalawak ang anumang utility na may {color}-{level}pangalan ng klase.

Narito ang isang halimbawa na bumubuo ng mga gamit sa kulay ng teksto (hal., .text-purple-500) gamit ang mga hakbang sa itaas.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@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";

Ito ay bubuo ng mga bagong .text-{color}-{level}kagamitan para sa bawat kulay at antas. Magagawa mo rin ito para sa anumang iba pang utility at ari-arian.