Source

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.

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

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

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 4 ibandakanya !defaultiflegi ekuvumela ukuba ubhale ngaphezulu ixabiso elimiselweyo 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.

Ukugqithisa okuguquguqukayo ngaphakathi kwefayile ye-Sass efanayo kunokuza ngaphambi okanye emva kokuguquguquka okungagqibekanga. Nangona kunjalo, xa ubeka ngaphezulu kwiifayile zeSass, izinto zakho ezingaphezulu kufuneka zize phambi kokuba ungenise iifayile zeSass zeBootstrap.

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

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

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

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:

$theme-colors: map-remove($theme-colors, "success", "info", "danger");

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

Omnye 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`
}

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 _variables.scsskwifayile yethu.

Iyaguquguquka	Imilinganiselo	Inkcazo
`$spacer`	`1rem`(ehlala ikho), okanye naliphi na ixabiso > 0	Ixela ixabiso elihlala lihleli le spacer ukuvelisa ngokwenkqubo izixhobo zethu ze spacer .
`$enable-rounded`	`true`(ehlala ikho) okanye`false`	Yenza `border-radius`izimbo ezichazwe kwangaphambili kumacandelo awohlukeneyo.
`$enable-shadows`	`true`okanye `false`(okuhlala kukho)	Yenza `box-shadow`izimbo ezichazwe kwangaphambili kumacandelo awohlukeneyo.
`$enable-gradients`	`true`okanye `false`(okuhlala kukho)	Yenza iigradient ezichazwe kwangaphambili kusetyenziswa `background-image`izimbo kwizinto ezahlukeneyo.
`$enable-transitions`	`true`(ehlala ikho) okanye`false`	Yenza okuchazwe `transition`kwangaphambili kumacandelo awohlukeneyo.
`$enable-hover-media-query`	`true`okanye `false`(okuhlala kukho)	Irhoxisiwe
`$enable-grid-classes`	`true`(ehlala ikho) okanye`false`	Yenza ukuveliswa kweeklasi zeCSS zesixokelelwano segridi (umzekelo, `.container`, `.row`, , `.col-md-1`, njl.).
`$enable-caret`	`true`(ehlala ikho) okanye`false`	Yenza ipseudo element ikhathalelwe `.dropdown-toggle`.
`$enable-print-styles`	`true`(ehlala ikho) okanye`false`	Yenza izimbo zokulungisa ushicilelo.

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 yethu. Oku kuya kwandiswa kukhupho oluncinci olulandelayo ukongeza i-shades eyongezelelweyo, efana ne- grayscale palette esele siyibandakanyile.

Luhlaza

Isi-Indigo

Mfusa

Pinki

Bomvu

orenji

Lubhelu

Luhlaza

Teal

UCyan

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.

Kwixesha elizayo, siza kujolisa ekuboneleleni ngeemephu ze-Sass kunye nezinto eziguquguqukayo zemithunzi yombala ngamnye njengoko senzile ngemibala engwevu engezantsi.

Imibala yomxholo

Sisebenzisa i-subset yayo yonke imibala ukwenza i-palette yombala omncinci wokuvelisa izikimu zombala, ezifumanekayo njengeenguqu ze-Sass kunye nemephu ye-Sass scss/_variables.scsskwifayile yethu.

Amabanga aphantsi

Eyesibini

Impumelelo

Ingozi

Isilumkiso

Ulwazi

Ukukhanya

Mnyama

Iingwevu

Iseti ebanzi yezinto ezingwevu kunye nemephu ye-Sass scss/_variables.scsskwimithunzi engwevu engaguqukiyo kwiprojekthi yakho yonke.

100

200

300

400

500

600

700

800

900

Ngaphakathi _variables.scss, uya kufumana iinguqu zethu zemibala 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 izinto 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) kwiCSS 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, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --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);
}

Unokusebenzisa iinguqu zethu zebreakpoint kwimibuzo yakho yemidiya:

.content-secondary {
  display: none;
}

@media (min-width(var(--breakpoint-sm))) {
  .content-secondary {
    display: block;
  }
}