Өнгө
Bootstrap нь бидний хэв маяг, бүрэлдэхүүн хэсгүүдийн сэдэвчилсэн өнгөт системээр дэмжигддэг. Энэ нь аливаа төсөлд илүү өргөн хүрээтэй тохируулга, өргөтгөл хийх боломжийг олгодог.
Сэдвийн өнгө
Бид өнгөний схемийг үүсгэхийн тулд жижиг өнгөт палитр үүсгэхийн тулд бүх өнгөний дэд багцыг ашигладаг бөгөөд үүнийг Sass хувьсагч болон Bootstrap scss/_variables.scss
файл дахь Sass газрын зураг хэлбэрээр ашиглах боломжтой.
Эдгээр бүх өнгө нь Sass газрын зураг, $theme-colors
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Эдгээр өнгийг хэрхэн өөрчлөх талаар манай Sass газрын зураг, гогцооны баримт бичгүүдийг үзнэ үү .
Бүх өнгө
Бүх Bootstrap өнгийг Sass хувьсагч болон scss/_variables.scss
файл дахь Sass газрын зураг хэлбэрээр авах боломжтой. Файлын хэмжээг нэмэгдүүлэхээс зайлсхийхийн тулд бид эдгээр хувьсагч бүрт текст эсвэл дэвсгэр өнгөний анги үүсгэдэггүй. Үүний оронд бид загвар палитрт эдгээр өнгөний дэд багцыг сонгоно .
Өнгийг өөрчлөхдөө тодосгогч харьцааг хянахаа мартуузай. Доор үзүүлсэн шиг бид үндсэн өнгө тус бүр дээр гурван тодосгогч харьцааг нэмсэн: нэг нь дээжийн одоогийн өнгө, нэг нь цагаан, нөгөө нь хар өнгөтэй байна.
Сасс дээрх тэмдэглэл
Sass программчлан хувьсагч үүсгэх боломжгүй тул бид өөрсдийн гараар өнгө, сүүдэр бүрт хувьсагч үүсгэсэн. Бид дунд цэгийн утгыг (жишээ нь, $blue-500
) зааж өгч, Sass-ийн өнгөний функцээр дамжуулан өөрсдийн өнгийг будах (цайруулах) эсвэл сүүдэрлэх (харанхуй болгох) тулд тусгай mix()
өнгөт функцуудыг ашигладаг.
Ашиглах mix()
нь ижил биш бөгөөд lighten()
эхнийх darken()
нь заасан өнгийг цагаан эсвэл хар өнгөтэй хольдог бол сүүлийнх нь зөвхөн өнгө бүрийн цайвар байдлын утгыг тохируулдаг. Үр дүн нь CodePen-ийн үзүүлэн дээр үзүүлсэн шиг илүү бүрэн өнгөт багц юм .
Бидний tint-color()
болон shade-color()
функцууд нь бидний үйлдвэрлэсэн холимог өнгө бүрийн шаталсан хувийн утгыг тодорхойлдог хувьсагчийн хажууд mix()
ашиглагддаг . Бүрэн эх кодыг болон файлуудаас $theme-color-interval
үзнэ үү .scss/_functions.scss
scss/_variables.scss
Өнгөт Sass газрын зураг
Bootstrap-ийн эх сурвалж Sass файлууд нь өнгөний жагсаалт болон тэдгээрийн зургаан өнцөгт утгыг хурдан бөгөөд хялбар эргүүлэхэд туслах гурван газрын зургийг агуулдаг.
$colors
500
бидний боломжтой бүх үндсэн ( ) өнгийг жагсаав$theme-colors
Бүх утгын нэрлэсэн сэдвийн өнгийг жагсаав (доор харуулав)$grays
саарал өнгөний бүх өнгө, сүүдрийг жагсаав
Дотор scss/_variables.scss
нь та Bootstrap-ийн өнгөт хувьсагч болон Sass газрын зургийг олох болно. $colors
Сасс газрын зургийн жишээ энд байна :
$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
);
Газрын зураг дээрх утгуудыг нэмэх, хасах эсвэл өөр олон бүрэлдэхүүн хэсгүүдэд хэрхэн ашиглаж байгааг шинэчлэх. Харамсалтай нь энэ үед бүх бүрэлдэхүүн хэсэг нь энэ Сасс газрын зургийг ашигладаггүй. Ирээдүйн шинэчлэлтүүд үүнийг сайжруулахыг хичээх болно. Тэр болтол ${color}
хувьсагч болон энэхүү Сасс газрын зургийг ашиглахаар төлөвлөж байгаарай.
Жишээ
Та эдгээрийг Sass дээрээ хэрхэн ашиглаж болохыг эндээс үзнэ үү:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
Өнгөний утгыг тохируулах , ашиглахад зориулсан өнгө , дэвсгэр хэрэглүүрийн ангиуд бас байдаг .color
background-color
500
Хэрэглээ үүсгэх
5.1.0 хувилбар дээр нэмсэн
Bootstrap нь өнгөт хувьсагч бүрийн хэрэгслүүд color
болон хэрэгслүүдийг агуулдаггүй ч та манай API хэрэглүүр болон v5.1.0-д нэмсэн өргөтгөсөн Sass газрын зургийн background-color
тусламжтайгаар эдгээрийг өөрөө үүсгэж болно .
- Эхлэхийн тулд та манай функц, хувьсагч, холимог болон хэрэгслүүдийг импортолсон эсэхээ шалгаарай.
map-merge-multiple()
Олон Sass газрын зургийг шинэ газрын зураг дээр хурдан нэгтгэхийн тулд манай функцийг ашиглана уу.{color}-{level}
Ангийн нэртэй дурын хэрэгслийг өргөтгөхийн тулд энэ шинэ хосолсон газрын зургийг нэгтгэнэ үү .
.text-purple-500
Дээрх алхмуудыг ашиглан текстийн өнгөт хэрэглүүр (жишээ нь, ) үүсгэдэг жишээ энд байна.
@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";
Энэ нь .text-{color}-{level}
өнгө, түвшин бүрт шинэ хэрэгслүүд үүсгэх болно. Та бусад хэрэгсэл, үл хөдлөх хөрөнгийн хувьд ч мөн адил зүйлийг хийж болно.