Source

Theming Bootstrap

Ṣe akanṣe Bootstrap 4 pẹlu awọn oniyipada Sass tuntun ti a ṣe sinu fun awọn ayanfẹ ara agbaye fun akori irọrun ati awọn iyipada paati.

Ifaara

Ni Bootstrap 3, akori jẹ idari pupọ nipasẹ awọn ifasilẹ oniyipada ni LESS, aṣa CSS, ati aṣa ara akori ọtọtọ ti a fi sinu awọn distfaili wa. Pẹlu igbiyanju diẹ, ọkan le ṣe atunṣe iwo Bootstrap 3 patapata laisi fọwọkan awọn faili pataki. Bootstrap 4 n pese ọna ti o mọ, ṣugbọn ọna ti o yatọ diẹ.

Ni bayi, akori jẹ aṣeyọri nipasẹ awọn oniyipada Sass, awọn maapu Sass, ati CSS aṣa. Nibẹ ni ko si siwaju sii ifiṣootọ akori stylesheet; dipo, o le jeki akori ti a ṣe sinu rẹ lati ṣafikun awọn gradients, awọn ojiji, ati diẹ sii.

Sass

Lo awọn faili Sass orisun wa lati lo anfani awọn oniyipada, maapu, awọn apopọ, ati diẹ sii.

Ilana faili

Nigbakugba ti o ba ṣeeṣe, yago fun iyipada awọn faili pataki Bootstrap. Fun Sass, iyẹn tumọ si ṣiṣẹda iwe aṣa tirẹ ti o gbe Bootstrap wọle ki o le yipada ki o fa sii. Ti o ba ro pe o nlo oluṣakoso package bi npm, iwọ yoo ni eto faili ti o dabi eyi:

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

Ti o ba ti ṣe igbasilẹ awọn faili orisun wa ati pe ko lo oluṣakoso package, iwọ yoo fẹ lati ṣeto nkan ti o jọra si eto yẹn, titọju awọn faili orisun Bootstrap lọtọ si tirẹ.

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

Gbigbe wọle

Ninu rẹ custom.scss, iwọ yoo gbe awọn faili Sass orisun Bootstrap wọle. O ni awọn aṣayan meji: pẹlu gbogbo Bootstrap, tabi mu awọn ẹya ti o nilo. A ṣe iwuri fun igbehin, botilẹjẹpe akiyesi pe awọn ibeere ati awọn igbẹkẹle wa kọja awọn paati wa. Iwọ yoo nilo lati ni diẹ ninu JavaScript fun awọn afikun wa.

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

Pẹlu iṣeto yẹn ni aye, o le bẹrẹ lati yipada eyikeyi ninu awọn oniyipada Sass ati awọn maapu ninu faili custom.scss. O tun le bẹrẹ lati ṣafikun awọn ẹya Bootstrap labẹ // Optionalapakan bi o ṣe nilo. A daba ni lilo akopọ agbewọle ni kikun lati bootstrap.scssfaili wa bi aaye ibẹrẹ rẹ.

Ayipada aiyipada

Gbogbo oniyipada Sass ni Bootstrap 4 pẹlu !defaultasia ti o fun ọ laaye lati yiyipada iye aiyipada ti oniyipada ninu Sass tirẹ laisi iyipada koodu orisun Bootstrap. Daakọ ati lẹẹmọ awọn oniyipada bi o ṣe nilo, yi awọn iye wọn pada, ki o yọ !defaultasia kuro. Ti o ba ti yan oniyipada kan tẹlẹ, lẹhinna kii yoo tun fi sọtọ nipasẹ awọn iye aiyipada ni Bootstrap.

Iwọ yoo wa atokọ pipe ti awọn oniyipada Bootstrap ni scss/_variables.scss.

Awọn iyipada iyipada laarin faili Sass kanna le wa ṣaaju tabi lẹhin awọn oniyipada aiyipada. Sibẹsibẹ, nigbati o ba bori kọja awọn faili Sass, awọn ifasilẹ rẹ gbọdọ wa ṣaaju ki o to gbe awọn faili Bootstrap's Sass wọle.

Eyi ni apẹẹrẹ ti o yipada background-colorati colorfun <body>nigba gbigbe wọle ati ṣajọ Bootstrap nipasẹ npm:

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

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

Tun ṣe pataki fun eyikeyi oniyipada ni Bootstrap, pẹlu awọn aṣayan agbaye ni isalẹ.

Awọn maapu ati awọn losiwajulosehin

