Source

Tema Önyükleme

Kolay tema ve bileşen değişiklikleri için global stil tercihleri ​​için Bootstrap 4'ü yeni yerleşik Sass değişkenlerimizle özelleştirin.

giriiş

Bootstrap 3'te tema oluşturma, büyük ölçüde LESS'deki değişken geçersiz kılmalar, özel CSS ve distdosyalarımıza eklediğimiz ayrı bir tema stil sayfası tarafından yönlendiriliyordu. Biraz çabayla, çekirdek dosyalara dokunmadan Bootstrap 3'ün görünümünü tamamen yeniden tasarlayabilirsiniz. Bootstrap 4, tanıdık, ancak biraz farklı bir yaklaşım sağlar.

Artık tema oluşturma, Sass değişkenleri, Sass haritaları ve özel CSS tarafından gerçekleştirilir. Artık özel bir tema stil sayfası yok; bunun yerine, degradeler, gölgeler ve daha fazlasını eklemek için yerleşik temayı etkinleştirebilirsiniz.

küstah

Değişkenlerden, haritalardan, karışımlardan ve daha fazlasından yararlanmak için kaynak Sass dosyalarımızı kullanın.

dosya yapısı

Mümkün olduğunda, Bootstrap'in çekirdek dosyalarını değiştirmekten kaçının. Sass için bu, Bootstrap'i içe aktaran kendi stil sayfanızı oluşturmak anlamına gelir, böylece onu değiştirebilir ve genişletebilirsiniz. npm gibi bir paket yöneticisi kullandığınızı varsayarsak, şuna benzeyen bir dosya yapısına sahip olacaksınız:

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

Kaynak dosyalarımızı indirdiyseniz ve bir paket yöneticisi kullanmıyorsanız, Bootstrap'in kaynak dosyalarını kendinizden ayrı tutarak bu yapıya benzer bir şeyi manuel olarak kurmak isteyeceksiniz.

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

içe aktarılıyor

dosyanızda custom.scssBootstrap'in kaynak Sass dosyalarını içe aktaracaksınız. İki seçeneğiniz var: tüm Bootstrap'i dahil edin veya ihtiyacınız olan parçaları seçin. İkincisini teşvik ediyoruz, ancak bileşenlerimiz arasında bazı gereksinimler ve bağımlılıklar olduğunu unutmayın. Ayrıca eklentilerimiz için biraz JavaScript eklemeniz gerekecek.

// Custom.scss
// Option A: Include all of Bootstrap

@import "../node_modules/bootstrap/scss/bootstrap";
// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

Bu kurulum yerindeyken, dosyanızdaki Sass değişkenlerinden ve haritalarından herhangi birini değiştirmeye başlayabilirsiniz custom.scss. Ayrıca Bootstrap'in // Optionalbölümlerini gerektiği gibi bölümün altına eklemeye başlayabilirsiniz. bootstrap.scssBaşlangıç ​​noktanız olarak dosyamızdaki tam içe aktarma yığınını kullanmanızı öneririz .

Değişken varsayılanları

Bootstrap 4'teki her Sass değişkeni, Bootstrap'in !defaultkaynak kodunu değiştirmeden kendi Sass'ınızdaki değişkenin varsayılan değerini geçersiz kılmanıza izin veren bayrağı içerir. Değişkenleri gerektiği gibi kopyalayıp yapıştırın, değerlerini değiştirin ve !defaultbayrağı kaldırın. Bir değişken zaten atanmışsa, Bootstrap'taki varsayılan değerlerle yeniden atanmaz.

Bootstrap değişkenlerinin tam listesini scss/_variables.scss.

Aynı Sass dosyasındaki değişken geçersiz kılmalar, varsayılan değişkenlerden önce veya sonra gelebilir. Ancak, Sass dosyalarını geçersiz kılarken, geçersiz kılmalarınız Bootstrap'in Sass dosyalarını içe aktarmadan önce gelmelidir.

Bootstrap'i npm yoluyla içe aktarırken ve derlerken background-colorve coloriçin değiştiren bir örnek :<body>

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

Aşağıdaki genel seçenekler de dahil olmak üzere Bootstrap'teki herhangi bir değişken için gerektiği kadar tekrarlayın.

Haritalar ve döngüler

Bootstrap 4, ilgili CSS ailelerini oluşturmayı kolaylaştıran bir avuç Sass haritası, anahtar değer çifti içerir. Renklerimiz, ızgara kesme noktaları ve daha fazlası için Sass haritalarını kullanıyoruz. Tıpkı Sass değişkenleri gibi, tüm Sass haritaları !defaultbayrağı içerir ve geçersiz kılınabilir ve genişletilebilir.

Sass haritalarımızdan bazıları varsayılan olarak boş haritalarla birleştirilmiştir. Bu, belirli bir Sass haritasının kolayca genişletilmesine izin vermek için yapılır, ancak bir haritadan öğelerin kaldırılmasını biraz daha zor hale getirme pahasına gelir .

Haritayı değiştir

