Theming Bootstrap

Yenza ngokwezifiso i-Bootstrap yesi-4 ngezinto zethu ezintsha ezakhelwe ngaphakathi ze-Sass zokhetho lwesitayile sehlabathi ukulungiselela umxholo olula kunye notshintsho lwamacandelo.

Intshayelelo

Kwi-Bootstrap 3, i-theming yayiqhutywa ubukhulu becala kukudlula okuguquguqukayo kwi-LESS, i-CSS yesiko, kunye necwecwe lesitayile somxholo owahlukileyo esiwufake distkwiifayile zethu. Ngomzamo othile, umntu unokuphinda ahlengahlengise ngokupheleleyo inkangeleko yeBootstrap 3 ngaphandle kokuchukumisa iifayile ezingundoqo. I-Bootstrap 4 ibonelela ngendlela eqhelekileyo, kodwa eyahlukileyo kancinane.

Ngoku, umxholo ufezekiswa ngoguquguquko lweSass, iimephu zeSass, kunye neCSS yesiko. Akusekho cwecwe lesimbo lomxholo ozinikeleyo; endaweni yoko, unokwenza umxholo owakhelwe-ngaphakathi ukongeza i-gradients, izithunzi, kunye nokunye.

Sass

Sebenzisa umthombo wethu weefayile zeSass ukuthatha ithuba lokuguquguquka, iimephu, imixube, kunye nokunye xa usenza iSass usebenzisa owakho umbhobho we-asethi.

Ubume befayile

Nanini na kunokwenzeka, kunqanda ukulungisa iifayile ezingundoqo zeBootstrap. KwiSass, oko kuthetha ukwenza elakho iphepha lesimbo elingenisa ngaphandle iBootstrap ukuze ukwazi ukuyilungisa kwaye uyandise. Ucinga ukuba usebenzisa umphathi wephakheji njenge-npm, uya kuba nesakhiwo sefayile esijongeka ngolu hlobo:

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

Ukuba ukhuphele iifayile zethu zemvelaphi kwaye awusebenzisi umphathi wepakethe, uya kufuna ukuseta ngesandla into efana neso sakhiwo, ugcine iifayile zemvelaphi yeBootstrap zahlukile kweyakho.

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

Ukungenisa elizweni

Kweyakho custom.scss, uya kungenisa iifayile zeSass zomthombo weBootstrap. Uneendlela ezimbini ongakhetha kuzo: bandakanya yonke iBootstrap, okanye khetha iindawo ozifunayo. Siyayikhuthaza le yokugqibela, nangona sisazi ukuba kukho iimfuno kunye nokuxhomekeka kumacandelo ethu. Kananjalo kuya kufuneka ubandakanye iJavaScript yeeplagi zethu.

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

Ngolu seto lusendaweni, ungaqala ukulungisa naziphi na izinto eziguquguqukayo zeSass kunye neemephu kweyakho custom.scss. Ungaqalisa kwakhona ukongeza iinxalenye zeBootstrap phantsi // Optionalkwecandelo njengoko kufuneka. Sicebisa ukuba usebenzise isitaki esipheleleyo sokungenisa bootstrap.scsskwifayile yethu njengendawo yakho yokuqala.

Ukungagqibeki okuguquguqukayo

Yonke into eguquguqukayo ye-Sass kwi-Bootstrap ibandakanya !defaultiflegi ekuvumela ukuba ubhale ngaphezulu ixabiso elingagqibekanga le-Sass yakho ngaphandle kokuguqula ikhowudi yemvelaphi ye-Bootstrap. Khuphela kwaye uncamathisele izinto eziguquguqukayo njengoko kufuneka, uguqule amaxabiso azo, kwaye ususe !defaultiflegi. Ukuba uguqulo sele lwabelwe, ngoko aluzukwabelwa kwakhona ngamaxabiso angagqibekanga kwiBootstrap.

Uya kufumana uluhlu olupheleleyo lweenguqu zeBootstrap kwi scss/_variables.scss. Ezinye iinguqu zisetwe ku null, ezi ziguquguqukayo azikhuphi ipropati ngaphandle kokuba zibhalwe ngaphezulu kuqwalaselo lwakho.

