Theming Bootstrap

Sinthani Mwamakonda Anu Bootstrap 4 ndi zosintha zathu zatsopano za Sass pazokonda zapadziko lonse lapansi kuti mukhale ndi mitu yosavuta komanso kusintha magawo.

Mawu Oyamba

Mu Bootstrap 3, mitu idayendetsedwa makamaka ndi kupitilira mu LESS, CSS yodziwika bwino, ndi pepala lamutu losiyana lomwe tidaphatikiza distm'mafayilo athu. Ndi khama, wina atha kukonzanso mawonekedwe a Bootstrap 3 osakhudza mafayilo oyambira. Bootstrap 4 imapereka njira yodziwika bwino, koma yosiyana pang'ono.

Tsopano, mitu imakwaniritsidwa ndi mitundu ya Sass, mamapu a Sass, ndi CSS yokhazikika. Palibenso pepala lodzipatulira lamutu; m'malo mwake, mutha kuloleza mutu womwe wamangidwa kuti uwonjezere ma gradients, mithunzi, ndi zina zambiri.

Sass

Gwiritsani ntchito mafayilo athu a Sass kuti mutengere mwayi pazosintha, mamapu, zosakaniza, ndi zina zambiri.

Mapangidwe a fayilo

Ngati n'kotheka, pewani kusintha mafayilo amtundu wa Bootstrap. Kwa Sass, izi zikutanthauza kupanga zolemba zanu zomwe zimalowetsa Bootstrap kuti mutha kusintha ndikuwonjezera. Pongoganiza kuti mukugwiritsa ntchito phukusi loyang'anira ngati npm, mudzakhala ndi fayilo yomwe imawoneka motere:

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

Ngati mwatsitsa mafayilo athu oyambira ndipo simukugwiritsa ntchito woyang'anira phukusi, mudzafuna kukhazikitsa pamanja china chofanana ndi mawonekedwewo, kusunga mafayilo amtundu wa Bootstrap kukhala osiyana ndi anu.

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

Kuitanitsa

M'mafayilo anu custom.scss, mudzalowetsa mafayilo a Sass a Bootstrap. Muli ndi njira ziwiri: kuphatikiza zonse za Bootstrap, kapena sankhani magawo omwe mukufuna. Timalimbikitsa omalizawa, ngakhale dziwani kuti pali zofunika zina ndi zodalira pazigawo zathu zonse. Muyeneranso kuphatikiza JavaScript yamapulagini athu.

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

Ndi kukhazikitsa komweko, mutha kuyamba kusintha zosintha zilizonse za Sass ndi mamapu anu custom.scss. Mutha kuyambanso kuwonjezera magawo a Bootstrap pansi // Optionalpagawo ngati pakufunika. Tikukulangizani kuti mugwiritse ntchito stack yonse kuchokera mufayilo yathu bootstrap.scssngati poyambira.

Zosintha zosinthika

Kusintha kulikonse kwa Sass mu Bootstrap 4 kumaphatikizapo !defaultmbendera yomwe imakulolani kuti mupitirire mtengo wosasinthika mu Sass yanu popanda kusintha code source ya Bootstrap. Koperani ndi kumata zosintha momwe zingafunikire, sinthani makonda awo, ndikuchotsa !defaultmbendera. Ngati kusintha kwaperekedwa kale, ndiye kuti sikugawidwenso ndi mikhalidwe yokhazikika mu Bootstrap.

Mupeza mndandanda wathunthu wazosintha za Bootstrap mu scss/_variables.scss.

Zosintha zosinthika mkati mwa fayilo yomweyo ya Sass zitha kubwera zisanachitike kapena zitatha zosinthika. Komabe, mukamawonjezera mafayilo a Sass, zowonjezera zanu ziyenera kubwera musanalowetse mafayilo a Sass a Bootstrap.

Nachi chitsanzo chomwe chimasintha background-colorndi potumiza colorndikulemba <body>Bootstrap kudzera npm:

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

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

Bwerezani ngati kuli kofunikira pakusintha kulikonse mu Bootstrap, kuphatikiza zosankha zapadziko lonse lapansi pansipa.

