Tlolela ho litaba tsa mantlha Tlolela ho li-docs navigation

Bootstrap e tšehetsoa ke sistimi e pharalletseng ea mebala e nang le lihlooho le likarolo tsa rona. Sena se nolofalletsa ho ikemela le ho atolosoa ka botlalo bakeng sa projeke efe kapa efe.

Mebala ea sehlooho

Re sebelisa sehlopha sa mebala eohle ho theha phalete e nyane ea mebala bakeng sa ho hlahisa meralo ea mebala, e fumanehang hape e le mefuta ea Sass le 'mapa oa Sass scss/_variables.scssfaeleng ea Bootstrap.

Ea mantlha
Ea bobeli
Katleho
Kotsi
Tlhokomediso
Info
Leseli
Lefifi

Mebala ena kaofela e fumaneha joalo ka 'mapa oa Sass $theme-colors,.

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

Sheba limmapa tsa rona tsa Sass le loops docs mabapi le mokhoa oa ho fetola mebala ena.

Mebala eohle

Mebala eohle ea Bootstrap e fumaneha e le mefuta ea Sass le 'mapa oa Sass scss/_variables.scssfaeleng. Ho qoba ho eketseha ha boholo ba lifaele, ha re thehe litlelase tsa mongolo kapa mebala ea bokamorao bakeng sa mefuta ena e fapaneng. Ho e-na le hoo, re khetha sehlotšoana sa mebala ena bakeng sa phalete ea sehlooho .

Etsa bonnete ba hore u beha leihlo likarohano tsa phapang ha u ntse u etsa mebala. Joalo ka ha ho bonts'itsoe ka tlase, re kentse likarohano tse tharo tse fapaneng ho o mong le o mong oa mebala e meholo-o mong e le oa mebala ea hona joale ea swatch, o mong bakeng sa khahlano le bosoeu, o mong khahlano le botšo.

$ e putsoa#0d6efd
$ blue-100
$ e putsoa-200
$ e putsoa-300
$ e putsoa-400
$ e putsoa-500
$ e putsoa-600
$ e putsoa-700
$ buluu-800
$ buluu-900
$ indigo#6610f2
$ indigo-100
$ indigo-200
$ indigo-300
$ indigo-400
$ indigo-500
$ indigo-600
$ indigo-700
$ indigo-800
$ indigo-900
$ pherese#6f42c1
$ pherese-100
$ pherese-200
$ pherese-300
$ pherese-400
$ pherese-500
$ pherese-600
$ pherese-700
$ pherese-800
$ pherese-900
$pinki#d63384
$ pinki-100
$ 200 pinki
$ pinki-300
$ 400 - pinki
$ pinki-500
$ 600
$ 700
$pinki-800
$ 900 e pinki
$e khubelu#dc3545
$ khubelu-100
$ khubelu-200
$ khubelu-300
$ khubelu-400
$ khubelu-500
$ khubelu-600
$ khubelu-700
$ e khubelu-800
$ bofubelu-900
$orange#fd7e14
$ lamunu-100
$ 200 $
$ orange-300
$ 400 $
$ 500 $
$ 600 $
$ 700 $
$ 800 $
$ 900 $
$ mosehla#ffc107
$ mosehla-100
$ mosehla-200
$ mosehla-300
$ mosehla-400
$ mosehla-500
$ mosehla-600
$ mosehla-700
$ mosehla-800
$ mosehla-900
$ tala#198754
$ botala-100
$ botala-200
$ botala-300
$ botala-400
$ botala-500
$ botala-600
$ botala-700
$ botala-800
$ botala-900
$ teal#20c997
$ 100
$ 200
$ 300
$ 400
$ 500
$ 600
$ 700
$ 800
$ 900
$Cyan#0dcaf0
$ cyan-100
$ 200
$ 300
$ 400
$ 500
$ 600
$ 700
$ 800
$ 900
$ bohlooho-500#adb5bd
$ bohlooho-100
$ bohlooho-200
$ bohlooho-300
$ bohlooho-400
$ bohlooho-500
$ bohlooho-600
$ bohlooho-700
$ bohlooho-800
$ bohlooho-900
$e ntšo#000
$ tšoeu#ff

