Buuka ku bigambo ebikulu Buuka ku docs navigation

Bootstrap ewagirwa enkola ya langi empanvu ekwata ku sitayiro zaffe n’ebitundu byaffe. Kino kisobozesa okulongoosa n’okugaziya okusingawo ku pulojekiti yonna.

Langi z’omulamwa

Tukozesa ekitundu ekitono ekya langi zonna okukola ekipande kya langi ekitono okukola ensengeka za langi, era nga kisangibwa nga enkyukakyuka za Sass ne maapu ya Sass mu scss/_variables.scssfayiro ya Bootstrap.

Pulayimale
Ekyokubiri
Okuyita
Akabi
Okulabula
Info
Koleeza
Ekizikiza

Langi zino zonna zisangibwa nga maapu ya Sass, $theme-colors.

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

Laba Sass maps ne loops docs zaffe omanye engeri y'okukyusaamu langi zino.

Langi zonna

Langi zonna eza Bootstrap zisangibwa nga enkyukakyuka za Sass ne maapu ya Sass mu scss/_variables.scssfayiro. Okwewala okweyongera mu sayizi za fayiro, tetukola kiraasi za biwandiiko oba langi z’emabega ku buli emu ku nkyukakyuka zino. Mu kifo ky’ekyo, tulonda ekitundu ekitono ekya langi zino ku paleedi y’omulamwa .

Kakasa nti olondoola emigerageranyo gy’enjawulo nga bw’olongoosa langi. Nga bwe kiragibwa wansi, twongeddeko emigerageranyo esatu egy’enjawulo ku buli emu ku langi enkulu —ekimu ku langi za swatch eziriwo kati, ekirala ku njeru, n’endala ku ddugavu.

$bbululu#0d6efd nga bwe kiri
$bbululu-100
$bbululu-200
$bbulu-300
$bbululu-400
$bbululu-500
$bbululu-600
$bbululu-700
$bbululu-800
$bbululu-900
$indigo nga bwe kiri#6610f2 nga bwe kiri
$indigo-100 nga bwe kiri
$indigo-200 nga bwe kiri
$indigo-300 nga bwe kiri
$indigo-400 nga bwe kiri
$indigo-500 nga bwe kiri
$indigo-600 nga bwe kiri
$indigo-700 nga bwe kiri
$indigo-800 nga bwe kiri
$indigo-900 nga bwe kiri
$ekika kya kakobe#6f42c1 nga bwe kiri
$ekika kya kakobe-100
$ekika kya kakobe-200
$ekika kya kakobe-300
$ekika kya kakobe-400
$ekika kya kakobe-500
$ekika kya kakobe-600
$ekika kya kakobe-700
$ekika kya kakobe-800
$ekika kya kakobe-900
$pinki#d63384 nga bwe kiri
$pinki-100
$pinki-200
$pinki-300
$pinki-400
$pinki-500
$pinki-600
$pinki-700
$pinki-800
$pinki-900
$emmyufu#dc3545 nga bwe kiri
$emmyufu-100
$emmyufu-200
$emmyufu-300
$emmyufu-400
$emmyufu-500
$emmyufu-600
$emmyufu-700
$emmyufu-800
$emmyufu-900
$emicungwa#fd7e14 nga bwe kiri
$emicungwa-100
$emicungwa-200
$emicungwa-300
$emicungwa-400
$emicungwa-500
$emicungwa-600
$emicungwa-700
$emicungwa-800
$emicungwa-900
$kyenvu#ffc107 nga bwe kiri
$emmyufu-100
$emmyufu-200
$emmyufu-300
$emmyufu-400
$emmyufu-500
$emmyufu-600
$emmyufu-700
$emmyufu-800
$emmyufu-900
$ekiddugavu#198754 nga bwe kiri
$ekiddugavu-100
$ekiddugavu-200
$ekiddugavu-300
$ekiddugavu-400
$ekiddugavu-500
$ekiddugavu-600
$ekiddugavu-700
$ekiddugavu-800
$ekiddugavu-900
$teal#20c997 nga bwe kiri
$teal-100 nga bwe kiri
$teal-200 nga bwe kiri
$teal-300 nga bwe kiri
$teal-400 nga bwe kiri
$teal-500 nga bwe kiri
$teal-600 nga bwe kiri
$teal-700 nga bwe kiri
$teal-800 nga bwe kiri
$teal-900 nga bwe kiri
$cyan#0dcaf0
$cyan-100 nga bwe kiri
$cyan-200 nga bwe kiri
$cyan-300 nga bwe kiri
$cyan-400 nga bwe kiri
$cyan-500 nga bwe kiri
$cyan-600 nga bwe kiri
$cyan-700 nga bwe kiri
$cyan-800 nga bwe kiri
$cyan-900 nga bwe kiri
$enzirugavu-500#adb5bd
$enzirugavu-100
$enzirugavu-200
$enzirugavu-300
$enzirugavu-400
$enzirugavu-500
$enzirugavu-600
$enzirugavu-700
$enzirugavu-800
$enzirugavu-900
$omuddugavu#000
$enjeru#fff

