สี
Bootstrap รองรับระบบสีที่ครอบคลุมซึ่งกำหนดธีมและองค์ประกอบของเรา ซึ่งช่วยให้ปรับแต่งและขยายได้ครอบคลุมมากขึ้นสำหรับโครงการใดๆ
ธีมสี
เราใช้ชุดย่อยของสีทั้งหมดเพื่อสร้างจานสีที่มีขนาดเล็กลงสำหรับการสร้างแบบแผนชุดสี นอกจากนี้ยังมีให้ใช้งานในรูปแบบตัวแปร Sass และแผนที่ Sass ในscss/_variables.scss
ไฟล์ ของ Bootstrap
สีทั้งหมดนี้มีให้ในแผนที่ Sass, $theme-colors
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
ดูเอกสารแผนที่และลูป Sass ของเราเพื่อดูวิธีแก้ไขสีเหล่านี้
ทุกสี
สี Bootstrap ทั้งหมดมีให้เลือกเป็นตัวแปร Sass และแผนที่ Sass ในscss/_variables.scss
ไฟล์ เพื่อหลีกเลี่ยงขนาดไฟล์ที่เพิ่มขึ้น เราไม่สร้างข้อความหรือคลาสสีพื้นหลังสำหรับแต่ละตัวแปรเหล่านี้ แต่เราเลือกชุดย่อยของสีเหล่านี้สำหรับ จาน สีธีม
อย่าลืมตรวจสอบอัตราส่วนคอนทราสต์ขณะปรับแต่งสี ดังที่แสดงด้านล่าง เราได้เพิ่มอัตราส่วนคอนทราสต์สามสีให้กับสีหลักแต่ละสี แบบหนึ่งสำหรับสีปัจจุบันของสวอตช์ แบบหนึ่งสำหรับตัดกับสีขาว และอีกแบบสำหรับแบบตัดกับสีดำ
หมายเหตุเกี่ยวกับSass
Sass ไม่สามารถสร้างตัวแปรโดยทางโปรแกรมได้ ดังนั้นเราจึงสร้างตัวแปรด้วยตนเองสำหรับทุกเฉดสีและเฉดสี เราระบุค่าจุดกึ่งกลาง (เช่น$blue-500
) และใช้ฟังก์ชันสีที่กำหนดเองเพื่อย้อมสี (ทำให้จางลง) หรือแรเงา (มืดลง) สีของเราผ่านmix()
ฟังก์ชันสี ของ Sass
การใช้mix()
ไม่เหมือนกับlighten()
และdarken()
— แบบเดิมผสมสีที่ระบุกับสีขาวหรือสีดำ ในขณะที่แบบหลังจะปรับเฉพาะค่าความสว่างของแต่ละสีเท่านั้น ผลลัพธ์ที่ได้คือชุดสีที่สมบูรณ์ยิ่งขึ้น ดังที่ แสดงในการสาธิต CodePenนี้
ของเราtint-color()
และshade-color()
ฟังก์ชันใช้mix()
ควบคู่ไปกับ$theme-color-interval
ตัวแปรของเรา ซึ่งระบุค่าเปอร์เซ็นต์แบบก้าวสำหรับสีผสมแต่ละสีที่เราผลิตขึ้น ดูscss/_functions.scss
และscss/_variables.scss
ไฟล์สำหรับซอร์สโค้ดแบบเต็ม
แผนที่สี Sass
ไฟล์ Sass ต้นทางของ Bootstrap มีสามแผนที่เพื่อช่วยให้คุณวนซ้ำรายการสีและค่าฐานสิบหกได้อย่างรวดเร็วและง่ายดาย
$colors
แสดงรายการสีฐาน (500
) ที่มีอยู่ทั้งหมดของเรา$theme-colors
แสดงรายการสีของธีมที่มีชื่อตามความหมายทั้งหมด (แสดงด้านล่าง)$grays
แสดงรายการเฉดสีและเฉดสีเทาทั้งหมด
ภายในscss/_variables.scss
คุณจะพบตัวแปรสีของ Bootstrap และแผนที่ Sass นี่คือตัวอย่าง$colors
แผนที่ 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
);
เพิ่ม ลบ หรือแก้ไขค่าภายในแผนที่เพื่ออัปเดตวิธีการใช้ในองค์ประกอบอื่นๆ มากมาย น่าเสียดาย ณ เวลานี้ ไม่ใช่ทุกองค์ประกอบที่ใช้แผนที่ Sass นี้ การอัปเดตในอนาคตจะพยายามปรับปรุงสิ่งนี้ ก่อนหน้านั้น ให้วางแผนการใช้${color}
ตัวแปรและแผนที่ Sass นี้
ตัวอย่าง
คุณสามารถใช้สิ่งเหล่านี้ใน Sass ของคุณได้อย่างไร:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
นอกจากนี้ยังมีคลาสยูทิลิตี้สีและพื้นหลังcolor
สำหรับการตั้งค่า และbackground-color
การใช้500
ค่าสี