Theming Bootstrap

Enza ngendlela oyifisayo i-Bootstrap 4 ngezinto zethu ezintsha ezakhelwe ngaphakathi ze-Sass ezithandwayo zesitayela somhlaba wonke ukuze uthole itimu elula nezinguquko zengxenye.

Isingeniso

Ku-Bootstrap 3, itimu yayiqhutshwa kakhulu ukweqa okuguquguqukayo kokuthi LESS, i-CSS yangokwezifiso, neshidi lesitayela letimu elihlukile esilifake distkumafayela ethu. Ngomzamo othile, umuntu angakwazi ukuklama kabusha ngokuphelele ukubukeka kwe-Bootstrap 3 ngaphandle kokuthinta amafayela awumongo. I-Bootstrap 4 inikeza indlela ejwayelekile, kodwa ehluke kancane.

Manje, itimu ifezwa okuguquguqukayo kwe-Sass, amamephu we-Sass, ne-CSS yangokwezifiso. Alisekho ishidi lesitayela letimu elizinikele; esikhundleni salokho, ungakwazi ukunika amandla itimu eyakhelwe ngaphakathi ukuze ungeze ama-gradient, izithunzi, nokuningi.

Sass

Sebenzisa umthombo wethu wamafayela e-Sass ukuze usizakale ngezinto eziguquguqukayo, amamephu, izingxube, nokuningi lapho uhlanganisa i -Sass usebenzisa ipayipi lakho lempahla.

Isakhiwo sefayela

Noma nini lapho kunokwenzeka, gwema ukulungisa amafayela ayinhloko e-Bootstrap. Kwa-Sass, lokho kusho ukudala eyakho ishidi lesitayela elingenisa i-Bootstrap ukuze ukwazi ukuyilungisa futhi uyinwebe. Uma ucabanga ukuthi usebenzisa umphathi wephakheji njenge-npm, uzoba nesakhiwo sefayela esibukeka kanje:

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

Uma ulande amafayela ethu omthombo futhi ungasebenzisi umphathi wephakheji, uzofuna ukumisa mathupha into efana naleso sakhiwo, ugcine amafayela omthombo we-Bootstrap ehlukene kwewakho.

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

Iyangenisa

Kweyakho custom.scss, uzongenisa amafayela we-Sass womthombo we-Bootstrap. Unezinketho ezimbili: faka yonke i-Bootstrap, noma khetha izingxenye ozidingayo. Sikhuthaza lokhu okwakamuva, nakuba sazi ukuthi kunezimfuneko ezithile nokuncika kuzo zonke izingxenye zethu. Uzodinga futhi ukufaka i-JavaScript yama-plugin ethu.

// Custom.scss
// Option A: Include all of Bootstrap

// Include any default variable overrides here (though functions won't be available)

@import "../node_modules/bootstrap/scss/bootstrap";

// Then add additional custom code here

// Custom.scss
// Option B: Include parts of Bootstrap

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@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";

Uma lokho kusetha kusendaweni, ungaqala ukulungisa noma yikuphi okuguquguqukayo kwe-Sass namamephu kufayela lakho le- custom.scss. Ungaqala futhi ukwengeza izingxenye ze-Bootstrap ngaphansi // Optionalkwesigaba njengoba kudingeka. Siphakamisa ukuthi usebenzise isitaki sokungenisa esigcwele esivela bootstrap.scsskufayela lethu njengendawo yakho yokuqala.

Okuzenzakalelayo okuguquguqukayo

Konke okuguquguqukayo kwe-Sass ku-Bootstrap kufaka phakathi !defaultifulegi elikuvumela ukuthi ubhale ngaphezulu inani elizenzakalelayo lokuguquguquka ku-Sass yakho ngaphandle kokulungisa ikhodi yomthombo ye-Bootstrap. Kopisha futhi unamathisele okuguquguqukayo njengoba kudingeka, lungisa amanani azo, futhi ususe !defaultifulegi. Uma okuguquguqukayo sekuvele kwabelwe, ngakho-ke ngeke kuphinde kunikezwe amanani azenzakalelayo ku-Bootstrap.

Uzothola uhlu oluphelele lweziguquguquko ze-Bootstrap ku- scss/_variables.scss. Ezinye eziguquguqukayo zisethelwe kokuthi null, lezi ziguquko azikhiphi isici ngaphandle kokuthi zikhishwe ekucushweni kwakho.

