Tlolela go diteng tše kgolo Tlolela go docs navigation
Check

Bootstrap e tšehetsoa ke tsamaiso e pharaletseng ea mebala e themes mekhoa ea rona le dikarolo. Se se kgontšha go tlwaetša mo go feletšego kudu le katoloso bakeng sa projeke efe goba efe.

Mebala ya sehlogo

Re šomiša sehlopha se senyenyane sa mebala ka moka go hlama phalete ya mebala ye nnyane ya go tšweletša dikema tša mebala, yeo gape e hwetšagalago bjalo ka diphetogo tša Sass le mmapa wa Sass ka scss/_variables.scssfaeleng ya Bootstrap.

Motheo
Bobedi
Katlego
Kotsi
Temošo
Info
Seetša
Leswiswi

Mebala ye ka moka e hwetšagala bjalo ka mmapa wa Sass, $theme-colors.

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

Lekola dimmapa tša rena tša Sass le ditokomane tša diloupu bakeng sa kamoo o ka fetošago mebala ye.

Mebala ka moka

Mebala ka moka ya Bootstrap e hwetšagala bjalo ka diphetogo tša Sass le mmapa wa Sass ka scss/_variables.scssfaeleng. Go efoga bogolo bja faele bjo bo oketšegilego, ga re hlame diklase tša mebala ya sengwalwa goba ya morago bakeng sa ye nngwe le ye nngwe ya diphetogo tše. Go e na le moo, re kgetha sehlopha se senyenyane sa mebala ye bakeng sa phalete ya sehlogo .

Kgonthišetša gore o hlokomela ditekanyo tša phapano ge o dutše o tlwaetša mebala. Bjalo ka ge go bontšhitšwe ka mo tlase, re okeditše ditekanyo tše tharo tša phapano go e nngwe le e nngwe ya mebala e megolo—e nngwe bakeng sa mebala ya gona bjale ya swatch, e nngwe bakeng sa kgahlanong le bošweu le e nngwe bakeng sa kgahlanong le boso.

$ e putsoa# 0 d 6 e f d
$ e putsoa-100
$ e putsoa-200
$ e putsoa-300
$ e putsoa-400
$ e putsoa-500
$ e putsoa-600
$ e putsoa-700
$ e putsoa-800
$ e putsoa-900
$ indigo# 6610f2
$ indigo-100 e le
$ indigo-200 e le
$ indigo-300 e le
$ indigo-400 e le
$ indigo-500 e le
$ indigo-600 e le
$ indigo-700 e le
$ indigo-800 e le
$ indigo-900 e le
$ e pherese#6f42c1
$ e pherese-100
$ e pherese-200
$ e pherese-300
$ e pherese-400
$ e pherese-500
$ e pherese-600
$ e pherese-700
$ e pherese-800
$ e pherese-900
$ e pinki# d63384 (d63384).
$ e pinki-100
$ e pinki-200
$ e pinki-300
$ e pinki-400
$ e pinki-500
$ e pinki-600
$ e pinki-700
$ e pinki-800
$ e pinki-900
$ khubelu# dc3545 e leng
$ e khubelu-100
$ khubelu-200
$ e khubelu-300
$ e khubelu-400
$ e khubelu-500
$ e khubelu-600
$ e khubelu-700
$ e khubelu-800
$ e khubelu-900
$ mmala wa namune# fd7e14
$ mmala wa namune-100
$ mmala wa namune-200
$ mmala wa namune-300
$ mmala wa namune-400
$ mmala wa namune-500
$ mmala wa namune-600
$ mmala wa namune-700
$ mmala wa namune-800
$ mmala wa namune-900
$ mosehla# ffc107 e le
$ mosehla-100
$ mosehla-200
$ mosehla-300
$ mosehla-400
$ mosehla-500
$ mosehla-600
$ mosehla-700
$ mosehla-800
$ mosehla-900
$ tala# 198754 e le
$ tala-100
$ tala-200
$ tala-300
$ tala-400
$ tala-500
$ tala-600
$ tala-700
$ tala-800
$ tala-900
$ teal# 20 c997
$ teal-100 e le
$ teal-200 e le
$ teal-300 e le
$ teal-400 e le
$ teal-500 e le
$ teal-600 e le
$ teal-700 e le
$ teal-800 e le
$ teal-900 e le
$ cyan e le# 0dcaf0
$ cyan-100 e le
$ cyan-200 e le
$ cyan-300 e le
$ cyan-400 e le
$ cyan-500 e le
$ cyan-600 e le
$ cyan-700 e le
$ cyan-800 e le
$ cyan-900 e le
$ bohlooho-500# adb5bd
$ bohlooho-100
$ bohlooho-200
$ bohlooho-300
$ bohlooho-400
$ bohlooho-500
$ bohlooho-600
$ bohlooho-700
$ bohlooho-800
$ bohlooho-900
$ e ntsho# 000 e le
$ tšoeu#fff

