Renk

Bootstrap, stillerimizi ve bileşenlerimizi temalandıran kapsamlı bir renk sistemi tarafından desteklenir. Bu, herhangi bir proje için daha kapsamlı özelleştirme ve genişletme sağlar.

Bu sayfada

Tema renkleri

Renk şemaları oluşturmak için daha küçük bir renk paleti oluşturmak için tüm renklerin bir alt kümesini kullanırız, ayrıca Bootstrap scss/_variables.scssdosyasında Sass değişkenleri ve bir Sass haritası olarak da bulunur.

Öncelik

İkincil

Başarı

Tehlike

Uyarı

Bilgi

Işık

Karanlık

Tüm bu renkler bir Sass haritası olarak mevcuttur, $theme-colors.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

Bu renklerin nasıl değiştirileceğini öğrenmek için Sass haritalarımıza ve döngülerimize göz atın .

Tüm renkler

scss/_variables.scssTüm Bootstrap renkleri, dosyada Sass değişkenleri ve bir Sass haritası olarak mevcuttur . Dosya boyutlarının artmasını önlemek için, bu değişkenlerin her biri için metin veya arka plan rengi sınıfları oluşturmuyoruz. Bunun yerine, bir tema paleti için bu renklerin bir alt kümesini seçiyoruz .

Renkleri özelleştirirken kontrast oranlarını izlediğinizden emin olun. Aşağıda gösterildiği gibi, ana renklerin her birine üç kontrast oranı ekledik - biri renk örneğinin mevcut renkleri için, biri beyaza karşı ve diğeri siyaha karşı.

$mavi#0d6efd

$mavi-100

$mavi-200

$mavi-300

$mavi-400

$mavi-500

$mavi-600

$mavi-700

$mavi-800

$mavi-900

$ çivit#6610f2

$indigo-100

$indigo-200

$indigo-300

$ çivit-400

$ çivit-500

$indigo-600

$indigo-700

$indigo-800

$indigo-900

$mor#6f42c1

$mor-100

$mor-200

$mor-300

$mor-400

$mor-500

$mor-600

$mor-700

$mor-800

$mor-900

$pembe#d63384

pembe-100 dolar

$pembe-200

$pembe-300

pembe-400 dolar

pembe-500 dolar

pembe-600 dolar

$pembe-700

pembe-800 dolar

pembe-900 dolar

$kırmızı#dc3545

$kırmızı-100

$kırmızı-200

$kırmızı-300

$kırmızı-400

$kırmızı-500

$kırmızı-600

$kırmızı-700

$kırmızı-800

$kırmızı-900

$turuncu#fd7e14

turuncu-100 dolar

$turuncu-200

turuncu-300 dolar

turuncu-400 dolar

$turuncu-500

$turuncu-600

$turuncu-700

$turuncu-800

$turuncu-900

$sarı#ffc107

sarı-100 dolar

$sarı-200

$sarı-300

$sarı-400

$sarı-500

$sarı-600

$sarı-700

$sarı-800

$sarı-900

$yeşil#198754

yeşil-100 $

$yeşil-200

$yeşil-300

$yeşil-400

$ yeşil-500

$ yeşil-600

$yeşil-700

$ yeşil-800

$yeşil-900

$çamur#20c997

100 dolar

deniz mavisi-200 dolar

deniz mavisi-300 dolar

$ turkuaz-400

$ turkuaz-500

$ turkuaz-600

$teal-700

$teal-800

$teal-900

$mavi#0dcaf0

$camgöbeği-100

$camgöbeği-200

$camgöbeği-300

camgöbeği-400 $

$camgöbeği-500

$camgöbeği-600

$camgöbeği-700

$camgöbeği-800

camgöbeği-900 $

$gri-500#adb5bd

$gri-100

$gri-200

$gri-300

$gri-400

$gri-500

$gri-600

$gri-700

$gri-800

$gri-900

$siyah#000

$beyaz#fff

Sass Üzerine Notlar

Sass programlı olarak değişkenler üretemez, bu yüzden her renk tonu için manuel olarak değişkenler yarattık ve kendimizi gölgelendirdik. $blue-500Sass'ın renk işlevi aracılığıyla renklerimizi renklendirmek (açıklaştırmak) veya gölgelemek (koyulaştırmak) için orta nokta değerini (örn. ) belirleriz ve özel renk işlevlerini kullanırız mix().

Kullanım mix()ile aynı değildir lighten()ve darken()—birincisi belirtilen rengi beyaz veya siyahla karıştırırken, ikincisi her rengin yalnızca açıklık değerini ayarlar. Sonuç, bu CodePen demosunda gösterildiği gibi, çok daha eksiksiz bir renk takımıdır .

ve fonksiyonlarımız tint-color(), ürettiğimiz her karışık renk için kademeli bir yüzde değeri belirten değişkenimizin yanında kullanılır. Tam kaynak kodu için ve dosyalarına bakın .shade-color()mix()$theme-color-intervalscss/_functions.scssscss/_variables.scss

Renk Sass haritaları

Bootstrap'in kaynak Sass dosyaları, bir renk listesi ve bunların onaltılık değerleri üzerinde hızlı ve kolay bir şekilde döngü oluşturmanıza yardımcı olacak üç harita içerir.

$colors500mevcut tüm temel ( ) renklerimizi listeler
$theme-colorsanlamsal olarak adlandırılmış tüm tema renklerini listeler (aşağıda gösterilmiştir)
$graysgrinin tüm tonlarını ve tonlarını listeler

içinde scss/_variables.scssBootstrap'in renk değişkenlerini ve Sass haritasını bulacaksınız. İşte $colorsSass haritasına bir örnek:

$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
);

Diğer birçok bileşende nasıl kullanıldıklarını güncellemek için harita içindeki değerleri ekleyin, kaldırın veya değiştirin. Ne yazık ki şu anda her bileşen bu Sass haritasını kullanmıyor. Gelecekteki güncellemeler bunu geliştirmek için çaba gösterecektir. O zamana kadar ${color}değişkenleri ve bu Sass haritasını kullanmayı planlayın.

Örnek

Bunları Sass'ınızda şu şekilde kullanabilirsiniz:

.alpha { color: $purple; }
.beta {
  color: $yellow-300;
  background-color: $indigo-900;
}

Renk değerlerini ayarlamak ve kullanmak için renk ve arka plan yardımcı sınıfları da mevcuttur .colorbackground-color500