Warna

Warna tema

Kami menggunakan subset semua warna untuk mencipta palet warna yang lebih kecil untuk menjana skema warna, juga tersedia sebagai pembolehubah Sass dan peta Sass dalam scss/_variables.scssfail Bootstrap.

Semua warna ini boleh didapati sebagai peta Sass, $theme-colors.

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

Lihat dokumen peta dan gelung Sass kami untuk cara mengubah suai warna ini.

Semua warna

Semua warna Bootstrap tersedia sebagai pembolehubah Sass dan peta Sass dalam scss/_variables.scssfail. Untuk mengelakkan peningkatan saiz fail, kami tidak membuat kelas teks atau warna latar belakang untuk setiap pembolehubah ini. Sebaliknya, kami memilih subset warna ini untuk palet tema .

Pastikan anda memantau nisbah kontras semasa anda menyesuaikan warna. Seperti yang ditunjukkan di bawah, kami telah menambahkan tiga nisbah kontras pada setiap warna utama—satu untuk warna semasa swatch, satu untuk melawan putih dan satu untuk melawan hitam.

Nota tentang Sass

Sass tidak boleh menjana pembolehubah secara pemrograman, jadi kami membuat pembolehubah secara manual untuk setiap warna dan lorek sendiri. Kami menentukan nilai titik tengah (cth, $blue-500) dan menggunakan fungsi warna tersuai untuk mewarna (mencerahkan) atau mewarnai (menggelapkan) warna kami melalui mix()fungsi warna Sass.

Penggunaan mix()tidak sama dengan lighten()dan darken()—yang pertama menggabungkan warna yang ditentukan dengan putih atau hitam, manakala yang terakhir hanya melaraskan nilai kecerahan setiap warna. Hasilnya ialah rangkaian warna yang lebih lengkap, seperti yang ditunjukkan dalam demo CodePen ini .

Fungsi kami tint-color()dan shade-color()digunakan mix()bersama $theme-color-intervalpembolehubah kami, yang menentukan nilai peratusan berperingkat untuk setiap warna campuran yang kami hasilkan. Lihat scss/_functions.scssdan scss/_variables.scssfail untuk kod sumber penuh.

Peta warna Sass

Fail Sass sumber Bootstrap termasuk tiga peta untuk membantu anda dengan cepat dan mudah melingkari senarai warna dan nilai heksnya.

• $colorsmenyenaraikan semua 500warna asas ( ) kami yang tersedia
• $theme-colorsmenyenaraikan semua warna tema yang dinamakan secara semantik (ditunjukkan di bawah)
• $graysmenyenaraikan semua warna dan warna kelabu

Dalam scss/_variables.scss, anda akan menemui pembolehubah warna Bootstrap dan peta Sass. Berikut ialah contoh $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
);

Tambah, alih keluar atau ubah suai nilai dalam peta untuk mengemas kini cara ia digunakan dalam banyak komponen lain. Malangnya pada masa ini, tidak semua komponen menggunakan peta Sass ini. Kemas kini masa hadapan akan berusaha untuk memperbaiki perkara ini. Sehingga itu, rancang untuk menggunakan ${color}pembolehubah dan peta Sass ini.

Contoh

Begini cara anda boleh menggunakan ini dalam Sass anda:

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

Kelas utiliti warna dan latar belakang juga tersedia untuk menetapkan colordan background-colormenggunakan nilai 500warna.

Menjana utiliti

Bootstrap tidak termasuk colordan background-colorutiliti untuk setiap pembolehubah warna, tetapi anda boleh menjana ini sendiri dengan API utiliti kami dan peta Sass lanjutan kami ditambah dalam v5.1.0.

1. Untuk bermula, pastikan anda telah mengimport fungsi, pembolehubah, campuran dan utiliti kami.
2. Gunakan map-merge-multiple()fungsi kami untuk menggabungkan berbilang peta Sass bersama-sama dengan cepat dalam peta baharu.
3. Gabungkan peta gabungan baharu ini untuk melanjutkan sebarang utiliti dengan {color}-{level}nama kelas.

Berikut ialah contoh yang menjana utiliti warna teks (cth, .text-purple-500) menggunakan langkah di atas.

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

Ini akan menjana .text-{color}-{level}utiliti baharu untuk setiap warna dan tahap. Anda boleh melakukan perkara yang sama untuk mana-mana utiliti dan harta lain juga.