Halluu

Bootstrap sirna halluu bal'aa kan akkaataa fi qaamolee keenya mata duree godhuun deeggaramee jira. Kunis pirojektii kamiifuu dhuunfachuu fi dheerina bal'aa dandeessisa.

Fuula kana irratti

Halluuwwan mata duree

Tuuta xiqqaa halluuwwan hunda fayyadamnee iskiimota halluu uumuuf paleetii halluu xiqqaa uumuuf, akkasumas akka jijjiiramoota Sass fi kaartaa Sass scss/_variables.scssfaayilii Bootstrap keessatti argama.

Sadarkaa tokkoffaa

Sadarkaa lammaffaa

Milkaa'ina

Hamaa

Akeekkachiisa

Info

Ifa

Duukkana

Halluuwwan kun hundi akka kaartaa Sass, $theme-colors.

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

Akkaataa halluuwwan kana itti fooyyessitan barreeffamoota Sass maps fi loops keenya ilaalaa .

Halluu hunda

Halluuwwan Bootstrap hundi akka jijjiiramoota Sass fi kaartaa Sass scss/_variables.scssfaayilii keessatti argamu. Hammangaa faayilii dabaluu hambisuuf, tokkoon tokkoo jijjiiramoota kanaaf barruu ykn gita halluu duubbee hin uumnu. Inumaayyuu, tuuta xiqqaa halluuwwan kanaa paleetii matadureedhaaf filanna .

Yeroo halluuwwan dhuunfattu reeshiyoowwan walfaallaa hordofuu kee mirkaneessi. Akkuma armaan gaditti mul'atu, tokkoon tokkoon halluuwwan gurguddootti reeshiyoowwan walfaallaa sadii daballeerra-tokko halluuwwan ammaa swaach, tokko adii irratti, tokko immoo gurraacha irratti.

$buluu#0d6efd jedhama

$buluu-100 ta'a

$buluu-200 ta'a

$buluu-300 ta'a

$buluu-400 ta'a

$buluu-500 ta'a

$buluu-600 ta'a

$buluu-700 ta'a

$buluu-800 ta'a

$buluu-900 ta'a

$indiigoo jedha#6610f2 irratti

$indiigoo-100

$indiigoo-200

$indiigoo-300 ta'a

$indiigoo-400 ta'a

$indiigoo-500 ta'a

$indiigoo-600 ta'a

$indiigoo-700 ta'a

$indiigoo-800 ta'a

$indiigoo-900 ta'a

$diimaa#6f42c1 irratti

$diimaa-100

$diimaa-200

$diimaa-300

$diimaa-400

$diimaa-500

$diimaa-600

$diimaa-700

$diimaa-800

$diimaa-900

$pink jedhamuun beekama#d63384 irratti argama

$piinkii-100 ta'a

$piinkii-200 ta'a

$piinkii-300 ta'a

$piinkii-400 ta'a

$piinkii-500 ta'a

$piinkii-600 ta'a

$piinkii-700 ta'a

$piinkii-800 ta'a

$piinkii-900 ta'a

$diimaa#dc3545 irratti argama

$diimaa-100

$diimaa-200

$diimaa-300

$diimaa-400

$diimaa-500

$diimaa-600

$diimaa-700

$diimaa-800

$diimaa-900

$burtukaana#fd7e14 jedhu

$burtukaana-100

$burtukaana-200

$burtukaana-300

$burtukaana-400

$burtukaana-500

$burtukaana-600

$burtukaana-700

$burtukaana-800

$burtukaana-900

$keelloo#ffc107 jedhamtu

$keelloo-100 ta'a

$keelloo-200 ta'a

$keelloo-300 ta'a

$keelloo-400 ta'a

$keelloo-500 ta'a

$keelloo-600 ta'a

$keelloo-700 ta'a

$keelloo-800 ta'a

$keelloo-900 ta'a

$magariisa#198754 irratti

$magariisaa-100

$magariisaa-200

$magariisaa-300

$magariisaa-400

$magariisaa-500

$magariisaa-600

$magariisaa-700

$magariisaa-800

$magariisaa-900

$teal jedhama#20c997 irratti

$teal-100 jedhamuun beekama

$teal-200 ta'a

$teal-300 ta'a

$teal-400 ta'a

$teal-500 ta'a

$teal-600 ta'a

$teal-700 ta'a

$teal-800 ta'a

$teal-900 ta'a

$cyan jedhamuun beekama#0dcaf0 jedhu

$saayinii-100 ta’a

$saayinii-200 ta’a

$saayinii-300 ta’a

