Theming Bootstrap a ni

Theming awlsam leh component thlak danglam theihna turin global style duhzawng atan kan built-in Sass variable thar hmangin Bootstrap 4 hi customize rawh.

Inhmelhriattirna

Bootstrap 3-ah chuan theming hi a tam zawk chu LESS-a variable override, custom CSS, leh kan distfile-a kan dah tel theme stylesheet hran vang a ni. Eng emaw chen thawhrimna nen chuan Bootstrap 3 hmel chu core files te khawih lovin a redesign vek thei a ni. Bootstrap 4 hian hriat hlawh tak, mahse a danglam deuh deuh a pe a ni.

Tunah chuan theming hi Sass variables, Sass maps, leh custom CSS hmangin a tihlawhtling ta a ni. Theme stylesheet bik a awm tawh lo; chu ai chuan built-in theme hmangin gradient, shadow leh thil dang tam tak a dah theih nan i enable thei bawk.

Sass a ni

Kan source Sass files te hmang la, i asset pipeline hmanga Sass i compile hunah variable, map, mixin leh thil dang tam tak hmang tangkai rawh.

File siam dan tur

A theih phawt chuan Bootstrap-a core files te chu siam danglam loh tur. Sass tan chuan Bootstrap import thei tur stylesheet siam la, chutiang chuan i siam danglam thei ang a, i extend thei ang. npm ang package manager i hmang ni ta se, hetiang hian file structure i nei ang:

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

Kan source files te i download tawh a, package manager i hmang lo a nih chuan chu structure ang chi chu manual-in i setup duh ang a, Bootstrap-a source files te chu i source files atang chuan a hranpaa dah ang che.

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

Import a ni

I custom.scss, ah chuan Bootstrap source Sass files te chu i import ang. Thil pahnih i nei a: Bootstrap zawng zawng telh vek la, a nih loh leh i mamawh parts thlang rawh. Kan component hrang hrangah hian thil mamawh leh innghahna engemaw zat a awm tih hre reng mah ila, a hnuhnung zawk hi kan fuih a ni. Tin, kan plugins te tan JavaScript thenkhat i dah tel a ngai bawk ang.

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

// Include any default variable overrides here (though functions won't be available)

@import "../node_modules/bootstrap/scss/bootstrap";

// Then add additional custom code here

// Custom.scss
// Option B: Include parts of Bootstrap

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@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";

Chu setup chu a awm tawh chuan i custom.scss. // OptionalA tul angin section hnuaiah Bootstrap parts te pawh i dah tan thei bawk . Kan bootstrap.scssfile atanga import stack kimchang chu i tanna atan hmang turin kan rawt a che.

Variable a awm thei

Bootstrap-a Sass variable zawng zawngah hian !defaultflag a awm a, chu chuan Bootstrap source code siam danglam ngai lovin i Sass-a variable default value chu override theihna a siamsak a ni. Variable te chu a tul angin copy leh paste la, an value te chu siam danglam la, !defaultflag chu paih chhuak rawh. Variable pakhat chu assigned a nih tawh chuan Bootstrap-a default value-te hmangin a re-assign leh dawn lo.

Bootstrap-a variable list kimchang chu scss/_variables.scss. Variable thenkhat chu , ah set a ni a null, heng variable te hian i configuration ah override a nih loh chuan property chu an output lo.

Variable override hi kan function, variable, leh mixins te import hnuah a lo thleng tur a ni a, mahse import dang zawng zawng hmain a lo thleng tur a ni.

Hetah hian npm hmanga Bootstrap import leh compile laiin background-colorand colorfor the tihdanglamtu entirnan kan rawn tarlang e :<body>

@import "../node_modules/bootstrap/scss/functions";

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

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

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

Bootstrap a variable eng pawh atan a tul angin repeat leh la, a hnuaia global option te pawh telh bawk ang che.

Map leh loop te

Bootstrap 4 ah hian Sass maps kut zungtang tlemte a awm a, key value pairs hmangin CSS inzawm chhungkaw siam awlsam zawk a ni. Kan rawng hrang hrang, grid breakpoint leh thil dang tam tak atan Sass maps kan hmang thin. Sass variable ang bawkin Sass map zawng zawngah hian !defaultflag a awm vek a, overridden leh extend theih a ni.

Kan Sass map thenkhat chu default-in empty-ah an inzawm khawm a. Hei hi Sass map pek tawh chu awlsam taka tihzauh theihna tura tih a ni a, mahse map atanga thil lakchhuah chu tlem a harsa zawka siam theihna tur a ni.

