გადადით მთავარ შინაარსზე დოკუმენტების ნავიგაციაზე გადასვლა
in English

ფერი

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ფაილში. ფაილის ზომის გაზრდის თავიდან ასაცილებლად, ჩვენ არ ვქმნით ტექსტის ან ფონის ფერის კლასებს თითოეული ამ ცვლადისთვის. ამის ნაცვლად, ჩვენ ვირჩევთ ამ ფერების ქვეჯგუფს თემების პალიტრისთვის .

დარწმუნდით, რომ აკონტროლეთ კონტრასტის კოეფიციენტები ფერების მორგებისას. როგორც ქვემოთ ნაჩვენებია, ჩვენ დავამატეთ ს��მი კონტრასტის კოეფიციენტი თითოეულ ძირითად ფერს - ერთი ნიმუშის ამჟამინდელი ფერებისთვის, ერთი თეთრის წინააღმდეგ და ერთი შავის წინააღმდეგ.

$ ლურჯი#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
$ teal-100
$ teal-200
$ teal-300
$ teal-400
$ teal-500
$ teal-600
$ teal-700
$ teal-800
$ teal-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

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 რუკას. აი $colorsSass რუკის მაგალითი:

$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