Haritamızdaki mevcut bir rengi değiştirmek $theme-colorsiçin özel Sass dosyanıza aşağıdakini ekleyin:

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

Haritaya ekle

öğesine yeni bir renk $theme-colorseklemek için yeni anahtarı ve değeri ekleyin:

$theme-colors: (
  "custom-color": #900
);

Haritadan kaldır

Renkleri $theme-colorsveya başka bir haritadan kaldırmak için öğesini kullanın map-remove. Gereksinimlerimiz ve seçeneklerimiz arasına eklemeniz gerektiğini unutmayın:

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...

Gerekli anahtarlar

Bootstrap, kullandığımız gibi Sass haritalarında bazı özel anahtarların varlığını varsayar ve bunları kendimiz genişletir. Dahil edilen haritaları özelleştirirken, belirli bir Sass haritasının anahtarının kullanıldığı yerlerde hatalarla karşılaşabilirsiniz.

Örneğin, bağlantılar, düğmeler ve form durumları için primary, successve dangeranahtarlarını kullanırız. $theme-colorsBu anahtarların değerlerinin değiştirilmesi sorun yaratmamalıdır, ancak bunların kaldırılması Sass derleme sorunlarına neden olabilir. Bu durumlarda, bu değerleri kullanan Sass kodunu değiştirmeniz gerekecektir.

Fonksiyonlar

Bootstrap birkaç Sass işlevi kullanır, ancak genel temaya yalnızca bir alt küme uygulanabilir. Renk haritalarından değer almak için üç işlev ekledik:

@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}

Bunlar, v3'teki bir renk değişkenini nasıl kullandığınıza benzer şekilde, bir Sass haritasından bir renk seçmenize izin verir.

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

Haritadan belirli bir renk düzeyi elde etmek için başka bir işlevimiz de var . $theme-colorsNegatif seviye değerleri rengi açarken, daha yüksek seviyeler koyulaştıracaktır.

@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, #000, #fff);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

Pratikte, işlevi çağırır ve iki parametre iletirsiniz: gelen rengin adı $theme-colors(örneğin, birincil veya tehlike) ve sayısal bir düzey.

.custom-element {
  color: theme-color-level(primary, -10);
}

Gelecekte ek işlevler eklenebilir veya ek Sass haritaları için seviye işlevleri oluşturmak üzere kendi özel Sass'ınız veya daha ayrıntılı olmak istiyorsanız genel bir işlev eklenebilir.

Renk kontrastı

Bootstrap'a eklediğimiz ek bir işlev, renk kontrastı işlevidir, color-yiq. Belirtilen temel renge göre açık ( ) veya koyu ( ) kontrast rengini otomatik olarak döndürmek için YIQ renk alanını kullanır . Bu işlev, özellikle birden çok sınıf oluşturduğunuz karışımlar veya döngüler için kullanışlıdır.#fff#111

Örneğin, $theme-colorsharitamızdan renk örnekleri oluşturmak için:

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-yiq($value);
  }
}

Tek seferlik kontrast ihtiyaçları için de kullanılabilir:

.custom-element {
  color: color-yiq(#000); // returns `color: #fff`
}

Ayrıca renk haritası işlevlerimizle bir temel renk belirleyebilirsiniz:

.custom-element {
  color: color-yiq(theme-color("dark")); // returns `color: #fff`
}

Sas seçenekleri

Bootstrap 4'ü yerleşik özel değişkenler dosyamızla özelleştirin ve global CSS tercihlerini yeni $enable-*Sass değişkenleriyle kolayca değiştirin. Bir değişkenin değerini geçersiz kılın ve npm run testgerektiğinde yeniden derleyin.

scss/_variables.scssBootstrap dosyasında temel global seçenekler için bu değişkenleri bulabilir ve özelleştirebilirsiniz .

Değişken değerler Tanım
$spacer 1rem(varsayılan) veya herhangi bir değer > 0 Aralayıcı yardımcı programlarımızı programlı olarak oluşturmak için varsayılan aralayıcı değerini belirtir .
$enable-rounded true(varsayılan) veyafalse border-radiusÇeşitli bileşenlerde önceden tanımlanmış stilleri etkinleştirir .
$enable-shadows trueveya false(varsayılan) box-shadowÇeşitli bileşenlerde önceden tanımlanmış stilleri etkinleştirir .
$enable-gradients trueveya false(varsayılan) background-imageÇeşitli bileşenlerde stiller aracılığıyla önceden tanımlanmış degradeleri etkinleştirir .
$enable-transitions true(varsayılan) veyafalse transitionÇeşitli bileşenlerde önceden tanımlanmış s'leri etkinleştirir .
$enable-hover-media-query trueveya false(varsayılan) kullanımdan kaldırıldı
$enable-grid-classes true(varsayılan) veyafalse Izgara sistemi için CSS sınıflarının oluşturulmasını sağlar (örneğin, .container, .row, .col-md-1, vb.).
$enable-caret true(varsayılan) veyafalse üzerinde sözde öğe düzeltmesini etkinleştirir .dropdown-toggle.
$enable-print-styles true(varsayılan) veyafalse Yazdırmayı optimize etmek için stilleri etkinleştirir.

Renk

Bootstrap'in çeşitli bileşenleri ve yardımcı programlarının çoğu, bir Sass haritasında tanımlanan bir dizi renk aracılığıyla oluşturulur. Bu harita, bir dizi kural kümesini hızla oluşturmak için Sass'ta döngüye alınabilir.

Tüm renkler

Bootstrap 4'te bulunan tüm renkler, scss/_variables.scssdosyada Sass değişkenleri ve bir Sass haritası olarak mevcuttur. Bu, zaten eklediğimiz gri tonlamalı palete çok benzeyen ek gölgeler eklemek için sonraki küçük sürümlerde genişletilecektir .

Mavi
çivit
Mor
Pembe
Kırmızı
Turuncu
Sarı
Yeşil
deniz mavisi
camgöbeği

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

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

Ayar için renk yardımcı sınıfları da mevcuttur colorve background-color.

Gelecekte, aşağıdaki gri tonlamalı renklerle yaptığımız gibi, her rengin tonları için Sass haritaları ve değişkenleri sağlamayı hedefleyeceğiz.

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 Bootstraps 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

griler

scss/_variables.scssProjenizde tutarlı gri tonları için geniş bir gri değişken seti ve bir Sass haritası .

100
200
300
400
500
600
700
800
900

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
) !default;

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.

