Source

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 uthathe ithuba lokuhlukahluka, amamephu, imiksi, nokuningi.

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

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

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

Okuzenzakalelayo okuguquguqukayo

Konke okuguquguqukayo kwe-Sass ku-Bootstrap 4 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, shintsha amanani azo, futhi ukhiphe !defaultifulegi. Uma okuguquguqukayo sekuvele kwabelwe, ngakho-ke ngeke kuphinde kunikezwe amanani azenzakalelayo ku-Bootstrap.

Uzothola uhlu oluphelele lweziguquguquko ze-Bootstrap ku- scss/_variables.scss.

Ukukhishwa okuguquguqukayo ngaphakathi kwefayela elifanayo le-Sass kungase kufike ngaphambi noma ngemva kokuguquguquka okuzenzakalelayo. Nokho, uma ukhipha kuwo wonke amafayela e-Sass, ukukhipha kwakho kufanele kuze ngaphambi kokuthi ungenise amafayela e-Sass e-Bootstrap.

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

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

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

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

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.

Iyaguquguquka Amanani Incazelo
$spacer 1rem(okuzenzakalelayo), nanoma yiliphi inani > 0 Icacisa inani elizenzakalelayo le-spacer ukukhiqiza ngokuhlelekile izinsiza zethu ze-spacer .
$enable-rounded true(okuzenzakalelayo) nomafalse Inika amandla border-radiusizitayela ezichazwe ngaphambilini ezingxenyeni ezihlukahlukene.
$enable-shadows truenoma false(okuzenzakalelayo) Inika amandla box-shadowizitayela ezichazwe ngaphambilini ezingxenyeni ezihlukahlukene.
$enable-gradients truenoma false(okuzenzakalelayo) Inika amandla ama-gradient achazwe ngaphambilini background-imagengezitayela ezingxenyeni ezihlukahlukene.
$enable-transitions true(okuzenzakalelayo) nomafalse Inika amandla transitionama-s achazwe ngaphambilini ezingxenyeni ezihlukahlukene.
$enable-hover-media-query truenoma false(okuzenzakalelayo) Kwehlisiwe
$enable-grid-classes true(okuzenzakalelayo) nomafalse Inika amandla ukukhiqizwa kwamakilasi e-CSS kusistimu yegridi (isb, .container, .row, .col-md-1, njll.).
$enable-caret true(okuzenzakalelayo) nomafalse Inika amandla i-pseudo element caret ku- .dropdown-toggle.
$enable-print-styles true(okuzenzakalelayo) nomafalse Inika amandla izitayela zokuthuthukisa ukuphrinta.

Umbala

Izingxenye eziningi nezinsiza ezihlukahlukene ze-Bootstrap zakhiwe ngochungechunge lwemibala echazwe kumephu ye-Sass. Le mephu ingafakwa ku-Sass ukuze ikhiqize 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.

Okuluhlaza okwesibhakabhaka
I-Indigo
Okunsomi
Pink
Okubomvu
iwolintshi
Okuphuzi
Okuhlaza
I-Teal
I-Cyan

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.

Ngokuzayo, sizohlose ukuhlinzeka ngamamephu we-Sass nokuguquguquka kwemibala yombala ngamunye njengoba senzile ngemibala empunga engezansi.

Imibala yetimu

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

Okuyinhloko
Okwesibili
Impumelelo
Ingozi
Isexwayiso
Ulwazi
Ukukhanya
Kumnyama

Izimpunga

Isethi enwetshiwe yokuhlukahluka okumpunga kanye nemephu ye-Sass scss/_variables.scssukuze uthole imithunzi engaguquki yokumpunga kuyo yonke iphrojekthi yakho.

100
200
300
400
500
600
700
800
900

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, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --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);
  }
}