Source

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.

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

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

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 4 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 feto-fetohang ka har'a faele e tšoanang ea Sass li ka tla pele kapa ka morao ho mefuta ea kamehla. Leha ho le joalo, ha u fetisa lifaele tsa Sass, lintho tse tlositsoeng li tlameha ho tla pele o kenya lifaele tsa Sass tsa Bootstrap.

Mona ke mohlala o fetolang background-colorle colorbakeng sa <body>ha o kenya le ho hlophisa Bootstrap ka npm:

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

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

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

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.

E fetohang	Litekanyetso	Tlhaloso
`$spacer`	`1rem`(ea kamehla), kapa boleng bofe kapa bofe> 0	E hlakisa boleng bo sa feleng ba spacer ho hlahisa lisebelisoa tsa rona tsa spacer ka mokhoa o hlophisitsoeng .
`$enable-rounded`	`true`(ea kamehla) kapa`false`	E nolofalletsa `border-radius`mekhoa e hlalositsoeng esale pele likarolong tse fapaneng.
`$enable-shadows`	`true`kapa `false`(ea kamehla)	E nolofalletsa `box-shadow`mekhoa e hlalositsoeng esale pele likarolong tse fapaneng.
`$enable-gradients`	`true`kapa `false`(ea kamehla)	E nolofalletsa li-gradients tse hlalositsoeng esale pele ka `background-image`mekhoa ea likarolo tse fapaneng.
`$enable-transitions`	`true`(ea kamehla) kapa`false`	E nolofalletsa li-predefined `transition`s ho likarolo tse fapaneng.
`$enable-hover-media-query`	`true`kapa `false`(ea kamehla)	E tlositsoe
`$enable-grid-classes`	`true`(ea kamehla) kapa`false`	E nolofalletsa tlhahiso ea lihlopha tsa CSS bakeng sa tsamaiso ea marang-rang (mohlala, `.container`, `.row`, `.col-md-1`, jj.).
`$enable-caret`	`true`(ea kamehla) kapa`false`	E nolofalletsa pseudo element caret ho `.dropdown-toggle`.
`$enable-print-styles`	`true`(ea kamehla) kapa`false`	E thusa mekhoa ea ho ntlafatsa khatiso.

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.

Boputsoa

Indigo

Bopherese

Pinki

Khubedu

namunu

Bosehla

Botala

Teal

Cyan

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.

Nakong e tlang, re tla ikemisetsa ho fana ka limmapa tsa Sass le mefuta e fapaneng bakeng sa mebala ea 'mala o mong le o mong joalo ka ha re entse ka mebala e putsoa e ka tlase.

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 Bootstraps.

Ea mantlha

Ea bobeli

Katleho

Kotsi

Tlhokomediso

Info

Leseli

Lefifi

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.

100

200

300

400

500

600

700

800

900

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