Bileşenler

Bootstrap bileşenlerinin ve yardımcı programlarının çoğu, @eachbir Sass haritası üzerinde yinelenen döngülerle oluşturulmuştur. Bu, özellikle bizim tarafımızdan bir bileşenin $theme-colorsvaryantlarını oluşturmak ve her kesme noktası için duyarlı varyantlar oluşturmak için yararlıdır. Bu Sass haritalarını özelleştirip yeniden derledikçe, değişikliklerinizin bu döngülere yansıdığını otomatik olarak göreceksiniz.

değiştiriciler

Bootstrap bileşenlerinin çoğu, temel değiştirici sınıf yaklaşımıyla oluşturulmuştur. Bu, .btnstil varyasyonlarının değiştirici sınıflarla (örn .btn-danger. Bu değiştirici sınıflar, değiştirici sınıflarımızın $theme-colorssayısını ve adını özelleştirmek için haritadan oluşturulmuştur.

Bileşen ve tüm arka plan yardımcı programlarımız $theme-colorsiçin değiştiriciler oluşturmak için harita üzerinde nasıl döngü yaptığımıza dair iki örnek ..alert.bg-*

// Generate alert modifier classes
@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
  }
}

// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
  @include bg-variant('.bg-#{$color}', $value);
}

Duyarlı

Bu Sass döngüleri de renkli haritalarla sınırlı değildir. Ayrıca bileşenlerinizin veya yardımcı programlarınızın duyarlı varyasyonlarını da oluşturabilirsiniz. Örneğin , bir medya sorgusu içeren Sass haritası @eachiçin bir döngüyü karıştırdığımız duyarlı metin hizalama yardımcı programlarımızı ele alalım.$grid-breakpoints

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}

' nizi değiştirmeniz gerekirse $grid-breakpoints, değişiklikleriniz o harita üzerinde yinelenen tüm döngülere uygulanacaktır.

CSS değişkenleri

Bootstrap 4, derlenmiş CSS'sinde yaklaşık iki düzine CSS özel özelliği (değişken) içerir. Bunlar, tarayıcınızın Denetçisinde, bir kod sanal alanında veya genel prototiplemede çalışırken tema renklerimiz, kesme noktalarımız ve birincil yazı tipi yığınlarımız gibi yaygın olarak kullanılan değerlere kolay erişim sağlar.

Kullanılabilir değişkenler

İşte dahil ettiğimiz değişkenler ( :rootgerekli olduğunu unutmayın). Dosyamızda bulunurlar _root.scss.

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

Örnekler

CSS değişkenleri, Sass'ın değişkenlerine benzer bir esneklik sunar, ancak tarayıcıya sunulmadan önce derlemeye gerek yoktur. Örneğin, burada sayfamızın yazı tipini ve bağlantı stillerini CSS değişkenleriyle sıfırlıyoruz.

body {
  font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
  color: var(--blue);
}

kesme noktası değişkenleri

Kesme noktalarını başlangıçta CSS değişkenlerimize dahil etsek de (örneğin, --breakpoint-md), bunlar medya sorgularında desteklenmezler , ancak yine de medya sorgularında kural kümelerinde kullanılabilirler. Bu kesme noktası değişkenleri, JavaScript tarafından kullanılabilmeleri koşuluyla geriye dönük uyumluluk için derlenmiş CSS'de kalır. Spesifikasyonda daha fazla bilgi edinin.

İşte desteklenmeyenlere bir örnek:

@media (min-width: var(--breakpoint-sm)) {
  ...
}

Ve işte neyin desteklendiğine bir örnek:

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}