Theming Bootstrap

Iketsetse Bootstrap 4 ka mefuta ea rona e ncha e hahelletsoeng ka har'a Sass bakeng sa likhetho tsa setaele sa lefats'e bakeng sa theme e bonolo le liphetoho tsa likarolo.

Selelekela

Ho Bootstrap 3, theme e ne e khannoa haholo ke ho feto-fetoha ha maemo ho LESS, tloaelo ea CSS, le leqephe le fapaneng la setaele sa sehlooho seo re se kenyelitseng distlifaeleng tsa rona. Ka boiteko bo itseng, motho a ka hlophisa bocha ponahalo ea Bootstrap 3 ntle le ho ama lifaele tsa mantlha. Bootstrap 4 e fana ka mokhoa o tloaelehileng, empa o fapane hanyane.

Joale, theme e finyelloa ke mefuta ea Sass, limmapa tsa Sass, le CSS e tloaelehileng. Ha ho sa na leqephe la setaele sa theme; ho e-na le hoo, o ka nolofalletsa tema e hahelletsoeng ka hare ho eketsa likhahla, meriti, le tse ling.

Sass

Sebelisa lifaele tsa rona tsa mohloli oa Sass ho nka monyetla ka mefuta e fapaneng, limmapa, metsoako le tse ling ha u hlophisa Sass u sebelisa lipeipi tsa hau tsa thepa.

Sebopeho sa faele

Nako le nako ha ho khonahala, qoba ho fetola lifaele tsa mantlha tsa Bootstrap. Bakeng sa Sass, seo se bolela ho iketsetsa leqephe la setaele le kenyang Bootstrap kantle ho naha hore o tle o le fetole le ho le atolosa. Ho nka hore o sebelisa mookameli oa sephutheloana joalo ka npm, o tla ba le sebopeho sa faele se shebahalang tjena:

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

Haeba u khoasollotse lifaele tsa rona tsa mohloli 'me u sa sebelise mookameli oa sephutheloana, u tla batla ho iketsetsa ntho e tšoanang le sebopeho seo, ho boloka lifaele tsa mohloli oa Bootstrap li arohane le tsa hau.

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

Ho reka kantle

Ho custom.scss, o tla kenya lifaele tsa Sass tsa Bootstrap. U na le likhetho tse peli: kenyelletsa Bootstrap kaofela, kapa khetha likarolo tseo u li hlokang. Re khothaletsa ba bang, leha ho le joalo hlokomela hore ho na le litlhokahalo le litšepeho ho likarolo tsa rona. Hape o tla hloka ho kenyelletsa JavaScript bakeng sa li-plugins tsa rona.

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

Ha seta seo se se se le teng, o ka qala ho fetola mefuta le limmapa tsa Sass ho custom.scss. U ka boela ua qala ho eketsa likarolo tsa Bootstrap tlas'a // Optionalkarolo ha ho hlokahala. Re etsa tlhahiso ea ho sebelisa stack e felletseng e tsoang bootstrap.scssfaeleng ea rona e le sebaka sa hau sa ho qala.

Likhetho tse feto-fetohang

Phapang e 'ngoe le e' ngoe ea Sass ho Bootstrap e kenyelletsa !defaultfolakha e u lumellang ho feta boleng ba kamehla ba Sass ea hau ntle le ho fetola khoutu ea mohloli oa Bootstrap. Kopitsa le ho beha mefuta e sa tšoaneng ha ho hlokahala, fetola boleng ba eona, 'me u tlose !defaultfolakha. Haeba phapang e se e abetsoe, joale e ke ke ea abeloa hape ke boleng ba kamehla ho Bootstrap.

U tla fumana lenane le felletseng la mefuta e fapaneng ea Bootstrap ho scss/_variables.scss. Liphetoho tse ling li setiloe ho null, mefuta ena ha e hlahise thepa ntle le haeba e tlositsoe tlhophisong ea hau.

Liphetoho tse feto-fetohang li tlameha ho tla ka mor'a hore mesebetsi ea rona, mefuta-futa, le metsoako e kenngoe linaheng tse ling, empa pele ho tse ling tse tsoang linaheng tse ling.

