Umbala

I-Bootstrap ixhaswa yinkqubo yombala ebanzi enemixholo yezitayile zethu kunye namalungu. Oku kuvumela ulungelelwaniso olubanzi kunye nokwandiswa kwayo nayiphi na iprojekthi.

Kweli phepha

Imibala yomxholo

Sisebenzisa iseti esezantsi yayo yonke imibala ukwenza iphalethi yombala omncinci wokuvelisa izikimu zombala, ezifumanekayo njengeenguqu zeSass kunye nemephu yeSass scss/_variables.scsskwifayile yeBootstrap.

Amabanga aphantsi

Eyesibini

Impumelelo

Ingozi

Isilumkiso

Ulwazi

Ukukhanya

Mnyama

Yonke le mibala iyafumaneka njengemephu ye-Sass $theme-colors,.

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

Jonga iimephu zethu zeSass kunye neelophu amaxwebhu malunga nendlela yokuguqula le mibala.

Yonke imibala

Yonke imibala yeBootstrap iyafumaneka njengeenguqu zeSass kunye nemephu yeSass scss/_variables.scsskwifayile. Ukunqanda ukonyuka kobukhulu befayile, asenzi iteksti okanye iiklasi zemibala yemvelaphi yazo zonke ezi ziguquguqukayo. Endaweni yoko, sikhetha iseti esezantsi yale mibala kwiphalethi yomxholo .

Qinisekisa ukuba ubeka iliso kwireyishini yokuthelekisa njengoko ulungiselela imibala. Njengoko kubonisiwe ngezantsi, songeze uthelekiso oluthathu lochasaniso kumbala ngamnye ongundoqo-omnye ube ngowombala weswotshi yangoku, omnye uchasene nomhlophe, kwaye omnye ngowomnyama.

$ blue#0d6efd

$ 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

$mfusa#6f42c1

$ purple-100

$ purple-200

$ purple-300

$ purple-400

$ purple-500

$ purple-600

$ purple-700

$ purple-800

$ purple-900

$pinki#d63384

$ pink-100

$ pink-200

$ pink-300

$ pink-400

$ pink-500

$ pink-600

$ pink-700

$ pink-800

$ pink-900

I-$ ebomvu#dc3545

$ ebomvu-100

$ ebomvu-200

$ ebomvu-300

$ ebomvu-400

$ ebomvu-500

$ ebomvu-600

$ ebomvu-700

$ ebomvu-800

$ ebomvu-900

$orenji#fd7e14

I-$ orange-100

$ orange-200

I-$ orange-300

I-$ orange-400

I-$ orange-500

I-$ orange-600

$ orange-700

I-$ orange-800

$ orange-900

$mthubi#ffc107

$ yellow-100

$ yellow-200

$ yellow-300

$ yellow-400

$ yellow-500

$ yellow-600

$ yellow-700

$ yellow-800

$ yellow-900

$ eluhlaza#198754

$ eluhlaza-100

$ eluhlaza-200

$ eluhlaza-300

$ eluhlaza-400

$ eluhlaza-500

$ eluhlaza-600

$ eluhlaza-700

$ eluhlaza-800

$ eluhlaza-900

$teal#20c997

$teal-100

I-teal-200 yeedola

I-$ 300

I-$ 400

I-teal-500 yeedola

I-teal-600 yeedola

I-teal-700 yeedola

I-teal-800 yeedola

I-teal-900 yeedola

$ cyan#0dcaf0

$ cyan-100

$ cyan-200

$ cyan-300

$ cyan-400

$ cyan-500

$ cyan-600

$ cyan-700

$ cyan-800

$ cyan-900

$ grey-500#adb5bd

$ grey-100

$ grey-200

$ grey-300

$ grey-400

$ grey-500

$ grey-600

$ grey-700

$ grey-800

$ grey-900

$ emnyama#000

$ emhlophe#fff

Amanqaku kwiSass

I-Sass ayinakukwazi ukuvelisa izinto eziguquguqukayo ngokwenkqubo, ngoko ke senze izinto eziguquguqukayo ngokwazo zonke i-tint kunye nomthunzi ngokwethu. Sikhankanya ixabiso lendawo ephakathi (umzekelo, $blue-500) kwaye sisebenzise imisebenzi yombala oqhelekileyo ukwenza i-tint (ikhanyisa) okanye yenze umthunzi (uyenze mnyama) imibala yethu mix()ngombala weSass.

Ukusebenzisa mix()akufani noku lighten()— darken()owokuqala udibanisa umbala ochaziweyo nomhlophe okanye omnyama, ngoxa lo mva ulungisa kuphela ixabiso lokukhanya kombala ngamnye. Isiphumo sisiqulatho esipheleleyo semibala, njengoko kubonisiwe kule demo yeCodePen .

Eyethu tint-color()kunye shade-color()nemisebenzi isetyenziswa mix()ecaleni kokuguquguquka kwethu $theme-color-interval, okuchaza ixabiso lepesenti elinyusiweyo kumbala ngamnye oxutyiweyo esiwuvelisayo. Jonga scss/_functions.scsskunye scss/_variables.scssneefayile zekhowudi yemvelaphi epheleleyo.

Iimephu zeSass ezinombala

Iifayile zeSass zomthombo weBootstrap zibandakanya iimephu ezintathu zokukunceda ngokukhawuleza nangokulula ukulophu kuluhlu lwemibala kunye namaxabiso abo e-hex.

$colorsdwelisa yonke isiseko esikhoyo ( 500) imibala
$theme-colorsdwelisa yonke imibala ebhalwe ngokwesemantiki (eboniswe ngezantsi)
$graysdwelisa zonke iitinti kunye nemibala engwevu

Ngaphakathi scss/_variables.scss, uya kufumana iinguqu zemibala yeBootstrap kunye nemephu ye-Sass. Nanku umzekelo $colorswemephu ye-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
);

Yongeza, susa, okanye ulungise amaxabiso kwimaphu ukuhlaziya indlela asetyenziswa ngayo kwezinye iindawo ezininzi. Ngelishwa ngeli xesha, asingawo onke amacandelo asebenzisa le mephu ye-Sass. Uhlaziyo lwexesha elizayo luya kuzama ukuphucula oku. Kude kube ngoko, cwangcisa ukusetyenziswa kwezinto ${color}eziguquguqukayo kunye nale mephu ye-Sass.

Umzekelo

Nantsi indlela onokuzisebenzisa ngayo ezi kwiSass yakho:

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

Umbala kunye neeklasi zoncedo lwangasemva zikwakhona ukuseta colornokusebenzisa background-coloramaxabiso 500ombala.