in English

Color

Bootstrap inotsigirwa neyakakura yeruvara sisitimu iyo tema masitaera edu uye zvikamu. Izvi zvinogonesa kuwanda kwekugadzirisa uye kuwedzera kune chero chirongwa.

Pa peji ino

Theme mavara

Isu tinoshandisa subset yemavara ese kugadzira diki pendi yeruvara kugadzira marongero emavara, inowanikwawo semaSass akasiyana uye mepu yeSass muBootstrap's scss/_variables.scssfile.

Primary

Secondary

Success

Danger

Yambiro

Info

Chiedza

Rima

Ese mavara aya anowanikwa semepu yeSass $theme-colors,.

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

Tarisa yedu Sass mepu uye zvishwe zvinyorwa zvekugadzirisa aya mavara.

Mavara ose

Ese mavara eBootstrap anowanikwa semaSass akasiyana uye mepu yeSass scss/_variables.scssmufaira. Kuti tidzivise kuwedzera masaizi efaira, isu hatigadziri makirasi emavara kana makirasi emavara ega ega aya akasiyana. Pane kudaro, tinosarudza chikamu chiduku chemavara aya nokuda kwepalette yedingindira .

Iva nechokwadi chekutarisa mutsauko wekuenzanisa paunenge uchigadzirisa mavara. Sezvinoratidzwa pazasi, tawedzera mitsara mitatu yakasiyana-siyana kune imwe neimwe yemavara makuru-imwe yeruvara rwechiwachi yazvino, imwe ichipikisa chena, uye imwe ichipikisa nhema.

$blue#0d6efd

$ bhuruu-100

$ bhuruu-200

$ bhuruu-300

$ bhuruu-400

$ bhuruu-500

$ bhuruu-600

$ bhuruu-700

$ bhuruu-800

$ bhuruu-900

$indigo#6610f2

$indigo-100

$indigo-200

$ indigo-300

$indigo-400

$ indigo-500

$ indigo-600

$ indigo-700

$ indigo-800

$ indigo-900

$pepuru#6f42c1

$pepuru-100

$ yepepuru-200

$ yepepuru-300

$ yepepuru-400

$ yepepuru-500

$ yepepuru-600

$ yepepuru-700

$ yepepuru-800

$ yepepuru-900

$pingi#d63384

$ pink-100

$ pink-200

$ pink-300

$ pink-400

$ pink-500

$ pink-600

$ pink-700

$ pink-800

$ pink-900

$tsvuku#dc3545

$dzvuku-100

$ tsvuku-200

$dzvuku-300

$ tsvuku-400

$ tsvuku-500

$ tsvuku-600

$ tsvuku-700

$ tsvuku-800

$ tsvuku-900

$Orenji#fd7e14

$Orenji-100

$Orenji-200

$Orenji-300

$Orenji-400

$Orenji-500

$Orenji-600

$Orenji-700

$Orenji-800

$Orenji-900

$yellow#ffc107

$yero-100

$ yero-200

$ yero-300

$ yero-400

$ yero-500

$ yero-600

$ yero-700

$ yero-800

$ yero-900

$girini#198754

$ girini-100

$ girini-200

$ girini-300

$ girini-400

$ girini-500

$ girini-600

$ girini-700

$ girini-800

$ girini-900

$teal#20c997

$Teal-100

$200

$ 300

$400

$500

$ 600

$ 700

$ 800

$ 900

$cyan#0dcaf0

$cyan-100

$cyan-200

$cyan-300

$cyan-400

$cyan-500

$cyan-600

$cyan-700

$cyan-800

$cyan-900

$ grey-500#adb5bd

$ grey-100

$ grey-200

$ grey-300

$ grey-400

$ grey-500

$ grey-600

$ grey-700

$ grey-800

$ grey-900

$black#000

$white#fff

Zvinyorwa paSass

Sass haigone kuburitsa zvinosiyana, saka isu takagadzira madhiri ega ega tint uye mumvuri isu pachedu. Isu tinotsanangura kukosha kwepakati (semuenzaniso, $blue-500) uye shandisa maitiro emavara echinyakare kuti tint (kurerutsa) kana mumvuri (kusviba) mavara edu kuburikidza neSass's mix()color function.

Kushandisa mix()hakuna kufanana lighten()uye darken()-yekutanga inosanganisa ruvara rwakatsanangurwa nemuchena kana dema, nepo yekupedzisira ichingogadzirisa kukosha kwekureruka kwemavara ega ega. Mhedzisiro yacho yakawanda yakazara sutu yemavara, sezvakaratidzwa mune ino CodePen demo .

Yedu tint-color()uye shade-color()mashandisirwo anoshandiswa mix()padivi pekuchinja kwedu $theme-color-interval, iyo inotsanangudza yakawedzera muzana kukosha kune yega yega yakasanganiswa ruvara rwatinogadzira. Ona iyo scss/_functions.scssuye scss/_variables.scssmafaera eiyo yakazara sosi kodhi.

Color Sass mepu

Bootstrap's source Sass mafaera anosanganisira matatu mepu kuti ikubatsire nekukurumidza uye nyore kuruka pamusoro perondedzero yemavara uye iwo hex kukosha.

$colorsinonyora ese edu aripo base ( 500) mavara
$theme-colorsinodonongodza mavara ese ane zita remusoro (inoratidzwa pazasi)
$graysinonyora mavara ese uye mimvuri yegrey

Mukati me scss/_variables.scss, iwe unowana Bootstrap's mavara akasiyana uye Sass mepu. Heino muenzaniso $colorsweSass mepu:

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

Wedzera, bvisa, kana shandura kukosha mukati memepu kuti uvandudze mashandisirwo aanoitwa mune zvimwe zvikamu zvakawanda. Nehurombo panguva ino, hazvisi zvese zvikamu zvinoshandisa iyi mepu yeSass. Zvidzoreso zveramangwana zvichaedza kuvandudza pane izvi. Kusvika panguva iyoyo, ronga pakushandisa ${color}zvinosiyana uye iyi mepu yeSass.

Muenzaniso

Heano maitiro aungashandisa aya muSass yako:

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

Ruvara uye kumashure utility makirasi aripo zvakare ekuseta coloruye background-colorkushandisa iwo 500mavara emhando.

Kugadzira zvishandiso

Yakawedzerwa mu v5.1.0

Bootstrap haisanganisire coloruye background-colorzvishandiso zvemarudzi akasiyana-siyana, asi iwe unogona kugadzira izvi iwe pachako nekushandisa kwedu API uye mamepu edu akawedzerwa eSass akawedzerwa muv5.1.0.

Kutanga, ita shuwa kuti waunza kunze mabasa edu, zvinosiyana, zvinosanganiswa, uye zvinoshandiswa.
Shandisa map-merge-multiple()basa redu kukurumidza kusanganisa akawanda mamepu eSass pamwechete mumepu itsva.
Batanidza iyi mepu nyowani yakasanganiswa kuti uwedzere chero chishandiso chine {color}-{level}zita rekirasi.

Heino muenzaniso unogadzira mavara emavara ekushandisa (semuenzaniso, .text-purple-500) uchishandisa matanho ari pamusoro.

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

Izvi zvinogadzira zvitsva .text-{color}-{level}zvinoshandiswa kune ese mavara uye nhanho. Iwe unogona kuita zvakafanana kune chero imwe yekushandisa uye pfuma zvakare.