Agba

Sistemu agba sara mbara na-akwado ụdị na akụrụngwa anyị. Nke a na-enyere aka nhazi na ndọtị karịa maka ọrụ ọ bụla.

Na ibe a

Agba isiokwu

Anyị na-eji akụkụ nke agba niile mepụta obere palette agba maka imepụta atụmatụ agba, dịkwa ka Sass variables na maapụ Sass na scss/_variables.scssfaịlụ Bootstrap.

Isi

Secondary

Ihe ịga nke ọma

Ihe egwu

Ịdọ aka ná ntị

Ozi

Ìhè

Ọchịchịrị

Agba ndị a niile dị ka maapụ Sass, $theme-colors.

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

Lelee maapụ Sass anyị na docs loops maka otu esi agbanwe agba ndị a.

Agba niile

Agba Bootstrap niile dị ka Sass variables na maapụ Sass na scss/_variables.scssfaịlụ. Iji zere nha faịlụ abawanye, anyị anaghị emepụta klaasị ederede ma ọ bụ ndabere ndabere maka mgbanwe ndị a ọ bụla. Kama, anyị na-ahọrọ mpaghara nke agba ndị a maka palette isiokwu .

Jide n'aka na ị na-enyocha oke ọdịiche ka ị na-ahazi agba. Dị ka egosiri n'okpuru, anyị atụkwasịla ọnụ ọgụgụ dị iche iche atọ na agba nke ọ bụla - otu maka agba swatch ugbu a, otu megide ọcha, na otu megide ojii.

$acha anụnụ anụnụ#0d6efd

$acha anụnụ anụnụ-100

$-acha anụnụ anụnụ-200

$-acha anụnụ anụnụ-300

$-acha anụnụ anụnụ-400

$-acha anụnụ anụnụ-500

$-acha anụnụ anụnụ-600

$-acha anụnụ anụnụ-700

$-acha anụnụ anụnụ-800

$-acha anụnụ anụnụ-900

$ego#6610f2

$ ego-100

$ 200

$ 300

$ 400

$ 500

$ 600

$ 700

$ 800

$ 900

$acha odo odo#6f42c1

$ odo-100

$ odo-200

$ odo-300

$ odo-400

$ odo-500

$ odo-600

$ odo-700

$ odo-800

$ odo-900

$ pink#d63384

$ pink-100

$ pink-200

$ pink-300

$ pink-400

$ pink-500

$ pink-600

$ pink-700

$ pink-800

$ pink-900

$ uhie#dc3545

$ uhie-100

$ uhie-200

$ uhie-300

$ uhie-400

$ uhie-500

$ uhie-600

$ uhie-700

$ uhie-800

$ uhie-900

$oroma#fd7e14

$ oroma-100

$ oroma-200

$ oroma-300

$ oroma-400

$ oroma-500

$ oroma-600

$ oroma-700

$ oroma-800

$ oroma-900

odo odo#ffc107

$ odo-100

$ edo-200

$ edo-300

$ edo-400

$ edo-500

$ edo-600

$ edo-700

$ edo-800

$ edo-900

$ akwụkwọ ndụ akwụkwọ ndụ#198754

$ akwụkwọ ndụ akwụkwọ ndụ-100

$ green-200

$ green-300

$ akwụkwọ ndụ akwụkwọ ndụ-400

$ akwụkwọ ndụ akwụkwọ ndụ-500

$ green-600

$ green-700

$ green-800

$ green-900

$teal#20c997

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

$ ntụ ntụ-500#adb5bd

$ ntụ ntụ-100

$ ntụ ntụ-200

isi awọ $300

isi awọ $400

$ ntụ ntụ-500

isi awọ $600

isi awọ $ 700

isi awọ $ 800

isi awọ $900

$ nwa#000

$ọcha#nff

Ihe edeturu na Sass

Sass enweghị ike ịmepụta mgbanwe na mmemme, yabụ anyị jiri aka mepụta mgbanwe maka tint ọ bụla na ndò onwe anyị. Anyị na-akọwapụta uru midpoint (dịka ọmụmaatụ $blue-500) ma na-eji ọrụ agba omenala iji tint (gbachapụ) ma ọ bụ ndò (gba ọchịchịrị) agba anyị site na mix()ọrụ agba Sass.

Iji mix()abụghị otu lighten()na darken()- nke mbụ na-agwakọta agba akọwapụtara na ọcha ma ọ bụ oji, ebe nke ikpeazụ na-edozi uru dị mfe nke agba ọ bụla. Ihe si na ya pụta bụ agba agba zuru oke, dị ka egosiri na ngosi CodePen a .

Anyị tint-color()na shade-color()ọrụ anyị na-eji mix()n'akụkụ $theme-color-intervalmgbanwe anyị, nke na-akọwapụta uru pasentị rịgoro maka agba agwakọta ọ bụla anyị mepụtara. Hụ scss/_functions.scssna scss/_variables.scssfaịlụ maka koodu isi mmalite zuru ezu.

Maapụ Sass agba

Faịlụ Sass isi Bootstrap gụnyere maapụ atọ iji nyere gị aka ngwa ngwa na ngwa ngwa kpọchie ndepụta agba na ụkpụrụ hex ha.

$colorsdepụtara 500agba agba ( ) niile dị anyị
$theme-colorsdepụtara agba isiokwu niile ahaziri n'usoro semant ( egosiri n'okpuru)
$graysdepụtara niile tints na ndò nke isi awọ

N'ime scss/_variables.scss, ị ga-ahụ mgbanwe agba Bootstrap na maapụ Sass. Nke a bụ ọmụmaatụ nke $colorsmaapụ Sass:

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

Tinye, wepụ, ma ọ bụ gbanwee ụkpụrụ dị n'ime maapụ ahụ iji melite otu esi eji ha n'ọtụtụ ihe ndị ọzọ. Ọ dị nwute na oge a, ọ bụghị akụrụngwa ọ bụla na-eji maapụ Sass a. Mmelite ga-eme n'ọdịnihu ga-agbalịsi ike imeziwanye nke a. Ruo mgbe ahụ, mee atụmatụ iji ${color}mgbanwe ndị a na maapụ Sass a.

Ọmụmaatụ

Nke a bụ otu ị ga-esi jiri ndị a na Sass gị:

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

klaasị uru agba na ndabere dịkwa maka ịtọ colorna background-coloriji 500ụkpụrụ agba.

Na-emepụta akụrụngwa

Agbakwunyere na v5.1.0

Bootstrap anaghị agụnye coloryana background-colorakụrụngwa maka mgbanwe agba ọ bụla, mana ị nwere ike iwepụta ndị a n'onwe gị site na iji API ịba uru anyị yana maapụ Sass agbakwunyere na v5.1.0.

Iji malite, gbaa mbọ hụ na ibubatala ọrụ anyị, mgbanwe, mixins na akụrụngwa anyị.
Jiri map-merge-multiple()ọrụ anyị jikọta ọtụtụ maapụ Sass ọnụ na maapụ ọhụrụ.
Jikọọ maapụ jikọtara ọhụrụ a iji gbasaa ọrụ ọ bụla nwere {color}-{level}aha klaasị.

Nke a bụ ihe atụ na-ewepụta akụrụngwa agba ederede (dịka ọmụmaatụ, .text-purple-500) site na iji usoro ndị a dị n'elu.

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

Nke a ga-emepụta ngwa ọhụrụ .text-{color}-{level}maka agba na ọkwa ọ bụla. Ị nwere ike ịme otu ihe ahụ maka akụrụngwa na akụrụngwa ọ bụla ọzọ.