Source

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. Pakumanga kwathu tawonjezera kulondola kwa Sass kufika pa 6 (mwachisawawa ndi 5) kuti tipewe zovuta zozungulira msakatuli.

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 imakupatsani mwayi wopitilira mtengo wosasinthika mu Sass yanu popanda kusintha magwero a Bootstrap. Koperani ndi kumata zosintha momwe zingafunikire, sinthani zikhalidwe zawo, ndikuchotsa !defaultmbendera. Ngati kusintha kwaperekedwa kale, ndiye kuti sikugawidwenso ndi zokhazikika mu Bootstrap.

Mupeza mndandanda wathunthu wazosintha za Bootstrap mu scss/_variables.scss. Zosintha zina zimayikidwa ku null, zosinthazi sizitulutsa katundu pokhapokha zitatsitsidwa pamasinthidwe anu.

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 ndikulowetsa background-colorndikulowetsa Bootstrap kudzera npm:color<body>

// 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. Mukamasintha 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 zovuta 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 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 ndizothandiza 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`
}

Kuthawa SVG

Timagwiritsa ntchito escape-svgntchitoyi kuthawa <, >ndi #zilembo zazithunzi zakumbuyo za SVG. Zilembozi ziyenera kuthawa kuti ziperekedwe bwino zithunzi zakumbuyo mu IE.

Onjezani ndi Kuchotsa ntchito

Timagwiritsa ntchito addndi subtractntchito kukulunga ntchito ya CSS calc. Cholinga chachikulu cha ntchitoyi ndikupewa zolakwika pamene mtengo wa "unitless" uperekedwa 0m'mawu calc. Mawu ngati calc(10px - 0)angabweretse cholakwika mu asakatuli onse, ngakhale ali olondola masamu.

Chitsanzo pomwe calc ili yoyenera:

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

Chitsanzo pomwe calc ndi yolakwika:

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

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`(zosakhazikika) 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`(zosakhazikika) kapena`false`	Imathandiza predefined `transition`s pa zigawo zosiyanasiyana.
`$enable-prefers-reduced-motion-media-query`	`true`(zosakhazikika) kapena`false`	Imayatsa `prefers-reduced-motion`funso pa media , zomwe zimapondereza makanema ojambula / zosinthika kutengera zomwe amakonda msakatuli / makina ogwiritsira ntchito.
`$enable-hover-media-query`	`true`kapena `false`(zosakhazikika)	Yasiyidwa
`$enable-grid-classes`	`true`(zosakhazikika) kapena`false`	Imathandizira kupanga makalasi a CSS pagululi (monga, `.container`, `.row`, `.col-md-1`, etc.).
`$enable-caret`	`true`(zosakhazikika) kapena`false`	Imayatsa pseudo element caret pa `.dropdown-toggle`.
`$enable-pointer-cursor-for-buttons`	`true`(zosakhazikika) kapena`false`	Onjezani cholozera cha "dzanja" kuzinthu za batani zosalemala.
`$enable-print-styles`	`true`(zosakhazikika) kapena`false`	Imayatsa masitaelo kuti muwongolere kusindikiza.
`$enable-responsive-font-sizes`	`true`kapena `false`(zosakhazikika)	Imayatsa kukula kwa mafonti kuyankha .
`$enable-validation-icons`	`true`(zosakhazikika) kapena`false`	Imayatsa `background-image`zithunzi mkati mwazolemba ndi mafomu ena ovomerezeka kuti atsimikizire.
`$enable-deprecation-messages`	`true`kapena `false`(zosakhazikika)	Khazikitsani kuti `true`muwonetse machenjezo mukamagwiritsa ntchito zosakaniza zomwe zatsitsidwa ndi ntchito zomwe zakonzedwa kuti zichotsedwe mu `v5`.

Mtundu

Zambiri mwazinthu zosiyanasiyana za Bootstrap ndi zofunikira zimamangidwa kudzera mumitundu ingapo yofotokozedwa pamapu a Sass. Mapuwa atha kutsatidwa ku Sass kuti apange malamulo 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 Bootstrap 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. Zindikirani kuti awa ndi "imvi yoziziritsa", yomwe imakonda kumveka bwino kwa buluu, m'malo mwa imvi yopanda ndale.

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 yoyambira. 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 timadumphira $theme-colorspamapu 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 timasakaniza @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, "Noto 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;
}

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 zosokoneza muzosintha zathu za CSS (mwachitsanzo, --breakpoint-md), izi sizimathandizidwa pamafunso atolankhani , koma zitha kugwiritsidwabe ntchito mkati mwamalamulo pamafunso azama TV. Zosintha za breakpoint 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);
  }
}