Tsallake zuwa babban abun ciki Tsallake zuwa kewayawa na takardu
in English

Launi

Bootstrap yana samun goyan bayan babban tsarin launi wanda ke ba da jigogi da salo da abubuwan haɗin mu. Wannan yana ba da damar ingantaccen keɓancewa da haɓakawa ga kowane aiki.

A wannan shafi

Launukan jigo

Muna amfani da juzu'in duk launuka don ƙirƙirar ƙaramin palette mai launi don samar da tsarin launi, kuma ana samun su azaman masu canjin Sass da taswirar Sass a cikin scss/_variables.scssfayil ɗin Bootstrap.

Firamare
Sakandare
Nasara
hadari
Gargadi
Bayani
Haske
Duhu

Duk waɗannan launuka suna samuwa azaman taswirar Sass, $theme-colors.

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

Duba taswirorin mu na Sass da takaddun madaukai don yadda ake canza waɗannan launuka.

Duk launuka

Duk launukan Bootstrap suna samuwa azaman masu canjin Sass da taswirar Sass a cikin scss/_variables.scssfayil. Don guje wa ƙara girman girman fayil, ba mu ƙirƙira rubutu ko azuzuwan launi na bango ga kowane ɗayan waɗannan masu canji ba. Madadin haka, mun zaɓi wani yanki na waɗannan launuka don palette mai jigo .

Tabbatar kula da ma'auni na bambanci yayin da kuke keɓance launuka. Kamar yadda aka nuna a ƙasa, mun ƙara bambance-bambancen bambanci guda uku zuwa kowane babban launuka-ɗaya don launukan swatch na yanzu, ɗaya don farar fata, ɗayan kuma don baki.

$ blue#0d6fd
$ blue-100
$ blue-200
$ blue-300
$ blue-400
$ blue-500
$ blue-600
$ blue-700
$ blue-800
$ blue-900
$indigo#6610f2
$ indigo-100
$ indigo-200
$ indigo-300
Indigo-400
$ indigo-500
Indigo-600
Indigo-700
Indigo-800
Indigo-900
$m#6f42c1
$ purple-100
$ purple-200
$ purple-300
$ purple-400
$ purple-500
$ purple-600
$ purple-700
$ purple-800
$ purple-900
$ ruwan hoda#d63384
$ ruwan hoda-100
$ ruwan hoda-200
$ ruwan hoda-300
$ ruwan hoda-400
$ ruwan hoda-500
$ ruwan hoda-600
$ ruwan hoda-700
$ ruwan hoda-800
$ ruwan hoda-900
$ ja#dc3545
ja -100
ja -200
ja -300
ja -400
ja -500
ja - 600
ja - 700
ja -800
ja -900
$ orange#fd7e14
$ orange-100
orange-200
orange-300
orange-400
orange-500
orange-600
orange-700
orange-800
orange-900
$ rawaya#ffc107
$ rawaya-100
$ rawaya-200
$ rawaya-300
$ rawaya-400
$ rawaya-500
$ rawaya-600
$ rawaya-700
$ rawaya-800
$ rawaya-900
$ kore#198754
$ kore - 100
$ kore -200
$ kore - 300
$ kore-400
$ kore-500
$ kore-600
kore - 700
kore -800
$ Green-900
$ shayi#20c997
$la-100
$ 200
$ 300
$ 400
$ 500
$ 600
$ 700
$ 800
$ 900
$cin#0 dcaf0
$ cyan-100
$ cyan-200
$ cyan-300
$ cyan-400
$ cyan-500
$ cyan-600
$ cyan-700
$ 800
$ cyan-900
$ launin toka-500#adb5bd
$ launin toka-100
$ launin toka-200
$ launin toka-300
$ launin toka-400
$ launin toka-500
$ launin toka - 600
launin toka-700
launin toka-800
launin toka-900
$baki#000
$ farin#fff

Bayanan kula akan Sass

Sass ba zai iya samar da masu canji da tsari ba, don haka da hannu muka ƙirƙiri masu canji ga kowane tint da inuwa kan kanmu. Mun ƙididdige ƙimar tsakiyar maki (misali, $blue-500) kuma muna amfani da ayyukan launi na al'ada don yin tint (haske) ko inuwa (mai duhu) launukanmu ta aikin mix()launi na Sass.

Amfani mix()ba iri ɗaya bane da lighten()kuma darken()— tsohon yana haɗa ƙayyadaddun launi tare da fari ko baki, yayin da na ƙarshen kawai ke daidaita ƙimar haske na kowane launi. Sakamakon shine ƙarin cikakkun launuka masu yawa, kamar yadda aka nuna a cikin wannan CodePen demo .

Ayyukanmu tint-color()da ayyukanmu shade-color()suna amfani da mabambantan mix()mu $theme-color-interval, wanda ke ƙayyadad da ƙimar kashi ga kowane gauraye launi da muke samarwa. Duba fayilolin scss/_functions.scssda scss/_variables.scsscikakken lambar tushe.

Taswirar Sass Launi

Fayilolin Sass tushen Bootstrap sun haɗa da taswira guda uku don taimaka muku cikin sauri da sauƙi madauki kan jerin launuka da ƙimar hex ɗin su.

  • $colorsya lissafa dukkan 500launukan tushe ( ) da muke da su
  • $theme-colorsya lissafa duk launukan jigo masu suna na ma'ana (wanda aka nuna a ƙasa)
  • $graysya lissafa duk tints da inuwar launin toka

A ciki scss/_variables.scss, zaku sami masu canjin launi na Bootstrap da taswirar Sass. Ga misalin $colorstaswirar 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
);

Ƙara, cire, ko gyara ƙima a cikin taswira don sabunta yadda ake amfani da su a cikin sauran abubuwa da yawa. Abin baƙin ciki a wannan lokacin, ba kowane sashi ke amfani da wannan taswirar Sass ba. Sabuntawa na gaba za su yi ƙoƙarin ingantawa akan wannan. Har sai lokacin, yi shirin yin amfani da masu ${color}canji da wannan taswirar Sass.

Misali

Ga yadda zaku iya amfani da waɗannan a cikin Sass ɗin ku:

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

Hakanan ana samun azuzuwan amfanin launi da bangocolor don saitawa da background-coloramfani da 500ƙimar launi.