Mtundu

Bootstrap imathandizidwa ndi mitundu yambiri yamitundu yomwe imakhala ndi masitayelo athu ndi zida zathu. Izi zimathandizira kusinthika kwatsatanetsatane komanso kukulitsa projekiti iliyonse.

Patsamba ili

Mitundu yamutu

Timagwiritsa ntchito kagawo kakang'ono kamitundu yonse kuti tipange utoto wocheperako popanga masikimu amitundu, omwe amapezekanso ngati mitundu ya Sass ndi mapu a Sass mufayilo ya Bootstrap scss/_variables.scss.

Pulayimale

Sekondale

Kupambana

Ngozi

Chenjezo

Zambiri

Kuwala

Chakuda

Mitundu yonseyi ikupezeka ngati mapu a Sass $theme-colors,.

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

Onani mamapu athu a Sass ndi loops docs momwe mungasinthire mitundu iyi.

Mitundu yonse

Mitundu yonse ya Bootstrap ilipo ngati mitundu ya Sass ndi mapu a Sass mufayilo scss/_variables.scss. Kuti tipewe kukula kwa mafayilo, sitipanga makalasi amtundu wamtundu kapena wakumbuyo pamitundu yonseyi. M'malo mwake, timasankha kagawo kakang'ono ka mitundu iyi papaleti yamutu .

Onetsetsani kuti mukuyang'anira kusiyanitsa kosiyana pamene mukusintha mitundu. Monga tawonetsera m'munsimu, tawonjeza mitundu itatu yosiyana ku mtundu uliwonse waukulu—imodzi yamitundu yaposachedwa ya mawotchi, ina yotsutsa yoyera, ndi ina yakuda.

$buluu#0d6fd

$ blue-100

$ buluu-200

$ buluu-300

$ buluu-400

$ buluu-500

$ buluu-600

$ buluu-700

$ buluu-800

$ buluu-900

$indigo#6610f2

$ indigo-100

$ indigo-200

$ indigo-300

$ indigo-400

$ indigo-500

$ 600

$ indigo-700

$ indigo-800

$ indigo-900

$ wofiirira#6f42c1

$ wofiirira-100

$ wofiirira-200

$ wofiirira-300

$ wofiirira-400

$ wofiirira-500

$ wofiirira-600

$ wofiirira-700

$ wofiirira-800

$ wofiirira-900

$pinki#d63384

$ pinki-100

$ 200 pinki

$ 300 pinki

$ 400 pinki

$ 500 pinki

$ 600 pinki

$ 700 pinki

$ 800 pinki

$ 900 pinki

$wofiira#dc3545

$ red-100

$ red-200

$ red-300

$ 400

$ red-500

$ 600

$ 700

$ 800

$ 900

$orange#fd7e14

$ lalanje-100

$ lalanje-200

$ lalanje-300

$ lalanje-400

$ lalanje-500

$ lalanje-600

$ lalanje-700

$ lalanje-800

$ lalanje-900

$chikasu#ffc107

$ yellow-100

$ chikasu-200

$ chikasu-300

$ chikasu-400

$ chikasu-500

$ chikasu-600

$ chikasu-700

$ chikasu-800

$ chikasu-900

$ wobiriwira#198754

$ wobiriwira-100

$ wobiriwira-200

$ wobiriwira-300

$ wobiriwira-400

$ wobiriwira-500

$ wobiriwira-600

$ 700

$ 800

$ wobiriwira-900

$tala#20c997

$ 100

$ 200

$ 300

$ 400

$ 500

$ 600

$ 700

$ 800

$ 900

$zonse#0dcaf0

$ 100

$ 200

$ 300

$ 400

$ 500

$ 600

$ 700

$ 800

$ 900

$ imvi-500#adb5bd

$ grey-100

$ imvi-200

$ imvi-300

$ grey-400

$ imvi-500

$ 600

$ 700

$ 800

