in English

warna

Bootstrap didhukung dening sistem werna ekstensif sing tema gaya lan komponen kita. Iki mbisakake kustomisasi lan ekstensi sing luwih lengkap kanggo proyek apa wae.

Ing kaca iki

Warna tema

Kita nggunakake subset kabeh warna kanggo nggawe palet warna sing luwih cilik kanggo ngasilake skema warna, uga kasedhiya minangka variabel Sass lan peta Sass ing scss/_variables.scssfile Bootstrap.

utami

Sekunder

Sukses

bebaya

Pènget

Info

cahya

Peteng

Kabeh werna iki kasedhiya minangka peta Sass $theme-colors,.

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

Priksa peta Sass lan puteran docs kanggo carane ngowahi werna iki.

Kabeh werna

Kabeh werna Bootstrap kasedhiya minangka variabel Sass lan peta Sass ing scss/_variables.scssfile. Kanggo ngindhari ukuran file sing tambah akeh, kita ora nggawe kelas warna teks utawa latar mburi kanggo saben variabel kasebut. Nanging, kita milih subset saka werna kasebut kanggo palet tema .

Priksa manawa sampeyan ngawasi rasio kontras nalika ngatur warna. Kaya sing dituduhake ing ngisor iki, kita wis nambahake telung rasio kontras kanggo saben warna utama-siji kanggo warna swatch saiki, siji kanggo putih, lan siji kanggo ireng.

$biru#0d6efd

$biru-100

$biru-200

$biru-300

$ biru-400

$ biru-500

$ biru-600

$ biru-700

$ biru-800

$biru-900

$ indigo#6610f2

$ indigo-100

$ indigo-200

$ indigo-300

$ indigo-400

$ indigo-500

$ indigo-600

$ indigo-700

$ indigo-800

$ indigo-900

$ungu#6f42c1

$ungu-100

$ungu-200

$ungu-300

$ wungu-400

$ wungu-500

$ wungu-600

$ wungu-700

$ wungu-800

$ wungu-900

$pink#d63384

$pink-100

$pink-200

$pink-300

$pink-400

$pink-500

$pink-600

$pink-700

$pink-800

$pink-900

$abang#dc3545

$abang-100

$abang-200

$abang-300

$abang-400

$abang-500

$abang-600

$abang-700

$abang-800

$abang-900

$oranye#fd7e14

$orange-100

$orange-200

$orange-300

$orange-400

$orange-500

$orange-600

$orange-700

$orange-800

$orange-900

$kuning#ffc107

$ kuning-100

$ kuning-200

$ kuning-300

$ kuning-400

$ kuning-500

$ kuning-600

$ kuning-700

$ kuning-800

$ kuning-900

$ijo#198754

$ ijo-100

$ ijo-200

$ ijo-300

$ ijo-400

$ ijo-500

$ ijo-600

$ ijo-700

$ ijo-800

$ ijo-900

$tegal#20c997

$teal-100

$teal-200

$teal-300

$ teal-400

$teal-500

$teal-600

$ teal-700

$ teal-800

$ teal-900

$cyan#0dcaf0

$ cyan-100

$ cyan-200

$ cyan-300

$ cyan-400

$ cyan-500

$ cyan-600

$ cyan-700

$ cyan-800

$ cyan-900

$ abu-abu-500#adb5bd

$abu-100

$ abu-abu-200

$ abu-abu-300

$ abu-abu-400

$ abu-abu-500

$ abu-abu-600

$ abu-abu-700

$ abu-abu-800

$ abu-abu-900

$ireng#000

$putih#fff

Cathetan babagan Sass

Sass ora bisa ngasilake variabel kanthi program, mula kita nggawe variabel kanthi manual kanggo saben warna lan iyub-iyub. Kita nemtokake nilai midpoint (contone, $blue-500) lan nggunakake fungsi werna adat kanggo tint (entheng) utawa shade (darken) werna liwat mix()fungsi werna Sass.

Nggunakake mix()ora padha karo lighten()lan darken()- mantan nyampur warna sing ditemtokake karo putih utawa ireng, dene sing terakhir mung nyetel nilai cahya saben werna. Asil kasebut minangka warna sing luwih lengkap, kaya sing ditampilake ing demo CodePen iki .

Kita tint-color()lan shade-color()fungsi digunakake mix()bebarengan karo variabel kita $theme-color-interval, sing nemtokake nilai persentase langkah kanggo saben warna campuran sing diasilake. Waca scss/_functions.scsslan scss/_variables.scssfile kanggo kode sumber lengkap.

Peta Warna Sass

File Sass sumber Bootstrap kalebu telung peta kanggo mbantu sampeyan kanthi cepet lan gampang ngubengi dhaptar warna lan nilai hex.

$colorsdhaptar kabeh werna dhasar ( 500) sing kasedhiya
$theme-colorsdhaptar kabeh warna tema kanthi jeneng semantik (katon ing ngisor iki)
$graysdhaptar kabeh tints lan mbandingake saka werna abu-abu

Ing scss/_variables.scss, sampeyan bakal nemokake variabel warna Bootstrap lan peta Sass. Punika conto $colorspeta 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
);

Nambah, mbusak, utawa ngowahi nilai ing peta kanggo nganyari cara digunakake ing akeh komponen liyane. Sayange ing wektu iki, ora saben komponen nggunakake peta Sass iki. Nganyari mbesuk bakal ngupayakake supaya bisa nambah. Nganti saiki, rencana nggunakake ${color}variabel lan peta Sass iki.

Tuladha

Mangkene carane sampeyan bisa nggunakake iki ing Sass:

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

Kelas sarana warna lan latarcolor mburi uga kasedhiya kanggo nyetel lan background-colornggunakake 500nilai warna.

Utilitas ngasilake

Ditambahake ing v5.1.0

Bootstrap ora kalebu colorlan background-colorutilitas kanggo saben variabel warna, nanging sampeyan bisa ngasilake dhewe nganggo API sarana lan peta Sass sing ditambahake ing v5.1.0.

Kanggo miwiti, priksa manawa sampeyan wis ngimpor fungsi, variabel, campuran, lan utilitas.
Gunakake map-merge-multiple()fungsi kita kanggo nggabungake macem-macem peta Sass kanthi cepet ing peta anyar.
Gabung peta gabungan anyar iki kanggo ngluwihi sembarang sarana karo {color}-{level}jeneng kelas.

Iki conto sing ngasilake utilitas warna teks (contone, .text-purple-500) nggunakake langkah ing ndhuwur.

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

Iki bakal ngasilake .text-{color}-{level}utilitas anyar kanggo saben warna lan level. Sampeyan uga bisa nindakake perkara sing padha kanggo sarana lan properti liyane.