Ugqithiso oluguquguqukayo kufuneka luze emva kokuba imisebenzi yethu, izinto eziguquguqukayo, kunye nemixube ingenisiwe, kodwa ngaphambi kokuphuma kwamanye amazwe.

Nanku umzekelo otshintsha background-colorkunye colorneyokurhweba <body>ngaphandle kunye nokuqulunqa i-Bootstrap nge-npm:

@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 njengoko kuyimfuneko kuyo nayiphi na inguqu kwiBootstrap, kuquka iinketho zehlabathi ezingezantsi.

Iimephu kunye neelophu

I-Bootstrap 4 ibandakanya iimephu ze-Sass ezimbalwa, izibini zexabiso eziphambili ezenza kube lula ukuvelisa iintsapho ze-CSS ehambelanayo. Sisebenzisa iimephu zakwaSass kwimibala yethu, iindawo zokuqhawula igridi, nokunye. Kanye njengezinto eziguquguqukayo ze-Sass, zonke iimephu ze-Sass zibandakanya !defaultiflegi kwaye zinokubhalwa ngaphezulu kwaye zandiswe.

Ezinye zeemephu zethu zakwaSass zidityaniswa zibe zingenanto ngokungagqibekanga. Oku kwenzelwa ukuvumela ukwandiswa lula kwemephu ye-Sass enikiweyo, kodwa kuza ngexabiso lokwenza ukususa izinto kwimephu kube nzima ngakumbi.

Guqula imephu

Ukuguqula umbala osele ukhona $theme-colorskwimephu yethu, yongeza oku kulandelayo kwifayile yakho yesiko leSass:

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

Yongeza kwimephu

Ukongeza umbala omtsha $theme-colors, yongeza iqhosha elitsha kunye nexabiso:

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

Susa kwimephu

Ukususa imibala kwi- $theme-colors, okanye nayiphi na enye imephu, sebenzisa map-remove. Qaphela ukuba kufuneka uyifake phakathi kweemfuno zethu kunye nokhetho:

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

Izitshixo ezifunekayo

I-Bootstrap ithatha ubukho bezitshixo ezithile ngaphakathi kweemephu ze-Sass njengoko besizisebenzisa kwaye sizandise ngokwethu. Njengoko ulungiselela iimephu ezibandakanyiweyo, ungadibana neempazamo apho kusetyenziswa isitshixo semephu ye-Sass ethile.

Umzekelo, sisebenzisa i- primary, successkunye dangernezitshixo ezisuka $theme-colorskumakhonkco, amaqhosha, kunye nefom yesimo. Ukutshintsha amaxabiso ezi zitshixo kufuneka kungabikho miba, kodwa ukuwasusa kunokubangela imiba yokuhlanganiswa kwe-Sass. Kwezi meko, kuya kufuneka uguqule ikhowudi ye-Sass esebenzisa loo maxabiso.

Imisebenzi

I-Bootstrap isebenzisa imisebenzi emininzi ye-Sass, kodwa iseti encinci kuphela esebenzayo kumxholo jikelele. Sifake imisebenzi emithathu yokufumana ixabiso kwiimephu zemibala:

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

Oku kukuvumela ukuba ukhethe umbala omnye kwimephu ye-Sass ngendlela onokuthi usebenzise ngayo ukuguquguquka kombala ukusuka kwi-v3.

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

Kananjalo sinomnye umsebenzi wokufumana umgangatho othile wombala kwimephu $theme-colors. Amaxabiso amanqanaba angalunganga aya kuwenza lula umbala, ngelixa amanqanaba aphezulu aya kuba 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);
}

Ngokwenza, ungabiza umsebenzi kwaye ugqithise kwiiparamitha ezimbini: igama lombala ukusuka $theme-colors(umzekelo, iprimary okanye ingozi) kunye nenqanaba lamanani.

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

Imisebenzi eyongezelelweyo inokongezwa kwixesha elizayo okanye i-Sass yakho yesiko ukwenza imisebenzi yenqanaba leemephu ze-Sass ezongezelelweyo, okanye enye yegeneric ukuba ufuna ukuba ne-verbose ngakumbi.

Umahluko wombala

