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 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 file te hmang la, 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 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 chu i source files aiin 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 bootstrap.scssfile 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.

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 tihdanglamtu 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 !defaultflag 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 function pakhat 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`
}

Sass duhthlan tur a awm

Bootstrap 4 hi kan built-in custom variables file hmangin 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 nifalse Component hrang hrangah predefined border-radiusstyles a siam thei.
$enable-shadows trueemaw false(default) emaw a ni. Component hrang hrangah predefined box-shadowstyles a siam thei.
$enable-gradients trueemaw false(default) emaw a ni. background-imageComponent hrang hranga style hmanga predefined gradient te a tichak thei.
$enable-transitions true(default) emaw a nifalse Component hrang hrangah predefined transitions a siam thei.
$enable-hover-media-query trueemaw false(default) emaw a ni. A hman tawh loh
$enable-grid-classes true(default) emaw a nifalse Grid system atana CSS class siam theihna a siam (eg, .container, .row, .col-md-1, etc.).
$enable-caret true(default) emaw a nifalse Pseudo element caret chu a enable a .dropdown-toggleni.
$enable-print-styles true(default) emaw a nifalse Printing tihchangtlunna tur style a siam thei.

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, Bootstraps scss/_variables.scssfile-ah Sass map pawh a awm bawk.

Hmasa ber
Secondary 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 theih nan.

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, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --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);
  }
}