in English

Warna

Bootstrap disokong oleh sistem warna yang meluas yang bertemakan gaya dan komponen kami. Ini membolehkan penyesuaian dan pelanjutan yang lebih komprehensif untuk sebarang projek.

Pada halaman ini

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.

utama

Menengah

Kejayaan

bahaya

Amaran

info

Cahaya

Gelap

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.

$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 jambu#d63384

$merah jambu-100

$merah jambu-200

$merah jambu-300

$merah jambu-400

$merah jambu-500

$merah jambu-600

$merah jambu-700

$merah jambu-800

$merah jambu-900

$merah#dc3545

$red-100

$merah-200

$merah-300

$merah-400

$merah-500

$merah-600

$merah-700

$merah-800

$red-900

$oren#fd7e14

$oren-100

$oren-200

$oren-300

$oren-400

$oren-500

$oren-600

$oren-700

$oren-800

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

$cyan#0dcaf0

$cyan-100

$cyan-200

$cyan-300

$cyan-400

$cyan-500

$cyan-600

$cyan-700

$cyan-800

$cyan-900

$kelabu-500#adb5bd

$kelabu-100

$kelabu-200

$kelabu-300

$kelabu-400

$kelabu-500

$kelabu-600

$kelabu-700

$kelabu-800

$kelabu-900

$hitam#000

$putih#F F F

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,
  "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.