in English

Tae

Kei te tautokohia a Bootstrap e te punaha tae whanui e whakakaupapa ana i o maatau momo me nga waahanga. Ma tenei ka taea te whakarite me te toronga whanui ake mo tetahi kaupapa.

I tenei wharangi

Tae kaupapa

Ka whakamahia e matou he waahanga o nga tae katoa hei hanga i tetahi papatae tae iti ake mo te whakaputa kaupapa tae, e waatea ana ano hei taurangi Sass me te mapi Sass i te scss/_variables.scsskonae a Bootstrap.

Paraimere

Tuarua

Angitu

mōrearea

Whakatupato

Nga korero

Maama

pouri

Ko enei tae katoa e waatea ana hei mapi Sass $theme-colors,.

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

Tirohia o maatau mapi Sass me nga tuhinga koropiko mo te whakarereke i enei tae.

Katoa nga tae

Kei te waatea nga tae Bootstrap katoa hei taurangi Sass me te mahere Sass kei roto i scss/_variables.scsste konae. Hei karo i te rahi ake o nga konae, kare matou e hanga i nga karaehe tae papamuri mo ia o enei taurangi. Engari, ka whiriwhiria e matou he waahanga o enei tae mo te papatae kaupapa .

Kia mahara ki te aro turuki i nga owehenga rereke i a koe e whakarite ana i nga tae. Ka rite ki te whakaatu i raro nei, kua taapirihia e matou nga rereketanga rereke e toru ki ia o nga tae matua—kotahi mo nga tae o naianei, kotahi mo te ma, me tetahi mo te pango.

$puru#0d6efd

$puru-100

$puru-200

$puru-300

$puru-400

$puru-500

$puru-600

$puru-700

$puru-800

$puru-900

$Indigo#6610f2

$ indigo-100

$ indigo-200

$ indigo-300

$ indigo-400

$ indigo-500

$ indigo-600

$ indigo-700

$ indigo-800

$ indigo-900

$papura#6f42c1

$papura-100

$papura-200

$papura-300

$papura-400

$papura-500

$papura-600

$papura-700

$papura-800

$papura-900

$mawhero#d63384

$mawhero-100

$mawhero-200

$mawhero-300

$mawhero-400

$mawhero-500

$mawhero-600

$mawhero-700

$mawhero-800

$mawhero-900

$whero#dc3545

$whero-100

$whero-200

$whero-300

$whero-400

$whero-500

$whero-600

$whero-700

$whero-800

$whero-900

$karaka#fd7e14

$karaka-100

$karaka-200

$karaka-300

$karaka-400

$karaka-500

$karaka-600

$karaka-700

$karaka-800

$karaka-900

$kōwhai#ffc107

$kōwhai-100

$kōwhai-200

$kōwhai-300

$kōwhai-400

$kōwhai-500

$kōwhai-600

$kōwhai-700

$kōwhai-800

$kōwhai-900

$matomato#198754

$matomato-100

$matomato-200

$matomato-300

$matomato-400

$matomato-500

$matomato-600

$matomato-700

$matomato-800

$matomato-900

$tea#20c997

$tea-100

$tea-200

$tea-300

$tea-400

$tea-500

$tea-600

$tea-700

$tea-800

$tea-900

$cyan#0dcaf0

$cyan-100

$cyan-200

$cyan-300

$cyan-400

$cyan-500

$cyan-600

$cyan-700

$cyan-800

$cyan-900

$hina-500#adb5bd

$hina-100

$hina-200

$hina-300

$hina-400

$hina-500

$hina-600

$hina-700

$hina-800

$hina-900

$pango#000

$ma#fff

Nga korero mo Sass

Kaore e taea e Sass te whakaputa i nga taurangi, no reira i hanga a ringatia e matou nga taurangi mo ia tae me te whakamarumaru ia matou ano. Ka tohua e matou te uara o waenga (hei tauira, $blue-500) ka whakamahi i nga mahi tae ritenga ki te whakakoi (whakamarama) ki te whakamarumaru ranei (whakapouri) o matou tae ma te mix()mahi tae a Sass.

Ko te whakamahi mix()kaore i te rite ki te lighten()me darken()—ko te mea o mua ka whakakotahi i te tae kua tohua ki te ma, ki te pango ranei, ko te mea whakamutunga ka whakatika noa i te uara mama o ia tae. Ko te hua he huinga tino pai rawa atu o nga tae, penei i te whakaaturanga CodePen demo .

Ka whakamahia a maatau tint-color()me o maatau shade-color()mahi ki te mix()taha o ta maatau $theme-color-intervaltaurangi, e tohu ana i te uara pahekeheke mo ia tae whakauru ka mahia e matou. Tirohia te scss/_functions.scssme nga scss/_variables.scsskonae mo te katoa o te waehere puna.

Mahere Sass Tae

Kei roto i nga konae Sass puna a Bootstrap nga mapi e toru hei awhina i a koe ki te huri tere me te ngawari ki runga i te rarangi o nga tae me o raatau uara hex.

$colorska whakarārangihia o maatau turanga ( 500) tae katoa e waatea ana
$theme-colorska whakarārangihia ngā tae kaupapa katoa kua whakaingoatia (e whakaatuhia ana i raro nei)
$grayse whakarārangi ana i ngā kakano katoa me ngā atarangi hina

I roto scss/_variables.scss, ka kitea e koe nga taurangi tae o Bootstrap me te mapi Sass. Anei tetahi tauira o te $colorsmapi 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
);

Tāpiri, tango, whakakē ranei i nga uara i roto i te mapi hei whakahōu me pehea te whakamahi i roto i te maha atu o nga waahanga. Engari i tenei wa, kaore nga waahanga katoa e whakamahi ana i tenei mahere Sass. Ko nga whakahoutanga a meake nei ka ngana ki te whakapai ake i tenei. Kia tae ra ano, whakamaherehia te whakamahi i nga ${color}taurangi me tenei mahere Sass.

Tauira

Anei me pehea e taea ai e koe te whakamahi i enei i roto i to Sass:

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

Kei te waatea hoki nga karaehe whaipainga tae me te papamuricolor mo te whakarite me background-colorte whakamahi i nga 500uara tae.