Mapu ndi malupu

Bootstrap 4 imaphatikizapo mamapu ochepa a Sass, awiriawiri ofunika kwambiri omwe amapangitsa kuti zikhale zosavuta kupanga mabanja a CSS yogwirizana. Timagwiritsa ntchito mamapu a Sass pamitundu yathu, mapulaneti a gridi, ndi zina zambiri. Monga zosinthika za Sass, mamapu onse a Sass amaphatikiza !defaultmbendera ndipo amatha kuchotsedwa ndikukulitsidwa.

Ena mwa mamapu athu a Sass amaphatikizidwa kukhala opanda kanthu mwachisawawa. Izi zimachitika kuti zilole kukulitsa kosavuta kwa mapu a Sass, koma zimabwera pamtengo wopangitsa kuchotsa zinthu pamapu kukhala kovuta kwambiri.

Sinthani mapu

Kuti musinthe mtundu womwe ulipo $theme-colorspamapu athu, onjezani zotsatirazi pafayilo yanu yamtundu wa Sass:

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

Onjezani ku mapu

Kuti muwonjezere mtundu watsopano ku $theme-colors, onjezani kiyi yatsopano ndi mtengo:

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

Chotsani pamapu

Kuti muchotse mitundu pa $theme-colors, kapena mapu ena aliwonse, gwiritsani ntchito map-remove. Dziwani kuti muyenera kuyiyika pakati pa zomwe tikufuna ndi zomwe mungasankhe:

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

Makiyi ofunikira

Bootstrap imatengera kukhalapo kwa makiyi ena mkati mwa mamapu a Sass momwe timagwiritsira ntchito ndikuwonjezera tokha. Mukakonza mamapu omwe akuphatikizidwa, mutha kukumana ndi zolakwika pomwe kiyi ya mapu a Sass ikugwiritsidwa ntchito.

Mwachitsanzo, timagwiritsa ntchito primary, success, ndi dangermakiyi ochokera $theme-colorsku maulalo, mabatani, ndi mawonekedwe a fomu. Kusintha makiyi a makiyiwa sikuyenera kubweretsa zovuta, koma kuwachotsa kungayambitse nkhani za Sass. Muzochitika izi, muyenera kusintha nambala ya Sass yomwe imagwiritsa ntchito mfundozo.

Ntchito

Bootstrap imagwiritsa ntchito ntchito zingapo za Sass, koma kagawo kakang'ono kokha kamene kamagwira ntchito pamutu wamba. Taphatikiza ntchito zitatu zopezera makonda kuchokera pamapu amitundu:

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

Izi zimakupatsani mwayi wosankha mtundu umodzi pamapu a Sass monga momwe mungagwiritsire ntchito mtundu wa v3.

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

Tilinso ndi ntchito ina yopezera mulingo winawake wamtundu pamapu$theme-colors . Miyezo yolakwika idzachepetsa mtunduwo, pomwe milingo yayikulu idzadetsedwa.

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

Pochita, mumatcha ntchitoyi ndikudutsa magawo awiri: dzina la mtundu kuchokera $theme-colors(mwachitsanzo, choyambirira kapena chowopsa) ndi kuchuluka kwa manambala.

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

Ntchito zowonjezera zitha kuwonjezedwa mtsogolomo kapena makonda anu a Sass kuti mupange magwiridwe antchito a mamapu owonjezera a Sass, kapenanso yachidule ngati mukufuna kukhala olankhula kwambiri.

Kusiyana kwamitundu

