in English

Warna

Bootstrap didukung oleh sistem warna ekstensif yang bertemakan gaya dan komponen kita. Ini memungkinkan penyesuaian dan ekstensi yang lebih komprehensif untuk proyek apa pun.

Di halaman ini

Warna tema

Kami menggunakan subset dari semua warna untuk membuat palet warna yang lebih kecil untuk menghasilkan skema warna, juga tersedia sebagai variabel Sass dan peta Sass di scss/_variables.scssfile Bootstrap.

Utama

Sekunder

Kesuksesan

Bahaya

Peringatan

Info

Lampu

Gelap

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

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

Lihat peta Sass dan dokumen loop kami untuk cara memodifikasi warna-warna ini.

Semua warna

Semua warna Bootstrap tersedia sebagai variabel Sass dan peta Sass dalam scss/_variables.scssfile. Untuk menghindari peningkatan ukuran file, kami tidak membuat kelas teks atau warna latar belakang untuk setiap variabel ini. Sebagai gantinya, kami memilih subset dari warna-warna ini untuk palet tema .

Pastikan untuk memantau rasio kontras saat Anda menyesuaikan warna. Seperti yang ditunjukkan di bawah ini, kami telah menambahkan tiga rasio kontras ke masing-masing warna utama—satu untuk warna swatch saat ini, satu untuk melawan putih, dan satu untuk melawan hitam.

$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

$ungu-400

$ungu-500

$ungu-600

$ungu-700

$ungu-800

$ungu-900

$merah muda#d63384

$merah muda-100

$merah muda-200

$merah muda-300

$merah muda-400

$merah muda-500

$merah muda-600

$merah muda-700

$merah muda-800

$merah muda-900

$merah#dc3545

$merah-100

$merah-200

$merah-300

$merah-400

$merah-500

$merah-600

$merah-700

$merah-800

$merah-900

$oranye#fd7e14

$oranye-100

$oranye-200

$oranye-300

$oranye-400

$oranye-500

$oranye-600

$oranye-700

$oranye-800

$oranye-900

$kuning#ffc107

$kuning-100

$kuning-200

$kuning-300

$kuning-400

$kuning-500

$kuning-600

$kuning-700

$kuning-800

$kuning-900

$hijau#198754

$hijau-100

$hijau-200

$hijau-300

$hijau-400

$hijau-500

$hijau-600

$hijau-700

$hijau-800

$hijau-900

$teal#20c997

$teal-100

$teal-200

$teal-300

$teal-400

$teal-500

$teal-600

$teal-700

$teal-800

$teal-900

$sian#0dcaf0

$sian-100

$cyan-200

$cyan-300

$sian-400

$sian-500

$cyan-600

$cyan-700

$cyan-800

$cyan-900

$abu-500#adb5bd

$abu-abu-100

$abu-200

$abu-300

$abu-400

$abu-500

$abu-600

$abu-700

$abu-800

$abu-900

$hitam#000

$putih#fff

Catatan tentang Sass

Sass tidak dapat menghasilkan variabel secara terprogram, jadi kami membuat variabel secara manual untuk setiap warna dan bayangan sendiri. Kami menentukan nilai titik tengah (misalnya, $blue-500) dan menggunakan fungsi warna khusus untuk mewarnai (meringankan) atau menaungi (menggelapkan) warna kami melalui mix()fungsi warna Sass.

Menggunakan mix()tidak sama dengan lighten()dan darken()—yang pertama memadukan warna yang ditentukan dengan putih atau hitam, sedangkan yang kedua hanya menyesuaikan nilai kecerahan setiap warna. Hasilnya adalah rangkaian warna yang jauh lebih lengkap, seperti yang ditunjukkan dalam demo CodePen ini .

tint-color()Fungsi dan kami shade-color()digunakan mix()bersama $theme-color-intervalvariabel kami, yang menentukan nilai persentase bertahap untuk setiap warna campuran yang kami hasilkan. Lihat scss/_functions.scssdan scss/_variables.scssfile untuk kode sumber lengkap.

Peta Sass Warna

File Sass sumber Bootstrap menyertakan tiga peta untuk membantu Anda dengan cepat dan mudah mengulang daftar warna dan nilai heksanya.

$colorsmencantumkan semua 500warna dasar ( ) kami yang tersedia
$theme-colorsdaftar semua warna tema yang diberi nama semantik (ditampilkan di bawah)
$graysdaftar semua warna dan nuansa abu-abu

Di dalam scss/_variables.scss, Anda akan menemukan variabel warna Bootstrap dan peta Sass. Berikut adalah contoh $colorspeta 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
);

Tambahkan, hapus, atau ubah nilai di dalam peta untuk memperbarui cara penggunaannya di banyak komponen lainnya. Sayangnya saat ini tidak semua komponen menggunakan map Sass ini. Pembaruan di masa mendatang akan berusaha untuk memperbaiki ini. Sampai saat itu, rencanakan penggunaan ${color}variabel dan peta Sass ini.

Contoh

Inilah cara Anda dapat menggunakan ini di Sass Anda:

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

Kelas utilitas warna dan latar belakang juga tersedia untuk mengatur colordan background-colormenggunakan nilai 500warna.