Trɔ yi nya veviwo gbɔ Trɔ yi docs ƒe mɔfiamewo dzi
Check
in English

Amadede

Bootstrap la doa alɔ amadede ɖoɖo gã aɖe si tanya míaƒe atsyãwo kple akpawo. Esia wɔnɛ be woate ŋu atrɔ asi le eŋu wòade to wu eye wòakekee ɖe enu na dɔ ɖesiaɖe.

Tanya ƒe amadedewo

Míezãa amadedewo katã ƒe akpa sue aɖe tsɔ wɔa amadede ƒe ƒuƒoƒo sue aɖe hena amadede ƒe ɖoɖowo wɔwɔ, si hã li abe Sass ƒe tɔtrɔwo kple Sass ƒe anyigbatata le Bootstrap ƒe scss/_variables.scssfaɛl me.

Gɔmedzeƒe
Sekɛndrisuku
Dzidzedzekpᴐkpᴐ
Ŋɔdzi
Kpɔnyuiedodo
Nyatakaka
Kekeli
Nyrɔ

Amadede siawo katã li abe Sass ƒe anyigbatata ene, $theme-colors.

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

Kpɔ míaƒe Sass maps kple loops docs hena alesi nàtrɔ asi le amadede siawo ŋu.

Amadedewo katã

Bootstrap ƒe amadedewo katã li abe Sass ƒe tɔtrɔwo kple Sass ƒe nɔnɔmetata le scss/_variables.scssfaɛl me ene. Be míaƒo asa na faɛl ƒe lolome ƒe dzidziɖedzi la, míewɔa nuŋɔŋlɔ alo megbe amadede ƒe hatsotsowo na tɔtrɔ siawo dometɔ ɖesiaɖe o. Ke boŋ míetia amadede siawo ƒe akpa sue aɖe na tanya ƒe ƒuƒoƒo aɖe .

Kpɔ egbɔ be yelé ŋku ɖe vovototo si le amadedewo dome ŋu esi nèle amadedewo trɔm. Abe alesi woɖee fia le ete ene la, míetsɔ vovototo ƒe sɔsɔme etɔ̃ kpe ɖe amadede veviawo dometɔ ɖesiaɖe ŋu—ɖeka na swatch la ƒe amadede siwo li fifia, ɖeka na amadede ɣiwo, eye ɖeka na amadede yibɔ.

