Umbala

I-Bootstrap isekelwa isistimu yombala ebanzi enetimu yezitayela nezingxenye zethu. Lokhu kunika amandla ukwenza ngokwezifiso okuphelele nokunwetshwa kwanoma iyiphi iphrojekthi.

Kuleli khasi

Imibala yetimu

Sisebenzisa isethi engaphansi yayo yonke imibala ukuze sakhe iphalethi yombala emincane ukuze sikhiqize izikimu zombala, futhi ezitholakala njengeziguquguqukayo ze-Sass kanye nemephu ye-Sass scss/_variables.scsskufayela le-Bootstrap.

Okuyinhloko

Okwesibili

Impumelelo

Ingozi

Isexwayiso

Ulwazi

Ukukhanya

Kumnyama

Yonke le mibala iyatholakala njengemephu yakwa-Sass, $theme-colors.

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

Bheka amamephu wethu we-Sass kanye ne-loops amadokhumenti ukuthi ungayishintsha kanjani le mibala.

Yonke imibala

Yonke imibala ye-Bootstrap iyatholakala njengezinto eziguquguqukayo ze-Sass kanye nemephu ye-Sass scss/_variables.scssefayeleni. Ukuze ugweme ukukhuphuka kosayizi bamafayela, asiwadali amakilasi ombala wombhalo noma wengemuva ngalinye kwalokhu okuguquguqukayo. Kunalokho, sikhetha isethi engaphansi yale mibala yephalethi yetimu .

Qiniseka ukuthi uqapha izilinganiso zokungafani njengoba wenza imibala ngendlela oyifisayo. Njengoba kukhonjisiwe ngezansi, sengeze izilinganiso zokungafani ezintathu kumbala ngamunye oyinhloko—owodwa owombala wamanje we-swatch, owokuqala ophikisana nomhlophe, nomunye owomnyama.

$ blue#0d6fd

$ blue-100

$ blue-200

$ blue-300

$ okwesibhakabhaka-400

$ okwesibhakabhaka-500

$ okwesibhakabhaka-600

$ okwesibhakabhaka-700

$ okwesibhakabhaka-800

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

$pinki#d63384

$ pink-100

$ pink-200

$ pink-300

$ pink-400

$ pink-500

$ 600

$ 700

$ pink-800

$ 900

$okubomvu#dc3545

$okubomvu-100

$okubomvu-200

$bomvu-300

$ obomvu-400

$ obomvu-500

$ obomvu-600

$okubomvu-700

$okubomvu-800

Okubomvu-900

$orange#fd7e14

$100

$ 200

$ 300

$ 400

$ 500

$ 600

$ 700

$ 800

I-$ 900

$ophuzi#ffc107

$ ophuzi-100

$ ophuzi-200

$ ophuzi-300

$ ophuzi-400

$ ophuzi-500

$ ophuzi-600

$ ophuzi-700

$ ophuzi-800

$ ophuzi-900

$okuluhlaza#198754

$ oluhlaza-100

$ oluhlaza-200

$ green-300

$ green-400

$ oluhlaza-500

$ oluhlaza-600

$ green-700

$ luhlaza-800

$ luhlaza-900

$teal#20c997

$100

$ 200

$300

$ 400

I-$ 500

$ 600

$ 700

$ 800

$ 900

$cyan#0dcaf0

$cyan-100

$cyan-200

$ cyan-300

$cyan-400

$ 500

$ 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

$amnyama#000

$mhlophe#fff

Amanothi ku-Sass

I-Sass ayikwazi ukukhiqiza okuguquguqukayo ngokohlelo, ngakho-ke sizenzele mathupha okuguquguqukayo kwawo wonke ama-tint nomthunzi ngokwethu. Sicacisa inani lephoyinti elimaphakathi (isb, $blue-500) futhi sisebenzise imisebenzi yombala yangokwezifiso ukuze sififize (sikhanyise) noma senze umthunzi (sifiphaze) imibala yethu mix()ngomsebenzi wombala we-Sass.

Ukusebenzisa mix()akufani nokuthi lighten()futhi darken()—okokuqala kuhlanganisa umbala oshiwo nomhlophe noma omnyama, kuyilapho owakamuva ulungisa kuphela inani lokukhanya lombala ngamunye. Umphumela uba iqoqo eliphelele kakhulu lemibala, njengoba kukhonjisiwe kule demo ye-CodePen .

Okwethu tint-color()kanye shade-color()nemisebenzi kusetshenziswa mix()eduze $theme-color-intervalnokuguquguquka kwethu, okucacisa inani lephesenti elengeziwe lombala ngamunye oxubile esiwukhiqizayo. Bona scss/_functions.scsskanye scss/_variables.scssnamafayela ukuze uthole ikhodi yomthombo egcwele.

Amamephu e-Sass anemibala

Amafayela e-Sass omthombo we-Bootstrap ahlanganisa amamephu amathathu ukuze akusize ngokushesha futhi kalula ungene ohlwini lwemibala namanani ayo e-hex.

$colorsibala yonke isisekelo esitholakalayo ( 500) imibala
$theme-colorsibala yonke imibala yetimu eqanjwe ngokwezibalo (eboniswe ngezansi)
$graysibala wonke amathoni kanye nemithunzi empunga

Ngaphakathi scss/_variables.scss, uzothola okuguquguqukayo kombala kwe-Bootstrap kanye nemephu ye-Sass. Nasi isibonelo $colorssemephu ye-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
);

Engeza, susa, noma lungisa amanani ngaphakathi kwemephu ukuze ubuyekeze indlela asetshenziswa ngayo kwezinye izingxenye eziningi. Ngeshwa ngalesi sikhathi, akuzona zonke izingxenye ezisebenzisa le mephu ye-Sass. Izibuyekezo zesikhathi esizayo zizolwela ukuthuthukisa kulokhu. Kuze kube yileso sikhathi, hlela ukusebenzisa ${color}okuguquguqukayo kanye nale mephu ye-Sass.

Isibonelo

Nansi indlela ongazisebenzisa ngayo lezi ku-Sass yakho:

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

Amakilasi okusetshenziswa kombala nengemuva nawo ayatholakala ekusetheni colornasekusebenziseni background-coloramanani 500ombala.

Ukukhiqiza izinsiza

Kwengezwe ku-v5.1.0

I- Bootstrap ayibandakanyi colorkanye background-colornezinsiza zawo wonke umbala oguquguqukayo, kodwa ungazikhiqizela lokhu nge -API yethu yokusetshenziswa kanye namamephu ethu anwetshiwe e-Sass engezwe ku-v5.1.0.

Ukuze uqale, qiniseka ukuthi ungenise imisebenzi yethu, okuguquguqukayo, imiksi, nezinsiza.
Sebenzisa map-merge-multiple()umsebenzi wethu ukuhlanganisa ngokushesha amamephu amaningi e-Sass ndawonye kumephu entsha.
Hlanganisa le mephu entsha ehlanganisiwe ukuze unwebe noma iyiphi insiza ngegama {color}-{level}lekilasi.

Nasi isibonelo esikhiqiza izinsiza zombala wombhalo (isb, .text-purple-500) usebenzisa izinyathelo ezingenhla.

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

Lokhu kuzokhiqiza .text-{color}-{level}izinsiza ezintsha kuwo wonke umbala nezinga. Ungenza okufanayo kunoma iyiphi enye insiza kanye nempahla.