Ebiwandiiko ku Sass

Sass tesobola kukola programmatically variables, kale twakola manually variables ku buli tint ne shade ffekka. Tulambika omuwendo gw’ensonga ey’omu makkati (okugeza, $blue-500) era ne tukozesa emirimu gya langi egy’enjawulo okusiiga langi (okutangaaza) oba okusiiga (okuzikiza) langi zaffe nga tuyita mu mulimu gwa mix()langi ogwa Sass.

Okukozesa mix()si kye kimu lighten()ne darken()—eky’olubereberye kitabula langi eragiddwa n’enjeru oba enjeru, ate eky’oluvannyuma kitereeza omuwendo gw’obutangaavu bwa buli langi yokka. Ekivaamu ye suite ya langi ezijjuvu ennyo, nga bwe kiragibwa mu kino CodePen demo .

Emirimu gyaffe tint-color()ne shade-color()gikozesa mix()ku mabbali g’enkyukakyuka yaffe $theme-color-interval, eraga omuwendo gw’ebitundu ku kikumi ogw’emitendera ku buli langi etabuddwa gye tufulumya. Laba fayiro scss/_functions.scssne scss/_variables.scssfayiro z'ensibuko enzijuvu.

Maapu za Sass eza langi

Bootstrap's source Sass files zirimu maapu ssatu okukuyamba okutambula amangu era mu ngeri ennyangu ku lukalala lwa langi n'emiwendo gyazo egya hex.

  • $colorsolukalala lwa langi zaffe zonna eza base ( 500) eziriwo
  • $theme-colorsewandiika langi zonna ez’omulamwa ezituumiddwa amannya mu makulu (eziragiddwa wansi)
  • $graysawandiika langi zonna n’ebisiikirize eby’enzirugavu

Mu scss/_variables.scss, ojja kusangamu enkyukakyuka za langi za Bootstrap ne maapu ya Sass. Wano waliwo ekyokulabirako kya $colorsmaapu ya 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
);

Okwongera, okuggyawo, oba kyusa emiwendo munda mu maapu okutereeza engeri gye gikozesebwamu mu bitundu ebirala bingi. Ebyembi mu kiseera kino, si buli kitundu nti ekozesa maapu eno eya Sass. Ebipya ebigenda okufulumizibwa mu biseera eby’omu maaso bijja kufuba okulongoosa ku kino. Okutuusa olwo, teekateeka okukozesa ${color}enkyukakyuka ne maapu eno eya Sass.

Eky'okulabirako

Laba engeri gy'oyinza okukozesaamu bino mu Sass yo:

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

Ebika by’omugaso gwa langi n’emabega nabyo biriwo okuteeka colorn’okukozesa emiwendo background-colorgya 500langi.