Rach gu prìomh shusbaint Air adhart gu seòladh docs

Tha Bootstrap a’ faighinn taic bho shiostam dath farsaing a tha mar chuspair ar stoidhlichean agus ar co-phàirtean. Leigidh seo le gnàthachadh agus leudachadh nas coileanta airson pròiseact sam bith.

Dathan cuspair

Bidh sinn a’ cleachdadh fo-sheata de gach dath gus paileas dath nas lugha a chruthachadh airson sgeamaichean dath a ghineadh, cuideachd ri fhaighinn mar chaochladairean Sass agus mapa Sass ann am scss/_variables.scssfaidhle Bootstrap.

Bun-sgoil
Àrd-sgoile
Soirbheachas
Cunnart
Rabhadh
Fiosrachadh
Solas
Dorch

Tha na dathan sin uile rim faighinn mar mhapa Sass, $theme-colors.

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

Thoir sùil air na mapaichean Sass agus na docaichean lùban againn airson mar as urrainn dhut na dathan sin atharrachadh.

A h-uile dathan

Tha a h-uile dath Bootstrap ri fhaighinn mar chaochladairean Sass agus mapa Sass ann am scss/_variables.scssfaidhle. Gus meudan faidhle nas motha a sheachnadh, cha bhith sinn a’ cruthachadh clasaichean dath teacsa no cùl-raoin airson gach aon de na caochladairean sin. An àite sin, bidh sinn a’ taghadh fo-sheata de na dathan sin airson paileas cuspair .

Dèan cinnteach gun cùm thu sùil air co-mheasan eadar-dhealaichte fhad ‘s a bhios tu a’ gnàthachadh dathan. Mar a chithear gu h-ìosal, tha sinn air trì co-mheasan eadar-dhealaichte a chuir ri gach prìomh dhathan - aon airson dathan gnàthach an t-swatch, aon airson an aghaidh geal, agus aon airson an aghaidh dubh.

$ gorm#0d6fd
$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
$ purpaidh#6f42c1
$ purpaidh-100
$ purpaidh-200
$ purpaidh-300
$ purpaidh-400
$ purpaidh-500
$ purpaidh-600
$ purpaidh-700
$ purpaidh-800
$ purpaidh-900
$ pinc#d63384
$ pinc-100
$ pinc-200
$ pinc-300
$ pinc-400
$ pinc-500
pinc-600
$ pinc-700
pinc-800
pinc-900
$ dearg#dc3545
dearg-100
$ dearg-200
dearg-300
dearg-400
dearg-500
dearg-600
dearg-700
dearg-800
dearg - 900
$ orains#fd7e14
orains - 100
$ orains-200
orains-300
orains-400
orains-500
orains-600
orains-700
orains-800
orains-900
$ buidhe#ffc107
$ buidhe-100
$ buidhe-200
$ buidhe-300
$ buidhe-400
$ buidhe-500
$ buidhe-600
$ buidhe-700
$ buidhe-800
$ buidhe-900
$ uaine#198754
$ uaine - 100
$ uaine-200
$ uaine - 300
$ uaine - 400
$ uaine - 500
$ uaine - 600
$ uaine - 700
$ uaine - 800
$ uaine-900
$ uaine#20c997
glas-100
glas-200
glas-300
glas-400
glas-500
glas-600
glas-700
glas-800
glas-900
$ cian#0dcaf0
$cian-100
$cian-200
$ cian-300
$cian-400
$ cian-500
$ cian-600
$ cian-700
$cian-800
$cian-900
glas-500#adb5bd
glas-100
glas-200
glas-300
glas-400
glas-500
glas-600
glas-700
glas-800
glas-900
$ dubh#000
$ geal#fff

Notaichean air Sass

Chan urrainn dha Sass caochladairean a ghineadh gu prògramach, agus mar sin chruthaich sinn caochladairean le làimh airson a h-uile dath agus sgàil sinn fhìn. Bidh sinn a’ sònrachadh luach meadhan-phuing (me, $blue-500) agus a’ cleachdadh gnìomhan dath àbhaisteach gus na dathan againn a dhath (lasachadh) no dubhar (dorcha) tro mix()ghnìomh dath Sass.

Chan eil cleachdadh mix()an aon rud ri lighten()agus darken()- bidh a’ chiad fhear a’ measgachadh an dath ainmichte le geal no dubh, agus chan eil an tè mu dheireadh ag atharrachadh ach luach aotromachd gach dath. Is e an toradh sreath de dhhathan tòrr nas coileanta, mar a chithear san demo CodePen seo .

Bidh na gnìomhan againn tint-color()agus na shade-color()gnìomhan againn a’ cleachdadh mix()còmhla ris a’ $theme-color-intervalchaochladair againn, a tha a’ sònrachadh luach ceudad ceumnaichte airson gach dath measgaichte a bhios sinn a’ dèanamh. Faic na faidhlichean scss/_functions.scssagus na scss/_variables.scssfaidhlichean airson a’ chòd stòr slàn.

Mapaichean dath Sass

Tha trì mapaichean ann am faidhlichean Sass stòr Bootstrap gus do chuideachadh le bhith a’ lùbadh gu sgiobalta agus gu furasta thairis air liosta de dhhathan agus na luachan hex aca.

  • $colorsa’ liostadh na 500dathan bunaiteach ( ) a tha rim faighinn againn
  • $theme-colorsa’ liostadh a h-uile dath cuspair ainmichte gu semantach (ri fhaicinn gu h-ìosal)
  • $graysag ainmeachadh a h-uile dath agus dath liath

Taobh a-staigh scss/_variables.scss, lorgaidh tu caochladairean dath Bootstrap agus mapa Sass. Seo eisimpleir de $colorsmhapa 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 ris, thoir air falbh no atharraich luachan taobh a-staigh a’ mhapa gus ùrachadh mar a bhios iad gan cleachdadh ann am mòran phàirtean eile. Gu mì-fhortanach aig an àm seo, chan eil a h- uile pàirt a’ cleachdadh a’ mhapa Sass seo. Bidh ùrachaidhean san àm ri teachd a’ feuchainn ri seo a leasachadh. Gu ruige sin, planadh air cleachdadh nan ${color}caochladairean agus am mapa Sass seo.

eisimpleir

Seo mar a chleachdas tu iad sin nad Sass:

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

Tha clasaichean goireasan dath is cùl -fhiosrachaidh rim faighinn cuideachd airson luachan dath a shuidheachadh coloragus background-colora chleachdadh .500

A 'cruthachadh ghoireasan

Air a chur ris ann an v5.1.0

Chan eil Bootstrap a’ toirt a-steach coloragus background-colorgoireasan airson gach caochladair dath, ach faodaidh tu iad sin a ghineadh leis an API goireasach againn agus na mapaichean Sass leudaichte againn air an cur ris ann an v5.1.0.

  1. Gus tòiseachadh, dèan cinnteach gu bheil thu air ar gnìomhan, caochladairean, measgachadh agus goireasan a thoirt a-steach.
  2. Cleachd ar map-merge-multiple()gnìomh gus grunn mhapaichean Sass a chur còmhla gu sgiobalta ann am mapa ùr.
  3. Cuir còmhla am mapa ùr seo gus goireas sam bith a leudachadh le {color}-{level}ainm clas.

Seo eisimpleir a bhios a’ gineadh goireasan dath teacsa (me, .text-purple-500) a’ cleachdadh nan ceumannan gu h-àrd.

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

Ginidh seo .text-{color}-{level}goireasan ùra airson gach dath agus ìre. Faodaidh tu an aon rud a dhèanamh airson goireas agus seilbh sam bith eile cuideachd.