ფერი
Bootstrap მხარდაჭერილია ფერადი სისტემით, რომელიც ასახავს ჩვენს სტილებს და კომპონენტებს. ეს საშუალებას იძლევა უფრო ყოვლისმომცველი პერსონალიზაცია და გაფართოება ნებისმიერი პროექტისთვის.
თემის ფერები
ჩვენ ვიყენებთ ყველა ფერის ქვეჯგუფს, რათა შევქმნათ უფრო პატარა ფერის პალიტრა ფერთა სქემების გენერირებისთვის, ასევე ხელმისაწვდომია როგორც Sass ცვლადები და Sass რუკა Bootstrap-ის scss/_variables.scss
ფაილში.
ყველა ეს ფერი ხელმისაწვდომია 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
) და ვიყენებთ მორგებული ფერის ფუნქციებს ჩვენი ფერების გასაფერადებლად (გამნათებლად) ან დაჩრდილვისთვის (დაბნელებისთვის) 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
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
კომუნალური საშუალებების გენერირება
დამატებულია v5.1.0-ში
Bootstrap არ შეიცავს color
და background-color
ყველა ფერის ცვლადის კომუნალურ პროგრამებს, მაგრამ თქვენ შეგიძლიათ თავად შექმნათ ისინი ჩვენი სასარგებლო API- ით და ჩვენი გაფართოებული Sass რუკებით, რომლებიც დამატებულია v5.1.0-ში.
- დასაწყებად, დარწმუნდით, რომ იმპორტირებული გაქვთ ჩვენი ფუნქციები, ცვლადები, მიქსინები და კომუნალური პროგრამები.
- გამოიყენეთ ჩვენი
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}
კომუნალურ პროგრამებს ყველა ფერისა და დონისთვის. თქვენ შეგიძლიათ იგივე გააკეთოთ ნებისმიერი სხვა კომუნალური და ქონებისთვისაც.