$ imvi-900

$wakuda#000

$ woyera#fff

Zolemba pa Sass

Sass sangathe kupanga zosinthika mwadongosolo, chifukwa chake tidapanga zosinthika patokha ndi mthunzi uliwonse. Timatchula mtengo wapakati (mwachitsanzo, $blue-500) ndikugwiritsa ntchito mitundu yamitundu kuti tiunikire (kuwalitsa) kapena kutidetsa (kuda) mitundu yathu kudzera pamitundu ya Sass mix().

Kugwiritsira ntchito mix()sikufanana lighten()ndi darken()—choyambacho chimasakaniza mtundu wotchulidwawo ndi woyera kapena wakuda, pamene chotsiriziracho chimangosintha kupepuka kwa mtundu uliwonse. Zotsatira zake zimakhala zamitundu yambiri, monga momwe ziwonetsedwera mu chiwonetsero cha CodePen ichi .

Zathu tint-color()ndi shade-color()ntchito zimagwiritsa ntchito mix()limodzi ndi $theme-color-intervalkusintha kwathu, komwe kumatanthawuza kuchuluka kwa mtengo wamtundu uliwonse womwe timapanga. Onani scss/_functions.scssndi scss/_variables.scssmafayilo amtundu wathunthu.

Mapu amtundu wa Sass

Mafayilo a Sass a Bootstrap ali ndi mamapu atatu kuti akuthandizeni mwachangu komanso mosavuta kuzungulira mndandanda wamitundu ndi ma hex ake.

$colorsimatchula mitundu yathu yonse yopezeka ( 500)
$theme-colorsimalemba mitundu yonse yamutu wamutu (yowonetsedwa pansipa)
$graysamalemba mitundu yonse yamitundu ndi imvi

Mkati scss/_variables.scss, mupeza mitundu yamitundu ya Bootstrap ndi mapu a Sass. Nachi chitsanzo cha $colorsmapu a Sass:

$colors: (
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "black":      $black,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
);

Onjezani, chotsani, kapena sinthani zinthu zomwe zili pamapu kuti zisinthe momwe zimagwiritsidwira ntchito m'zigawo zina zambiri. Tsoka ilo panthawiyi, sizinthu zonse zomwe zimagwiritsa ntchito mapu a Sass. Zosintha zamtsogolo zidzayesetsa kukonza izi. Mpaka pamenepo, konzekerani kugwiritsa ntchito ${color}zosinthika ndi mapu a Sass awa.

Chitsanzo

Umu ndi momwe mungagwiritsire ntchito izi mu Sass yanu:

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

Makasitomala amtundu ndi zakumbuyo amapezekanso pakukhazikitsa colorndikugwiritsa background-colorntchito 500mitundu yamitundu.

Kupanga zida

Yowonjezedwa mu v5.1.0

Bootstrap sichiphatikiza colorndi background-colorzofunikira pamitundu iliyonse, koma mutha kupanga nokha ndi API yathu yogwiritsira ntchito komanso mamapu athu owonjezera a Sass mu v5.1.0.

Kuti muyambe, onetsetsani kuti mwatumiza kunja ntchito zathu, zosintha, zosakaniza, ndi zofunikira.
Gwiritsani map-merge-multiple()ntchito ntchito yathu kuphatikiza mamapu angapo a Sass pamodzi pamapu atsopano.
Gwirizanitsani mapu ophatikizidwawa kuti muwonjezere zofunikira zilizonse ndi {color}-{level}dzina lakalasi.

Nachi chitsanzo chomwe chimapanga zida zamitundu yamalemba (mwachitsanzo, .text-purple-500) pogwiritsa ntchito njira zomwe zili pamwambapa.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@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";

Izi zipanga zida zatsopano .text-{color}-{level}zamtundu uliwonse komanso mulingo uliwonse. Mutha kuchitanso chimodzimodzi pazinthu zina zilizonse komanso katundu.