Mona ke mohlala o fetolang background-colorle colorbakeng sa <body>ha o kenya le ho hlophisa Bootstrap ka 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

Pheta ha ho hlokahala bakeng sa phetoho efe kapa efe ho Bootstrap, ho kenyelletsa le likhetho tsa lefats'e tse ka tlase.

Limmapa le loops

Bootstrap 4 e kenyelletsa limmapa tse seng kae tsa Sass, lipara tsa bohlokoa tse etsang hore ho be bonolo ho hlahisa malapa a CSS e amanang. Re sebelisa limmapa tsa Sass bakeng sa mebala ea rona, libaka tsa marang-rang, le tse ling. Joalo ka mefuta e fapaneng ea Sass, limmapa tsohle tsa Sass li kenyelletsa !defaultfolakha 'me li ka hlakoloa le ho atolosoa.

Tse ling tsa limmapa tsa rona tsa Sass li kopantsoe ho ba tse se nang letho ka boiketsetso. Sena se etsoa ho lumella katoloso e bonolo ea 'mapa o fanoeng oa Sass, empa e tla ka litšenyehelo tsa ho etsa hore ho tlosa lintho 'mapeng ho be thata haholoanyane.

Fetola 'mapa

Ho fetola 'mala o teng' $theme-colorsmapa oa rona, kenya tse latelang faeleng ea hau ea tloaelo ea Sass:

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

Kenya 'mapeng

Ho kenya 'mala o mocha ho $theme-colors, eketsa konopo e ncha le boleng:

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

Tlosa 'mapeng

Ho tlosa mebala ho $theme-colors, kapa 'mapeng ofe kapa ofe, sebelisa map-remove. Hlokomela hore o tlameha ho e kenya lipakeng tsa litlhoko tsa rona le likhetho tsa rona:

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

Linotlolo tse hlokahalang

Bootstrap e nka boteng ba linotlolo tse itseng ka har'a limmapa tsa Sass ha re ntse re li sebelisa le ho li atolosa. Ha u ntse u etsa limmapa tse kenyellelitsoeng, u kanna oa kopana le liphoso moo ho sebelisoang senotlolo se itseng sa 'mapa oa Sass.

Mohlala, re sebelisa primary, success, le dangerlinotlolo ho tsoa $theme-colorsbakeng sa lihokelo, likonopo, le li-form state. Ho fetola boleng ba linotlolo tsena ha hoa lokela ho hlahisa mathata, empa ho li tlosa ho ka baka mathata a ho bokella Sass. Maemong ana, o tla hloka ho fetola khoutu ea Sass e sebelisang litekanyetso tseo.

Mesebetsi

Bootstrap e sebelisa mesebetsi e mengata ea Sass, empa ke karoloana feela e sebetsang ho theme e akaretsang. Re kenyelelitse mesebetsi e meraro ea ho fumana boleng ho tsoa 'mapeng oa mebala:

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

Tsena li u lumella ho khetha 'mala o le mong 'mapeng oa Sass joalo ka ha u ka sebelisa phapang ea mebala ho tloha ho v3.

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

Re boetse re na le ts'ebetso e 'ngoe ea ho fumana boemo bo itseng ba mebala ho tsoa ' $theme-colorsmapeng. Maemo a fosahetseng a tla bebofatsa 'mala, athe maemo a holimo a tla fifala.

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

Ka ts'ebetso, u ka letsetsa ts'ebetso 'me u fete ka mekhahlelo e' meli: lebitso la 'mala ho tloha $theme-colors(mohlala, ka sehloohong kapa kotsi) le boemo ba linomoro.

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

Mesebetsi e meng e ka eketsoa nakong e tlang kapa ea hau ea tloaelo ea Sass ho theha mesebetsi ea maemo bakeng sa limmapa tse ling tsa Sass, kapa e tloaelehileng haeba u batla ho bua haholoanyane.

Phapang ea mebala

