Theming Bootstrap

I-customize ang Bootstrap 4 gamit ang aming bagong built-in na Sass variable para sa mga global na kagustuhan sa istilo para sa madaling pagbabago sa tema at bahagi.

Panimula

Sa Bootstrap 3, ang theming ay higit na hinihimok ng mga variable na override sa LESS, custom na CSS, at isang hiwalay na stylesheet ng tema na isinama namin sa aming distmga file. Sa ilang pagsisikap, ganap na muling idisenyo ng isa ang hitsura ng Bootstrap 3 nang hindi hinahawakan ang mga pangunahing file. Ang Bootstrap 4 ay nagbibigay ng isang pamilyar, ngunit bahagyang naiibang diskarte.

Ngayon, ang theming ay nagagawa ng mga Sass variable, Sass na mapa, at custom na CSS. Wala nang nakatutok na stylesheet ng tema; sa halip, maaari mong paganahin ang built-in na tema upang magdagdag ng mga gradient, anino, at higit pa.

Sass

Gamitin ang aming source na Sass file para samantalahin ang mga variable, mapa, mixin, at higit pa. Sa aming build, tinaasan namin ang Sass rounding precision sa 6 (bilang default ay 5 ito) para maiwasan ang mga isyu sa browser rounding.

Istraktura ng file

Hangga't maaari, iwasang baguhin ang mga pangunahing file ng Bootstrap. Para sa Sass, nangangahulugan iyon ng paggawa ng sarili mong stylesheet na nag-i-import ng Bootstrap para mabago at ma-extend mo ito. Ipagpalagay na gumagamit ka ng manager ng package tulad ng npm, magkakaroon ka ng istraktura ng file na ganito ang hitsura:

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

Kung na-download mo ang aming mga source file at hindi gumagamit ng package manager, gugustuhin mong manu-manong mag-setup ng isang bagay na katulad ng structure na iyon, na pinapanatili ang mga source file ng Bootstrap na hiwalay sa iyong sarili.

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

Ini-import

Sa iyong custom.scss, mag-i-import ka ng pinagmulang Sass file ng Bootstrap. Mayroon kang dalawang pagpipilian: isama ang lahat ng Bootstrap, o piliin ang mga bahagi na kailangan mo. Hinihikayat namin ang huli, kahit na magkaroon ng kamalayan na mayroong ilang mga kinakailangan at dependency sa aming mga bahagi. Kakailanganin mo ring magsama ng ilang JavaScript para sa aming mga plugin.

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

Kapag nakalagay ang setup na iyon, maaari mong simulan na baguhin ang alinman sa mga variable at mapa ng Sass sa iyong custom.scss. Maaari ka ring magsimulang magdagdag ng mga bahagi ng Bootstrap sa ilalim ng // Optionalseksyon kung kinakailangan. Iminumungkahi namin ang paggamit ng buong stack ng pag-import mula sa aming bootstrap.scssfile bilang iyong panimulang punto.

Mga default ng variable

Kasama sa bawat Sass variable sa Bootstrap 4 ang !defaultflag na nagbibigay-daan sa iyong i-override ang default na value ng variable sa sarili mong Sass nang hindi binabago ang source code ng Bootstrap. Kopyahin at i-paste ang mga variable kung kinakailangan, baguhin ang kanilang mga halaga, at alisin ang !defaultflag. Kung naitalaga na ang isang variable, hindi na ito muling itatalaga ng mga default na value sa Bootstrap.

Makikita mo ang kumpletong listahan ng mga variable ng Bootstrap sa scss/_variables.scss. Nakatakda ang ilang variable sa null, hindi ilalabas ng mga variable na ito ang property maliban na lang kung ma-override ang mga ito sa iyong configuration.

Maaaring dumating ang mga override ng variable sa loob ng parehong Sass file bago o pagkatapos ng mga default na variable. Gayunpaman, kapag nag-o-override sa mga Sass file, dapat na dumating ang iyong mga override bago ka mag-import ng Sass file ng Bootstrap.

