Theming Bootstrap

Fa'apitoa le Bootstrap 4 ma a tatou suiga fou Sass fa'apipi'iina mo le fa'avasegaina o sitaili fa'alelalolagi mo le fa'afaigofieina o autu ma suiga o vaega.

Folasaga

I le Bootstrap 3, o le autu na tele lava ina fa'auluina e suiga fesuisuiai i LESS, CSS masani, ma se isi sitaili autu na matou fa'aofiina i totonu oa matou distfaila. Faatasi ai ma se taumafaiga, e mafai e se tasi ona toe faʻafouina le foliga o Bootstrap 3 e aunoa ma le paʻi i faila autu. O le Bootstrap 4 o loʻo tuʻuina mai ai se masani, ae fai sina eseʻese auala.

Ole taimi nei, ole autu e ausia e Sass fesuiaiga, faʻafanua Sass, ma CSS masani. E leai se isi sitaili autu fa'apitoa; nai lo lena, e mafai ona e fa'atagaina le autu fausia e fa'aopoopo gradients, ata lafoia, ma isi mea.

Sass

Fa'aaoga a matou faila faila Sass e fa'aoga lelei ai fesuiaiga, fa'afanua, fa'afefiloi, ma isi mea.

Faiga faila

Soo se taimi e mafai ai, aloese mai le suia o faila autu a Bootstrap. Mo Sass, o lona uiga o le fatuina o lau lava sitaili e aumai ai le Bootstrap ina ia mafai ona e suia ma faʻalautele. Faʻapea o loʻo e faʻaaogaina se pule o pusa e pei o le npm, o le ai ai sau faila faila e pei o lenei:

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

Afai na e siiina mai a matou faila faila ma e te le o faʻaaogaina se pule o pusa, e te manaʻo e setiina ma le lima se mea e tutusa ma lena fausaga, faʻapipiʻi ese faila a Bootstrap mai oe lava.

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

Fa'aulufaleina mai

I lau custom.scss, e te fa'aulufaleina mai faila Sass puna a Bootstrap. E lua au filifiliga: aofia uma Bootstrap, pe filifili vaega e te manaʻomia. Matou te faʻamalosia le mulimuli, e ui ina ia nofouta e iai nisi o manaʻoga ma faʻalagolago i a matou vaega. E te manaʻomia foʻi le faʻaofiina o nisi JavaScript mo a matou plugins.

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

Faatasi ai ma lena seti i le nofoaga, e mafai ona e amata suia soʻo se suiga o Sass ma faʻafanua i lau custom.scss. E mafai foi ona e amata faʻaopoopo vaega o Bootstrap i lalo o le // Optionalvaega pe a manaʻomia. Matou te fautua atu e fa'aaoga le fa'aputuga fa'aulufale atoa mai la matou bootstrap.scssfaila e fai ma ou amataga.

Fa'aletonu suiga

O fesuiaiga uma o Sass i Bootstrap 4 e aofia ai le !defaultfuʻa e mafai ai ona e faʻamalo le tau le aoga o le fesuiaiga i lau lava Sass e aunoa ma le suia o le code source a Bootstrap. Kopi ma faapipii fesuiaiga pe a manaʻomia, sui o latou tau, ma aveese le !defaultfuʻa. Afai ua uma ona tuʻuina atu se fesuiaiga, o le a le toe tuʻuina atu e le tau faʻaletonu i Bootstrap.

O le ae mauaina le lisi atoa o fesuiaiga a Bootstrap i scss/_variables.scss.

E mafai ona o'o mai suiga fa'aletonu i totonu o le faila Sass e tasi i luma po'o le mae'a fo'i o suiga fa'aletonu. Ae peita'i, pe a fa'asili i faila Sass, e tatau ona o'o mai au fa'asili ae e te le'i fa'aulufale mai faila Sass a Bootstrap.

O se faʻataʻitaʻiga lea e suia ai le background-colorma colormo le <body>taimi e faʻaulu mai ai ma tuʻufaʻatasia Bootstrap e ala ile npm:

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

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

Toe fai pe a manaʻomia mo soʻo se fesuiaiga i Bootstrap, e aofia ai le lalolagi filifiliga o loʻo i lalo.

Faafanua ma matasele