$saayinii-400 ta’a

$saayinii-500 ta’a

$saayinii-600 ta’a

$saayinii-700 ta’a

$saayinii-800 ta’a

$saayinii-900 ta’a

$halluu diimaa-500#adb5bd jedhaa

$halluu diimaa-100

$halluu diimaa-200

$halluu diimaa-300

$halluu diimaa-400

$halluu diimaa-500

$halluu diimaa-600

$halluu diimaa-700

$halluu diimaa-800

$halluu diimaa-900

$gurraacha#000 ta'a

$adii#fff

Yaadannoowwan Sass irratti

Sass sagantaadhaan jijjiiramoota maddisiisuu hin danda'u, kanaaf jijjiiramoota harkaan tint fi shade hundaaf ofii keenyaa uumne. Gatii tuqaa gidduu ifteessina (fkn, $blue-500) fi faankishiniiwwan halluu amala fayyadamnee halluuwwan keenya karaa faankishinii halluu Sass'n halluu (ifaa) ykn golboo (dukkaneessuu) mix()fayyadamna.

Fayyadamuun fi —kan mix()duraa halluu ifteessame adii ykn gurraacha waliin walitti makuun, inni lammaffaan ammoo gatii salphaa halluu tokkoon tokkoo qofa sirreessa. Bu'aan isaas halluuwwan baay'ee guutuu ta'e, akkuma CodePen demo kana keessatti mul'atutti .lighten()darken()

Faankishiniiwwan keenyaa tint-color()fi jijjiiramaa keenya cinatti fayyadamu , kunis tokkoon tokkoo halluu makaa oomishnu gatii dhibbeentaa tarkaanfii ifteessa. Koodii madda guutuuf faayiloota fi ilaali .shade-color()mix()$theme-color-intervalscss/_functions.scssscss/_variables.scss

Kaartaa Sass halluu

Faayiloonni Sass madda Bootstrap kaartaa sadii of keessatti qabatu, kunis saffisaa fi salphaatti tarree halluuwwanii fi gatiiwwan heksaadii isaanii irratti akka loop gootu si gargaara.

$colors500halluuwwan bu'uuraa ( ) keenya hunda tarreessa
$theme-colorshalluuwwan mata duree hiikaan moggaafaman hunda tarreessa (armaan gaditti agarsiifame) .
$grayshalluu fi golgaa halluu diimaa hunda tarreessa

Keessatti scss/_variables.scss, jijjiiramoota halluu Bootstrap fi kaartaa Sass ni argatta. $colorsFakkeenyi kaartaa Sass kunooti :

$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
);

Akkaataa isaan qaamolee biroo hedduu keessatti itti fayyadaman haaromsuuf gatiiwwan kaartaa keessaa dabali, haqi, ykn fooyyessi. Kan nama dhibu yeroo kanatti, qaamni hundi kaartaa Sass kana hin fayyadamu. Fuulduratti wanti haaraan kana irratti fooyyessuuf ni carraaqu. ${color}Hanga sanatti jijjiiramootaa fi kaartaa Sass kana fayyadamuu irratti karoorfadhu .

Fakkeenya

Sass keessan keessatti akkamitti kanneen itti fayyadamuu dandeessan kunooti:

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

Gitoota faayidaa halluu fi duubbee gatiiwwan halluu saaguu colorfi background-colorfayyadamuuf illee ni argamu.500

Faayidaa maddisiisuu

v5.1.0 keessatti dabalameera

Bootstrap jijjiiramaa halluu hundaaf colorfi faayidaa hin dabalatu , garuu API faayidaa keenyaa fi kaartaa Sass bal'aa keenya v5.1.0 keessatti dabalameen ofumaan kanneen maddisiisuu dandeessa.background-color

Jalqabuuf, faankishiniiwwan, jijjiiramoota, mixins, fi faayidaa keenya galchuu kee mirkaneessi.
map-merge-multiple()Kaartaa Sass hedduu kaartaa haaraa keessatti saffisaan walitti makuuf faankishinii keenya fayyadami .
{color}-{level}Faayidaa kamiyyuu maqaa gitaa waliin dheeressuuf kaartaa walitti makame haaraa kana walitti makuu .

Fakkeenyi faayidaa halluu barruu (fkn, .text-purple-500) tarkaanfiiwwan armaan olii fayyadamuun uumu kunooti.

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

.text-{color}-{level}Kunis halluu fi sadarkaa hundaaf faayidaa haaraa ni maddisiisa . Faayidaa fi qabeenya biroo kamiifuu akkasuma gochuu dandeessa.