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.