Þema Bootstrap

Sérsníddu Bootstrap 4 með nýju innbyggðu Sass breytunum okkar fyrir alþjóðlegar stílstillingar til að auðvelda þema og breytingar á íhlutum.

Kynning

Í Bootstrap 3 var þema að mestu knúið áfram af breytilegum hnekkingum í LESS, sérsniðnum CSS og sérstöku þema stílblaði sem við settum inn í distskrárnar okkar. Með nokkurri fyrirhöfn gæti maður algjörlega endurhannað útlit Bootstrap 3 án þess að snerta kjarnaskrárnar. Bootstrap 4 veitir kunnuglega en aðeins öðruvísi nálgun.

Nú er þema gert með Sass breytum, Sass kortum og sérsniðnum CSS. Það er ekki meira hollt þema stílblað; í staðinn geturðu virkjað innbyggða þemað til að bæta við halla, skugga og fleira.

Sass

Notaðu uppruna Sass skrárnar okkar til að nýta þér breytur, kort, mixins og fleira.

Uppbygging skráa

Þegar mögulegt er, forðastu að breyta kjarnaskrám Bootstrap. Fyrir Sass þýðir það að búa til þitt eigið stílblað sem flytur inn Bootstrap svo þú getir breytt og framlengt það. Miðað við að þú sért að nota pakkastjóra eins og npm, muntu hafa skráarskipulag sem lítur svona út:

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

Ef þú hefur hlaðið niður frumskránum okkar og ert ekki að nota pakkastjórnun, þá viltu handvirkt setja upp eitthvað svipað þeirri uppbyggingu og halda upprunaskrám Bootstrap aðskildum frá þínum eigin.

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

Flytur inn

Í custom.scss, muntu flytja inn Sass frumskrár Bootstrap. Þú hefur tvo valkosti: láttu allt Bootstrap fylgja með eða veldu þá hluta sem þú þarft. Við hvetjum hið síðarnefnda, þó að vera meðvitaður um að það eru nokkrar kröfur og ósjálfstæði milli íhluta okkar. Þú þarft líka að láta JavaScript fylgja með viðbæturnar okkar.

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

Með þeirri uppsetningu á sínum stað geturðu byrjað að breyta hvaða Sass breytum og kortum sem er í custom.scss. Þú getur líka byrjað að bæta við hluta af Bootstrap undir // Optionalhlutanum eftir þörfum. Við mælum með því að nota allan innflutningsstafla úr skránni okkar bootstrap.scsssem upphafspunkt.

Breytileg vanskil

Sérhver Sass breyta í Bootstrap 4 inniheldur !defaultfánann sem gerir þér kleift að hnekkja sjálfgefnu gildi breytunnar í þínum eigin Sass án þess að breyta frumkóða Bootstrap. Afritaðu og límdu breytur eftir þörfum, breyttu gildum þeirra og fjarlægðu !defaultfánann. Ef breytu hefur þegar verið úthlutað, þá verður henni ekki endurúthlutað með sjálfgefnum gildum í Bootstrap.

Þú finnur heildarlistann yfir breytur Bootstrap í scss/_variables.scss.

Hnekkingar breytu innan sömu Sass skráar geta komið á undan eða á eftir sjálfgefnum breytum. Hins vegar, þegar hnekkt er yfir Sass skrár, verða hnekkingar þínar að koma áður en þú flytur inn Sass skrár Bootstrap.

Hér er dæmi sem breytir background-colorog colorfyrir <body>þegar flutt er inn og sett saman Bootstrap í gegnum npm:

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

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

Endurtaktu eftir þörfum fyrir hvaða breytu sem er í Bootstrap, þar á meðal alþjóðlegu valkostina hér að neðan.

Kort og lykkjur

Bootstrap 4 inniheldur handfylli af Sass kortum, lykilgildapörum sem gera það auðveldara að búa til fjölskyldur tengdra CSS. Við notum Sass kort fyrir litina okkar, rist brotpunkta og fleira. Rétt eins og Sass breytur, innihalda öll Sass kort !defaultfánann og hægt er að hnekkja þeim og framlengja.

Sum Sass korta okkar eru sjálfgefið sameinuð í tóm. Þetta er gert til að auðvelda útvíkkun á tilteknu Sass korti, en það kostar að gera það aðeins erfiðara að fjarlægja hluti af kortinu.

Breyta korti

Til að breyta núverandi lit á $theme-colorskortinu okkar skaltu bæta eftirfarandi við sérsniðna Sass skrána þína:

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

Bæta við kort

Til að bæta nýjum lit við $theme-colorsskaltu bæta við nýja lyklinum og gildinu:

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

Fjarlægja af kortinu

Til að fjarlægja liti af $theme-colors, eða einhverju öðru korti, notaðu map-remove. Athugaðu að þú verður að setja það inn á milli krafna okkar og valkosta:

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