Ukukhishwa okuguquguqukayo kufanele kuze ngemva kokuthi imisebenzi yethu, okuguquguqukayo, nezingxube zingenisiwe, kodwa ngaphambi kokunye ukungenisa.

Nasi isibonelo esishintsha i- kanye background-colorneyokuthi lapho ungenisa futhi uhlanganisa i-Bootstrap nge-npm:color<body>

@import "../node_modules/bootstrap/scss/functions";

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

// Required
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

Phinda njengoba kudingekile kunoma yikuphi okuguquguqukayo ku-Bootstrap, kuhlanganise nezinketho zomhlaba jikelele ngezansi.

Amamephu namaluphu

I-Bootstrap 4 ihlanganisa idlanzana lamamephu e-Sass, amapheya enani angukhiye akwenza kube lula ukukhiqiza imindeni ye-CSS ehlobene. Sisebenzisa amamephu e-Sass ngemibala yethu, izindawo zokunqamuka kwegridi, nokuningi. Njengezinto eziguquguqukayo ze-Sass, wonke amamephu akwa-Sass afaka !defaultifulegi futhi angabhalwa phansi futhi andwe.

Amanye amamephu ethu e-Sass ahlanganiswa abe angenalutho ngokuzenzakalelayo. Lokhu kwenzelwa ukuvumela ukunwetshwa okulula kwemephu ye-Sass enikeziwe, kodwa kuza ngezindleko zokwenza ukususa izinto kumephu kube nzima kakhulu.

Lungisa imephu

Ukuze ulungise umbala okhona $theme-colorskumephu yethu, engeza okulandelayo kufayela lakho langokwezifiso le-Sass:

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

Engeza kumephu

Ukwengeza umbala omusha ku- $theme-colors, engeza ukhiye omusha nevelu:

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

Susa kumephu

Ukuze ususe imibala ku- $theme-colors, nanoma iyiphi enye imephu, sebenzisa map-remove. Qaphela ukuthi kufanele uyifake phakathi kwezimfuneko zethu nezinketho:

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

Okhiye abadingekayo

I-Bootstrap ithatha ubukhona bokhiye abathile ngaphakathi kwamamephu e-Sass njengoba siwasebenzisile futhi sizinweba thina ngokwethu. Njengoba wenza ngendlela oyifisayo amamephu afakiwe, ungase uhlangabezane namaphutha lapho kusetshenziswa khona ukhiye othile wemephu ye-Sass.

Isibonelo, sisebenzisa i- primary, success, kanye dangernokhiye abavela kuzo $theme-colorsukuze uthole izixhumanisi, izinkinobho, nezimo zefomu. Ukushintsha amanani alaba khiye akumele kuveze izinkinga, kodwa ukuwasusa kungase kubangele izinkinga zokuhlanganisa i-Sass. Kulezi zimo, uzodinga ukushintsha ikhodi ye-Sass esebenzisa lawo manani.

Imisebenzi

I-Bootstrap isebenzisa imisebenzi eminingana ye-Sass, kodwa isethi encane kuphela esebenza kungqikithi evamile. Sifake imisebenzi emithathu yokuthola amanani kumamephu ombala:

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

Lokhu kukuvumela ukuthi ukhethe umbala owodwa kumephu ye-Sass njengokuthi ungasebenzisa kanjani umbala ohlukile ku-v3.

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

Siphinde sibe nomunye umsebenzi wokuthola izinga elithile lombala $theme-colorskumephu. Amanani amaleveli angalungile azokhanyisa umbala, kuyilapho amazinga aphezulu ezoba mnyama.

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

Empeleni, ungabiza umsebenzi bese udlula ngamapharamitha amabili: igama lombala ukusuka $theme-colors(isb, okuyinhloko noma ingozi) kanye nezinga lezinombolo.

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

Imisebenzi eyengeziwe ingase yengezwe ngokuzayo noma eyakho i-Sass yangokwezifiso ukuze udale imisebenzi yeleveli yamamephu engeziwe e-Sass, noma ngisho nelinye elijwayelekile uma ufuna ukusho amazwi amaningi.

Ukungafani kombala

