Source

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-a kan dah tel theme stylesheet hran vang a nidist file-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 file te hmang la, variable, map, mixin leh thil dang tam tak hmang tangkai rawh. Kan build ah hian browser rounding chungchanga harsatna awm lo turin Sass rounding precision chu 6 ah kan tisang a (by default ah 5 a ni).

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

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

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 atanga import stack kimchang hman kan rawt a nibootstrap.scss file atanga import stack kimchang chu i tanna atan hmang turin kan rawt a che.

Variable a awm thei

Bootstrap 4 a Sass variable zawng zawngah hian !defaultflag a awm vek 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 set a ninull , heng variable te hian i configuration ah override a nih loh chuan property chu an output lo.

Sass file khat chhunga variable override te hi default variable hma emaw hnuah emaw a lo thleng thei a ni. Mahse, Sass file zawng zawng override i tih hian Bootstrap-a Sass file i import hmain i override te chu a lo thleng hmasa tur a ni.

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

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

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

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...!default flag a awm vek a, overridden leh extend theih a ni.

Kan Sass map thenkhat chu default in empty ah an inzawm khawm thin. 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 siamna tur senso 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.<>#

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.

A danglam thei	Hlutna hrang hrang	Hrilhfiahna
`$spacer`	`1rem`(default), emaw value eng pawh > 0	Kan spacer utilities te programmatic taka siam chhuah theihna tur default spacer value a tarlang .
`$enable-rounded`	`true`(default) emaw a ni`false`	Component hrang hrangah predefined `border-radius`styles a siam thei.
`$enable-shadows`	`true`emaw `false`(default) emaw a ni.	Component hrang hrangah predefined `box-shadow`styles a siam thei.
`$enable-gradients`	`true`emaw `false`(default) emaw a ni.	`background-image`Component hrang hranga style hmanga predefined gradient te a tichak thei.
`$enable-transitions`	`true`(default) emaw a ni`false`	Component hrang hrangah predefined `transition`s a siam thei.
`$enable-prefers-reduced-motion-media-query`	`true`(default) emaw a ni`false`	Enables the `prefers-reduced-motion`media query , chu chuan animation/transition thenkhat chu users te browser/operating system duh dan a zirin a titawp thin.
`$enable-hover-media-query`	`true`emaw `false`(default) emaw a ni.	A hman tawh loh
`$enable-grid-classes`	`true`(default) emaw a ni`false`	Grid system atana CSS class siam theihna a siam (eg, `.container`, `.row`, `.col-md-1`, etc.).
`$enable-caret`	`true`(default) emaw a ni`false`	Pseudo element caret chu a enable a `.dropdown-toggle`ni.
`$enable-pointer-cursor-for-buttons`	`true`(default) emaw a ni`false`	Button element tihtawp lohte chu “hand” cursor dah la.
`$enable-print-styles`	`true`(default) emaw a ni`false`	Printing tihchangtlunna tur style a siam thei.
`$enable-responsive-font-sizes`	`true`emaw `false`(default) emaw a ni.	Font size hrang hrang responsive theihna a siam .
`$enable-validation-icons`	`true`(default) emaw a ni`false`	`background-image`Textual inputs chhunga icon awmte leh validation state atan custom form thenkhat a enable thin.
`$enable-deprecation-messages`	`true`emaw `false`(default) emaw a ni.	. `true`_ `v5`_

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.

Pawl

Indigo a ni

Nawinawk

Sendang

Sen

Serthlum

Eng

Hring

Teal a ni

Cyan a ni

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.

Nakin lawkah chuan a hnuaia grayscale color te kan tih ang khan Sass maps leh color hrang hrang shade te pek kan tum dawn a ni.

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.

Hmasa ber

Secondary lam a ni

Hlawhtling

Hlauhawm

Vaulawkna

Info

Eng

Thim

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 thei. Hriat tur chu hengte hi “cool grays” an ni a, neutral grays aiin subtle blue tone lam an hawi zawk thin.

100 a ni

200 a ni

300 a ni

400 a ni

500 a ni

600 a ni

700 a ni

800 a ni

900 a ni

, 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 bulk chu base class (eg, .btn)-ah a awm a, style variation erawh chu modifier class (eg, .btn-danger)-ah a innghat thung 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", 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 te hian Sass-a variable te ang bawkin flexibility an pe a, mahse browser-a an rawn thawn 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);
  }
}