$blɔ#0d6efd ƒe ƒuƒoƒo
$blɔ-100 ƒe
$blɔ-200 ƒe
$blɔ-300 ƒe
$blɔ-400 ƒe
$blɔ-500 ƒe
$blɔ-600 ƒe
$blɔ-700 ƒe
$blɔ-800 ƒe
$blɔ-900 ƒe
$indigo ƒe ƒuƒoƒo#6610f2 ƒe ƒuƒoƒo
$indigo-100 ƒe ƒuƒoƒo
$indigo-200 ƒe ƒuƒoƒo
$indigo-300 ƒe ƒuƒoƒo
$indigo-400 ƒe ƒuƒoƒo
$indigo-500 ƒe ƒuƒoƒo
$indigo-600 ƒe ƒuƒoƒo
$indigo-700 ƒe ƒuƒoƒo
$indigo-800 ƒe ƒuƒoƒo
$indigo-900 ƒe ƒuƒoƒo
$aɖabɛ dzĩ#6f42c1 ƒe ƒuƒoƒo
$aɖabɛ-100
$aɖabɛ-200
$aɖabɛ-300
$aɖabɛ-400
$aɖabɛ-500
$aɖabɛ-600
$aɖabɛ-700
$aɖabɛ-800
$aɖabɛ-900
$pink ƒe ƒuƒoƒo#d63384 ƒe ƒuƒoƒo
$pink-100 ƒe ƒuƒoƒo
$pink-200 ƒe ƒuƒoƒo
$pink-300 ƒe ƒuƒoƒo
$pink-400 ƒe ƒuƒoƒo
$pink-500 ƒe
$pink-600 ƒe ƒuƒoƒo
$pink-700 ƒe
$pink-800 ƒe ƒuƒoƒo
$pink-900 ƒe
$dzẽ#dc3545 ƒe ƒuƒoƒo
$dzẽ-100
$dzẽ-200
$ dzĩ-300
$ dzĩ-400
$ dzĩ-500
$ dzĩ-600
$ dzĩ-700
$ dzĩ-800
$ dzĩ-900
$orange ƒe amadede#fd7e14 ƒe ƒuƒoƒo
$orange-100 ƒe ƒuƒoƒo
$akɔɖu-200
$akɔɖu-300
$akɔɖu-400
$akɔɖu-500
$akɔɖu-600
$akɔɖu-700
$akɔɖu-800
$akɔɖu-900
$yibɔ#ffc107 ƒe ƒuƒoƒo
$yibɔ-100
$yibɔ-200
$yibɔ-300
$yibɔ-400
$yibɔ-500
$yibɔ-600
$yibɔ-700
$yibɔ-800
$yibɔ-900
$amadede dzẽ#ƒe 198754
$amadede dzẽ-100
$amadede dzẽ-200
$amadede dzẽ-300
$amadede dzẽ-400
$amagbe-500
$amadede dzẽ-600
$amadede dzẽ-700
$amadede dzẽ-800
$amagbe-900
$teal ƒe ƒuƒoƒo#20c997 ƒe ƒuƒoƒo
$teal-100 ƒe ƒuƒoƒo
$teal-200 ƒe
$teal-300 ƒe
$teal-400 ƒe ƒuƒoƒo
$teal-500 ƒe
$teal-600 ƒe
$teal-700 ƒe
$teal-800 ƒe
$teal-900 ƒe
$cyan ƒe ƒuƒoƒo#0dcaf0 ƒe ƒuƒoƒo
$cyan-100 ƒe ƒuƒoƒo
$cyan-200 ƒe ƒuƒoƒo
$cyan-300 ƒe ƒuƒoƒo
$cyan-400 ƒe ƒuƒoƒo
$cyan-500 ƒe
$cyan-600 ƒe ƒuƒoƒo
$cyan-700 ƒe
$cyan-800 ƒe ƒuƒoƒo
$cyan-900 ƒe
$grey-500 ƒe#adb5bd ƒe ƒuƒoƒo
$grey-100 ƒe ƒuƒoƒo
$grey-200 ƒe ƒuƒoƒo
$grey-300 ƒe
$grey-400 ƒe ƒuƒoƒo
$grey-500 ƒe
$grey-600 ƒe
$grey-700 ƒe
$grey-800 ƒe
$grey-900 ƒe
$ameyibɔ#000 ƒe ƒuƒoƒo
$yevuwo#fff

Nuŋlɔɖiwo le Sass ŋu

Sass mateŋu awɔ tɔtrɔwo le ɖoɖo nu o, eyata míetsɔ asi wɔ tɔtrɔwo na tint kple shade ɖesiaɖe mía ŋutɔwo. Míegblɔa titina ƒe asixɔxɔ (le kpɔɖeŋu me, $blue-500) eye míezãa amadede ƒe dɔwɔwɔ siwo wowɔ ɖe ɖoɖo nu tsɔ dea amadede (kekeli) alo doa vɔvɔli (doa viviti) míaƒe amadedewo to Sass ƒe mix()amadede ƒe dɔwɔwɔ dzi.

Zãzã mix()mesɔ lighten()kple kple darken()—gbãtɔa tsakaa amadede si wogblɔ la kple ɣi alo yevu, gake evelia ya trɔa asi le amadede ɖesiaɖe ƒe kekeli ƒe asixɔxɔ ŋu ko. Nusi do tso emee nye amadedewo ƒe hatsotso si de blibo wu sã, abe alesi woɖee fia le CodePen ƒe wɔwɔfia sia me ene .

