Bootstrap cuspaireil
Gnàthaich Bootstrap 4 leis na caochladairean Sass ùra againn airson roghainnean stoidhle cruinneil airson cuspairean furasta agus atharrachaidhean co-phàirteach.
Ro-ràdh
Ann am Bootstrap 3, bha cuspairean air an stiùireadh gu ìre mhòr le bhith a ’dol thairis air caochlaideach ann an LESS, CSS àbhaisteach, agus duilleag stoidhle cuspair air leth a chuir sinn a-steach do na dist
faidhlichean againn. Le beagan oidhirp, dh’ fhaodadh aon sealladh Bootstrap 3 ath-dhealbhadh gu tur gun a bhith a ’beantainn ris na prìomh fhaidhlichean. Tha Bootstrap 4 a’ toirt seachad dòigh-obrach eòlach, ach beagan eadar-dhealaichte.
A-nis, tha an cuspair air a choileanadh le caochladairean Sass, mapaichean Sass, agus CSS àbhaisteach. Chan eil duilleag stoidhle cuspair sònraichte ann tuilleadh; an àite sin, is urrainn dhut an cuspair togte a chomasachadh gus caiseadan, faileasan is eile a chur ris.
Sass
Cleachd na faidhlichean Sass stòr againn gus brath a ghabhail air caochladairean, mapaichean, measgachadh, agus barrachd nuair a bhios tu a ’ cur ri chèile Sass a’ cleachdadh an loidhne-phìoban so-mhaoin agad fhèin.
Structar faidhle
Far an gabh sin dèanamh, seachain prìomh fhaidhlichean Bootstrap atharrachadh. Airson Sass, tha sin a’ ciallachadh a bhith a’ cruthachadh do dhuilleag stoidhle fhèin a bheir a-steach Bootstrap gus an urrainn dhut atharrachadh agus a leudachadh. A’ gabhail ris gu bheil thu a’ cleachdadh manaidsear pacaid mar npm, bidh structar faidhle agad a tha coltach ri seo:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
Ma tha thu air na faidhlichean stòr againn a luchdachadh sìos agus nach eil thu a’ cleachdadh manaidsear pacaid, bidh thu airson rudeigin coltach ris an structar sin a chuir air dòigh le làimh, a’ cumail faidhlichean stòr Bootstrap air leth bhon fheadhainn agad fhèin.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
A’ toirt a-steach
Anns an custom.scss
, bheir thu a-steach faidhlichean Sass stòr Bootstrap. Tha dà roghainn agad: cuir a-steach Bootstrap gu lèir, no tagh na pàirtean a tha a dhìth ort. Bidh sinn a’ brosnachadh an fheadhainn mu dheireadh, ged a bhith mothachail gu bheil cuid de riatanasan agus eisimeileachd thar ar pàirtean. Feumaidh tu cuideachd beagan JavaScript a chuir a-steach airson na plugins againn.
// 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";
Leis an stèidheachadh sin na àite, faodaidh tu tòiseachadh air atharrachadh sam bith de na caochladairean agus mapaichean Sass anns an fhaidhle custom.scss
. Faodaidh tu cuideachd tòiseachadh air pàirtean de Bootstrap a chuir ris fon // Optional
roinn mar a dh ’fheumar. Tha sinn a’ moladh a bhith a’ cleachdadh an làn stac in-mhalairt bhon bootstrap.scss
fhaidhle againn mar thoiseach tòiseachaidh dhut.
Roghainnean bunaiteach caochlaideach
Tha a h-uile caochladair Sass ann am Bootstrap a’ toirt a-steach a’ !default
bhratach a leigeas leat faighinn thairis air luach bunaiteach an caochladair anns an Sass agad fhèin gun a bhith ag atharrachadh còd stòr Bootstrap. Dèan lethbhreac agus pasg air caochladairean mar a dh ’fheumar, atharraich na luachan aca, agus thoir air falbh a’ !default
bhratach. Ma chaidh caochladair a shònrachadh mar-thà, cha bhith e air ath-shònrachadh leis na luachan bunaiteach ann am Bootstrap.
Lorgaidh tu an liosta iomlan de chaochladairean Bootstrap ann an scss/_variables.scss
. Tha cuid de chaochladairean air an suidheachadh gu null
, cha bhith na caochladairean sin a’ toirt a-mach an togalach mura tèid an toirt thairis anns an rèiteachadh agad.
Feumaidh tar-chuir caochlaideach a thighinn às deidh ar gnìomhan, caochladairean agus measgachaidhean a thoirt a-steach, ach ron chòrr de in-mhalairt.
Seo eisimpleir a dh’ atharraicheas an background-color
agus color
airson <body>
nuair a thathar a’ toirt a-steach agus a’ cur ri chèile Bootstrap tro 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
Dèan ath-aithris mar a dh’ fheumar airson caochladair sam bith ann am Bootstrap, a’ toirt a-steach na roghainnean cruinneil gu h-ìosal.
Mapaichean agus lùban
Tha Bootstrap 4 a’ toirt a-steach dòrlach de mhapaichean Sass, prìomh chàraidean luach a tha ga dhèanamh nas fhasa teaghlaichean de CSS co-cheangailte a ghineadh. Bidh sinn a’ cleachdadh mapaichean Sass airson ar dathan, puingean brisidh clèithe, agus barrachd. Dìreach mar caochladairean Sass, tha a h-uile mapa Sass a’ toirt a-steach a’ !default
bhratach agus faodar an toirt thairis agus a leudachadh.
Tha cuid de na mapaichean Sass againn air an cur còmhla ri feadhainn falamh gu bunaiteach. Tha seo air a dhèanamh gus leudachadh furasta a dhèanamh air mapa Sass sònraichte, ach thig e aig cosgais a bhith a’ toirt air falbh nithean bho mhapa beagan nas duilghe.
Atharraich mapa
Gus dath a th’ air a’ $theme-colors
mhapa againn atharrachadh, cuir na leanas ris an fhaidhle àbhaisteach Sass agad:
$theme-colors: (
"primary": #0074d9,
"danger": #ff4136
);
Cuir ris a’ mhapa
Gus dath ùr a chur ri $theme-colors
, cuir an iuchair agus an luach ùr ris:
$theme-colors: (
"custom-color": #900
);
Thoir air falbh bhon mhapa
Gus dathan a thoirt air falbh bho $theme-colors
, no mapa sam bith eile, cleachd map-remove
. Bi mothachail gum feum thu a chuir a-steach eadar na riatanasan agus na roghainnean againn:
// 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";
...
Iuchraichean riatanach
Tha Bootstrap a’ gabhail ris gu bheil iuchraichean sònraichte an làthair taobh a-staigh mhapaichean Sass mar a chleachd sinn agus leudaich sinn iad sin. Mar a bhios tu a’ gnàthachadh nam mapaichean a tha air an toirt a-steach, is dòcha gun tig thu tarsainn air mearachdan far a bheil iuchair mapa Sass sònraichte ga chleachdadh.
Mar eisimpleir, bidh sinn a’ cleachdadh na primary
, success
, agus danger
iuchraichean bho $theme-colors
airson ceanglaichean, putanan, agus stàitean foirm. Cha bu chòir duilgheadasan sam bith a bhith ann le bhith a’ cur an àite luachan nan iuchraichean sin, ach dh’ fhaodadh gun toireadh e cùisean co-chruinneachadh Sass air falbh. Anns na suidheachaidhean sin, feumaidh tu an còd Sass atharrachadh a chleachdas na luachan sin.
Gnìomhan
Bidh Bootstrap a’ cleachdadh grunn ghnìomhan Sass, ach chan eil ach fo-sheata a’ buntainn ri cuspair coitcheann. Tha sinn air trì gnìomhan a thoirt a-steach airson luachan fhaighinn bho na mapaichean dath:
@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);
}
Leigidh iad sin leat aon dath a thaghadh bho mhapa Sass gu math coltach ri mar a chleachdas tu caochladair dath bho v3.
.custom-element {
color: gray("100");
background-color: theme-color("dark");
}
Tha gnìomh eile againn cuideachd airson ìre sònraichte de dhath fhaighinn bhon $theme-colors
mhapa. Bidh luachan ìre àicheil a 'soilleireachadh an dath, agus bidh ìrean nas àirde a' dorchachadh.
@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);
}
Ann an cleachdadh, chanadh tu an gnìomh agus bheir thu seachad dà pharamadair: ainm an dath bho $theme-colors
(me, bun-sgoil no cunnart) agus ìre àireamhach.
.custom-element {
color: theme-color-level(primary, -10);
}
Dh’ fhaodadh gnìomhan a bharrachd a bhith air an cur ris san àm ri teachd no an Sass àbhaisteach agad fhèin gus gnìomhan ìre a chruthachadh airson mapaichean Sass a bharrachd, no eadhon fear coitcheann ma bha thu airson a bhith nas gnìomhaiche.
Coltas dath
Is e gnìomh a bharrachd a tha sinn a’ toirt a-steach ann am Bootstrap an gnìomh eadar-dhealachadh dath, color-yiq
. Bidh e a’ cleachdadh àite dath YIQ#fff
gus dath eadar-dhealaichte aotrom ( ) no dorcha ( ) a thilleadh gu fèin-ghluasadach #111
stèidhichte air an dath bunaiteach ainmichte. Tha an gnìomh seo gu sònraichte feumail airson measgachadh no lùban far a bheil thu a’ gineadh grunn chlasaichean.
Mar eisimpleir, gus swatches dath a ghineadh bhon $theme-colors
mhapa againn:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-yiq($value);
}
}
Faodar a chleachdadh cuideachd airson feumalachdan eadar-dhealaichte aon-uair:
.custom-element {
color: color-yiq(#000); // returns `color: #fff`
}
Faodaidh tu cuideachd dath bunaiteach a shònrachadh leis na gnìomhan mapa dath againn:
.custom-element {
color: color-yiq(theme-color("dark")); // returns `color: #fff`
}
Teicheadh SVG
Bidh sinn a’ cleachdadh a’ escape-svg
ghnìomh gus faighinn seachad air an <
, >
agus na #
caractaran airson ìomhaighean cùl-raoin SVG. Feumar teicheadh bho na caractaran sin gus na h-ìomhaighean cùl-fhiosrachaidh ann an IE a thoirt seachad gu ceart. Nuair a bhios tu a’ cleachdadh a’ escape-svg
ghnìomh, feumar URIan dàta a luaidh.
Gnìomhan cuir-ris is thoir air falbh
Bidh sinn a’ cleachdadh na add
agus na subtract
gnìomhan gus am feart CSS a phasgadh calc
. 0
Is e prìomh adhbhar nan gnìomhan sin mearachdan a sheachnadh nuair a thèid luach “gun aonad” a thoirt a-steach do calc
abairt. calc(10px - 0)
Tillidh abairtean mar seo mearachd anns a h-uile brobhsair, a dh’ aindeoin a bhith ceart gu matamataigeach.
Eisimpleir far a bheil an calc dligheach:
$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);
}
Eisimpleir far a bheil an calc neo-dhligheach:
$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);
}
Roghainnean sass
Gnàthaich Bootstrap 4 leis an fhaidhle caochladairean gnàthaichte againn agus tog gu furasta roghainnean CSS cruinne le $enable-*
caochladairean Sass ùra. Cuir thairis luach caochladair agus ath-chruinnich leis npm run test
mar a dh’ fheumar.
Faodaidh tu na caochladairean sin a lorg agus a ghnàthachadh airson prìomh roghainnean cruinneil ann am scss/_variables.scss
faidhle Bootstrap.
Caochlaideach | Luachan | Tuairisgeul |
---|---|---|
$spacer |
1rem (àbhaisteach), no luach sam bith > 0 |
Sònraich an luach bunaiteach spacer gus na goireasan spacer againn a ghineadh gu prògramach . |
$enable-rounded |
true (bunaiteach) orfalse |
A’ comasachadh stoidhlichean ro- mhìnichte border-radius air diofar phàirtean. |
$enable-shadows |
true neo false (àbhaisteach) |
A 'comasachadh stoidhlichean sgeadachaidh ro-mhìnichte box-shadow air diofar phàirtean. Chan eil e a’ toirt buaidh air box-shadow s a thathar a’ cleachdadh airson stàitean fòcas. |
$enable-gradients |
true neo false (àbhaisteach) |
A’ comasachadh caiseadan ro-mhìnichte tro background-image stoidhlichean air diofar phàirtean. |
$enable-transitions |
true (bunaiteach) orfalse |
A’ comasachadh s ro- mhìnichte transition air diofar phàirtean. |
$enable-prefers-reduced-motion-media-query |
true (bunaiteach) orfalse |
A’ comasachadh prefers-reduced-motion ceist nam meadhanan , a chuireas stad air beòthachaidhean/eadar-ghluasadan sònraichte stèidhichte air roghainnean brabhsair/siostam-obrachaidh an neach-cleachdaidh. |
$enable-hover-media-query |
true neo false (àbhaisteach) |
Air a leigeil seachad |
$enable-grid-classes |
true (bunaiteach) orfalse |
A ’comasachadh clasaichean CSS a ghineadh airson an t-siostam clèithe (me, .container , .row , , .col-md-1 , msaa). |
$enable-caret |
true (bunaiteach) orfalse |
A’ comasachadh cùram eileamaid pseudo air .dropdown-toggle . |
$enable-pointer-cursor-for-buttons |
true (bunaiteach) orfalse |
Cuir cùrsair “làmh” ri eileamaidean putan neo-chiorramach. |
$enable-print-styles |
true (bunaiteach) orfalse |
A’ comasachadh stoidhlichean airson clò-bhualadh as fheàrr. |
$enable-responsive-font-sizes |
true neo false (àbhaisteach) |
A’ comasachadh meudan cruth-clò freagairteach . |
$enable-validation-icons |
true (bunaiteach) orfalse |
A’ comasachadh background-image ìomhaighean taobh a-staigh cuir a-steach teacsa agus cuid de fhoirmean gnàthaichte airson stàitean dearbhaidh. |
$enable-deprecation-messages |
true (bunaiteach) orfalse |
Suidhich gus false rabhaidhean fhalach nuair a bhios tu a’ cleachdadh gin de na measgachaidhean neo-leasaichte agus gnìomhan a thathar an dùil a thoirt air falbh ann an v5 . |
Dath
Tha mòran de na diofar phàirtean agus ghoireasan aig Bootstrap air an togail tro shreath de dhhathan a tha air am mìneachadh ann am mapa Sass. Faodar am mapa seo a lùbadh a-null ann an Sass gus sreath de riaghailtean a ghineadh gu sgiobalta.
A h-uile dathan
Tha na dathan uile a tha rim faighinn ann am Bootstrap 4, rim faighinn mar chaochladairean Sass agus mapa Sass ann am scss/_variables.scss
faidhle. Thèid seo a leudachadh ann am fiosan beaga às deidh sin gus cumaidhean a bharrachd a chuir ris, coltach ris a’ phalet liath -sgèile a tha sinn a’ toirt a-steach mu thràth.
Seo mar a chleachdas tu iad sin nad Sass:
// With variable
.alpha { color: $purple; }
// From the Sass map with our `color()` function
.beta { color: color("purple"); }
Tha clasaichean goireasan dath rim faighinn cuideachd airson suidheachadh color
agus background-color
.
Dathan cuspair
Bidh sinn a’ cleachdadh fo-sheata de gach dath gus paileas dath nas lugha a chruthachadh airson sgeamaichean dath a ghineadh, cuideachd ri fhaighinn mar chaochladairean Sass agus mapa Sass ann am scss/_variables.scss
faidhle Bootstrap.
Gràinnean
Seata farsaing de chaochladairean glasa agus mapa Sass a scss/_variables.scss
-steach airson cumaidhean cunbhalach de ghlas thairis air do phròiseact. Thoir an aire gur e “greys fionnar” a tha seo, a tha buailteach a dh’ ionnsaigh tòna gorm seòlta, seach liath neodrach.
Taobh a-staigh scss/_variables.scss
, lorgaidh tu caochladairean dath Bootstrap agus mapa Sass. Seo eisimpleir de $colors
mhapa 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;
Cuir ris, thoir air falbh no atharraich luachan taobh a-staigh a’ mhapa gus ùrachadh mar a bhios iad gan cleachdadh ann am mòran phàirtean eile. Gu mì-fhortanach aig an àm seo, chan eil a h- uile pàirt a’ cleachdadh a’ mhapa Sass seo. Bidh ùrachaidhean san àm ri teachd a’ feuchainn ri seo a leasachadh. Gu ruige sin, planadh air cleachdadh nan ${color}
caochladairean agus am mapa Sass seo.
Co-phàirtean
Tha mòran de cho-phàirtean agus ghoireasan Bootstrap air an togail le @each
lùban a bhios ag aithris thairis air mapa Sass. Tha seo gu sònraichte cuideachail airson caochlaidhean de cho-phàirt a ghineadh leis an fhear againn $theme-colors
agus caochlaidhean freagairteach a chruthachadh airson gach briseadh. Mar a bhios tu a’ gnàthachadh nam mapaichean Sass sin agus ag ath-chruinneachadh, chì thu gu fèin-ghluasadach na h-atharrachaidhean agad air an nochdadh anns na lùban sin.
Mion-atharraichean
Tha mòran de cho-phàirtean Bootstrap air an togail le dòigh-obrach clas bun-atharrachaidh. Tha seo a’ ciallachadh gu bheil a’ mhòr-chuid den stoidhle air a chumail ann an clas bunaiteach (me, .btn
) fhad ‘s a tha atharrachaidhean stoidhle air an cuingealachadh ri clasaichean mion-atharrachaidh (me, .btn-danger
). Tha na clasaichean mion-atharrachaidh seo air an togail bhon $theme-colors
mhapa gus àireamh agus ainm nan clasaichean atharrachaidh againn a ghnàthachadh.
Seo dà eisimpleir air mar a bhios sinn a’ lùbadh thairis air a’ $theme-colors
mhapa gus mion-atharraichean a ghineadh air a’ .alert
phàirt agus ar .bg-*
goireasan cùl-fhiosrachaidh.
// 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);
}
Freagarrach
Chan eil na lùban Sass seo cuingealaichte ri mapaichean dath, nas motha. Faodaidh tu cuideachd atharrachaidhean freagairteach de na co-phàirtean no na goireasan agad a ghineadh. Gabh mar eisimpleir na goireasan co-thaobhadh teacsa freagairteach againn far am bi sinn a’ measgachadh @each
lùb airson $grid-breakpoints
mapa Sass le ceist mheadhanan a’ toirt a-steach.
@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; }
}
}
Ma dh’ fheumas tu do $grid-breakpoints
chuid atharrachadh, bidh na h-atharrachaidhean agad a’ buntainn ris a h-uile lùb a bhios ag ath-aithris thairis air a’ mhapa sin.
CSS caochladairean
Tha Bootstrap 4 a’ toirt a-steach timcheall air dà dhusan togalach àbhaisteach CSS (caochladairean) anns an CSS a chaidh a chuir ri chèile. Bheir iad sin cothrom furasta air luachan a thathas a’ cleachdadh gu cumanta leithid na dathan cuspaireil againn, puingean brisidh, agus cruachan cruth bun-sgoile nuair a bhios tu ag obair ann an Neach-sgrùdaidh a’ bhrobhsair agad, ann am bogsa gainmhich còd, no ann am prototyping coitcheann.
Caochladairean a tha rim faighinn
Seo na caochladairean a tha sinn a’ toirt a-steach (thoir an aire gu bheil :root
feum air). Tha iad suidhichte anns an _root.scss
fhaidhle againn.
: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;
}
Eisimpleirean
Tha caochladairean CSS a’ tabhann sùbailteachd coltach ri caochladairean Sass, ach às aonais feum air cruinneachadh mus tèid a thoirt don bhrobhsair. Mar eisimpleir, an seo tha sinn ag ath-shuidheachadh cruth-clò na duilleige againn agus stoidhlichean ceangail le caochladairean CSS.
body {
font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
color: var(--blue);
}
Caochladairean Breakpoint
Ged a thug sinn a-steach puingean brisidh anns na caochladairean CSS againn an toiseach (me, --breakpoint-md
), chan eil iad sin a’ faighinn taic ann an ceistean meadhanan , ach faodar an cleachdadh fhathast taobh a -staigh riaghailtean ann an ceistean meadhanan. Tha na caochladairean briseadh seo fhathast anns an CSS a chaidh a chur ri chèile airson co-fhreagarrachd air ais leis gum faod JavaScript a bhith air an cleachdadh. Ionnsaich tuilleadh anns an spec .
Seo eisimpleir de na rudan nach eil a’ faighinn taic:
@media (min-width: var(--breakpoint-sm)) {
...
}
Agus seo eisimpleir de na tha a’ faighinn taic:
@media (min-width: 768px) {
.custom-element {
color: var(--primary);
}
}