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 dist
m'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 popanga Sass pogwiritsa ntchito payipi yanu.
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
// 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";
Ndi kukhazikitsa komweko, mutha kuyamba kusintha zosintha zilizonse za Sass ndi mamapu anu custom.scss
. Mutha kuyambanso kuwonjezera magawo a Bootstrap pansi // Optional
pagawo ngati pakufunika. Tikukulangizani kuti mugwiritse ntchito stack yonse kuchokera mufayilo yathu bootstrap.scss
ngati poyambira.
Zosintha zosinthika
Kusintha kulikonse kwa Sass mu Bootstrap kumaphatikizapo !default
mbendera yomwe imakulolani kuti mupitirire mtengo wosasinthika wa Sass yanu popanda kusintha code source ya Bootstrap. Koperani ndi kumata zosintha momwe zingafunikire, sinthani makonda awo, ndikuchotsa !default
mbendera. Ngati kusintha kwaperekedwa kale, ndiye kuti sikugawidwenso ndi mikhalidwe yokhazikika 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 ziyenera kubwera pambuyo poti ntchito zathu, zosinthika, ndi zosakaniza zatumizidwa kunja, koma zina zonse zisanachitike.
Nachi chitsanzo chomwe chimasintha background-color
ndi potumiza color
ndikulemba <body>
Bootstrap kudzera 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
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 !default
mbendera 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-colors
pamapu 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 danger
makiyi ochokera $theme-colors
ku 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 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-colors
pamapu 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-svg
ntchitoyi kuthawa <
, >
ndi #
zilembo zazithunzi zakumbuyo za SVG. Zilembozi ziyenera kuthawa kuti zipereke zithunzi zakumbuyo mu IE. Mukamagwiritsa ntchito escape-svg
ntchitoyi, ma URI a data ayenera kutchulidwa.
Onjezani ndi Kuchotsa ntchito
Timagwiritsa ntchito add
ndi subtract
ntchito kukulunga ntchito ya CSS calc
. Cholinga chachikulu cha ntchitoyi ndikupewa zolakwika pamene mtengo wa "unitless" uperekedwa 0
m'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 test
ngati 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) kapenafalse |
Imathandizira border-radius masitayelo ofotokozedweratu pazinthu zosiyanasiyana. |
$enable-shadows |
true kapena false (zosakhazikika) |
Imathandiza masitayelo okonzedweratu box-shadow pazigawo zosiyanasiyana. Izi sizimakhudza box-shadow zomwe zimagwiritsidwa ntchito pazowunikira. |
$enable-gradients |
true kapena false (zosakhazikika) |
Imathandizira ma gradients ofotokozedwatu kudzera background-image masitayelo pazinthu zosiyanasiyana. |
$enable-transitions |
true (zosasintha) kapenafalse |
Imathandiza predefined transition s pa zigawo zosiyanasiyana. |
$enable-prefers-reduced-motion-media-query |
true (zosasintha) kapenafalse |
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 (zosasintha) kapenafalse |
Imathandizira kupanga makalasi a CSS pagululi (monga, .container , .row , .col-md-1 , etc.). |
$enable-caret |
true (zosasintha) kapenafalse |
Imayatsa pseudo element caret pa .dropdown-toggle . |
$enable-pointer-cursor-for-buttons |
true (zosasintha) kapenafalse |
Onjezani cholozera cha "dzanja" kuzinthu za batani zosalemala. |
$enable-print-styles |
true (zosasintha) kapenafalse |
Imayatsa masitaelo kuti muwongolere kusindikiza. |
$enable-responsive-font-sizes |
true kapena false (zosakhazikika) |
Imayatsa kukula kwa mafonti kuyankha . |
$enable-validation-icons |
true (zosasintha) kapenafalse |
Imayatsa background-image zithunzi mkati mwazolemba ndi mafomu ena ovomerezeka kuti atsimikizire. |
$enable-deprecation-messages |
true (zosasintha) kapenafalse |
Khazikitsani false kubisa machenjezo mukamagwiritsa ntchito zosakaniza zilizonse 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 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.
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 color
ndi background-color
.
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
.
Imvi
Mitundu yokulirapo yamitundu yotuwa ndi mapu a Sass scss/_variables.scss
amithunzi yotuwa mosasinthasintha pulojekiti yanu. Zindikirani kuti awa ndi "imvi yoziziritsa", yomwe imakonda kumveka bwino kwa buluu, m'malo mwa imvi yopanda ndale.
Mkati scss/_variables.scss
, mupeza mitundu yamitundu ya Bootstrap ndi mapu a Sass. Nachi chitsanzo cha $colors
mapu 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 @each
malupu omwe amayenda pamapu a Sass. Izi ndizothandiza kwambiri popanga mitundu yosiyanasiyana mwazinthu zathu $theme-colors
ndikupanga 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-colors
pamapu kuti asinthe makonda a nambala ndi dzina la makalasi athu osintha.
Nazi zitsanzo ziwiri za momwe timayendera $theme-colors
mapu kuti tipange zosintha pagawo ndi .alert
zida 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 @each
kuzungulira kwa $grid-breakpoints
mapu 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 :root
ndizofunikira). 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", "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;
}
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);
}
}