Umsebenzi owongezelelweyo esiwufakayo kwiBootstrap ngumsebenzi wokuchasa umbala, color-yiq. Isebenzisa isithuba sombala we-YIQ ukubuyisela ngokuzenzekelayo ukukhanya ( #fff) okanye mnyama ( #111) umahluko wombala osekelwe kumbala wesiseko oxeliweyo. Lo msebenzi uluncedo kakhulu kwimixube okanye iilophu apho uvelisa iiklasi ezininzi.

Umzekelo, ukuvelisa iiwotshi zemibala $theme-colorskwimephu yethu:

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

Ingasetyenziselwa iimfuno zokuthelekisa enye:

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

Ungaphinda uchaze umbala osisiseko ngemisebenzi yethu yemephu yombala:

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

Phuma kwi-SVG

Sisebenzisa escape-svgumsebenzi ukubaleka <, >kunye #neempawu zeSVG imifanekiso yangasemva. Aba nobumba badinga ukubaleka ukuze banikeze ngokufanelekileyo imifanekiso yangasemva kwi-IE. Xa usebenzisa escape-svgumsebenzi, ii-URL zedatha kufuneka zicatshulwe.

Yongeza kwaye uthabathe imisebenzi

Sisebenzisa i addkunye subtractnemisebenzi ukusonga umsebenzi weCSS calc. Eyona njongo yale misebenzi kukuphepha iimpazamo xa ixabiso elithi "unitless" ligqithiselwa 0kwintetho calc. Amabinzana afana nala calc(10px - 0)aya kubuyisela imposiso kuzo zonke iibhrawuza, nangona ichanekile ngokwezibalo.

Umzekelo apho i-calc isemthethweni:

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

Umzekelo apho i-calc ingasebenziyo:

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

Iinketho zeSass

Yenza ngokwezifiso i-Bootstrap 4 kunye nefayile yethu eyakhelwe-ngaphakathi eguquguqukayo kwaye uguqule ngokulula izinto ezikhethwa yi-CSS yehlabathi ngezinto ezintsha $enable-*zeSass. Bhala ngaphezulu ixabiso loguquko kwaye uphinde udibanise npm run testnjengoko kufuneka.

Ungafumana kwaye wenze ezi ziguquguqukayo kwiinketho eziphambili zehlabathi scss/_variables.scsskwifayile yeBootstrap.

Umbala

Uninzi lwezinto ezahlukeneyo zeBootstrap kunye nezinto eziluncedo zakhiwe ngothotho lwemibala echazwe kwimephu ye-Sass. Le mephu inokulotywa kwi-Sass ukuvelisa ngokukhawuleza uthotho lweesethi zemithetho.

Yonke imibala

Yonke imibala ekhoyo kwi-Bootstrap 4, iyafumaneka njengeenguqu ze-Sass kunye nemephu ye-Sass scss/_variables.scsskwifayile. Oku kuya kwandiswa kukhupho oluncinci olulandelayo ukongeza i-shades eyongezelelweyo, efana ne- grayscale palette esele siyibandakanyile.

Nantsi indlela onokuzisebenzisa ngayo ezi kwiSass yakho:

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

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

Iiklasi eziluncedo zombala zikwakhona ngokusetwa colorkunye background-color.

Imibala yomxholo

Sisebenzisa iseti esezantsi yayo yonke imibala ukwenza iphalethi yombala omncinci wokuvelisa izikimu zombala, ezifumanekayo njengeenguqu zeSass kunye nemephu yeSass scss/_variables.scsskwifayile yeBootstrap.

Iingwevu

Iseti eyandisiweyo yezinto ezingwevu kunye nemephu ye-Sass scss/_variables.scsskwimithunzi engwevu engaguqukiyo kwiprojekthi yakho yonke. Qaphela ukuba ezi "zingwevu ezipholileyo", ezivame ukuya kwithoni ehlaza okwesibhakabhaka, kunokuba i-grays engathathi hlangothi.

Ngaphakathi scss/_variables.scss, uya kufumana iinguqu zemibala yeBootstrap kunye nemephu ye-Sass. Nanku umzekelo $colorswemephu 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;

Yongeza, susa, okanye ulungise amaxabiso kwimaphu ukuhlaziya indlela asetyenziswa ngayo kwezinye iindawo ezininzi. Ngelishwa ngeli xesha, asingawo onke amacandelo asebenzisa le mephu ye-Sass. Uhlaziyo lwexesha elizayo luya kuzama ukuphucula oku. Kude kube ngoko, cwangcisa ukusetyenziswa kwezinto ${color}eziguquguqukayo kunye nale mephu ye-Sass.

Amacandelo

Uninzi lwamacandelo kunye nezinto eziluncedo zeBootstrap zakhiwe @eachngeelophu eziphindaphindayo kwimephu ye-Sass. Oku kuluncedo kakhulu ekuveliseni ukwahluka kwecandelo ngokwethu $theme-colorskunye nokudala iiyantlukwano eziphendulayo kwindawo nganye yoqhawulo. Njengoko usenza ngokwezifiso ezi mephu ze-Sass kwaye uphinda uhlanganise, uya kubona ngokuzenzekelayo utshintsho lwakho lubonakaliswe kwezi lophu.

Izilungisi

Uninzi lwamacandelo e-Bootstrap akhiwe ngendlela yeklasi ye-modifier. Oku kuthetha ukuba ubuninzi besimbo buqulethwe kudidi olusisiseko (umzekelo, .btn) ngelixa ulwahlulo lwesimbo luvalelwe kwiiklasi zesilungisi (umzekelo, .btn-danger). Ezi klasi zesilungisi zakhiwe $theme-colorskwimephu ukwenza inani kunye negama leeklasi zethu zesilungisi.

Nantsi imizekelo emibini yendlela esijika ngayo phezu $theme-colorskwemephu ukwenza izilungisi .alertzecandelo kunye nazo zonke izinto zethu .bg-*ezingasemva eziluncedo.

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

Ukusabela

Ezi lophu zeSass aziphelelanga kwiimephu zemibala, nazo. Unokwenza ukwahluka okuphendulayo kwamacandelo akho okanye izinto eziluncedo. Thatha umzekelo izixhobo zethu zolungelelwaniso lombhalo ophendulayo apho sixuba i- @eachloop $grid-breakpointsyemephu ye-Sass kunye nombuzo wemidiya uquka.

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

Ukuba ufuna ukulungisa eyakho $grid-breakpoints, utshintsho lwakho luya kusebenza kuzo zonke iilophu eziphinda-phindayo phezu kwaloo mephu.

Iinguqu zeCSS

I-Bootstrap 4 ibandakanya malunga neshumi elinesibini leempawu zesiko le-CSS (izinto eziguquguqukayo) kwi-CSS yayo ehlanganisiweyo. Ezi zibonelela ngofikelelo olulula kumaxabiso aqhele ukusetyenziswa njengemibala yomxholo wethu, iindawo zokuqhawuka, kunye nokupakishwa kwefonti esisiseko xa usebenza kuMhloli wesikhangeli sakho, ikhowudi yebhokisi yesanti, okanye iprototyping jikelele.

Izinto eziguquguqukayo ezikhoyo

Nazi izinto eziguquguqukayo esizibandakanyayo (qaphela ukuba :rootiyafuneka). Zifumaneka _root.scsskwifayile yethu.

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

Imizekelo

Izinto eziguquguqukayo zeCSS zibonelela ngokuguquguquka okufanayo kwizinto eziguquguqukayo zeSass, kodwa ngaphandle kwesidingo sokuhlanganiswa ngaphambi kokuba zinikezelwe kwisikhangeli. Umzekelo, apha siseta ngokutsha ifonti yephepha lethu kunye nezimbo zekhonkco ezineenguqu zeCSS.

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

Breakpoint variables

Ngelixa ekuqaleni sasibandakanya ii-breakpoints kwiinguqu zethu ze-CSS (umzekelo, --breakpoint-md), ezi azixhaswanga kwimibuzo yemidiya , kodwa zisenokusetyenziswa ngaphakathi kweesethi zomthetho kwimibuzo yemidiya. Ezi zantlukwano zebreakpoint zihlala kwi-CSS ehlanganisiweyo yokuhambelana ngasemva xa zinokuthi zisetyenziswe yiJavaScript. Funda ngakumbi kwi-spec .

Nanku umzekelo wento engaxhaswayo:

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

Kwaye nanku umzekelo wento exhaswayo:

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