Nauðsynlegir lyklar

Bootstrap gerir ráð fyrir að einhverjir sérstakir lyklar séu til staðar í Sass kortum eins og við notuðum og framlengdu þá sjálf. Þegar þú sérsníður kortin sem fylgja með, gætirðu rekist á villur þar sem verið er að nota tiltekinn Sass kortalykil.

Til dæmis notum við primary, success, og dangerlyklana frá $theme-colorsfyrir tengla, hnappa og eyðublöð. Það ætti ekki að valda neinum vandamálum að skipta út gildum þessara lykla, en að fjarlægja þá gæti valdið Sass safnvandamálum. Í þessum tilvikum þarftu að breyta Sass kóðanum sem notar þessi gildi.

Aðgerðir

Bootstrap notar nokkrar Sass aðgerðir, en aðeins hlutmengi á við um almennt þema. Við höfum sett inn þrjár aðgerðir til að fá gildi úr litakortunum:

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

Þetta gerir þér kleift að velja einn lit úr Sass korti svipað og þú myndir nota litabreytu frá v3.

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

Við höfum líka aðra aðgerð til að fá ákveðið litastig af $theme-colorskortinu. Neikvæð stigsgildi munu létta litinn en hærri stig verða dökkari.

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

Í reynd, myndir þú kalla fallið og senda inn tvær breytur: heiti litarins frá $theme-colors(td frum eða hættu) og tölustig.

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

Hægt væri að bæta við fleiri aðgerðum í framtíðinni eða þinni eigin sérsniðnu Sass til að búa til stigaðgerðir fyrir viðbótar Sass kort, eða jafnvel almennri ef þú vildir vera orðlausari.

Litaskil

