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. Bizim derlememizde, tarayıcı yuvarlama ile ilgili sorunları önlemek için Sass yuvarlama hassasiyetini 6'ya (varsayılan olarak 5) yükselttik.

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. Bazı değişkenler olarak ayarlanmıştır null, bu değişkenler, yapılandırmanızda geçersiz kılınmadıkça özelliğin çıktısını vermez.

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ı

An additional function we include in Bootstrap is the color contrast function, color-yiq. It utilizes the YIQ color space to automatically return a light (#fff) or dark (#111) contrast color based on the specified base color. This function is especially useful for mixins or loops where you’re generating multiple classes.

For example, to generate color swatches from our $theme-colors map:

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

It can also be used for one-off contrast needs:

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

You can also specify a base color with our color map functions:

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

Escape SVG

We use the escape-svg function to escape the <, > and # characters for SVG background images. These characters need to be escaped to properly render the background images in IE.

Add and Subtract functions

We use the add and subtract functions to wrap the CSS calc function. The primary purpose of these functions is to avoid errors when a “unitless” 0 value is passed into a calc expression. Expressions like calc(10px - 0) will return an error in all browsers, despite being mathematically correct.

Example where the calc is valid:

$border-radius: .25rem;
$border-width: 1px;

.element {
  // Output calc(.25rem - 1px) is valid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output the same calc(.25rem - 1px) as above
  border-radius: subtract($border-radius, $border-width);
}

Example where the calc is invalid:

$border-radius: .25rem;
$border-width: 0;

.element {
  // Output calc(.25rem - 0) is invalid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output .25rem
  border-radius: subtract($border-radius, $border-width);
}

Sass options

Customize Bootstrap 4 with our built-in custom variables file and easily toggle global CSS preferences with new $enable-* Sass variables. Override a variable’s value and recompile with npm run test as needed.

You can find and customize these variables for key global options in Bootstrap’s scss/_variables.scss file.

Variable	Values	Description
`$spacer`	`1rem` (default), or any value > 0	Specifies the default spacer value to programmatically generate our spacer utilities.
`$enable-rounded`	`true` (default) or `false`	Enables predefined `border-radius` styles on various components.
`$enable-shadows`	`true` or `false` (default)	Enables predefined `box-shadow` styles on various components.
`$enable-gradients`	`true` or `false` (default)	Enables predefined gradients via `background-image` styles on various components.
`$enable-transitions`	`true` (default) or `false`	Enables predefined `transition`s on various components.
`$enable-prefers-reduced-motion-media-query`	`true` (default) or `false`	Enables the `prefers-reduced-motion` media query, which suppresses certain animations/transitions based on the users’ browser/operating system preferences.
`$enable-hover-media-query`	`true` or `false` (default)	Deprecated
`$enable-grid-classes`	`true` (default) or `false`	Enables the generation of CSS classes for the grid system (e.g., `.container`, `.row`, `.col-md-1`, etc.).
`$enable-caret`	`true` (default) or `false`	Enables pseudo element caret on `.dropdown-toggle`.
`$enable-pointer-cursor-for-buttons`	`true` (default) or `false`	Add “hand” cursor to non-disabled button elements.
`$enable-print-styles`	`true` (default) or `false`	Enables styles for optimizing printing.
`$enable-responsive-font-sizes`	`true` or `false` (default)	Enables responsive font sizes.
`$enable-validation-icons`	`true` (default) or `false`	Enables `background-image` icons within textual inputs and some custom forms for validation states.
`$enable-deprecation-messages`	`true` or `false` (default)	Set to `true` to show warnings when using any of the deprecated mixins and functions that are planned to be removed in `v5`.

Color

Many of Bootstrap’s various components and utilities are built through a series of colors defined in a Sass map. This map can be looped over in Sass to quickly generate a series of rulesets.

All colors

All colors available in Bootstrap 4, are available as Sass variables and a Sass map in scss/_variables.scss file. This will be expanded upon in subsequent minor releases to add additional shades, much like the grayscale palette we already include.

Blue

Indigo

Purple

Pink

Red

Orange

Yellow

Green

Teal

Cyan

Here’s how you can use these in your Sass:

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

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

Color utility classes are also available for setting color and background-color.

In the future, we’ll aim to provide Sass maps and variables for shades of each color as we’ve done with the grayscale colors below.

Theme colors

We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap’s scss/_variables.scss file.

Primary

Secondary

Success

Danger

Warning

Info

Light

Dark

Grays

An expansive set of gray variables and a Sass map in scss/_variables.scss for consistent shades of gray across your project. Note that these are “cool grays”, which tend towards a subtle blue tone, rather than neutral grays.

100

200

300

400

500

600

700

800

900

Within scss/_variables.scss, you’ll find Bootstrap’s color variables and Sass map. Here’s an example of the $colors Sass map:

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

Add, remove, or modify values within the map to update how they’re used in many other components. Unfortunately at this time, not every component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the ${color} variables and this Sass map.

Components

Many of Bootstrap’s components and utilities are built with @each loops that iterate over a Sass map. This is especially helpful for generating variants of a component by our $theme-colors and creating responsive variants for each breakpoint. As you customize these Sass maps and recompile, you’ll automatically see your changes reflected in these loops.

Modifiers

Many of Bootstrap’s components are built with a base-modifier class approach. This means the bulk of the styling is contained to a base class (e.g., .btn) while style variations are confined to modifier classes (e.g., .btn-danger). These modifier classes are built from the $theme-colors map to make customizing the number and name of our modifier classes.

Here are two examples of how we loop over the $theme-colors map to generate modifiers to the .alert component and all our .bg-* background utilities.

// 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);
}

Responsive

These Sass loops aren’t limited to color maps, either. You can also generate responsive variations of your components or utilities. Take for example our responsive text alignment utilities where we mix an @each loop for the $grid-breakpoints Sass map with a media query include.

@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; }
  }
}

Should you need to modify your $grid-breakpoints, your changes will apply to all the loops iterating over that map.

CSS variables

Bootstrap 4 includes around two dozen CSS custom properties (variables) in its compiled CSS. These provide easy access to commonly used values like our theme colors, breakpoints, and primary font stacks when working in your browser’s Inspector, a code sandbox, or general prototyping.

Available variables

Here are the variables we include (note that the :root is required). They’re located in our _root.scss file.

: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, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

Examples

CSS variables offer similar flexibility to Sass’s variables, but without the need for compilation before being served to the browser. For example, here we’re resetting our page’s font and link styles with CSS variables.

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

Breakpoint variables

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