Bootstrap 4 o lo'o aofia ai nai fa'afanua Sass, pa'aga taua e fa'afaigofie ai ona fa'atupuina aiga o le CSS fa'atatau. Matou te fa'aogaina fa'afanua Sass mo a matou lanu, fa'asologa fa'asologa, ma isi mea. E pei lava o suiga a Sass, o fa'afanua Sass uma e aofia ai le !defaultfu'a ma e mafai ona fa'asili ma fa'alautele.

O nisi o matou fa'afanua Sass ua tu'ufa'atasia i fa'afanua gaogao ona o le fa'aletonu. E faia lea mea ina ia fa'afaigofie ai le fa'alauteleina o se fa'afanua Sass ua tu'uina atu, ae e sau i le tau o le aveesea o mea mai se fa'afanua e fai si faigata.

Suia faafanua

Ina ia suia se lanu o loʻo i ai i la matou $theme-colorsfaʻafanua, faʻaopoopo mea nei i lau faila masani Sass:

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

Faaopoopo i le faafanua

Ina ia fa'aopoopo se lanu fou i le $theme-colors, fa'aopoopo le ki fou ma le tau:

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

Aveese mai faafanua

Ina ia aveese lanu mai le $theme-colors, poʻo soʻo se isi faʻafanua, faʻaaoga map-remove. Ia nofouta e tatau ona e tuʻuina i le va o matou manaʻoga ma filifiliga:

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

Manaomia ki

Bootstrap o loʻo faʻapea o loʻo iai ni ki faʻapitoa i totonu o faʻafanua Sass aʻo matou faʻaogaina ma faʻalauteleina i matou lava. A'o e fa'avasegaina fa'afanua o lo'o aofia ai, e te ono tula'i mai ni mea sese o lo'o fa'aogaina ai se ki fa'afanua patino a Sass.

Mo se fa'ata'ita'iga, matou te fa'aogaina le primary, success, ma dangerki mai $theme-colorsmo so'oga, fa'amau, ma fomu. O le suia o tulaga taua o nei ki e le tatau ona i ai ni faʻafitauli, ae o le aveeseina e ono mafua ai faʻafitauli Sass tuʻufaʻatasia. I nei tulaga, e te manaʻomia le suia o le Sass code e faʻaogaina ai na tulaga taua.

Galuega

E fa'aogaina e Bootstrap le tele o galuega a Sass, ae na'o se vaega itiiti e fa'aoga i le autu lautele. Ua matou aofia ai ni galuega se tolu mo le mauaina o tau mai fa'afanua lanu:

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

O nei mea e mafai ai ona e filifilia se lanu e tasi mai le faafanua Sass e pei o le auala e te faʻaogaina ai se lanu lanu mai le v3.

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

E iai fo'i se isi a matou galuega mo le mauaina o se tulaga fa'apitoa o lanu mai le $theme-colorsfa'afanua. O tulaga le lelei o le a faʻamalamalamaina le lanu, ae o le maualuga maualuga o le a pogisa.

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

I le fa'ata'ita'iga, e te vala'au le galuega ma pasi i ni ta'iala se lua: o le igoa o le lanu mai $theme-colors(fa'ata'ita'iga, muamua po'o le lamatiaga) ma le numera numera.

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

E mafai ona fa'aopoopo galuega fa'aopoopo i le lumana'i po'o lau lava Sass masani e fa'atupu ai ni galuega fa'aopoopo mo fa'afanua Sass fa'aopoopo, po'o se fa'afanua lautele pe a e mana'o e fa'asili atu lau tautala.

Fa'afeagai lanu