Ein viðbótaraðgerð sem við erum með í Bootstrap er litaskilaaðgerðin, color-yiq. Það notar YIQ litarýmið til að skila sjálfkrafa ljósum ( #fff) eða dökkum ( #111) andstæða lit miðað við tilgreindan grunnlit. Þessi aðgerð er sérstaklega gagnleg fyrir mixins eða lykkjur þar sem þú ert að búa til marga flokka.

Til dæmis, til að búa til litasýni úr $theme-colorskortinu okkar:

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

Það er einnig hægt að nota fyrir stakar birtuskilþarfir:

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

Þú getur líka tilgreint grunnlit með litakortaaðgerðum okkar:

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

Sass valkostir

Sérsníddu Bootstrap 4 með innbyggðu sérsniðnu breytuskránni okkar og skiptu auðveldlega um alþjóðlegar CSS-stillingar með nýjum $enable-*Sass breytum. Hneka gildi breytu og setja saman aftur með npm run testeftir þörfum.

Þú getur fundið og sérsniðið þessar breytur fyrir helstu alþjóðlega valkosti í scss/_variables.scssskrá Bootstrap.

Breytilegt	Gildi	Lýsing
`$spacer`	`1rem`(sjálfgefið), eða hvaða gildi sem er > 0	Tilgreinir sjálfgefið spacer gildi til að búa til spacer tólin okkar með forritunarbúnaði .
`$enable-rounded`	`true`(sjálfgefið) eða`false`	Virkjar fyrirfram skilgreinda `border-radius`stíla á ýmsum hlutum.
`$enable-shadows`	`true`eða `false`(sjálfgefið)	Virkjar fyrirfram skilgreinda `box-shadow`stíla á ýmsum hlutum.
`$enable-gradients`	`true`eða `false`(sjálfgefið)	Virkjar fyrirfram skilgreinda halla með `background-image`stílum á ýmsum hlutum.
`$enable-transitions`	`true`(sjálfgefið) eða`false`	Virkjar fyrirfram skilgreind `transition`s á ýmsum íhlutum.
`$enable-hover-media-query`	`true`eða `false`(sjálfgefið)	Úrelt
`$enable-grid-classes`	`true`(sjálfgefið) eða`false`	Gerir kleift að búa til CSS flokka fyrir netkerfið (td , `.container`, `.row`, `.col-md-1`osfrv.).
`$enable-caret`	`true`(sjálfgefið) eða`false`	Kveikir á gerviþáttum á `.dropdown-toggle`.
`$enable-print-styles`	`true`(sjálfgefið) eða`false`	Gerir stíla kleift að hagræða prentun.

Litur

Margir af ýmsu íhlutum og tólum Bootstrap eru byggðir í gegnum röð lita sem eru skilgreindir í Sass korti. Þetta kort er hægt að hringja yfir í Sass til að búa fljótt til röð reglusetta.

Allir litir

Allir litir í boði í Bootstrap 4, eru fáanlegir sem Sass breytur og Sass kort í scss/_variables.scssskrá. Þetta verður stækkað í síðari minni útgáfum til að bæta við fleiri tónum, líkt og grátónapallettan sem við erum nú þegar með.

Blár

Indigo

Fjólublátt

Bleikur

Rauður

Appelsínugult

Gulur

Grænn

Teal

Blár

Svona geturðu notað þetta í Sass þínum:

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

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

Litanotkunarflokkar eru einnig fáanlegir fyrir stillingar colorog background-color.

Í framtíðinni munum við stefna að því að útvega Sass kort og breytur fyrir litbrigði hvers litar eins og við höfum gert með grátónalitunum hér að neðan.

Þema litir

Við notum undirmengi allra lita til að búa til minni litavali til að búa til litasamsetningu, einnig fáanlegt sem Sass breytur og Sass kort í scss/_variables.scssskrá Bootstraps.

Aðal

Secondary

Árangur

Hætta

Viðvörun

Upplýsingar

Ljós

Myrkur

Gráir

Víðtækt sett af gráum breytum og Sass korti scss/_variables.scssfyrir samræmda gráa tónum í verkefninu þínu.

100

200

300

400

500

600

700

800

900

Innan scss/_variables.scss, munt þú finna litabreytur Bootstrap og Sass kort. Hér er dæmi um $colorsSass kortið:

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

Bættu við, fjarlægðu eða breyttu gildum á kortinu til að uppfæra hvernig þau eru notuð í mörgum öðrum hlutum. Því miður á þessum tíma nota ekki allir hlutir þetta Sass kort. Framtíðaruppfærslur munu leitast við að bæta úr þessu. Þangað til þá skaltu íhuga að nýta þér ${color}breyturnar og þetta Sass kort.

Íhlutir

Margir af íhlutum og tólum Bootstrap eru byggðir með @eachlykkjum sem endurtaka sig yfir Sass kort. Þetta er sérstaklega gagnlegt til að búa til afbrigði af íhlut hjá okkur $theme-colorsog búa til móttækileg afbrigði fyrir hvern brotpunkt. Þegar þú sérsníður þessi Sass kort og endurtekið saman muntu sjálfkrafa sjá breytingarnar þínar endurspeglast í þessum lykkjum.

Breytingar

Margir af íhlutum Bootstrap eru smíðaðir með grunnbreytingarflokksaðferð. Þetta þýðir að meginhluti stílsins er innifalinn í grunnflokki (td .btn) á meðan stílafbrigði eru bundin við breytingaflokka (td .btn-danger). Þessir breytingaflokkar eru byggðir út frá $theme-colorskortinu til að sérsníða fjölda og heiti breytingaflokkanna okkar.

Hér eru tvö dæmi um hvernig við lykkjum yfir $theme-colorskortið til að búa til breytingar á .alertíhlutnum og öllum .bg-*bakgrunnsforritum okkar.

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

Móttækilegur

Þessar Sass lykkjur takmarkast heldur ekki við litakort. Þú getur líka búið til móttækileg afbrigði af íhlutum þínum eða tólum. Tökum til dæmis móttækilegu textajöfnunartólunum okkar þar sem við blandum @eachlykkju fyrir $grid-breakpointsSass kortið með miðlunarfyrirspurn.

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

Ef þú þarft að breyta $grid-breakpoints, munu breytingar þínar gilda um allar lykkjur sem endurtaka sig yfir það kort.

CSS breytur

Bootstrap 4 inniheldur um tvo tugi sérsniðinna CSS eiginleika (breytur) í samansettum CSS. Þetta veitir greiðan aðgang að algengum gildum eins og þemalitum okkar, brotpunktum og aðalleturstöflum þegar þú vinnur í eftirlitsmanni vafrans þíns, kóðasandkassa eða almennri frumgerð.

Tiltækar breytur

Hér eru breyturnar sem við tökum með (athugið að það :rooter krafist). Þeir eru staðsettir í skránni okkar _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;
}

Dæmi

CSS breytur bjóða upp á svipaðan sveigjanleika og breytur Sass, en án þess að þörf sé á samantekt áður en þær eru birtar í vafranum. Til dæmis, hér erum við að endurstilla leturgerð síðunnar okkar og tenglastíla með CSS breytum.

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

Brotpunktsbreytur

Þó að við hafi upphaflega sett brotpunkta inn í CSS breyturnar okkar (td --breakpoint-md), þá eru þeir ekki studdir í miðlunarfyrirspurnum en samt er hægt að nota þá innan reglna í miðlunarfyrirspurnum. Þessar brotpunktsbreytur eru áfram í samsettu CSS fyrir afturábak eindrægni þar sem JavaScript er hægt að nota þær. Lærðu meira í forskriftinni.

Hér er dæmi um það sem ekki er stutt:

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

Og hér er dæmi um það sem er stutt:

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