Ana içeriğe geç Dokümanlar navigasyonuna atla

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.

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ü belgelerimize 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 arasında 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.scss, Bootstrap'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

Yardımcı programlar oluşturma

v5.1.0'da eklendi

Bootstrap, her renk değişkeni için colorve yardımcı programları içermez , ancak bunları yardımcı program API'miz ve v5.1.0'da eklenen genişletilmiş Sass haritalarımızla kendiniz oluşturabilirsiniz.background-color

  1. Başlamak için işlevlerimizi, değişkenlerimizi, karışımlarımızı ve yardımcı programlarımızı içe aktardığınızdan emin olun.
  2. map-merge-multiple()Birden fazla Sass haritasını yeni bir haritada hızlı bir şekilde birleştirmek için işlevimizi kullanın .
  3. {color}-{level}Herhangi bir yardımcı programı bir sınıf adıyla genişletmek için bu yeni birleşik haritayı birleştirin .

.text-purple-500Yukarıdaki adımları kullanarak metin rengi yardımcı programları (örneğin, ) oluşturan bir örnek .

@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}Bu, her renk ve seviye için yeni araçlar üretecektir . Aynı şeyi diğer herhangi bir yardımcı program ve mülk için de yapabilirsiniz.