Lintlha tse mabapi le Sass

Sass ha e khone ho hlahisa mefuta e fapaneng ka mokhoa o hlophisitsoeng, ka hona, ka borona re thehile mefuta e fapaneng bakeng sa lesela le moriti le leng le le leng. Re hlakisa boleng ba midpoint (mohlala, $blue-500) 'me re sebelisa mebala e tloahelehileng ho tebisa (ho khantša) kapa ho fifatsa (ho fifatsa) mebala ea rona ka mix()tšebetso ea mebala ea Sass.

Tšebeliso mix()ha e tšoane lighten()le darken()—ea pele e kopanya ’mala o boletsoeng le o mosoeu kapa o motšo, athe oa morao o fetola feela boleng ba ho khanya ba ’mala o mong le o mong. Sephetho ke mefuta e mengata e felletseng ea mebala, joalo ka ha ho bontšitsoe setšoantšong sena sa CodePen .

Our tint-color()le shade-color()ditshebetso di sebedisa mix()hammoho le ho $theme-color-intervalfeto-fetoha ha rona, e leng se bolelang palo e phahameng ea peresente bakeng sa 'mala o mong le o mong o tsoakiloeng oo re o hlahisang. Sheba scss/_functions.scssle scss/_variables.scsslifaele bakeng sa khoutu e felletseng ea mohloli.

Limmapa tsa mebala ea Sass

Lifaele tsa Sass tsa Bootstrap li kenyelletsa limmapa tse tharo ho u thusa kapele le ha bonolo ho theola lethathamo la mebala le boleng ba tsona ba hex.

  • $colorse thathamisa mebala eohle ea rona e fumanehang ( 500)
  • $theme-colorse thathamisa mebala eohle ea sehlooho e nang le mabitso (e bontšitsoeng ka tlase)
  • $grayse thathamisa mebala eohle le meriti ea bohlooho

Ka har'a scss/_variables.scss, u tla fumana mefuta e fapaneng ea mebala ea Bootstrap le 'mapa oa Sass. Mohlala oa $colors'mapa oa Sass ke ona:

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

Kenya, tlosa, kapa u fetole boleng ka har'a 'mapa ho ntlafatsa mokhoa oa ho sebelisoa likarolong tse ling tse ngata. Ka bomalimabe nakong ena, ha se karolo e 'ngoe le e 'ngoe e sebelisang 'mapa ona oa Sass. Lintlafatso tse tlang li tla leka ho ntlafatsa ho sena. Ho fihlela ka nako eo, rera ho sebelisa ${color}mefuta-futa le 'mapa ona oa Sass.

Mohlala

U ka sebelisa tsena joang ho Sass ea hau:

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

Litlelase tsa tšebeliso ea mebala le bokamorao li teng bakeng sa ho beha colorle background-colorho sebelisa 500boleng ba mebala.

Ho hlahisa lisebelisoa

E kentsoe ho v5.1.0

Bootstrap ha e kenyelle colorle background-colorlisebelisoa bakeng sa phapang e 'ngoe le e' ngoe ea mebala, empa u ka iketsetsa tsona ka lisebelisoa tsa rona tsa API le limmapa tsa rona tse atolositsoeng tsa Sass tse kentsoeng ho v5.1.0.

  1. Ho qala, etsa bonnete ba hore o kentse mesebetsi ea rona, mefuta e fapaneng, metsoako, le lisebelisoa.
  2. Sebelisa map-merge-multiple()mosebetsi oa rona ho kopanya kapele limmapa tse ngata tsa Sass 'mapeng o mocha.
  3. Kopanya 'mapa ona o mocha o kopaneng ho holisa ts'ebeliso efe kapa efe ka {color}-{level}lebitso la sehlopha.

Mohlala ke ona o hlahisang lisebelisoa tsa mebala ea mongolo (mohlala, .text-purple-500) ho sebelisa mehato e kaholimo.

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

Sena se tla hlahisa .text-{color}-{level}lisebelisoa tse ncha bakeng sa 'mala o mong le o mong le boemo. U ka etsa se tšoanang bakeng sa lisebelisoa tse ling le thepa hape.