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.
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.scss
fail 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.scss
fail. 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-interval
pembolehubah kami, yang menentukan nilai peratusan berperingkat untuk setiap warna campuran yang kami hasilkan. Lihat scss/_functions.scss
dan scss/_variables.scss
fail 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.
$colors
menyenaraikan semua500
warna asas ( ) kami yang tersedia$theme-colors
menyenaraikan semua warna tema yang dinamakan secara semantik (ditunjukkan di bawah)$grays
menyenaraikan semua warna dan warna kelabu
Dalam scss/_variables.scss
, anda akan menemui pembolehubah warna Bootstrap dan peta Sass. Berikut ialah contoh $colors
peta 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 color
dan background-color
menggunakan nilai 500
warna.
Menjana utiliti
Ditambah dalam v5.1.0
Bootstrap tidak termasuk color
dan background-color
utiliti untuk setiap pembolehubah warna, tetapi anda boleh menjana ini sendiri dengan API utiliti kami dan peta Sass lanjutan kami ditambah dalam v5.1.0.
- Untuk bermula, pastikan anda telah mengimport fungsi, pembolehubah, campuran dan utiliti kami.
- Gunakan
map-merge-multiple()
fungsi kami untuk menggabungkan berbilang peta Sass bersama-sama dengan cepat dalam peta baharu. - 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/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.