Míaƒe tint-color()kple shade-color()dɔwɔwɔwo zãna mix()kpe ɖe míaƒe $theme-color-intervaltɔtrɔɖenu ŋu, si gblɔa afɔɖeɖe alafa memamã ƒe asixɔxɔ na amadede tsakatsaka ɖesiaɖe si míewɔna. Kpɔ scss/_functions.scsskple scss/_variables.scssfaɛlwo hena source code bliboa.

Amadede Sass ƒe anyigbatatawo

Bootstrap ƒe dzɔtsoƒe Sass faɛlwo me anyigbatata etɔ̃ le be wòakpe ɖe ŋuwò kabakaba eye wòanɔ bɔbɔe na loop ɖe amadedewo ƒe xexlẽdzesiwo kple woƒe hex asixɔxɔwo dzi.

  • $colorsŋlɔ míaƒe gɔmeɖoanyi ( 500) ƒe amadede siwo katã li la ɖi
  • $theme-colorsyɔ tanya ƒe amadede siwo katã wotsɔ ŋkɔ na le gɔmesese nu (woɖee fia le ete) .
  • $graysŋlɔ amadede kple amadede siwo katã le amadede dzẽ me la ɖi

Le scss/_variables.scss, me la, àkpɔ Bootstrap ƒe amadede ƒe tɔtrɔwo kple Sass ƒe anyigbatata. $colorsSass ƒe anyigbatata ƒe kpɔɖeŋu aɖee nye esi :

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

Tsɔ asixɔxɔwo kpee, ɖe wo ɖa, alo trɔ asi le wo ŋu le anyigbatataa me be nàtrɔ asi le alesi wozãa wo le akpa bubu geɖe me ŋu. Nublanuitɔe le ɣeyiɣi sia me la, menye akpa ɖesiaɖee zãa Sass ƒe anyigbatata sia o. Nu yeye siwo woawɔ le etsɔme adze agbagba be yewoawɔ esia wòanyo ɖe edzi. Vaseɖe ɣemaɣi la, wɔ ɖoɖo ɖe ${color}tɔtrɔawo kple Sass ƒe anyigbatata sia zazã ŋu.

Kpɔɖeŋu

Ale si nàte ŋu azã esiawo le wò Sass me enye si:

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

Amadede kple megbe dɔwɔnu ƒe klasswo hã li na amadede ƒe asixɔxɔwo ɖoɖo colorkple wo background-colorzazã .500

Dɔwɔnu siwo wozãna tsɔ wɔa dɔe

Wotsɔe kpe ɖe eŋu le v5.1.0 me

Bootstrap melɔ colorkple background-colordɔwɔnuwo na amadede ƒe tɔtrɔ ɖesiaɖe o, gake àteŋu awɔ esiawo ŋutɔ kple míaƒe dɔwɔnu API kple míaƒe Sass anyigbatata siwo keke ta siwo wotsɔ kpe ɖe v5.1.0 me.

  1. Be nàdze egɔme la, kpɔ egbɔ be yetsɔ míaƒe dɔwɔwɔwo, tɔtrɔwo, mixins, kple dɔwɔnuwo va dukɔa me.
  2. Zã míaƒe map-merge-multiple()dɔwɔnua nàtsɔ aƒo Sass ƒe anyigbatata geɖewo nu ƒu kabakaba ɖe anyigbatata yeye aɖe me.
  3. Tsɔ anyigbatata yeye sia ƒo ƒu ɖekae be nàkeke dɔwɔnu ɖesiaɖe ɖe enu kple {color}-{level}klass ŋkɔ.

Kpɔɖeŋu aɖe si wɔa nuŋɔŋlɔ ƒe amadede ƒe dɔwɔnuwo (le kpɔɖeŋu me, .text-purple-500) to afɔɖeɖe siwo le etame zazã me lae nye esi.

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

Esia ana woawɔ .text-{color}-{level}dɔwɔnu yeyewo na amadede kple dzidzenu ɖesiaɖe. Àte ŋu awɔ nenema ke na dɔwɔƒe bubu ɖesiaɖe kple nunɔamesiwo hã.