Dintlha ka Sass

Sass e ka se kgone go tšweletša diphetogo ka lenaneo, ka gona re ile ra hlama diphetogo ka seatla bakeng sa tint e nngwe le e nngwe le moriti ka borena. Re laetša boleng bja ntlha ya magareng (mohlala, ) gomme re šomiša mešomo ya mebala ya tlwaelo go tint (bofefofatša) goba go dira moriti (go fifatša) mebala ya rena ka mošomo wa mmala wa $blue-500Sass .mix()

Go diriša mix()ga go swane le lighten()le darken()—ya pele e kopanya mmala wo o laeditšwego le o mošweu goba o motsothwa, mola ya mafelelo e beakanya feela boleng bja go ba bofefo bja mmala o mongwe le o mongwe. Sephetho ke sutu e feletšego kudu ya mebala, bjalo ka ge go bontšhitšwe go demo ye ya CodePen .

Rena tint-color()le shade-color()mešomo e šomiša mix()go bapa le $theme-color-intervalphetogo ya rena, yeo e laetšago boleng bja phesente bja kgato bakeng sa mmala wo mongwe le wo mongwe wo o hlakantšwego wo re o tšweletšago. Bona scss/_functions.scssle scss/_variables.scssdifaele bakeng sa khoutu ya mohlodi e feletseng.

Mmala wa Sass dimmapa

Bootstrap o mohlodi Sass difaele kenyeletsa tse tharo limmapa ho u thusa ka potlako le habonolo loop ka lenane la mebala le boleng bona hex.

  • $colorse lokeletša 500mebala ya rena ka moka ya motheo ( ) yeo e lego gona
  • $theme-colorse lokeletša mebala ka moka ya sehlogo yeo e reeletšwego ka semantiki (yeo e bontšhitšwego ka mo tlase) .
  • $grayse lokeletša di-tint ka moka le meriti ya bohlokwahlokwa

Ka gare ga scss/_variables.scss, o tla hwetša diphetogo tša mmala tša Bootstrap le mmapa wa Sass. Mohlala wa $colorsmmapa wa Sass ke wo:

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

Oketša, tloša, goba fetoša dikelo ka gare ga mmapa go mpshafatša ka fao di šomišwago ka gona dikarolong tše dingwe tše ntši. Ka bomadimabe mo nakong ye, ga se karolo e nngwe le e nngwe yeo e dirišago mmapa wo wa Sass. Diapdeite tša ka moso di tla katanela go kaonafatša se. Go fihla ka nako yeo, rulaganya go šomiša ${color}diphetogo le mmapa wo wa Sass.

Mohlala

Ke kamoo o ka dirišago tše ka gona ka go Sass ya gago:

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

Diklase tša mohola wa mebala le wa moragocolor le tšona di a hwetšagala bakeng sa go beakanya le background-colorgo diriša 500dikelo tša mebala.

Go tšweletša didirišwa

E okeditšwe ka go v5.1.0

Bootstrap ga e akaretše colorle background-colordidirišwa tša go fetoga ga mmala wo mongwe le wo mongwe, eupša o ka tšweletša tše ka bowena ka API ya rena ya didirišwa le dimmapa tša rena tša Sass tše di atološitšwego tšeo di okeditšwego go v5.1.0.

  1. Go thoma, kgonthiša gore o tsentše mešomo ya rena, diphetogo, mixins, le didirišwa.
  2. Šomiša map-merge-multiple()mošomo wa rena go kopanya ka pela mebapa ye mentši ya Sass mmogo ka mmapeng wo mofsa.
  3. Kopanya mmapa wo o mofsa wo o kopantšwego go katološa sedirišwa sefe goba sefe ka {color}-{level}leina la sehlopha.

Mohlala wo o tšweletšago didirišwa tša mmala wa sengwalwa (mohlala, .text-purple-500) ke wo o šomiša magato a ka godimo.

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

Se se tla tšweletša didirišwa tše mpsha .text-{color}-{level}tša mmala wo mongwe le wo mongwe le maemo. O ka dira se se swanago bakeng sa utility efe goba efe e nngwe le thoto le yona.