O le tasi galuega fa'aopoopo matou te fa'aaofia i totonu o Bootstrap o le fa'atusatusaga o lanu, color-yiq. E fa'aogaina le avanoa lanu YIQ e otometi ai ona toe fa'afo'i mai se moli ( #fff) po'o le pogisa ( #111) fa'atusatusa lanu e fa'atatau i le lanu fa'avae ua fa'amaonia. O lenei galuega e sili ona aoga mo faʻafefiloi poʻo faʻamau e te faʻatupuina ai le tele o vasega.

Mo se faʻataʻitaʻiga, ia faʻatupuina suʻega lanu mai la matou $theme-colorsfaʻafanua:

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

E mafai foʻi ona faʻaaogaina mo manaʻoga faʻatusatusa tasi:

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

E mafai foi ona e faʻamaonia se lanu faʻavae i la matou faʻafanua lanu galuega:

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

Sass filifiliga

Fa'asinomaga Bootstrap 4 i la matou faila fa'aleaganu'u fa'aleaganu'u ma faigofie ona fesuia'i mana'oga CSS lalolagi ma suiga fou $enable-*Sass. Aveese le tau o se fesuiaiga ma toe tuufaatasia npm run testpe a manaʻomia.

E mafai ona e mauaina ma fa'avasega nei fesuiaiga mo filifiliga autu o le lalolagi i le scss/_variables.scssfaila a Bootstrap.

Fesuia'i	Tulaga taua	Fa'amatalaga
`$spacer`	`1rem`(valea), poʻo soʻo se tau> 0	Fa'amaoti mai le tau fa'aletonu e va'aia e fa'apolokalame ai a tatou mea fa'aoga spacer .
`$enable-rounded`	`true`(valea) pe`false`	Fa'aagaaga `border-radius`sitaili mua'i fa'avasegaina i vaega eseese.
`$enable-shadows`	`true`po'o `false`(fa'aletonu)	Fa'aagaaga `box-shadow`sitaili mua'i fa'avasegaina i vaega eseese.
`$enable-gradients`	`true`po'o `false`(fa'aletonu)	Fa'aagaaga gradients fa'avasegaina e ala i `background-image`sitaili i vaega eseese.
`$enable-transitions`	`true`(valea) pe`false`	Fa'aagaioi `transition`s fa'avasegaina i vaega eseese.
`$enable-hover-media-query`	`true`po'o `false`(fa'aletonu)	Ua le toe faaaogaina
`$enable-grid-classes`	`true`(valea) pe`false`	Fa'aagaaga le fa'atupuina o vasega CSS mo le fa'atonuga (fa'ata'ita'iga, `.container`, `.row`, `.col-md-1`, etc.).
`$enable-caret`	`true`(valea) pe`false`	Fa'aagaoioiga pseudo element caret on `.dropdown-toggle`.
`$enable-print-styles`	`true`(valea) pe`false`	Fa'atagaina sitaili mo le fa'asilisiliina o le lomitusi.

Lanu

O le tele o vaega eseese a Bootstrap ma mea aoga e fausia e ala i se faasologa o lanu o loʻo faʻamatalaina i se faʻafanua Sass. O lenei fa'afanua e mafai ona fa'apipi'iina i Sass e fa'atupu vave ai se faasologa o tulafono.

O lanu uma

O lanu uma o loʻo maua i le Bootstrap 4, o loʻo avanoa e pei o Sass fesuiaiga ma se faʻafanua Sass i scss/_variables.scssfaila. O lenei mea o le a faʻalauteleina i luga o faʻasalalauga laiti mulimuli ane e faʻaopoopo ai ata faʻaopoopo, e pei o le paleti grayscale ua uma ona matou faʻaofiina.

Lanu moaga

Indigo

Lanu viole

piniki

Lanu mumu

Lanu moli

Lanu samasama

Lanu meamata

Teal

Cyan

O le auala lenei e mafai ai ona e faʻaogaina nei mea i lau Sass:

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

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

E avanoa foi vasega aoga lanu mo le seti colorma background-color.

I le lumana'i, matou te fa'amoemoe e tu'uina atu fa'afanua Sass ma fesuiaiga mo paolo o lanu ta'itasi e pei ona matou faia i lanu efuefu i lalo.

Lanu autu

Matou te fa'aogaina se vaega o lanu uma e fai ai se pa'u lanu la'ititi mo le fa'atupuina o ata lanu, o lo'o avanoa fo'i e fai ma suiga Sass ma se fa'afanua Sass i le scss/_variables.scssfaila a Bootstraps.

Peraimeri

Lua

Manuia

Mata'utia

Lapataiga

Fa'amatalaga

Malamalama

Pogisa

Efuefu

O se seti lautele o fesuiaiga lanu efuefu ma se faafanua Sass i totonu scss/_variables.scssmo lanu efuefu faifai pea i lau galuega faatino.

100

200

300

400

500

600

700

800

900

I totonu scss/_variables.scss, o le ae mauaina suiga lanu a Bootstrap ma le faafanua Sass. O se fa'ata'ita'iga lea o le $colorsfa'afanua Sass:

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

