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 distfaidhlichean 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. Anns an togalach againn tha sinn air cruinneas cruinneachaidh Sass àrdachadh gu 6 (gu gnàthach is e 5 a th’ ann) gus casg a chuir air cùisean le cruinneachadh brobhsair.

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

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

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 // Optionalroinn mar a dh ’fheumar. Tha sinn a’ moladh a bhith a’ cleachdadh an làn stac in-mhalairt bhon bootstrap.scssfhaidhle againn mar thoiseach tòiseachaidh dhut.

Roghainnean bunaiteach caochlaideach

Tha a h-uile caochladair Sass ann am Bootstrap 4 a’ toirt a-steach a’ !defaultbhratach a leigeas leat faighinn thairis air luach bunaiteach a’ chaochladair 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’ !defaultbhratach. 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.

Faodaidh tar-chuiridhean caochlaideach taobh a-staigh an aon fhaidhle Sass tighinn ro no às deidh na caochladairean bunaiteach. Ach, nuair a bhios tu a’ dol thairis air faidhlichean Sass, feumaidh do thar-shealladh a thighinn mus cuir thu a-steach faidhlichean Sass Bootstrap.

Seo eisimpleir a dh’ atharraicheas an background-coloragus colorairson <body>nuair a thathar a’ toirt a-steach agus a’ cur ri chèile Bootstrap tro npm:

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

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

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’ !defaultbhratach 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-colorsmhapa 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 dangeriuchraichean bho $theme-colorsairson 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-colorsmhapa. 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 #111stè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-colorsmhapa 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-svgghnì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.

Gnìomhan cuir-ris is thoir air falbh

Bidh sinn a’ cleachdadh na addagus na subtractgnìomhan gus am feart CSS a phasgadh calc. 0Is e prìomh adhbhar nan gnìomhan sin mearachdan a sheachnadh nuair a thèid luach “gun aonad” a thoirt a-steach do calcabairt. 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 testmar a dh’ fheumar.

Faodaidh tu na caochladairean sin a lorg agus a ghnàthachadh airson prìomh roghainnean cruinneil ann am scss/_variables.scssfaidhle Bootstrap.

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.scssfaidhle. 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 coloragus 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.scssfaidhle 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 $colorsmhapa 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 @eachlù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-colorsagus 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-colorsmhapa 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-colorsmhapa gus mion-atharraichean a ghineadh air a’ .alertphà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 @eachlùb airson $grid-breakpointsmapa 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-breakpointschuid 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 :rootfeum air). Tha iad suidhichte anns an _root.scssfhaidhle 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", 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);
  }
}