Map siam danglam rawh

Kan $theme-colorsmap-a color awmsa siam danglam tur chuan i custom Sass file-ah a hnuaia mi hi dah la:

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

Map ah hian add rawh

-a rawng thar dah tur chuan $theme-colorskey leh value thar dah la:

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

Map atang hian paih chhuak rawh

$theme-colors, emaw map dang emaw aṭanga rawng paih tûr chuan map-remove. Kan mamawh leh duhthlan tur inkarah i dah tel tur a ni tih hre reng ang che:

// 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";
...

Key mamawh a ni

Bootstrap hian Sass maps chhunga key bik thenkhat awm chu kan hman ang khan a pawm a, hengte hi keimahni ngeiin kan tizau a ni. Map telh te i customize lai hian Sass map key bik hmanna hmunah error i tawk thei ang.

Entirnan, link, button leh form state atan primary, success, leh dangerkey from te kan hmang thin. $theme-colorsHeng key te value thlak hian harsatna a thlen tur a ni lo a, mahse paih chhuah hian Sass compilation chungchangah harsatna a thlen thei a ni. Heng instance-ah hian chutiang value hmangtu Sass code chu i siam danglam a ngai ang.

Hnathawh dan tur

Bootstrap hian Sass function engemaw zat a hmang a, mahse general theming atan chuan subset pakhat chauh hman theih a ni. Color map atanga value hmuh theihna tur function pathum kan dah tel a:

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

Hengte hian Sass map atanga color pakhat thlan theihna a siamsak a, chu chu v3 atanga color variable i hman dan ang chiah kha a ni.

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

Map atanga color level bik hmuh theihna tur function dang kan nei bawk . $theme-colorsNegative level value chuan a rawng a ti eng ang a, a sang zawk chuan a dum ang.

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

Practice-ah chuan function chu i ko ang a, parameter pahnih i pass ang: color from $theme-colors(eg, primary emaw danger emaw) hming leh numeric level.

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

Nakin lawkah function dang emaw, Sass map dang atan level function siam turin i custom Sass emaw i dah belh thei ang a, verbose zawka awm duh chuan generic pawh i dah belh thei bawk ang.

Color hrang hrang a awm

