Үндсэн агуулга руу шилжих Docs навигаци руу алгасах
in English

Өнгө

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 газрын зураг хэлбэрээр авах боломжтой. Файлын хэмжээг нэмэгдүүлэхээс зайлсхийхийн тулд бид эдгээр хувьсагч бүрт текст эсвэл дэвсгэр өнгөний анги үүсгэдэггүй. Үүний оронд бид загвар палитрт эдгээр өнгөний дэд багцыг сонгоно .

Өнгийг өөрчлөхдөө тодосгогч харьцааг хянахаа мартуузай. Доор үзүүлсэн шиг бид үндсэн өнгө тус бүр дээр гурван тодосгогч харьцааг нэмсэн: нэг нь дээжийн одоогийн өнгө, нэг нь цагаан, нөгөө нь хар өнгөтэй байна.

$цэнхэр#0d6efd
цэнхэр-100 доллар
цэнхэр-200 доллар
цэнхэр-300 доллар
цэнхэр-400 доллар
цэнхэр-500 доллар
цэнхэр-600 доллар
цэнхэр-700 доллар
цэнхэр-800 доллар
цэнхэр-900 доллар
$индиго#6610f2
$ индиго-100
Индиго-200 доллар
Индиго-300 доллар
Индиго-400 доллар
Индиго-500 доллар
Индиго-600 доллар
Индиго-700 доллар
Индиго-800 доллар
Индиго-900 доллар
$ нил ягаан#6f42c1
ягаан - 100 доллар
Нил ягаан - 200 доллар
Нил ягаан - 300 доллар
Нил ягаан - 400 доллар
Нил ягаан - 500 доллар
Нил ягаан - 600 доллар
Нил ягаан - 700 доллар
Нил ягаан - 800 доллар
Нил ягаан - 900 доллар
$ягаан#d63384
ягаан-100 доллар
ягаан-200 доллар
ягаан-300 доллар
ягаан-400 доллар
ягаан-500 доллар
ягаан-600 доллар
ягаан-700 доллар
ягаан-800 доллар
ягаан-900 доллар
$ улаан#dc3545
улаан-100 доллар
улаан-200 доллар
улаан-300 доллар
улаан-400 доллар
улаан-500 доллар
улаан-600 доллар
улаан-700 доллар
улаан-800 доллар
улаан-900 доллар
$ улбар шар#fd7e14
улбар шар-100 доллар
улбар шар-200 доллар
улбар шар-300 доллар
улбар шар-400 доллар
улбар шар - 500 доллар
улбар шар-600 доллар
улбар шар-700 доллар
улбар шар-800 доллар
улбар шар-900 доллар
$ шар#ffc107
шар-100 доллар
шар-200 доллар
шар-300 доллар
шар-400 доллар
шар-500 доллар
шар-600 доллар
шар-700 доллар
шар-800 доллар
шар-900 доллар
$ногоон#198754
ногоон-100 доллар
ногоон-200 доллар
ногоон-300 доллар
ногоон-400 доллар
ногоон-500 доллар
ногоон-600 доллар
ногоон-700 доллар
ногоон-800 доллар
ногоон-900 доллар
$ цайвар#20c997
$ цайвар-100
200 доллар
300 доллар
400 доллар
500 доллар
600 доллар
700 доллар
800 доллар
900 доллар
$цян#0dcaf0
циан-100 доллар
циан-200 доллар
цэнхэр-300 доллар
циан-400 доллар
циан-500 доллар
циан-600 доллар
циан-700 доллар
цэнхэр-800 доллар
циан-900 доллар
саарал-500 доллар#adb5bd
$ саарал-100
саарал-200 доллар
саарал-300 доллар
саарал-400 доллар
саарал-500 доллар
саарал-600 доллар
саарал-700 доллар
саарал-800 доллар
саарал-900 доллар
$хар#000
$цагаан#fff

Сасс дээрх тэмдэглэл

Sass программчлан хувьсагч үүсгэх боломжгүй тул бид өөрсдийн гараар өнгө, сүүдэр бүрт хувьсагч үүсгэсэн. Бид дунд цэгийн утгыг (жишээ нь, $blue-500) зааж өгч, Sass-ийн өнгөний функцээр дамжуулан өөрсдийн өнгийг будах (цайруулах) эсвэл сүүдэрлэх (харанхуй болгох) тулд тусгай mix()өнгөт функцуудыг ашигладаг.

Ашиглах mix()нь ижил биш бөгөөд lighten()эхнийх darken()нь заасан өнгийг цагаан эсвэл хар өнгөтэй хольдог бол сүүлийнх нь зөвхөн өнгө бүрийн цайвар байдлын утгыг тохируулдаг. Үр дүн нь CodePen-ийн үзүүлэн дээр үзүүлсэн шиг илүү бүрэн өнгөт багц юм .

Бидний tint-color()болон shade-color()функцууд нь бидний үйлдвэрлэсэн холимог өнгө бүрийн шаталсан хувийн утгыг тодорхойлдог хувьсагчийн хажууд mix()ашиглагддаг . Бүрэн эх кодыг болон файлуудаас $theme-color-intervalүзнэ үү .scss/_functions.scssscss/_variables.scss

Өнгөт Sass газрын зураг

Bootstrap-ийн эх сурвалж Sass файлууд нь өнгөний жагсаалт болон тэдгээрийн зургаан өнцөгт утгыг хурдан бөгөөд хялбар эргүүлэхэд туслах гурван газрын зургийг агуулдаг.

  • $colors500бидний боломжтой бүх үндсэн ( ) өнгийг жагсаав
  • $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;
}

Өнгөний утгыг тохируулах , ашиглахад зориулсан өнгө , дэвсгэр хэрэглүүрийн ангиуд бас байдаг .colorbackground-color500