in English

Rangi

Bootstrap inaauniwa na mfumo mpana wa rangi ambao unaangazia mitindo na vipengele vyetu. Hii inawezesha ubinafsishaji wa kina zaidi na ugani kwa mradi wowote.

Katika ukurasa huu

Rangi za mandhari

Tunatumia kikundi kidogo cha rangi zote kuunda paji la rangi ndogo zaidi kwa ajili ya kutengeneza miundo ya rangi, inayopatikana pia kama vigeu vya Sass na ramani ya Sass katika scss/_variables.scssfaili ya Bootstrap.

Msingi

Sekondari

Mafanikio

Hatari

Onyo

Habari

Mwanga

Giza

Rangi hizi zote zinapatikana kama ramani ya Sass $theme-colors,.

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

Angalia ramani zetu za Sass na loops hati za jinsi ya kurekebisha rangi hizi.

Rangi zote

Rangi zote za Bootstrap zinapatikana kama vigeu vya Sass na ramani ya Sass katika scss/_variables.scssfaili. Ili kuepuka kuongezeka kwa ukubwa wa faili, hatuundi maandishi au madarasa ya rangi ya usuli kwa kila moja ya vigeu hivi. Badala yake, tunachagua seti ndogo ya rangi hizi kwa paleti ya mandhari .

Hakikisha unafuatilia uwiano wa utofautishaji unapobadilisha rangi kukufaa. Kama inavyoonyeshwa hapa chini, tumeongeza uwiano tatu wa utofautishaji kwa kila moja ya rangi kuu—moja kwa rangi za sasa za saa, moja kwa dhidi ya nyeupe, na moja kwa dhidi ya nyeusi.

$ bluu#0d6efd

$ bluu-100

$ bluu-200

$ bluu-300

$ bluu-400

$ bluu-500

$ bluu-600

$ bluu-700

$ bluu-800

$ bluu-900

$indigo#6610f2

$ indigo-100

$ indigo-200

$ indigo-300

$ indigo-400

$ indigo-500

$ indigo-600

$ indigo-700

$ indigo-800

$ indigo-900

$ zambarau#6f42c1

$ zambarau-100

$ zambarau-200

$ zambarau-300

$ zambarau-400

$ zambarau-500

$ zambarau-600

$ zambarau-700

$ zambarau-800

$ zambarau-900

$ pink#d63384

$ pink-100

$ 200 pink

$ pink-300

$ pink-400

$ pink-500

$ pink-600

$ pink-700

$ pink-800

$ pink-900

$nyekundu#dc3545

$ nyekundu-100

$ nyekundu-200

$ nyekundu-300

$ nyekundu-400

$ nyekundu-500

$ nyekundu-600

$ nyekundu-700

$ nyekundu-800

$ nyekundu-900

$ machungwa#fd7e14

$ machungwa-100

$ 200 - machungwa

$ machungwa-300

$ machungwa-400

$ 500 - machungwa

$ 600 - machungwa

$ 700 - machungwa

$ 800 - machungwa

$ 900 - machungwa

$ njano#ffc107

$ njano-100

$ njano-200

$ njano-300

$ njano-400

$ njano-500

$ njano-600

$ njano-700

$ njano-800

$ njano-900

$ kijani#198754

$ kijani-100

$ kijani-200

$ kijani-300

$ kijani-400

$ kijani-500

$ kijani-600

$ kijani-700

$ kijani-800

$ 900 kijani

$teal#20c997

$ 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

$ kijivu-500#adb5bd

$ kijivu-100

$ kijivu-200

$ kijivu-300

$ kijivu-400

$ kijivu-500

$ kijivu-600

$ kijivu-700

$ kijivu-800

$ kijivu-900

$ nyeusi#000

$ nyeupe#fff

Vidokezo vya Sass

Sass haiwezi kutoa vigeuzo kiprogramu, kwa hivyo tuliunda vigeu kwa kila rangi na kivuli sisi wenyewe. Tunabainisha thamani ya sehemu ya katikati (km, $blue-500) na kutumia vitendakazi maalum vya rangi ili kugeuza (kuangaza) au kutia kivuli (kutia giza) rangi zetu kupitia chaguo za mix()kukokotoa za rangi za Sass.

Kutumia mix()si sawa lighten()na darken()-ya kwanza inachanganya rangi iliyobainishwa na nyeupe au nyeusi, huku ya pili ikirekebisha tu thamani ya wepesi wa kila rangi. Matokeo yake ni safu kamili zaidi ya rangi, kama inavyoonyeshwa kwenye onyesho hili la CodePen .

Yetu tint-color()na chaguo za shade-color()kukokotoa hutumia mix()pamoja na $theme-color-intervalkigezo chetu, ambacho hubainisha thamani ya asilimia iliyoongezwa kwa kila rangi iliyochanganywa tunayozalisha. Tazama scss/_functions.scssna scss/_variables.scssfaili kwa msimbo kamili wa chanzo.

Ramani za Sass za rangi

Chanzo cha faili za Sass za Bootstrap zinajumuisha ramani tatu ili kukusaidia kwa haraka na kwa urahisi kutazama orodha ya rangi na thamani zake za heksi.

$colorshuorodhesha 500rangi zetu zote za msingi ( ) zinazopatikana
$theme-colorshuorodhesha rangi zote za mandhari zilizopewa jina (zinazoonyeshwa hapa chini)
$grayshuorodhesha rangi na vivuli vyote vya kijivu

Ndani scss/_variables.scssya , utapata tofauti za rangi za Bootstrap na ramani ya Sass. Hapa kuna mfano wa $colorsramani ya 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
);

Ongeza, ondoa, au urekebishe thamani ndani ya ramani ili kusasisha jinsi zinavyotumika katika vipengele vingine vingi. Kwa bahati mbaya kwa wakati huu, si kila sehemu inayotumia ramani hii ya Sass. Sasisho za siku zijazo zitajitahidi kuboresha juu ya hili. Hadi wakati huo, panga kutumia ${color}vigeuzo na ramani hii ya Sass.

Mfano

Hivi ndivyo unavyoweza kutumia hizi katika Sass yako:

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

Madarasa ya matumizi ya rangi na usuli pia yanapatikana kwa kuweka colorna background-colorkutumia 500thamani za rangi.

Kuzalisha huduma

Imeongezwa katika v5.1.0

Bootstrap haijumuishi colorna background-colorhuduma kwa kila utofauti wa rangi, lakini unaweza kujitengenezea hizi kwa kutumia API yetu ya matumizi na ramani zetu zilizopanuliwa za Sass zilizoongezwa katika v5.1.0.

Ili kuanza, hakikisha kuwa umeleta vipengele vyetu vya kukokotoa, vigeu, vichanganyiko na huduma zetu.
Tumia map-merge-multiple()utendaji wetu ili kuunganisha kwa haraka ramani nyingi za Sass pamoja katika ramani mpya.
Unganisha ramani hii mpya iliyounganishwa ili kupanua matumizi yoyote kwa {color}-{level}jina la darasa.

Hapa kuna mfano ambao hutoa huduma za rangi ya maandishi (kwa mfano, .text-purple-500) kwa kutumia hatua zilizo hapo juu.

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

Hii itatoa .text-{color}-{level}huduma mpya kwa kila rangi na kiwango. Unaweza kufanya vivyo hivyo kwa matumizi na mali nyingine yoyote pia.