in English

Warna

Bootstrap dirojong ku sistem warna éksténsif anu téma gaya sareng komponén urang. Ieu ngamungkinkeun kustomisasi sareng ekstensi anu langkung lengkep pikeun proyék naon waé.

Dina kaca ieu

Warna téma

Kami nganggo sawaréh sadaya warna pikeun nyiptakeun palet warna anu langkung alit pikeun ngahasilkeun skéma warna, ogé sayogi salaku variabel Sass sareng peta Sass dina scss/_variables.scssfile Bootstrap.

primér

Sekunder

Kasuksésan

Bahaya

Awas

Inpo

Caang

Poek

Sadaya warna ieu sayogi salaku peta Sass $theme-colors,.

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

Pariksa peta Sass kami sareng dokumén loop pikeun kumaha carana ngarobih warna ieu.

Kabéh kelir

Sadaya warna Bootstrap sayogi salaku variabel Sass sareng peta Sass dina scss/_variables.scssfile. Pikeun ngahindarkeun paningkatan ukuran file, kami henteu nyiptakeun téks atanapi kelas warna latar pikeun tiap variabel ieu. Gantina, urang milih sawaréh tina kelir ieu pikeun palette tema .

Pastikeun pikeun ngawas rasio kontras nalika anjeun ngaropea warna. Sapertos anu dipidangkeun di handap, kami parantos nambihan tilu rasio kontras pikeun unggal warna utama-hiji pikeun warna swatch ayeuna, hiji ngalawan bodas, sareng hiji ngalawan hideung.

$biru#0d6efd

$ biru-100

$ bulao-200

$ bulao-300

$ bulao-400

$ bulao-500

$ bulao-600

$ bulao-700

$ bulao-800

$ bulao-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

$ wungu-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

$beureum#dc3545

$ beureum-100

$ beureum-200

$ beureum-300

$ beureum-400

$ beureum-500

$ beureum-600

$ beureum-700

$ beureum-800

$ beureum-900

$jeruk#fd7e14

$ jeruk-100

$ jeruk-200

$ jeruk-300

$ jeruk-400

$ jeruk-500

$ jeruk-600

$ jeruk-700

$ jeruk-800

$ jeruk-900

$konéng#ffc107

$konéng-100

$konéng-200

$ koneng-300

$ koneng-400

$ koneng-500

$ koneng-600

$ koneng-700

$ koneng-800

$ koneng-900

$héjo#198754

$ hejo-100

$ hejo-200

$ hejo-300

$ hejo-400

$ hejo-500

$ hejo-600

$ hejo-700

$ hejo-800

$ hejo-900

$téh#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

$ kulawu-500#adb5bd

$ kulawu-100

$ kulawu-200

$ kulawu-300

$ kulawu-400

$ kulawu-500

$ kulawu-600

$ kulawu-700

$ kulawu-800

$ kulawu-900

$hideung#000

$bodas#fff

Catetan dina Sass

Sass teu tiasa sacara terprogram ngahasilkeun variabel, janten kami nyiptakeun variabel sacara manual pikeun unggal warna sareng ngiuhan sorangan. Urang nangtukeun nilai midpoint (misalna, $blue-500) sarta ngagunakeun fungsi warna custom mun tint (lighten) atawa ngiuhan (poekeun) kelir urang via mix()fungsi warna Sass urang.

Ngagunakeun mix()teu sarua lighten()jeung darken()- urut blends warna nu tangtu jeung bodas atawa hideung, sedengkeun dimungkinkeun ngan nyaluyukeun nilai lightness unggal warna. Hasilna mangrupikeun suite warna anu langkung lengkep, sapertos anu dipidangkeun dina demo CodePen ieu .

Kami tint-color()sareng shade-color()fungsi dianggo mix()sareng $theme-color-intervalvariabel kami, anu netepkeun nilai persentase stepped pikeun tiap warna campuran anu kami hasilkeun. Tempo scss/_functions.scssjeung scss/_variables.scssfile pikeun kode sumber pinuh.

Peta Warna Sass

File Sass sumber Bootstrap kalebet tilu peta pikeun ngabantosan anjeun gancang sareng gampang ngagulung kana daptar warna sareng nilai hex na.

$colorsdaptar sadaya 500warna dasar kami () anu sayogi
$theme-colorsdaptar sadaya warna téma anu dingaranan sacara semantik (ditémbongkeun di handap)
$graysdaptar sadaya warna sareng nuansa kulawu

Dina scss/_variables.scss, anjeun bakal mendakan variabel warna Bootstrap sareng peta Sass. Ieu 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
);

Tambihkeun, piceun, atanapi robih niléy dina peta pikeun ngapdet kumaha aranjeunna dianggo dina seueur komponén sanés. Hanjakalna dina waktos ayeuna, henteu unggal komponén ngagunakeun peta Sass ieu. Pembaruan anu bakal datang bakal narékahan pikeun ningkatkeun ieu. Dugi ka waktos éta, rencanana ngagunakeun ${color}variabel sareng peta Sass ieu.

Contona

Ieu kumaha anjeun tiasa nganggo ieu dina Sass anjeun:

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

Kelas utilitas warna sareng latarcolor ogé sayogi pikeun nyetél sareng background-colornganggo 500nilai warna.

Generating Utiliti

Ditambahkeun dina v5.1.0

Bootstrap teu kaasup colorjeung background-colorutilitas pikeun unggal variabel warna, tapi anjeun bisa ngahasilkeun ieu sorangan kalawan API utilitas urang jeung peta Sass nambahan kami ditambahkeun dina v5.1.0.

Pikeun ngamimitian, pastikeun anjeun ngimpor fungsi, variabel, mixin, sareng utilitas kami.
Anggo map-merge-multiple()fungsi kami pikeun gancang ngahijikeun sababaraha peta Sass dina peta anyar.
Gabungkeun peta gabungan anyar ieu pikeun ngalegaan utilitas anu nganggo {color}-{level}nami kelas.

Ieu conto anu ngahasilkeun utilitas warna téks (contona, .text-purple-500) nganggo léngkah-léngkah di luhur.

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

Ieu bakal ngahasilkeun .text-{color}-{level}utilitas anyar pikeun unggal warna sareng tingkat. Anjeun tiasa ngalakukeun hal anu sami pikeun utilitas sareng harta anu sanés ogé.