Tīpoka ki te ihirangi matua Tīpoka ki te whakaterenga tuhinga

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 mo tetahi kaupapa.

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 tuhinga, karaehe tae papamuri mo ia o enei taurangi. Engari, ka whiriwhiria e matou he waahanga o enei tae mo te papatae kaupapa .

Me tino 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 hangaia 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, e whakaatuhia ana i tenei whakaaturanga CodePen .

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
  • $theme-colorska whakarārangihia nga 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.

Te whakaputa taputapu

Kua taapirihia ki te v5.1.0

Karekau a Bootstrap te whakauru colorme background-colornga taputapu mo ia taurangi tae, engari ka taea e koe te whakaputa i enei ma o maatau API whaipainga me o maatau mapi Sass kua taapirihia ki te v5.1.0.

  1. Hei timata, kia mohio kua kawemai koe i o maatau mahi, taurangi, whakauru, me nga taputapu.
  2. Whakamahia ta maatau map-merge-multiple()mahi ki te hanumi i nga mapi Sass maha ki tetahi mapi hou.
  3. Hanumi tenei mapi whakakotahi hou ki te whakawhānui i tetahi taputapu whai {color}-{level}ingoa akomanga.

Anei tetahi tauira e whakaputa ana i nga taputapu tae o te kuputuhi (hei tauira, .text-purple-500) ma te whakamahi i nga waahanga o runga ake nei.

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

Ma tenei ka whakaputa .text-{color}-{level}taputapu hou mo ia tae me nga taumata. Ka taea e koe te mahi pera mo etahi atu taputapu me nga rawa.