Ранги

Рангҳои мавзӯъ

Мо зермаҷмӯаи ҳама рангҳоро барои сохтани палитраи хурдтари рангҳо барои тавлиди схемаҳои рангӣ истифода мебарем, ки ҳамчун тағирёбандаҳои Sass ва харитаи Sass дар scss/_variables.scssфайли Bootstrap низ дастрасанд.

Ҳамаи ин рангҳо ҳамчун харитаи Sass дастрасанд $theme-colors.

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

Барои тағир додани ин рангҳо , харитаҳои Sass ва ҳуҷҷатҳои ҳалқаҳои моро санҷед.

Ҳама рангҳо

Ҳама рангҳои Bootstrap ҳамчун тағирёбандаҳои Sass ва харитаи Sass дар scss/_variables.scssфайл дастрасанд. Барои пешгирии зиёд шудани андозаи файл, мо барои ҳар яке аз ин тағирёбандаҳо синфҳои матн ё ранги замина эҷод намекунем. Ба ҷои ин, мо як зермаҷмӯаи ин рангҳоро барои палитраи мавзӯъ интихоб мекунем .

Ҳангоми танзими рангҳо ҳатман таносуби контрастро назорат кунед. Тавре ки дар зер нишон дода шудааст, мо ба ҳар як рангҳои асосӣ се таносуби контраст илова кардем - яке барои рангҳои ҷории намуна, яке барои сафед ва дигаре барои сиёҳ.

Қайдҳо дар бораи Sass

Sass наметавонад ба таври барномавӣ тағирёбандаҳоро тавлид кунад, аз ин рӯ мо худамон барои ҳар як ранг ва соя тағирёбандаҳоро дастӣ эҷод кардем. Мо арзиши миёнаи нуқтаро муайян мекунем (масалан, $blue-500) ва функсияҳои рангҳои фармоиширо барои ранг кардан (сабук кардан) ё соя кардан (торик кардан) рангҳои моро тавассути mix()функсияи рангии Sass истифода мебарем.

Истифодаи mix()он якхела нест lighten()ва darken()-валӣ ранги муайянро бо сафед ё сиёҳ омехта мекунад, дар ҳоле ки охирин танҳо арзиши равшании ҳар як рангро танзим мекунад. Дар натиҷа маҷмӯи пурратари рангҳо, тавре ки дар ин намоиши CodePen нишон дода шудааст .

Функсияҳои мо tint-color()ва shade-color()функсияҳои mix()мо дар баробари $theme-color-intervalтағирёбандаи мо истифода мешаванд, ки барои ҳар як ранги омехтае, ки мо истеҳсол мекунем, арзиши фоизи қадамро муайян мекунад. Барои рамзи пурраи манбаъ ба файлҳо scss/_functions.scssнигаред .scss/_variables.scss

Харитаҳои ранги Sass

Файлҳои манбаи Bootstrap Sass се харитаро дар бар мегиранд, ки ба шумо дар рӯйхати рангҳо ва арзишҳои шашгонаи онҳо зуд ва ба осонӣ давр задан кӯмак мерасонанд.

• $colors500ҳамаи рангҳои асосиро ( ) дастраси моро номбар мекунад
• $theme-colorsҳамаи рангҳои мавзӯъро номбар мекунад (дар зер нишон дода шудааст)
• $graysтамоми рангҳо ва сояҳои хокистариро номбар мекунад

Дар дохили scss/_variables.scss, шумо тағирёбандаҳои ранги Bootstrap ва харитаи Sass-ро хоҳед ёфт. Ин аст як мисоли $colorsхаритаи 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
);

Илова, нест кардан ё тағир додани арзишҳо дар харита барои нав кардани тарзи истифода шудани онҳо дар бисёр ҷузъҳои дигар. Мутаассифона, дар айни замон, на ҳама ҷузъҳо ин харитаи Sass-ро истифода мебаранд. Навсозиҳои оянда кӯшиш мекунанд, ки инро беҳтар созанд. То он вақт, истифодаи ${color}тағирёбандаҳо ва ин харитаи Sass-ро ба нақша гиред.

Мисол

Ин аст, ки чӣ тавр шумо метавонед инҳоро дар Sass-и худ истифода баред:

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

Синфҳои утилитаҳои ранг ва замина инчунин барои танзим colorва background-colorистифодаи 500арзишҳои ранг дастрасанд.

Истеҳсоли коммуналӣ

Дар v5.1.0 илова карда шудааст

Bootstrap барои ҳар як тағирёбандаи ранг ва утилитаҳо дохил намешавад, аммо шумо метавонед онҳоро худатон бо colorёрии API-и мо ва харитаҳои васеъи Sass дар v5.1.0 иловашуда тавлид кунед.background-color

1. Барои оғоз кардан, боварӣ ҳосил кунед, ки шумо функсияҳо, тағирёбандаҳо, миксинҳо ва утилитаҳои моро ворид кардаед.
2. Функсияи моро истифода баред map-merge-multiple(), то харитаҳои сершумори Sass-ро дар харитаи нав зуд якҷоя кунед.
3. Ин харитаи навро якҷоя кунед, то ҳама гуна утилитаро бо {color}-{level}номи синф васеъ кунед.

Ин аст мисоле, ки утилитаҳои ранги матнро (масалан, .text-purple-500) бо истифода аз қадамҳои боло тавлид мекунад.

@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}Ин барои ҳар ранг ва сатҳ утилитҳои нав тавлид мекунад. Шумо метавонед барои ҳама гуна хидматрасонӣ ва амволи дигар низ ҳамин тавр кунед.