Umsebenzi owengeziwe esiwufaka ku-Bootstrap umsebenzi wokugqama kombala, color-yiq. Isebenzisa isikhala sombala we-YIQ ukubuyisela ngokuzenzakalelayo ukukhanya ( #fff) noma okumnyama ( #111) umbala wokugqama osuselwe kumbala wesisekelo oshiwo. Lo msebenzi uwusizo ikakhulukazi kumamiksi noma amaluphu lapho ukhiqiza khona amakilasi amaningi.

Isibonelo, ukwenza ama-swatches ombala $theme-colorskumephu yethu:

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

Ingase futhi isetshenziselwe izidingo zokuqhathanisa okukodwa:

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

Ungaphinda ucacise umbala oyisisekelo ngemisebenzi yethu yemephu yombala:

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

Escape SVG

Sisebenzisa escape-svgumsebenzi ukubalekela <, >nezinhlamvu #zezithombe zangemuva ze-SVG. Lezi zinhlamvu zidinga ukweqiwa ukuze kunikezwe kahle izithombe zangemuva ku-IE. Uma usebenzisa escape-svgumsebenzi, ama-URL wedatha kufanele acashunwe.

Engeza futhi Ususe imisebenzi

Sisebenzisa addkanye subtractnemisebenzi ukusonga umsebenzi we-CSS calc. Injongo eyinhloko yale misebenzi iwukugwema amaphutha lapho inani elithi “unitless” 0lidluliselwa calcenkulumweni. Izinkulumo ezifana nalezi calc(10px - 0)zizobuyisela iphutha kuzo zonke iziphequluli, ngaphandle kokuthi zilungile ngokwezibalo.

Isibonelo lapho i-calc isebenza khona:

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

Isibonelo lapho i-calc ingavumelekile:

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

Izinketho ze-Sass

Enza ngendlela oyifisayo i-Bootstrap 4 ngefayela lethu eliguquguqukayo elakhelwe ngaphakathi futhi uguqule kalula okuthandwayo kwe-CSS yomhlaba wonke ngezinto ezintsha ze- $enable-*Sass. Khipha inani lokuguquguquka bese uhlanganisa futhi npm run testnjengoba kudingeka.

Ungathola futhi wenze ngendlela oyifisayo lokhu okuguquguqukayo ukuze uthole izinketho ezibalulekile zomhlaba wonke scss/_variables.scsskufayela le-Bootstrap.

Umbala

Izingxenye eziningi nezinsiza ezihlukahlukene ze-Bootstrap zakhiwe ngochungechunge lwemibala echazwe kumephu ye-Sass. Le mephu ingafakwa ku-Sass ukuze kukhiqizwe ngokushesha uchungechunge lwamasethi emithetho.

Yonke imibala

Yonke imibala etholakala ku-Bootstrap 4, iyatholakala njengezinto eziguquguqukayo ze-Sass kanye nemephu ye-Sass scss/_variables.scssefayeleni. Lokhu kuzonwetshwa ekukhishweni okuncane okulandelayo ukuze kwengezwe ama-shades engeziwe, afana nephalethi ye-grayscale esesivele siyifakile.

Nansi indlela ongazisebenzisa ngayo lezi ku-Sass yakho:

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

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

Amakilasi okusetshenziswa kwemibala nawo ayatholakala ukuze amiswe colorfuthi background-color.

Imibala yetimu

Sisebenzisa isethi engaphansi yayo yonke imibala ukuze sakhe iphalethi yombala emincane ukuze sikhiqize izikimu zombala, futhi ezitholakala njengeziguquguqukayo ze-Sass kanye nemephu ye-Sass scss/_variables.scsskufayela le-Bootstrap.

Izimpunga

Isethi enwetshiwe yokuhlukahluka okumpunga kanye nemephu ye-Sass scss/_variables.scssukuze uthole imithunzi engaguquki yokumpunga kuyo yonke iphrojekthi yakho. Qaphela ukuthi lawa “angamagrey apholile”, ajwayele ukuya ethoni ecashile eluhlaza okwesibhakabhaka, esikhundleni sokumpunga okuphakathi.

Ngaphakathi scss/_variables.scss, uzothola okuguquguqukayo kombala kwe-Bootstrap kanye nemephu ye-Sass. Nasi isibonelo $colorssemephu ye-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;

Engeza, susa, noma lungisa amanani ngaphakathi kwemephu ukuze ubuyekeze indlela asetshenziswa ngayo kwezinye izingxenye eziningi. Ngeshwa ngalesi sikhathi, akuzona zonke izingxenye ezisebenzisa le mephu ye-Sass. Izibuyekezo zesikhathi esizayo zizolwela ukuthuthukisa kulokhu. Kuze kube yileso sikhathi, hlela ukusebenzisa ${color}okuguquguqukayo kanye nale mephu ye-Sass.

Izingxenye

Izingxenye eziningi nezinsiza ze-Bootstrap zakhiwe @eachngamalophu aphindaphindayo phezu kwemephu ye-Sass. Lokhu kusiza kakhulu ekukhiqizeni okuhlukile kwengxenye yethu $theme-colorsnokudala okuhlukile okusabelayo kwephuzu ngalinye lokuhlukana. Njengoba wenza ngendlela oyifisayo lawa mamephu we-Sass futhi uhlanganisa futhi, uzobona ngokuzenzakalela izinguquko zakho ziboniswa kulawa maluphu.

Izilungisi

Izingxenye eziningi ze-Bootstrap zakhiwe ngendlela yekilasi le-base-modifier. Lokhu kusho ukuthi inqwaba yesitayela iqukethwe kusigaba sesisekelo (isb, .btn) kuyilapho ukuhluka kwesitayela kuphelele kumakilasi okulungisa (isb, .btn-danger). Lezi zigaba zokuguqula zakhiwe kusukela $theme-colorskumephu ukuze kwenziwe ngendlela oyifisayo inombolo negama lamakilasi ethu okulungisa.

Nazi izibonelo ezimbili zokuthi singena kanjani phezu $theme-colorskwemephu ukuze sikhiqize izilungisi .alertzengxenye kanye nazo zonke .bg-*izinsiza zethu ezingemuva.

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

Iyasabela

Lawa ma-loops akwa-Sass awakhawulelwe kumamephu anemibala, nawo. Ungakwazi futhi ukukhiqiza ukuhlukahluka okusabelayo kwezingxenye zakho noma izinsiza. Thatha isibonelo izinsiza zethu zokuqondanisa umbhalo osabelayo lapho sixuba @eachiluphu $grid-breakpointsyemephu ye-Sass kanye nombuzo wemidiya.

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

Uma kwenzeka udinga ukulungisa $grid-breakpoints, izinguquko zakho zizosebenza kuwo wonke ama-loops aphindaphindayo kuleyo mephu.

Izinguquko ze-CSS

I-Bootstrap 4 ihlanganisa cishe izingxenye ezimbili nambili zangokwezifiso ze-CSS (okuguquguqukayo) ku-CSS yayo ehlanganisiwe. Lokhu kunikeza ukufinyelela okulula kumanani asetshenziswa kakhulu njengemibala yethu yetimu, ama-breakpoint, nezitaki zefonti eziyinhloko lapho usebenza Kumhloli wesiphequluli sakho, ikhodi yesihlabathi, noma i-prototyping evamile.

Okuguquguqukayo okutholakalayo

Nazi izinto eziguquguqukayo esizihlanganisayo (qaphela ukuthi :rootkuyadingeka). Atholakala _root.scsskufayela lethu.

: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", "Liberation 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;
}

Izibonelo

Okuguquguqukayo kwe-CSS kunikeza ukuguquguquka okufanayo kokuguquguqukayo kwe-Sass, kodwa ngaphandle kwesidingo sokuhlanganisa ngaphambi kokuthi kunikezwe isiphequluli. Isibonelo, lapha sisetha kabusha ifonti yekhasi lethu nezitayela zokuxhumanisa neziguquguqukayo ze-CSS.

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

Okuguquguqukayo kwe-Breakpoint

Nakuba ekuqaleni sifake ama-breakpoint ezinguqukweni zethu ze-CSS (isb, --breakpoint-md), lezi azisekelwe emibuzweni yemidiya , kodwa zingasetshenziswa ngaphakathi kwezimiso zemithetho emibuzweni yemidiya. Lezi zinguquko ze-breakpoint zihlala ku-CSS ehlanganisiwe ukuze zihambisane nemuva uma zingasetshenziswa yi-JavaScript. Funda kabanzi ku-spec .

Nasi isibonelo salokho okungasekelwe:

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

Futhi nasi isibonelo salokho okusekelwayo:

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