Bootstrap-a kan dah belh tur chu color contrast function, color-yiq. YIQ color space hmangin base color tarlan a zirin light ( #fff) emaw dark ( ) emaw contrast color chu automatic in a rawn pe kir leh thin. #111He function hi mixin emaw loop emaw class tam tak i siamna hmunah a tangkai hle.

Entirnan, kan $theme-colorsmap atanga color swatch siam tur chuan:

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

One-off contrast mamawhna atan pawh hman theih a ni:

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

Kan color map function hmangin base color pawh i tarlang thei bawk:

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

SVG atanga tlanchhuak rawh

Function hi , leh SVG background images atan character te escape-svgescape nan kan hmang thin . IE a background images te dik taka render tur chuan heng character te hi escape a ngai a ni. Function hman hunah data URI te chu quote a ngai a ni.<>#escape-svg

Add leh Subtract function te pawh a awm bawk

CSS function wrap nan addleh function kan hmang thin . Heng function te hian an thil tum ber chu expression pakhata “unitless” value an pass hian tihsual a awm loh nan a ni. Expressions like hian browser zawng zawngah error a rawn pe chhuak vek ang a, mathematically dik tak ni mahse.subtractcalc0calccalc(10px - 0)

Calc a dikna hmun entirnan:

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

Calc a dik lohna hmun entirnan:

$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 duhthlan tur a awm

Kan built-in custom variables file hmangin Bootstrap 4 hi customize la, awlsam takin global CSS preferences chu $enable-*Sass variable thar hmangin toggle thei ang che. Variable pakhat value chu override la, npm run testa tul angin recompile rawh.

Bootstrap scss/_variables.scssfile ah hian key global option atan heng variable te hi i zawng thei a, i customize thei bawk.

Rawng

Bootstrap-a component leh utility hrang hrang tam tak hi Sass map-a tarlan color hrang hrang hmanga siam a ni. He map hi Sass ah hian loop over theih a ni a, rang takin ruleset series siam theih a ni.

Color zawng zawng

Bootstrap 4-a color awm zawng zawng, Sass variable angin a awm a, scss/_variables.scssfile-ah Sass map a awm bawk. Hei hi a hnu lama minor release-ah te pawh shade dang dah belh turin tihzauh a ni ang a, grayscale palette kan dah tawh ang bawkin.

Hengte hi i Sass-a i hman theih dan tur chu hetiang hi a ni:

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

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

Color utility class pawh setting colorleh background-color.

Theme rawng hrang hrang

Color zawng zawng subset hmangin color scheme siam nan color palette te zawk kan siam a, chu chu Sass variable angin a awm bawk a, Bootstrap scss/_variables.scssfile-ah Sass map pawh a awm bawk.

Grays te an ni

Gray variable set zau tak leh Sass map in scss/_variables.scsshmangin i project pumpuiah gray shade inmil tak tak a awm theih nan. Hriat tur chu hengte hi “cool grays” an ni a, neutral grays aiin subtle blue tone lam an hawi zawk thin.

, chhungah hian scss/_variables.scssBootstrap-a color variable leh Sass map te i hmu ang. $colorsSass map entir nan hetiang hian kan rawn tarlang e :

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

Map chhunga value te chu component dang tam takah hman dan update turin dah belh, paih emaw, siam danglam emaw. Vanduaithlak takin tun dinhmunah chuan component zawng zawng hian he Sass map hi an hmang vek lo. Nakin lawka update lo awm turte chuan hei hi tihchangtlun tumin hma an la ang. Chumi hma chuan ${color}variable leh he Sass map hi hman dan tur ruahmanna siam rawh.

Component hrang hrangte

Bootstrap-a component leh utility tam tak hi @eachSass map-a iterate thei loop hmanga siam a ni. Hei hi a bik takin kan component pakhat $theme-colorsvariant siam nan leh breakpoint tin atan responsive variant siam nan a tangkai hle. Heng Sass maps te hi i customize a, recompile i tih hian i inthlak danglamna te chu heng loop ah te hian a lang chhuak nghal vek ang.

Modifier te pawh a awm

Bootstrap-a component tam tak hi base-modifier class approach hmanga siam a ni. Hei hian a awmzia chu styling tam zawk chu base class (eg, .btn)-ah dah a nih laiin style danglamna chu modifier class-ah chauh dah a ni (eg, .btn-danger) tihna a ni. Heng modifier class te hi $theme-colorsmap atanga siam niin kan modifier class te number leh hming customizing siam a ni.

Hetah hian map leh kan background utility zawng zawnga $theme-colorsmodifier kan siam theih nan map kan loop dan entirnan pahnih kan rawn tarlang e ..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);
}

Chhanna pe thei

Heng Sass loop te hi color maps chauh a ni lo, chutiang bawkin. I component emaw utilities emaw responsive variation i siam thei bawk. Entirnan kan responsive text alignment utilities te hi han la ila, chutah chuan Sass map @eachatana loop pakhat chu media query include nen kan mix a.$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; }
  }
}

I , i siam danglam a ngai a nih $grid-breakpointschuan, i tihdanglamte chu chu map chunga loop iterating zawng zawngah a hman vek ang.

CSS a danglamna tur a awm

Bootstrap 4 hian a compiled CSS ah hian CSS custom property (variables) dozen hnih vel a keng tel a. Hengte hian i browser-a Inspector, code sandbox, emaw general prototyping-a hnathawh hunah kan theme color, breakpoint, leh primary font stack ang chi value hman tlanglawn tak takte awlsam taka hmuh theihna a pe a ni.

Variable awm thei te

Hetah hian variable kan dah tel te chu (the :rootis required tih hre reng ang che). Kan _root.scssfile ah hian an awm a.

: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", "Liberation 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;
}

Entirna te

CSS variable hian Sass-a variable ang chiah hian flexibility a pe a, mahse browser-a serve hmain compilation a ngai lo. Entirnan, hetah hian kan page font leh link style te chu CSS variable hmangin kan reset a.

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

Breakpoint a danglamna te

A tir chuan kan CSS variable-ah breakpoint kan dah tel laiin (eg, --breakpoint-md), hengte hi media query-ah chuan support a ni lo , mahse media query-ah chuan ruleset chhungah hman theih a la ni tho . Heng breakpoint variable te hi JavaScript hmanga hman theih an nih avangin backward compatibility atan compiled CSS ah an awm reng a ni. Spec ah hian zir belh rawh .

Hetah hian support lohte entir nan kan rawn tarlang e :

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

Tin, a thlawp dan entir nan hetiang hian kan rawn tarlang e :

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