Narito ang isang halimbawa na nagbabago sa background-colorat colorpara sa <body>kapag ini-import at kino-compile ang Bootstrap sa pamamagitan ng npm:

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

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

Ulitin kung kinakailangan para sa anumang variable sa Bootstrap, kasama ang mga pandaigdigang opsyon sa ibaba.

Mga mapa at mga loop

Kasama sa Bootstrap 4 ang ilang mga mapa ng Sass, mga pares ng pangunahing halaga na nagpapadali sa pagbuo ng mga pamilya ng nauugnay na CSS. Gumagamit kami ng mga mapa ng Sass para sa aming mga kulay, mga breakpoint ng grid, at higit pa. Katulad ng mga variable ng Sass, kasama sa lahat ng mapa ng Sass ang !defaultflag at maaaring i-override at palawigin.

Ang ilan sa aming mga mapa ng Sass ay pinagsama sa mga walang laman bilang default. Ginagawa ito upang bigyang-daan ang madaling pagpapalawak ng isang ibinigay na mapa ng Sass, ngunit ito ay may halaga na gawing mas mahirap ang pag- alis ng mga item mula sa isang mapa.

Baguhin ang mapa

Upang baguhin ang isang umiiral na kulay sa aming $theme-colorsmapa, idagdag ang sumusunod sa iyong custom na Sass file:

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

Idagdag sa mapa

Upang magdagdag ng bagong kulay sa $theme-colors, idagdag ang bagong key at value:

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

Alisin sa mapa

Upang alisin ang mga kulay mula sa $theme-colors, o anumang iba pang mapa, gamitin ang map-remove. Magkaroon ng kamalayan na dapat mong ipasok ito sa pagitan ng aming mga kinakailangan at mga opsyon:

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

Mga kinakailangang susi

Ipinapalagay ng Bootstrap ang pagkakaroon ng ilang partikular na susi sa loob ng mga mapa ng Sass habang kami mismo ang gumagamit at nagpapalawak ng mga ito. Habang kino-customize mo ang mga kasamang mapa, maaari kang makatagpo ng mga error kung saan ginagamit ang isang partikular na key ng Sass map.

Halimbawa, ginagamit namin ang primary, success, at mga dangerkey mula $theme-colorssa para sa mga link, button, at form states. Ang pagpapalit sa mga value ng mga key na ito ay hindi dapat magpakita ng mga isyu, ngunit ang pag-alis sa mga ito ay maaaring magdulot ng mga isyu sa Sass compilation. Sa mga pagkakataong ito, kakailanganin mong baguhin ang Sass code na gumagamit ng mga value na iyon.

Mga pag-andar

Gumagamit ang Bootstrap ng ilang function ng Sass, ngunit isang subset lang ang naaangkop sa pangkalahatang theming. Nagsama kami ng tatlong function para sa pagkuha ng mga value mula sa mga color map:

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

Nagbibigay-daan sa iyo ang mga ito na pumili ng isang kulay mula sa isang Sass na mapa katulad ng kung paano mo gagamitin ang isang variable ng kulay mula sa v3.

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

Mayroon din kaming isa pang function para sa pagkuha ng partikular na antas ng kulay mula sa $theme-colorsmapa. Ang mga halaga ng negatibong antas ay magpapagaan ng kulay, habang ang mas mataas na antas ay magpapadilim.

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

Sa pagsasagawa, tatawagan mo ang function at ipapasa sa dalawang parameter: ang pangalan ng kulay mula sa $theme-colors(hal., pangunahin o panganib) at isang numeric na antas.

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

Maaaring magdagdag ng mga karagdagang function sa hinaharap o ang iyong sariling custom na Sass upang lumikha ng mga level function para sa karagdagang mga mapa ng Sass, o kahit isang generic kung gusto mong maging mas verbose.

