in English

Dath

Tacaíonn córas leathan dathanna le Bootstrap a thugann téama dár stíleanna agus dár gcomhpháirteanna. Ligeann sé seo saincheaptha agus síneadh níos cuimsithí d'aon tionscadal.

Ar an leathanach seo

Dathanna téama

Bainimid úsáid as fothacar de na dathanna go léir chun pailéad dathanna níos lú a chruthú chun scéimeanna datha a ghiniúint, atá ar fáil freisin mar athróga Sass agus léarscáil Sass i scss/_variables.scssgcomhad Bootstrap.

Bunscoile

Tánaisteach

Rath

Contúirt

Rabhadh

Eolas

Solas

Dorcha

Tá na dathanna seo ar fad ar fáil mar léarscáil Sass, $theme-colors.

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

Breathnaigh ar ár mapaí Sass agus ar ár ndoiciméid lúb le haghaidh conas na dathanna seo a mhodhnú.

Gach dathanna

Tá gach dath Bootstrap ar fáil mar athróga Sass agus mar léarscáil Sass i scss/_variables.scssgcomhad. Chun méid comhaid méadaithe a sheachaint, ní chruthaímid ranganna datha téacs nó cúlra do gach ceann de na hathróga seo. Ina áit sin, roghnaímid fo-thacar de na dathanna seo le haghaidh pailéad téama .

Bí cinnte monatóireacht a dhéanamh ar chóimheasa codarsnachta de réir mar a shaincheapann tú dathanna. Mar a léirítear thíos, tá trí chóimheas codarsnachta curtha le gach ceann de na príomh-dathanna againn - ceann amháin le haghaidh dathanna reatha an tswatch, ceann le haghaidh bán, agus ceann eile le haghaidh dubh.

$gorm#0d6efd

$gorm-100

$gorm-200

$gorm-300

$gorm-400

$gorm-500

$gorm-600

$gorm-700

$gorm-800

$gorm-900

$indigo#6610f2

$indigo-100

$indigo-200

$indigo-300

$indigo-400

$indigo-500

$indigo-600

$indigo-700

$indigo-800

$indigo-900

$corcra#6f42c1

$corcra-100

$corcra-200

$corcra-300

$corcra-400

$corcra-500

$corcra-600

$corcra-700

$corcra-800

$corcra-900

$bándearg#d63384

$bándearg-100

$bándearg-200

$bándearg-300

$bándearg-400

$bándearg-500

$bándearg-600

$bándearg-700

$bándearg-800

$bándearg-900

$dearg#dc3545

$dearg-100

$dearg-200

$dearg-300

$dearg-400

$dearg-500

$dearg-600

$dearg-700

$dearg-800

$dearg-900

$oráiste#fd7e14

$oráiste-100

$oráiste-200

$oráiste-300

$oráiste-400

$oráiste-500

$oráiste-600

$oráiste-700

$oráiste-800

$oráiste-900

$buí#ffc107

$buí-100

$buí-200

$buí-300

$buí-400

$buí-500

$buí-600

$buí-700

$buí-800

$buí-900

$glas#198754

$glas-100

$glas-200

$glas-300

$glas-400

$glas-500

$glas-600

$glas-700

$glas-800

$glas-900

$teal#20c997

$teal-100

$teal-200

$teal-300

$teal-400

$teal-500

$teal-600

$teal-700

$teal-800

$teal-900

$cian#0dcaf0

$cian-100

$cian-200

$cian-300

$cian-400

$cian-500

$cian-600

$cian-700

$cian-800

$cian-900

$liath-500#adb5bd

$liath-100

$liath-200

$liath-300

$liath-400

$liath-500

$liath-600

$liath-700

$liath-800

$liath-900

$dubh#000

$bán#fff

Nótaí ar Sass

Ní féidir le Sass athróga a ghiniúint go ríomhchláraithe, agus mar sin de láimh chruthaíomar athróga do gach tint agus scáth orainn féin. Sonraímid an luach lárphointe (m.sh., $blue-500) agus úsáidimid feidhmeanna datha saincheaptha chun ár ndathanna a dhathú (éadrom a dhéanamh) nó a scáthú (dorcha) trí mix()fheidhm dathanna Sass.

mix()Ní hionann úsáid a bhaint as lighten()agus darken()— déanann an chéad cheann an dath sonraithe a chumasc le bán nó dubh, agus ní choigeartóidh an dara ceann ach luach gile gach dath. Is é an toradh ná sraith dathanna i bhfad níos iomláine, mar a léirítear sa taispeántas CodePen seo .

Úsáideann ár gcuid tint-color()agus shade-color()feidhmeanna mix()taobh lenár n- $theme-color-intervalathróg, a shonraíonn luach céatadáin céimnithe do gach dath measctha a chuirimid ar fáil. Féach ar na comhaid scss/_functions.scssagus scss/_variables.scssar an gcód foinse iomlán.

Dath léarscáileanna Sass

Áirítear le comhaid Sass foinse Bootstrap trí léarscáil chun cabhrú leat liosta dathanna agus a luachanna heicsidheacha a lúbadh go tapa agus go héasca.

$colorsliostaíonn ár mbonn ( 500) dathanna go léir atá ar fáil
$theme-colorsliostaíonn sé gach dath téama atá ainmnithe go séimeantach (léirithe thíos)
$graysliostaíonn sé gach tint agus scáth liath

Laistigh de scss/_variables.scss, gheobhaidh tú athróga datha Bootstrap agus léarscáil Sass. Seo sampla de $colorsléarscáil 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
);

Cuir leis, bain nó mionathraigh luachanna laistigh den léarscáil chun an chaoi a n-úsáidtear iad i go leor comhpháirteanna eile a nuashonrú. Ar an drochuair, ní bhaineann gach comhpháirt leas as an léarscáil Sass seo ag an am seo. Déanfaidh nuashonruithe amach anseo iarracht feabhas a chur air seo. Go dtí sin, déan plean maidir le húsáid na n- ${color}athróg agus an léarscáil Sass seo.

Sampla

Seo mar is féidir leat iad seo a úsáid i do Sass:

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

Tá ranganna áirgiúlachta datha agus chúlra ar fáil freisin chun na luachanna datha a shocrú coloragus a background-colorúsáid .500

Fóntais a ghiniúint

Curtha leis i v5.1.0

Ní chuimsíonn Bootstrap coloragus background-colorfóntais do gach athróg datha, ach is féidir leat iad seo a ghiniúint leat féin lenár n- API áirgiúlachta agus lenár léarscáileanna Sass leathnaithe a cuireadh leis in v5.1.0.

Chun tús a chur leis, déan cinnte go bhfuil ár bhfeidhmeanna, athróga, meascáin agus fóntais iompórtáilte agat.
Bain úsáid as ár map-merge-multiple()bhfeidhm chun léarscáileanna iomadúla Sass a chumasc go tapa le chéile i léarscáil nua.
Cumaisc an léarscáil nua seo le chéile chun aon áirgiúlacht a leathnú le {color}-{level}hainm ranga.

Seo sampla a ghineann fóntais datha téacs (m.sh., .text-purple-500) ag baint úsáide as na céimeanna thuas.

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

Ginfidh sé seo .text-{color}-{level}fóntais nua do gach dath agus leibhéal. Is féidir leat an rud céanna a dhéanamh le haghaidh aon áirgiúlachta agus maoine eile freisin.