Mosebetsi o mong oo re o kenyelletsang ho Bootstrap ke mosebetsi oa ho bapisa mebala, color-yiq. E sebelisa sebaka sa 'mala sa YIQ ho khutlisetsa khanya ( #fff) kapa e lefifi ( #111) 'mala oa phapang o ipapisitseng le 'mala o boletsoeng. Ts'ebetso ena e bohlokoa haholo bakeng sa li-mixins kapa loops moo o hlahisang lihlopha tse ngata.

Mohlala, ho hlahisa li-swatches tsa mebala ho tsoa $theme-colors'mapeng oa rona:

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

E ka boela ea sebelisoa bakeng sa litlhoko tse fapaneng tse fapaneng:

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

U ka boela ua hlakisa 'mala oa motheo ka mesebetsi ea rona ea' mapa oa mebala:

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

Escape SVG

Re sebelisa escape-svgts'ebetso ho baleha <, >le #litlhaku bakeng sa litšoantšo tse ka morao tsa SVG. Litlhaku tsena li hloka ho phonyoha ho fana ka litšoantšo tse ka morao ho IE. Ha o sebelisa escape-svgts'ebetso, li-URI tsa data li tlameha ho qotsoa.

Eketsa le ho Ntsha ditshebetso

Re sebelisa addle subtractmesebetsi ho thatela mosebetsi oa CSS calc. Sepheo sa mantlha sa mesebetsi ena ke ho qoba liphoso ha boleng ba "unitless" 0bo fetisetsoa calcpolelong. Lipolelo tse joalo calc(10px - 0)li tla khutlisa phoso ho libatli tsohle, leha li nepahetse ka lipalo.

Mohlala moo calc e sebetsang teng:

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

Mohlala moo calc e sa sebetseng:

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

Sass dikgetho

Iketsetse Bootstrap 4 ka faele ea rona ea mefuta-futa e hahelletsoeng kahare 'me u fetole habonolo likhetho tsa CSS tsa lefats'e ka $enable-*mefuta e mecha ea Sass. Fetola boleng ba phapano 'me u boele u bokelle ka npm run testmoo ho hlokahalang.

U ka fumana le ho etsa mefuta e fapaneng bakeng sa likhetho tsa mantlha tsa lefats'e scss/_variables.scssfaeleng ea Bootstrap.

Mmala

Bongata ba likarolo le lisebelisoa tse fapaneng tsa Bootstrap li hahiloe ka letoto la mebala e hlalositsoeng 'mapeng oa Sass. 'Mapa ona o ka ts'oaroa ho Sass ho hlahisa letoto la melaoana kapele.

Mebala eohle

Mebala eohle e fumanehang ho Bootstrap 4, e fumaneha joalo ka mefuta ea Sass le 'mapa oa Sass scss/_variables.scssfaeleng. Sena se tla atolosoa ho lintlafatso tse nyane tse latelang ho eketsa li-shades tse ling, joalo ka palete ea grayscale eo re seng re e kenyelletsa.

U ka sebelisa tsena joang ho Sass ea hau:

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

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

Lihlopha tsa tšebeliso ea mebala li boetse li fumaneha bakeng sa ho beha colorle background-color.

Mebala ea sehlooho

Re sebelisa sehlopha sa mebala eohle ho theha phalete e nyane ea mebala bakeng sa ho hlahisa meralo ea mebala, e fumanehang hape e le mefuta ea Sass le 'mapa oa Sass scss/_variables.scssfaeleng ea Bootstrap.

Meputsoana

Sete e atolositsoeng ea mefuta-futa ea bohlooho le 'mapa oa Sass scss/_variables.scssbakeng sa meriti e sa fetoheng ea bohlooho morerong oa hau. Hlokomela hore tsena ke "li-grays tse pholileng", tse atisang ho lebisa molumo o boputsoa bo poteletseng, ho e-na le li-grays tse sa jeleng paate.

Ka har'a scss/_variables.scss, u tla fumana mefuta e fapaneng ea mebala ea Bootstrap le 'mapa oa Sass. Mohlala oa $colors'mapa oa Sass ke ona:

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