Contrast ng kulay

Ang isang karagdagang function na kasama namin sa Bootstrap ay ang color contrast function, color-yiq. Ginagamit nito ang puwang ng kulay ng YIQ upang awtomatikong magbalik ng liwanag ( #fff) o madilim ( #111) na contrast na kulay batay sa tinukoy na kulay ng base. Ang function na ito ay lalong kapaki-pakinabang para sa mga mixin o loop kung saan ka bumubuo ng maraming klase.

Halimbawa, upang makabuo ng mga color swatch mula sa aming $theme-colorsmapa:

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

Maaari rin itong gamitin para sa isang beses na pangangailangan sa kaibahan:

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

Maaari ka ring tumukoy ng base na kulay sa aming mga function ng color map:

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

Tumakas sa SVG

Ginagamit namin ang escape-svgfunction upang makatakas sa <, >at mga #character para sa mga larawan sa background ng SVG. Kailangang i-escape ang mga character na ito upang maayos na mai-render ang mga larawan sa background sa IE.

Magdagdag at Magbawas ng mga function

Ginagamit namin ang addat subtractfunction para i-wrap ang CSS calcfunction. Ang pangunahing layunin ng mga function na ito ay upang maiwasan ang mga error kapag ang isang "walang yunit" 0na halaga ay ipinasa sa isang calcexpression. Ang mga expression na tulad calc(10px - 0)ay magbabalik ng error sa lahat ng browser, sa kabila ng pagiging tama sa matematika.

Halimbawa kung saan wasto ang calc:

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

Halimbawa kung saan hindi wasto ang calc:

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

Mga pagpipilian sa Sass

I-customize ang Bootstrap 4 gamit ang aming built-in na custom na mga variable na file at madaling i-toggle ang mga global na kagustuhan sa CSS gamit ang mga bagong $enable-*Sass variable. I-override ang value ng isang variable at muling i-compile kung npm run testkinakailangan.

Maaari mong mahanap at i-customize ang mga variable na ito para sa mga pangunahing pandaigdigang opsyon sa scss/_variables.scssfile ng Bootstrap.

Kulay

Marami sa iba't ibang bahagi at utility ng Bootstrap ay binuo sa pamamagitan ng isang serye ng mga kulay na tinukoy sa isang mapa ng Sass. Maaaring i-loop ang mapang ito sa Sass upang mabilis na makabuo ng isang serye ng mga ruleset.

Lahat ng mga kulay

Lahat ng mga kulay na available sa Bootstrap 4, ay available bilang Sass variable at isang Sass map sa scss/_variables.scssfile. Palalawakin ito sa mga susunod na menor de edad na release para magdagdag ng mga karagdagang shade, katulad ng grayscale palette na kasama na namin.

Narito kung paano mo magagamit ang mga ito sa iyong Sass:

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

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

Available din ang mga klase ng color utility para sa pagtatakda colorat background-color.

Mga kulay ng tema

Gumagamit kami ng subset ng lahat ng mga kulay upang lumikha ng mas maliit na paleta ng kulay para sa pagbuo ng mga scheme ng kulay, magagamit din bilang mga variable ng Sass at isang mapa ng Sass sa scss/_variables.scssfile ng Bootstrap.

Grays

Isang malawak na hanay ng mga gray na variable at isang Sass na mapa scss/_variables.scsspara sa mga pare-parehong kulay ng grey sa iyong proyekto. Tandaan na ang mga ito ay "cool greys", na may posibilidad sa banayad na asul na tono, sa halip na neutral na kulay abo.

Sa loob scss/_variables.scssng , makikita mo ang mga variable ng kulay ng Bootstrap at mapa ng Sass. Narito ang isang halimbawa ng $colorsmapa ng 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;

Magdagdag, mag-alis, o magbago ng mga halaga sa loob ng mapa upang i-update kung paano ginagamit ang mga ito sa maraming iba pang bahagi. Sa kasamaang palad sa oras na ito, hindi lahat ng bahagi ay gumagamit ng mapa ng Sass na ito. Ang mga update sa hinaharap ay magsusumikap na mapabuti ito. Hanggang sa panahong iyon, magplano sa paggamit ng mga ${color}variable at ang mapa ng Sass na ito.

Mga bahagi

Marami sa mga bahagi at utility ng Bootstrap ay binuo gamit ang mga @eachloop na umuulit sa isang mapa ng Sass. Ito ay partikular na nakakatulong para sa pagbuo ng mga variant ng isang bahagi sa pamamagitan ng aming $theme-colorsat paggawa ng mga tumutugong variant para sa bawat breakpoint. Habang kino-customize mo ang mga mapa ng Sass na ito at muling nag-compile, awtomatiko mong makikita ang iyong mga pagbabago na makikita sa mga loop na ito.

Mga modifier

Marami sa mga bahagi ng Bootstrap ay binuo gamit ang base-modifier class approach. Nangangahulugan ito na ang karamihan ng estilo ay nakapaloob sa isang batayang klase (hal, .btn) habang ang mga pagkakaiba-iba ng istilo ay nakakulong sa mga klase ng modifier (hal, .btn-danger). Ang mga modifier class na ito ay binuo mula sa $theme-colorsmapa para gawing customizing ang numero at pangalan ng aming modifier classes.

Narito ang dalawang halimbawa kung paano kami umiikot sa $theme-colorsmapa upang bumuo ng mga modifier sa .alertbahagi at sa lahat ng aming mga .bg-*kagamitan sa background.

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

Tumutugon

Ang mga Sass loop na ito ay hindi limitado sa mga mapa ng kulay, alinman. Maaari ka ring bumuo ng mga tumutugong variation ng iyong mga bahagi o utility. Kunin halimbawa ang aming tumutugon na text alignment utilities kung saan pinaghalo namin ang isang @eachloop para sa $grid-breakpointsSass map na may kasamang media query.

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

Kung kailangan mong baguhin ang iyong $grid-breakpoints, malalapat ang iyong mga pagbabago sa lahat ng mga loop na umuulit sa mapa na iyon.

Mga variable ng CSS

Kasama sa Bootstrap 4 ang humigit-kumulang dalawang dosenang CSS custom na katangian (mga variable) sa pinagsama-samang CSS nito. Nagbibigay ang mga ito ng madaling pag-access sa mga karaniwang ginagamit na halaga tulad ng aming mga kulay ng tema, breakpoint, at pangunahing font stack kapag nagtatrabaho sa Inspector ng iyong browser, isang code sandbox, o pangkalahatang prototyping.

Magagamit na mga variable

Narito ang mga variable na aming kasama (tandaan na ang :rootay kinakailangan). Ang mga ito ay matatagpuan sa aming _root.scssfile.

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

Mga halimbawa

Nag-aalok ang mga variable ng CSS ng katulad na kakayahang umangkop sa mga variable ni Sass, ngunit hindi nangangailangan ng compilation bago ihatid sa browser. Halimbawa, dito nire-reset namin ang font ng aming page at mga istilo ng link na may mga variable ng CSS.

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

Mga variable ng breakpoint

Bagama't orihinal naming isinama ang mga breakpoint sa aming mga variable ng CSS (hal, --breakpoint-md), hindi sinusuportahan ang mga ito sa mga query sa media , ngunit magagamit pa rin ang mga ito sa loob ng mga ruleset sa mga query sa media. Ang mga breakpoint variable na ito ay nananatili sa pinagsama-samang CSS para sa pabalik na compatibility dahil magagamit sila ng JavaScript. Matuto pa sa spec .

Narito ang isang halimbawa ng kung ano ang hindi suportado:

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

At narito ang isang halimbawa ng kung ano ang sinusuportahan:

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