Fa'aopoopo, ave'ese, pe sui fa'atatau i totonu o le fa'afanua e fa'afou ai pe fa'apefea ona fa'aoga i le tele o isi vaega. Ae paga lea i le taimi nei, e le o vaega uma e faʻaaogaina lenei faʻafanua Sass. O faʻamatalaga i le lumanaʻi o le a taumafai e faʻaleleia lenei mea. Seia o'o i lena taimi, fuafua i le fa'aogaina o ${color}fesuiaiga ma lenei fa'afanua Sass.

Vaega

O le tele o vaega a Bootstrap ma mea aoga e fausia i @eachfa'amaufa'ailoga e fa'asolosolo i luga o se fa'afanua Sass. E aoga tele lenei mea mo le fa'atupuina o fesuiaiga o se vaega e ala ia tatou $theme-colorsma le faia o suiga tali mo vaega ta'itasi. A'o e fa'avasegaina fa'afanua Sass ma toe tu'ufa'atasia, e otometi lava ona e va'ai i au suiga o lo'o atagia mai i nei fa'agasolo.

Suiga

O le tele o vaega a Bootstrap e fausia i se faiga fa'avae-modifier vasega. O lona uiga o le tele o le sitaili o lo'o i totonu o se vasega fa'avae (fa'ata'ita'iga, .btn) a'o fesuiaiga o sitaili e fa'atapula'a i vasega fa'aliliu (fa'ata'ita'iga, .btn-danger). O nei vasega suiga e fausia mai le $theme-colorsfaafanua e fai ai le fa'avasegaina o le numera ma le igoa oa tatou vasega fa'aliliu.

O faʻataʻitaʻiga nei e lua o le auala tatou te faʻaogaina i luga o le $theme-colorsfaʻafanua e faʻaleleia ai suiga i le .alertvaega ma a tatou .bg-*mea aoga uma.

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

Talia

O nei fa'ailoga Sass e le gata i fa'afanua lanu, pe. E mafai fo'i ona e fa'atupuina suiga tali o au vaega po'o mea fa'aoga. Fai se fa'ata'ita'iga a matou fa'aoga feso'ota'iga o tusitusiga e fa'afefiloi ai se @eachmatasele mo le $grid-breakpointsfa'afanua Sass ma se fa'asalalauga fa'asalalau e aofia ai.

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

Afai e te manaʻomia le suia o lau $grid-breakpoints, o au suiga o le a faʻaoga i matasele uma o loʻo faʻasolosolo i luga o lena faafanua.

CSS fesuiaiga

Bootstrap 4 e aofia ai le tusa ma le lua taseni CSS meatotino masani (suia) i lana CSS tuufaatasia. O nei mea e maua ai le avanoa faigofie i tulaga fa'aoga masani e pei o lanu o tatou autu, fa'amaufa'ailoga, ma fa'aputuga vaitusi muamua pe a galue i le Su'esu'ega a lau su'esu'ega, se pusa oneone, po'o le fa'ata'ita'iga lautele.

Fa'aliliuga avanoa

O fesuiaiga nei matou te aofia ai (matau e :rootmanaʻomia le). O lo'o iai i la matou _root.scssfaila.

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

Faataitaiga

CSS fesuiaiga e ofoina atu tutusa fetuutuunai i fesuiaiga a Sass, ae aunoa ma le manaʻomia mo le tuʻufaʻatasia aʻo leʻi tuʻuina atu i le suʻega. Mo se fa'ata'ita'iga, o lo'o matou toe fa'afo'i le vai papatisoga ma sitaili feso'ota'iga ma fesuiaiga CSS.

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

Su'ega va'aiga

A'o matou fa'auluina fa'amata'u i totonu o la matou fesuiaiga CSS (fa'ata'ita'iga, --breakpoint-md), e le'o lagolagoina i fesili fa'asalalau , ae e mafai lava ona fa'aoga i totonu o tulafono i fa'asalalauga fesili. O nei va'aiga va'aiga e tumau pea i le CSS tu'ufa'atasia mo feso'ota'iga i tua ona e mafai ona fa'aogaina e le JavaScript. Aoao atili i le spec.

O se fa'ata'ita'iga lea o mea e le'o lagolagoina:

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

Ma o se faʻataʻitaʻiga lea o mea e lagolagoina:

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