Kolor

Ang Bootstrap gisuportahan sa usa ka halapad nga sistema sa kolor nga adunay tema sa among mga istilo ug sangkap. Kini makahimo sa mas komprehensibo nga pag-customize ug extension alang sa bisan unsang proyekto.

Niini nga panid

Mga kolor sa tema

Gigamit namo ang usa ka subset sa tanang mga kolor aron makahimo og mas gamay nga paleta sa kolor alang sa pagmugna og mga laraw sa kolor, anaa usab isip mga variable sa Sass ug usa ka mapa sa Sass sa scss/_variables.scssfile sa Bootstrap.

Primary

Ikaduha

Kalampusan

Kuyaw

Pasidaan

Impormasyon

Kahayag

Ngitngit

Tanan kini nga mga kolor magamit ingon usa ka mapa sa Sass, $theme-colors.

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

Tan-awa ang among Sass maps ug loops docs kung unsaon pag-usab kini nga mga kolor.

Tanang kolor

Ang tanan nga mga kolor sa Bootstrap magamit ingon mga variable sa Sass ug usa ka mapa sa Sass sa scss/_variables.scssfile. Aron malikayan ang pagdaghan sa mga gidak-on sa file, dili kami maghimo og mga klase sa kolor sa teksto o background alang sa matag usa niini nga mga variable. Hinuon, mopili mi og subset niini nga mga kolor para sa paleta sa tema .

Siguruha nga bantayan ang mga ratios sa pagtandi samtang imong ipasibo ang mga kolor. Sama sa gipakita sa ubos, gidugang namo ang tulo ka contrast ratio sa matag usa sa mga nag-unang kolor—usa alang sa kasamtangang kolor sa swatch, usa batok sa puti, ug usa batok sa itom.

$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

$purpura#6f42c1

$purpura-100

$purpura-200

$purpura-300

$purpura-400

$purpura-500

$purpura-600

$purpura-700

$purpura-800

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

$yellow-100

$yellow-200

$yellow-300

$yellow-400

$yellow-500

$yellow-600

$yellow-700

$yellow-800

$yellow-900

$berde#198754

$berde-100

$berde-200

$berde-300

$berde-400

$berde-500

$berde-600

$berde-700

$berde-800

$berde-900

$tiil#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

$abohon-500#adb5bd

$abohon-100

$abohon-200

$abohon-300

$abohon-400

$abohon-500

$abohon-600

$abohon-700

$abohon-800

$abohon-900

$itom#000

$puti#fff

Mga nota sa Sass

Ang Sass dili makahimo sa pagprograma sa mga variable, mao nga mano-mano ang paghimo sa mga variable alang sa matag tint ug landong sa among kaugalingon. Among gipiho ang midpoint value (pananglitan, $blue-500) ug migamit ug custom color functions sa pag-tint (pagaan) o shade (pagngitngit) sa among mga kolor pinaagi sa mix()color function ni Sass.

Ang paggamit mix()dili parehas sa lighten()ug darken()—ang nauna nagsagol sa espesipikong kolor sa puti o itom, samtang ang ulahi nag-adjust lamang sa kahayag sa matag kolor. Ang resulta mao ang usa ka mas kompleto nga hugpong sa mga kolor, sama sa gipakita niini nga CodePen demo .

Ang among tint-color()ug shade-color()ang mga gimbuhaton gigamit mix()kauban sa among $theme-color-intervalvariable, nga nagtino sa usa ka lakang nga porsyento nga kantidad alang sa matag sinagol nga kolor nga among gihimo. Tan-awa ang scss/_functions.scssug scss/_variables.scssmga file para sa tibuok source code.

Kolor nga Sass nga mga mapa

Ang tinubdan sa Bootstrap nga Sass nga mga file naglakip sa tulo ka mga mapa aron sa pagtabang kanimo sa madali ug sayon nga pag-loop sa usa ka lista sa mga kolor ug sa ilang hex values.

$colorsnaglista sa tanan namong magamit nga base ( 500) nga mga kolor
$theme-colorsnaglista sa tanang semantically nga ginganlan nga mga kolor sa tema (gipakita sa ubos)
$graysnaglista sa tanang tints ug shades of gray

Sa sulod scss/_variables.scss, makit-an nimo ang mga variable sa kolor sa Bootstrap ug mapa sa Sass. Ania ang usa ka pananglitan sa $colorsmapa sa 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
);

Pagdugang, pagtangtang, o pagbag-o sa mga kantidad sa sulod sa mapa aron ma-update kung giunsa kini gigamit sa daghang uban pang mga sangkap. Ikasubo nga niining panahona, dili tanan nga sangkap naggamit niining mapa sa Sass. Ang umaabot nga mga update maningkamot sa pagpauswag niini. Hangtud niana, planoha ang paggamit sa mga ${color}variable ug kini nga mapa sa Sass.

Pananglitan

Ania kung giunsa nimo magamit kini sa imong Sass:

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

Ang mga klase sa gamit sa kolor ug background magamit usab alang sa pag-set ug paggamit sacolor mga background-colorkantidad sa 500kolor.

Pagmugna og mga utilities

Gidugang sa v5.1.0

Ang Bootstrap wala maglakip colorug mga background-colorutilities alang sa matag kolor nga variable, apan mahimo nimo kini nga imong kaugalingon gamit ang among utility API ug among gipalapad nga mga mapa sa Sass nga gidugang sa v5.1.0.

Sa pagsugod, siguroha nga imong na-import ang among mga function, variables, mixins, ug utilities.
Gamita ang among map-merge-multiple()function aron dali nga mahiusa ang daghang mga mapa sa Sass sa usa ka bag-ong mapa.
Iusa kining bag-ong hiniusang mapa aron ipaabot ang bisan unsang utility nga adunay {color}-{level}ngalan sa klase.

Ania ang usa ka pananglitan nga nagmugna sa mga gamit sa kolor sa teksto (pananglitan, .text-purple-500) gamit ang mga lakang sa ibabaw.

@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";

Makamugna kini og bag-ong mga .text-{color}-{level}gamit alang sa matag kolor ug lebel. Mahimo nimo ang parehas alang sa bisan unsang uban nga gamit ug kabtangan usab.