Kenya, tlosa, kapa u fetole boleng ka har'a 'mapa ho ntlafatsa mokhoa oa ho sebelisoa likarolong tse ling tse ngata. Ka bomalimabe nakong ena, ha se karolo e 'ngoe le e 'ngoe e sebelisang 'mapa ona oa Sass. Lintlafatso tse tlang li tla leka ho ntlafatsa ho sena. Ho fihlela ka nako eo, rera ho sebelisa ${color}mefuta-futa le 'mapa ona oa Sass.

Likaroloana

Bongata ba likarolo le lisebelisoa tsa Bootstrap li hahiloe ka @eachli-loops tse pheta-phetoang 'mapeng oa Sass. Sena se thusa haholo bakeng sa ho hlahisa mefuta e fapaneng ea karolo ka rona $theme-colorsle ho theha mefuta e arabelang bakeng sa ntlha ka 'ngoe. Ha u ntse u etsa limmapa tsena tsa Sass, 'me u li etsa hape, u tla bona liphetoho tsa hau li hlaha ho loops tsena.

Liphetoho

Likarolo tse ngata tsa Bootstrap li hahiloe ka mokhoa oa sehlopha sa base-modifier. Sena se bolela hore boholo ba setaele bo fumaneha ho sehlopha sa batho ba bang (mohlala, .btn) athe mefuta e fapaneng ea setaele e fella feela ka lihlopha tsa ho fetola (mohlala, .btn-danger). Lihlopha tsena tsa ho fetola li hahiloe ho tloha ' $theme-colorsmapeng ho etsa hore palo le mabitso a lihlopha tsa rona li behoe.

Mehlala e 'meli ke ena ea hore na re tsamaea joang $theme-colors'mapeng ho hlahisa lintlafatso ho .alertkarolo le lisebelisoa tsohle tsa rona .bg-*.

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

Ea arabelang

Loops tsena tsa Sass ha li felle feela ho limmapa tsa mebala, hape. U ka boela ua hlahisa mefuta e fapaneng e arabelang ea likarolo kapa lisebelisoa tsa hau. Ka mohlala, nka lisebelisoa tsa rona tse arabelang tsa ho hokahanya ha mongolo moo re kopanyang @eachloop bakeng sa $grid-breakpoints'mapa oa Sass le potso ea media e kenyelletsang.

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

Haeba o hloka ho fetola $grid-breakpoints, liphetoho tsa hau li tla sebetsa ho loops ohle tse ntseng li tsoela pele 'mapeng oo.

Mefuta e fapaneng ea CSS

Bootstrap 4 e kenyelletsa likarolo tse ka bang peli tsa tloaelo tsa CSS (mefuta e fapaneng) ho CSS ea eona e hlophisitsoeng. Tsena li fana ka phihlello e bonolo ea boleng bo sebelisoang hangata joalo ka mebala ea sehlooho sa rona, li-breakpoints, le mekotla ea litlhaku ea mantlha ha u sebetsa ho Mohlahlobi oa sebatli sa hau, lebokose la sandbox, kapa prototyping ka kakaretso.

Mefuta e fumanehang

Mona ke mefuta e fapaneng eo re e kenyelletsang (hlokomela hore ho :roothlokahala). Li teng _root.scssfaeleng ea rona.

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

Mehlala

Mefuta e fapaneng ea CSS e fana ka phetoho e tšoanang ho mefuta ea Sass, empa ntle le tlhoko ea ho bokella pele e fuoa sebatli. Mohlala, mona re seta bocha fonte ea leqephe la rona le lihokelo tsa setaele ka mefuta ea CSS.

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

Mefuta e fapaneng ea Breakpoint

Le hoja qalong re kenyelelitse li-breakpoints ho mefuta-futa ea rona ea CSS (mohlala, --breakpoint-md), tsena ha li tšehetsoe lipotsong tsa mecha ea litaba , empa li ntse li ka sebelisoa ka har'a melaoana ea lipotso tsa litaba. Liphetoho tsena tsa breakpoint li ntse li le ho CSS e hlophisitsoeng bakeng sa tšebelisano ea morao-rao kaha e ka sebelisoa ke JavaScript. Ithute haholoanyane ho spec .

Mohlala oa lintho tse sa tšehetsoeng ke tsena:

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

Mona ke mohlala oa se tšehetsoeng:

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