Ntchito ina yowonjezera yomwe timaphatikizapo mu Bootstrap ndi ntchito yosiyanitsa mitundu, color-yiq. Imagwiritsa ntchito malo amtundu wa YIQ kuti ibweretse kuwala ( #fff) kapena mdima ( #111) wosiyana wa mtundu kutengera mtundu womwe watchulidwa. Izi ndizofunikira makamaka pazosakaniza kapena malupu pomwe mukupanga makalasi angapo.

Mwachitsanzo, kupanga zosintha zamitundu $theme-colorspamapu athu:

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

Itha kugwiritsidwanso ntchito pazosowa zosiyanitsa kamodzi:

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

Mutha kutchulanso mtundu woyambira ndi mapu athu amitundu:

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

Zosankha za Sass

Sinthani Mwamakonda Anu Bootstrap 4 ndi fayilo yathu yosinthira makonda opangidwa ndikusintha mosavuta zokonda zapadziko lonse za CSS ndi $enable-*mitundu yatsopano ya Sass. Chotsani mtengo wosinthika ndikuwonjezeranso npm run testngati pakufunika.

Mutha kupeza ndikusintha masinthidwe awa pazosankha zazikulu zapadziko lonse lapansi mufayilo ya Bootstrap scss/_variables.scss.

Zosintha	Makhalidwe	Kufotokozera
`$spacer`	`1rem`(zosakhazikika), kapena mtengo uliwonse> 0	Imatchula mtengo wokhazikika wa spacer kuti apange zida zathu za spacer .
`$enable-rounded`	`true`(zosasintha) kapena`false`	Imathandizira `border-radius`masitayelo ofotokozedweratu pazinthu zosiyanasiyana.
`$enable-shadows`	`true`kapena `false`(zosakhazikika)	Imathandizira `box-shadow`masitayelo ofotokozedweratu pazinthu zosiyanasiyana.
`$enable-gradients`	`true`kapena `false`(zosakhazikika)	Imathandizira ma gradients ofotokozedwatu kudzera `background-image`masitayelo pazinthu zosiyanasiyana.
`$enable-transitions`	`true`(zosasintha) kapena`false`	Imathandiza predefined `transition`s pa zigawo zosiyanasiyana.
`$enable-hover-media-query`	`true`kapena `false`(zosakhazikika)	Yasiyidwa
`$enable-grid-classes`	`true`(zosasintha) kapena`false`	Imathandizira kupanga makalasi a CSS pagululi (monga, `.container`, `.row`, `.col-md-1`, etc.).
`$enable-caret`	`true`(zosasintha) kapena`false`	Imayatsa pseudo element caret pa `.dropdown-toggle`.
`$enable-print-styles`	`true`(zosasintha) kapena`false`	Imayatsa masitaelo kuti muwongolere kusindikiza.

Mtundu

Zambiri mwazinthu zosiyanasiyana za Bootstrap ndi zofunikira zimamangidwa kudzera mumitundu ingapo yofotokozedwa pamapu a Sass. Mapuwa atha kuwongoleredwa ku Sass kuti apange madongosolo angapo.

Mitundu yonse

Mitundu yonse yomwe ilipo mu Bootstrap 4, imapezeka ngati mitundu ya Sass ndi mapu a Sass mufayilo scss/_variables.scss. Izi zidzawonjezedwa m'mabuku ang'onoang'ono otsatirawa kuti muwonjezere mithunzi yowonjezera, mofanana ndi palette ya grayscale yomwe timaphatikizapo kale.

Buluu

Indigo

Wofiirira

Pinki

Chofiira

lalanje

Yellow

Green

Teal

Chiani

Umu ndi momwe mungagwiritsire ntchito izi mu Sass yanu:

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

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

Makalasi opangira utoto amapezekanso kuti akhazikike colorndi background-color.

M'tsogolomu, tikhala ndi cholinga chopereka mamapu a Sass ndi zosintha zamitundu yamtundu uliwonse monga momwe tachitira ndi mitundu yotuwa pansipa.

Mitundu yamutu

Timagwiritsa ntchito kagawo kakang'ono kamitundu yonse kuti tipange utoto wocheperako popanga masikimu amitundu, omwe amapezekanso ngati mitundu ya Sass ndi mapu a Sass mufayilo ya Bootstraps scss/_variables.scss.

Pulayimale

Sekondale

Kupambana

Ngozi

Chenjezo

Zambiri

Kuwala

Chakuda

Imvi

Mitundu yokulirapo yamitundu yotuwa ndi mapu a Sass scss/_variables.scssamithunzi yotuwa mosasinthasintha pulojekiti yanu.

100

200

300

400

500

600

700

800

900

Mkati scss/_variables.scss, mupeza mitundu yamitundu ya Bootstrap ndi mapu a Sass. Nachi chitsanzo cha $colorsmapu a 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;

Onjezani, chotsani, kapena sinthani zinthu zomwe zili pamapu kuti zisinthe momwe zimagwiritsidwira ntchito m'zigawo zina zambiri. Tsoka ilo panthawiyi, sizinthu zonse zomwe zimagwiritsa ntchito mapu a Sass. Zosintha zamtsogolo zidzayesetsa kukonza izi. Mpaka pamenepo, konzekerani kugwiritsa ntchito ${color}zosinthika ndi mapu a Sass awa.

Zigawo

Zambiri mwazinthu ndi zofunikira za Bootstrap zimamangidwa ndi @eachmalupu omwe amayenda pamapu a Sass. Izi ndizothandiza kwambiri popanga mitundu yosiyanasiyana mwazinthu zathu $theme-colorsndikupanga mitundu yomvera pagawo lililonse. Mukakonza mamapu awa a Sass ndikuphatikizanso, mudzawona zosintha zanu zikuwonekera mu malupu awa.

Zosintha

Zambiri mwazinthu za Bootstrap zimamangidwa ndi njira yosinthira kalasi. Izi zikutanthauza kuti kuchuluka kwa makongoletsedwe kuli m'gulu loyambira (mwachitsanzo, .btn) pomwe masitayelo amangochitika m'makalasi osintha (mwachitsanzo, .btn-danger). Makalasi osinthira awa amapangidwa kuchokera $theme-colorspamapu kuti asinthe makonda a nambala ndi dzina la makalasi athu osintha.

Nazi zitsanzo ziwiri za momwe timayendera $theme-colorsmapu kuti tipange zosintha pagawo ndi .alertzida zathu zonse .bg-*zakumbuyo.

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

Womvera

Malupu a Sass awa samangokhala mamapu amitundu, mwina. Mukhozanso kupanga mitundu yosiyanasiyana yamagawo anu kapena zofunikira. Tengani mwachitsanzo zida zathu zoyankhulirana ndi mawu pomwe timaphatikiza @eachkuzungulira kwa $grid-breakpointsmapu a Sass ndi funso latolankhani.

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

Ngati mukufunika kusintha $grid-breakpoints, zosintha zanu zidzagwira ntchito pamalupu onse omwe akupitilira pamapuwo.

Zosintha za CSS

Bootstrap 4 imaphatikizapo pafupifupi magawo awiri a CSS makonda (zosinthika) mu CSS yake yopangidwa. Izi zimapereka mwayi wosavuta kuzinthu zomwe zimagwiritsidwa ntchito nthawi zambiri monga mitundu yathu yamutu, zodulira, ndi milu ya zilembo zoyambirira mukamagwira ntchito mu Inspector ya msakatuli wanu, bokosi la sandbox, kapena ma prototyping wamba.

Zosintha zomwe zilipo

Nazi zosintha zomwe timaphatikiza (zindikirani kuti :rootndizofunikira). Zili mufayilo yathu _root.scss.

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

Zitsanzo

Zosintha za CSS zimapereka kusinthasintha kofanana ndi zosintha za Sass, koma popanda kufunika kophatikiza musanatumizidwe kwa osatsegula. Mwachitsanzo, apa tikukhazikitsanso mafonti atsamba lathu ndi masitayelo olumikizirana ndi CSS.

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

Zosintha za Breakpoint

Ngakhale tidaphatikizirapo zodulira mumitundu yathu ya CSS (mwachitsanzo, --breakpoint-md), izi sizimathandizidwa pamafunso atolankhani , koma zitha kugwiritsidwabe ntchito mkati mwamalamulo pamafunso azama TV. Zosintha zosinthika izi zimakhalabe mu CSS yopangidwa kuti zigwirizane ndi kumbuyo chifukwa zitha kugwiritsidwa ntchito ndi JavaScript. Dziwani zambiri mu spec.

Nachi chitsanzo cha zomwe sizikuthandizidwa:

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

Ndipo nachi chitsanzo cha zomwe zimathandizidwa:

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