Bootstrap 4 pẹlu iwonba awọn maapu Sass, awọn orisii iye bọtini ti o jẹ ki o rọrun lati ṣe ipilẹṣẹ awọn idile ti CSS ti o ni ibatan. A lo awọn maapu Sass fun awọn awọ wa, awọn aaye fifọ grid, ati diẹ sii. Gẹgẹ bii awọn oniyipada Sass, gbogbo awọn maapu Sass pẹlu !defaultasia ati pe o le bori ati faagun.

Diẹ ninu awọn maapu Sass wa ti dapọ si awọn ti o ṣofo nipasẹ aiyipada. Eyi ni a ṣe lati gba imugboroja irọrun ti maapu Sass ti a fun, ṣugbọn o wa ni idiyele ti ṣiṣe yiyọ awọn ohun kan kuro lati maapu kan ni iṣoro diẹ sii.

Ṣe atunṣe maapu

Lati ṣatunkọ awọ to wa tẹlẹ ninu $theme-colorsmaapu wa, ṣafikun atẹle naa si faili Sass aṣa rẹ:

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

Fi kun si maapu

Lati ṣafikun awọ tuntun si $theme-colors, ṣafikun bọtini titun ati iye:

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

Yọọ kuro ni maapu

Lati yọ awọn awọ kuro lati $theme-colors, tabi eyikeyi maapu miiran, lo map-remove. Mọ pe o gbọdọ fi sii laarin awọn ibeere ati awọn aṣayan wa:

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

Awọn bọtini ti a beere

Bootstrap dawọle wiwa diẹ ninu awọn bọtini kan pato laarin awọn maapu Sass bi a ṣe lo ati fa awọn wọnyi funrara wa. Bi o ṣe n ṣatunṣe awọn maapu to wa, o le ba pade awọn aṣiṣe nibiti o ti nlo bọtini maapu Sass kan pato.

Fun apẹẹrẹ, a lo primary, success, ati dangerawọn bọtini lati $theme-colorsfun awọn ọna asopọ, awọn bọtini, ati awọn ipinlẹ fọọmu. Rirọpo awọn iye ti awọn bọtini wọnyi ko yẹ ki o ṣafihan awọn ọran, ṣugbọn yiyọ wọn le fa awọn ọran akojọpọ Sass. Ni awọn iṣẹlẹ wọnyi, iwọ yoo nilo lati yipada koodu Sass ti o lo awọn iye wọnyẹn.

Awọn iṣẹ

Bootstrap nlo awọn iṣẹ Sass pupọ, ṣugbọn ipin kan nikan ni o wulo fun akori gbogbogbo. A ti ṣafikun awọn iṣẹ mẹta fun gbigba awọn iye lati awọn maapu awọ:

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

Iwọnyi gba ọ laaye lati mu awọ kan lati maapu Sass kan bii bii o ṣe le lo oniyipada awọ lati v3.

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

A tun ni iṣẹ miiran fun gbigba ipele awọ kan pato lati $theme-colorsmaapu naa. Awọn iye ipele odi yoo tan awọ naa, lakoko ti awọn ipele ti o ga julọ yoo ṣokunkun.

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

Ni iṣe, iwọ yoo pe iṣẹ naa ki o kọja ni awọn aye meji: orukọ awọ lati $theme-colors(fun apẹẹrẹ, akọkọ tabi eewu) ati ipele nọmba kan.

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

Awọn iṣẹ afikun le ṣe afikun ni ọjọ iwaju tabi aṣa Sass tirẹ lati ṣẹda awọn iṣẹ ipele fun awọn maapu Sass afikun, tabi paapaa jeneriki ti o ba fẹ lati jẹ ọrọ-ọrọ diẹ sii.

Iyatọ awọ

