in English

Þ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, blöndun og fleira þegar þú setur Sass saman með því að nota þína eigin eignaleiðsla.

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

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

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 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. Sumar breytur eru stilltar á null, þessar breytur gefa ekki út eignina nema þeim sé hnekkt í stillingunum þínum.

Hnekkingar breytu verða að koma eftir að föll okkar, breytur og blöndur eru fluttar inn, en á undan restinni af innflutningnum.

Hér er dæmi sem breytir background-colorog colorfyrir <body>þegar flutt er inn og sett saman Bootstrap í gegnum 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

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

Byrjaðu með Bootstrap í gegnum npm með byrjunarverkefninu okkar! Farðu í twbs/bootstrap-npm-starter sniðmátsgeymsluna til að sjá hvernig á að smíða og sérsníða Bootstrap í þínu eigin npm verkefni. Inniheldur Sass þýðanda, Autoprefixer, Stylelint, PurgeCSS og Bootstrap Icons.

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

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`
}

Flýja SVG

Við notum escape-svgaðgerðina til að flýja <, >og #stafi fyrir SVG bakgrunnsmyndir. Þessa stafi þarf að sleppa til að birta bakgrunnsmyndirnar almennilega í IE. Þegar escape-svgaðgerðin er notuð þarf að gefa upp gagnavefslóð.

Bæta við og draga frá aðgerðir

Við notum addog subtractaðgerðirnar til að vefja CSS calcaðgerðina. Megintilgangur þessara aðgerða er að forðast villur þegar „einingalaust“ 0gildi er sent inn í calctjáningu. Tjáning eins og calc(10px - 0)mun skila villu í öllum vöfrum, þrátt fyrir að vera stærðfræðilega réttar.

Dæmi þar sem útreikningurinn er gildur:

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

Dæmi þar sem útreikningurinn er ógildur:

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

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ðafalse Virkjar fyrirfram skilgreinda border-radiusstíla á ýmsum hlutum.
$enable-shadows trueeða false(sjálfgefið) Gerir fyrirfram skilgreinda skreytingarstíla box-shadowá ýmsum hlutum. Hefur ekki áhrif á box-shadows notað fyrir fókusstöður.
$enable-gradients trueeða false(sjálfgefið) Virkjar fyrirfram skilgreinda halla með background-imagestílum á ýmsum hlutum.
$enable-transitions true(sjálfgefið) eðafalse Virkjar fyrirfram skilgreind transitions á ýmsum íhlutum.
$enable-prefers-reduced-motion-media-query true(sjálfgefið) eðafalse Virkjar prefers-reduced-motionmiðlunarfyrirspurnina , sem bætir ákveðnar hreyfimyndir/breytingar út frá vafra/stýrikerfisstillingum notenda.
$enable-hover-media-query trueeða false(sjálfgefið) Úrelt
$enable-grid-classes true(sjálfgefið) eðafalse Gerir kleift að búa til CSS flokka fyrir netkerfið (td , .container, .row, .col-md-1osfrv.).
$enable-caret true(sjálfgefið) eðafalse Kveikir á gerviþáttum á .dropdown-toggle.
$enable-pointer-cursor-for-buttons true(sjálfgefið) eðafalse Bættu „hand“ bendili við óvirka hnappaþætti.
$enable-print-styles true(sjálfgefið) eðafalse Gerir stíla kleift að hagræða prentun.
$enable-responsive-font-sizes trueeða false(sjálfgefið) Gerir móttækilegar leturstærðir .
$enable-validation-icons true(sjálfgefið) eðafalse Virkjar background-imagetákn innan textainnsláttar og sum sérsniðin eyðublöð fyrir staðfestingarstöður.
$enable-deprecation-messages true(sjálfgefið) eðafalse Stilltu á til falseað fela viðvaranir þegar þú notar eitthvað af úreltum blöndunum og aðgerðum sem fyrirhugað er að fjarlægja í v5.

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 #007bff
$indigo #6610f2
$fjólublár #6f42c1
$bleikur #e83e8c
$rauður #dc3545
$appelsínugult #fd7e14
$gulur #ffc107
$grænn #28a745
$teal #20c997
$ cyan #17a2b8

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 í Bootstrap scss/_variables.scssskránni.

$aðal #007bff
$efri #6c757d
$árangur #28a745
$hætta #dc3545
$viðvörun #ffc107
$upplýsingar #17a2b8
$ljós #f8f9fa
$dökkt #343a40

Gráir

Víðtækt sett af gráum breytum og Sass korti scss/_variables.scssfyrir samræmda gráa tónum í verkefninu þínu. Athugaðu að þetta eru „kaldir gráir litir“ sem hafa tilhneigingu til lúmskan bláan tón, frekar en hlutlausa gráa.

$ grár-100 #f8f9fa
$ grár-200 #e9ecef
$ grár-300 #dee2e6
$ grár-400 #ced4da
$ grár-500 #adb5bd
$ grár-600 #6c757d
$ grár-700 #495057
$ grár-800 #343a40
$ grár-900 #212529

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, "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;
}

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