Iṣẹ afikun kan ti a ni ninu Bootstrap jẹ iṣẹ itansan awọ, color-yiq. O nlo aaye awọ YIQ lati da ina kan pada laifọwọyi ( #fff) tabi dudu ( #111) awọ itansan ti o da lori awọ ipilẹ ti a sọ. Iṣẹ yii wulo paapaa fun awọn apopọ tabi awọn losiwajulosehin nibiti o ti n ṣe agbekalẹ awọn kilasi pupọ.

Fun apẹẹrẹ, lati ṣe agbejade awọn swatches awọ lati $theme-colorsmaapu wa:

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

O tun le ṣee lo fun awọn iwulo itansan ọkan-pipa:

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

O tun le pato awọ ipilẹ kan pẹlu awọn iṣẹ maapu awọ wa:

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

Awọn aṣayan Sass

Ṣe akanṣe Bootstrap 4 pẹlu faili awọn oniyipada aṣa ti a ṣe sinu ati irọrun yi awọn ayanfẹ CSS agbaye pẹlu awọn $enable-*oniyipada Sass tuntun. Fojusi iye oniyipada ki o tun ṣajọpọ pẹlu npm run testbi o ṣe nilo.

O le wa ati ṣe akanṣe awọn oniyipada wọnyi fun awọn aṣayan agbaye bọtini ni scss/_variables.scssfaili Bootstrap.

Ayípadà Awọn iye Apejuwe
$spacer 1rem(aiyipada), tabi eyikeyi iye> 0 Ni pato iye alafo aiyipada lati ṣe ipilẹṣẹ awọn ohun elo spacer wa ni eto .
$enable-rounded true(aiyipada) tabifalse Mu awọn aza ti a ti sọ tẹlẹ border-radiusṣiṣẹ lori oriṣiriṣi awọn paati.
$enable-shadows truetabi false(aiyipada) Mu awọn aza ti a ti sọ tẹlẹ box-shadowṣiṣẹ lori oriṣiriṣi awọn paati.
$enable-gradients truetabi false(aiyipada) Mu awọn gradients ti a ti sọ tẹlẹ ṣiṣẹ nipasẹ background-imageawọn aza lori ọpọlọpọ awọn paati.
$enable-transitions true(aiyipada) tabifalse Mu awọn ti a ti yan tẹlẹ transitionṣiṣẹ lori awọn paati oriṣiriṣi.
$enable-hover-media-query truetabi false(aiyipada) Idinku
$enable-grid-classes true(aiyipada) tabifalse Mu ki iran ti awọn kilasi CSS ṣiṣẹ fun eto akoj (fun apẹẹrẹ,,,,, ati .containerbẹbẹ lọ)..row.col-md-1
$enable-caret true(aiyipada) tabifalse Nṣiṣẹ itọju apilẹṣẹ ano lori .dropdown-toggle.
$enable-print-styles true(aiyipada) tabifalse Nṣiṣẹ awọn aza fun mimuju iwọn titẹ sita.

Àwọ̀

Pupọ ti awọn oriṣiriṣi awọn paati ati awọn ohun elo Bootstrap ni a kọ nipasẹ lẹsẹsẹ awọn awọ ti a ṣalaye ni maapu Sass kan. Maapu yii le wa ni yipo ni Sass lati ṣe agbekalẹ lẹsẹsẹ awọn ilana ofin ni kiakia.

Gbogbo awọn awọ

Gbogbo awọn awọ ti o wa ni Bootstrap 4, wa bi awọn oniyipada Sass ati maapu Sass ninu scss/_variables.scssfaili. Eyi yoo faagun ni awọn idasilẹ kekere ti o tẹle lati ṣafikun awọn iboji afikun, pupọ bii paleti grẹy ti a pẹlu tẹlẹ.

Buluu
Indigo
eleyi ti
Pink
Pupa
ọsan
Yellow
Alawọ ewe
Tii
Cyan

Eyi ni bii o ṣe le lo awọn wọnyi ninu Sass rẹ:

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

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

Awọn kilasi IwUlO awọ tun wa fun tito colorati background-color.

Ni ọjọ iwaju, a yoo ṣe ifọkansi lati pese awọn maapu Sass ati awọn oniyipada fun awọn ojiji ti awọ kọọkan bi a ti ṣe pẹlu awọn awọ grẹy ni isalẹ.

Awọn awọ akori

A lo ipin kan ti gbogbo awọn awọ lati ṣẹda paleti awọ ti o kere fun ṣiṣẹda awọn ero awọ, tun wa bi awọn oniyipada Sass ati maapu Sass kan ninu scss/_variables.scssfaili Bootstraps.

Alakoko
Atẹle
Aseyori
Ijamba
Ikilo
Alaye
Imọlẹ
Dudu

Grẹy

Eto ti o gbooro ti awọn oniyipada grẹy ati maapu Sass kan scss/_variables.scssfun awọn ojiji grẹy dédé kọja iṣẹ akanṣe rẹ.

100
200
300
400
500
600
700
800
900

Ninu scss/_variables.scss, iwọ yoo rii awọn oniyipada awọ Bootstrap ati maapu Sass. Eyi ni apẹẹrẹ ti $colorsmaapu 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;

Ṣafikun, yọkuro, tabi ṣatunṣe awọn iye laarin maapu lati ṣe imudojuiwọn bi wọn ṣe nlo ni ọpọlọpọ awọn paati miiran. Laanu ni akoko yii, kii ṣe gbogbo paati lo maapu Sass yii. Awọn imudojuiwọn ọjọ iwaju yoo tiraka lati ni ilọsiwaju lori eyi. Titi di igba naa, gbero lori lilo awọn ${color}oniyipada ati maapu Sass yii.

Awọn eroja

Pupọ awọn paati Bootstrap ati awọn ohun elo ti a ṣe pẹlu awọn @eachlosiwajulosehin ti o ṣe atunṣe lori maapu Sass kan. Eyi ṣe iranlọwọ paapaa fun ṣiṣẹda awọn iyatọ ti paati nipasẹ wa $theme-colorsati ṣiṣẹda awọn iyatọ idahun fun aaye fifọ kọọkan. Bi o ṣe n ṣe awọn maapu Sass wọnyi ti o si tun ṣe akopọ, iwọ yoo rii laifọwọyi awọn ayipada rẹ ti farahan ninu awọn yipo wọnyi.

Awọn oluyipada

Ọpọlọpọ awọn paati Bootstrap ni a kọ pẹlu ọna kilasi iyipada-ipilẹ. Eyi tumọ si pupọ julọ ti iselona wa ninu kilasi mimọ (fun apẹẹrẹ, .btn) lakoko ti awọn iyatọ ara wa ni ihamọ si awọn kilasi iyipada (fun apẹẹrẹ, .btn-danger). Awọn kilasi modifier wọnyi ni a kọ lati $theme-colorsmaapu lati ṣe isọdi nọmba ati orukọ awọn kilasi iyipada wa.

Eyi ni awọn apẹẹrẹ meji ti bii a ṣe yipo lori $theme-colorsmaapu lati ṣe ipilẹṣẹ awọn iyipada si .alertpaati ati gbogbo awọn .bg-*ohun elo abẹlẹ wa.

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

Idahun

Awọn yipo Sass wọnyi ko ni opin si awọn maapu awọ, boya. O tun le ṣe ina awọn iyatọ idahun ti awọn paati tabi awọn ohun elo rẹ. Mu fun apẹẹrẹ awọn ohun elo titete ọrọ idahun nibiti a ti dapọ @eachlupu kan fun $grid-breakpointsmaapu Sass pẹlu ibeere media kan pẹlu.

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

Ti o ba nilo lati ṣe atunṣe rẹ $grid-breakpoints, awọn ayipada rẹ yoo kan si gbogbo awọn losiwajulosehin ti n ṣe atunṣe lori maapu yẹn.

CSS oniyipada

Bootstrap 4 pẹlu ni ayika meji mejila mejila awọn ohun-ini aṣa CSS (awọn oniyipada) ninu CSS ti o ṣajọ. Iwọnyi n pese iraye si irọrun si awọn iye ti a lo nigbagbogbo bii awọn awọ akori wa, awọn aaye fifọ, ati awọn akopọ fonti akọkọ nigbati o n ṣiṣẹ ni Oluyewo ẹrọ aṣawakiri rẹ, apoti yanrin koodu kan, tabi afọwọṣe gbogbogbo.

Awọn oniyipada ti o wa

Eyi ni awọn oniyipada ti a pẹlu (akiyesi pe o :rootnilo). Wọn wa ninu _root.scssfaili wa.

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

Awọn apẹẹrẹ

Awọn oniyipada CSS nfunni ni irọrun ti o jọra si awọn oniyipada Sass, ṣugbọn laisi iwulo fun akopọ ṣaaju ki o to ṣiṣẹ si ẹrọ aṣawakiri naa. Fún àpẹrẹ, níhìn-ín a tún ń ṣàtúntò fọ́ntì ojú-ewé wa àti àwọn ọ̀nà ìsopọ̀ pẹ̀lú àwọn oniyipada CSS.

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

Breakpoint oniyipada

Lakoko ti a ti kọkọ pẹlu awọn aaye fifọ ni awọn oniyipada CSS wa (fun apẹẹrẹ, --breakpoint-md), awọn wọnyi ko ni atilẹyin ninu awọn ibeere media , ṣugbọn wọn tun le ṣee lo laarin awọn ofin ni awọn ibeere media. Awọn oniyipada ibi fifọ wọnyi wa ninu CSS ti a ṣe akojọpọ fun ibaramu sẹhin ti a fun wọn le jẹ lilo nipasẹ JavaScript. Kọ ẹkọ diẹ sii ni pato.

Eyi ni apẹẹrẹ ti ohun ti ko ṣe atilẹyin:

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

Ati pe eyi ni apẹẹrẹ ti ohun ti o ṣe atilẹyin:

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