in English

Tematiziran Bootstrap

Prilagodite Bootstrap 4 z našimi novimi vgrajenimi spremenljivkami Sass za globalne nastavitve sloga za enostavno spreminjanje tem in komponent.

Uvod

V Bootstrap 3 so tematizacijo v veliki meri poganjale preglasitve spremenljivk v LESS, CSS po meri in ločena tabela slogov teme, ki smo jo vključili v naše distdatoteke. Z nekaj truda bi lahko popolnoma preoblikovali videz Bootstrapa 3, ne da bi se dotaknili osnovnih datotek. Bootstrap 4 ponuja znan, a nekoliko drugačen pristop.

Zdaj je tematizacija dosežena s spremenljivkami Sass, zemljevidi Sass in CSS po meri. Ni več namenske tabele slogov tem; namesto tega lahko omogočite vgrajeno temo za dodajanje prelivov, senc in drugega.

Sass

Uporabite naše izvorne datoteke Sass, da izkoristite spremenljivke, zemljevide, mešanice in drugo pri prevajanju Sass z uporabo lastnega cevovoda sredstev.

Struktura datoteke

Kadarkoli je mogoče, se izogibajte spreminjanju jedrnih datotek Bootstrapa. Za Sass to pomeni ustvarjanje lastne tabele slogov, ki uvozi Bootstrap, da jo lahko spreminjate in razširite. Ob predpostavki, da uporabljate upravitelja paketov, kot je npm, boste imeli strukturo datoteke, ki je videti takole:

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

Če ste prenesli naše izvorne datoteke in ne uporabljate upravitelja paketov, boste želeli ročno nastaviti nekaj podobnega tej strukturi, tako da bodo izvorne datoteke Bootstrapa ločene od vaših.

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

Uvažanje

V svoj custom.scss, boste uvozili izvorne datoteke Sass Bootstrapa. Imate dve možnosti: vključite ves Bootstrap ali izberite dele, ki jih potrebujete. Spodbujamo slednje, čeprav se zavedajte, da obstajajo nekatere zahteve in odvisnosti med našimi komponentami. Za naše vtičnike boste morali vključiti tudi nekaj JavaScripta.

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

S to nastavitvijo lahko začnete spreminjati katero koli od spremenljivk in zemljevidov Sass v svojem custom.scss. Po potrebi lahko začnete tudi dodajati dele Bootstrapa pod // Optionalrazdelek. Predlagamo, da bootstrap.scsskot izhodišče uporabite celoten uvozni sklad iz naše datoteke.

Privzete vrednosti spremenljivk

Vsaka spremenljivka Sass v Bootstrapu vključuje !defaultzastavico, ki vam omogoča, da preglasite privzeto vrednost spremenljivke v svojem Sassu, ne da bi spremenili izvorno kodo Bootstrapa. Po potrebi kopirajte in prilepite spremenljivke, spremenite njihove vrednosti in odstranite !defaultzastavico. Če je bila spremenljivka že dodeljena, potem ne bo ponovno dodeljena s privzetimi vrednostmi v Bootstrapu.

Celoten seznam spremenljivk Bootstrapa boste našli v scss/_variables.scss. Nekatere spremenljivke so nastavljene na null, te spremenljivke ne izpišejo lastnosti, razen če so preglasene v vaši konfiguraciji.

Preglasitve spremenljivk morajo priti po uvozu naših funkcij, spremenljivk in miksinov, vendar pred ostalimi uvozi.

Tukaj je primer, ki spremeni background-colorin colorza <body>pri uvažanju in prevajanju Bootstrapa prek 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

Po potrebi ponovite za katero koli spremenljivko v programu Bootstrap, vključno s spodnjimi globalnimi možnostmi.

Začnite uporabljati Bootstrap prek npm z našim začetnim projektom! Pojdite v repozitorij predlog twbs/bootstrap-npm-starter in si oglejte, kako zgraditi in prilagoditi Bootstrap v svojem projektu npm. Vključuje prevajalnik Sass, Autoprefixer, Stylelint, PurgeCSS in ikone Bootstrap.

Zemljevidi in zanke

Bootstrap 4 vključuje peščico zemljevidov Sass, parov ključnih vrednosti, ki olajšajo ustvarjanje družin povezanih CSS. Zemljevide Sass uporabljamo za naše barve, prelomne točke mreže in drugo. Tako kot spremenljivke Sass tudi vse karte Sass vključujejo !defaultzastavico in jih je mogoče preglasiti in razširiti.

Nekateri naši zemljevidi Sass so privzeto združeni v prazne. To je storjeno, da se omogoči enostavno širjenje danega zemljevida Sass, vendar gre za ceno, da je odstranjevanje elementov z zemljevida nekoliko težje.

Spremeni zemljevid

Če želite spremeniti obstoječo barvo na našem $theme-colorszemljevidu, svoji datoteki Sass po meri dodajte naslednje:

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

Dodaj na zemljevid

Če želite dodati novo barvo v $theme-colors, dodajte nov ključ in vrednost:

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

Odstrani z zemljevida

Če želite odstraniti barve iz $theme-colorsali katerega koli drugega zemljevida, uporabite map-remove. Zavedajte se, da ga morate vstaviti med naše zahteve in možnosti:

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

Zahtevani ključi

Bootstrap predpostavlja prisotnost nekaterih specifičnih ključev v zemljevidih ​​Sass, kot smo jih uporabljali, in jih sami razširimo. Ko prilagajate vključene zemljevide, lahko naletite na napake, kjer se uporablja določen ključ zemljevida Sass.

Na primer, uporabljamo tipke primary, successin za povezave, gumbe in stanja obrazca. Zamenjava vrednosti teh ključev ne bi smela povzročati težav, vendar lahko njihova odstranitev povzroči težave pri prevajanju Sass. V teh primerih boste morali spremeniti kodo Sass, ki uporablja te vrednosti.danger$theme-colors

Funkcije

Bootstrap uporablja več funkcij Sass, vendar je le podskupina uporabna za splošno tematiziranje. Vključili smo tri funkcije za pridobivanje vrednosti iz barvnih zemljevidov:

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

Ti vam omogočajo, da izberete eno barvo iz zemljevida Sass, podobno kot bi uporabili barvno spremenljivko iz v3.

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

Imamo tudi drugo funkcijo za pridobivanje določene ravni barve iz $theme-colorszemljevida. Negativne vrednosti ravni bodo osvetlile barvo, medtem ko bodo višje ravni potemnile.

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

V praksi bi poklicali funkcijo in ji posredovali dva parametra: ime barve iz $theme-colors(npr. primarna ali nevarnost) in številčno raven.

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

V prihodnosti bi lahko dodali dodatne funkcije ali svoj Sass po meri za ustvarjanje funkcij ravni za dodatne zemljevide Sass ali celo generično, če bi želeli biti bolj podrobni.

Barvni kontrast

Dodatna funkcija, ki jo vključujemo v Bootstrap, je funkcija barvnega kontrasta, color-yiq. Uporablja barvni prostor YIQ za samodejno vrnitev svetle ( #fff) ali temne ( #111) kontrastne barve glede na podano osnovno barvo. Ta funkcija je še posebej uporabna za miksine ali zanke, kjer ustvarjate več razredov.

Na primer, za ustvarjanje barvnih vzorcev iz našega $theme-colorszemljevida:

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

Uporablja se lahko tudi za enkratne kontrastne potrebe:

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

Določite lahko tudi osnovno barvo z našimi funkcijami barvne karte:

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

Escape SVG

escape-svgFunkcijo uporabljamo za ubežanje <znakov >in #za slike ozadja SVG. Za pravilno upodobitev slik ozadja v IE je treba te znake ubežati. Pri uporabi escape-svgfunkcije morajo biti podatkovni URI-ji navedeni v narekovajih.

Funkciji seštevanja in odštevanja

Funkciji addin uporabljamo subtractza zavijanje funkcije CSS calc. Primarni namen teh funkcij je preprečiti napake, ko 0se v izraz posreduje vrednost »brez enote« calc. Izrazi, kot calc(10px - 0)je, vrnejo napako v vseh brskalnikih, čeprav so matematično pravilni.

Primer, ko je izračun veljaven:

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

Primer, ko je izračun neveljaven:

$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 možnosti

Prilagodite Bootstrap 4 z našo vgrajeno datoteko s spremenljivkami po meri in preprosto preklapljajte med globalnimi nastavitvami CSS z novimi $enable-*spremenljivkami Sass. Preglasite vrednost spremenljivke in npm run testpo potrebi znova prevedite z.

Te spremenljivke za ključne globalne možnosti lahko najdete in prilagodite v scss/_variables.scssdatoteki Bootstrap.

Spremenljivka Vrednote Opis
$spacer 1rem(privzeto) ali katera koli vrednost > 0 Podaja privzeto vrednost preslednika za programsko ustvarjanje naših pripomočkov za presledke .
$enable-rounded true(privzeto) ozfalse Omogoča vnaprej določene border-radiussloge na različnih komponentah.
$enable-shadows trueali false(privzeto) Omogoča vnaprej določene dekorativne box-shadowsloge na različnih komponentah. Ne vpliva na box-shadows, ki se uporabljajo za stanja ostrenja.
$enable-gradients trueali false(privzeto) Omogoča vnaprej določene prelive prek background-imageslogov na različnih komponentah.
$enable-transitions true(privzeto) ozfalse Omogoča vnaprej določene transitions na različnih komponentah.
$enable-prefers-reduced-motion-media-query true(privzeto) ozfalse Omogoči prefers-reduced-motionpredstavnostno poizvedbo , ki zavre določene animacije/prehode glede na nastavitve brskalnika/operacijskega sistema uporabnikov.
$enable-hover-media-query trueali false(privzeto) Zastarelo
$enable-grid-classes true(privzeto) ozfalse Omogoča generiranje razredov CSS za mrežni sistem (npr., .container, .row, .col-md-1itd.).
$enable-caret true(privzeto) ozfalse Omogoči kazalko psevdo elementa na .dropdown-toggle.
$enable-pointer-cursor-for-buttons true(privzeto) ozfalse Elementom gumbov, ki niso onemogočeni, dodajte kazalec »roka«.
$enable-print-styles true(privzeto) ozfalse Omogoča sloge za optimizacijo tiskanja.
$enable-responsive-font-sizes trueali false(privzeto) Omogoča odzivne velikosti pisave .
$enable-validation-icons true(privzeto) ozfalse Omogoča background-imageikone znotraj besedilnih vnosov in nekaterih obrazcev po meri za stanja preverjanja.
$enable-deprecation-messages true(privzeto) ozfalse Nastavite na , če falseželite skriti opozorila pri uporabi katerega koli od zastarelih miksinov in funkcij, ki naj bi jih odstranili v v5.

barva

Številne Bootstrapove različne komponente in pripomočki so zgrajeni s serijo barv, definiranih v zemljevidu Sass. Ta zemljevid je v Sassu mogoče zankati, da hitro ustvarite niz naborov pravil.

Vse barve

Vse barve, ki so na voljo v Bootstrap 4, so na voljo kot spremenljivke Sass in zemljevid Sass v scss/_variables.scssdatoteki. To bo razširjeno v naslednjih manjših izdajah za dodajanje dodatnih odtenkov, podobno kot paleta sivin , ki jo že vključujemo.

$modra #007bff
$indigo #6610f2
$vijolična #6f42c1
$roza #e83e8c
$rdeča #dc3545
$oranžna #fd7e14
$rumena #ffc107
$zelena #28a745
$teal #20c997
$cyan #17a2b8

Tukaj je opisano, kako jih lahko uporabite v svojem Sassu:

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

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

Razredi uporabnosti barv so na voljo tudi za nastavitev colorin background-color.

V prihodnosti si bomo prizadevali zagotoviti zemljevide Sass in spremenljivke za odtenke vsake barve, kot smo storili s spodnjimi barvami v sivinah.

Tematske barve

Uporabljamo podnabor vseh barv za ustvarjanje manjše barvne palete za generiranje barvnih shem, ki je na voljo tudi kot spremenljivke Sass in zemljevid Sass v scss/_variables.scssdatoteki Bootstrap.

$primarni #007bff
$sekundarni #6c757d
$uspeh #28a745
$nevarnost #dc3545
$opozorilo #ffc107
$info #17a2b8
$svetloba #f8f9fa
$temno #343a40

Greys

Obsežen nabor sivih spremenljivk in zemljevid Sass scss/_variables.scssza dosledne odtenke sive v vašem projektu. Upoštevajte, da so to "hladne sive", ki se nagibajo k subtilnemu modremu tonu, namesto nevtralnih sivin.

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

Znotraj scss/_variables.scssboste našli Bootstrapove barvne spremenljivke in zemljevid Sass. Tukaj je primer $colorszemljevida 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;

Dodajte, odstranite ali spremenite vrednosti znotraj zemljevida, da posodobite, kako se uporabljajo v številnih drugih komponentah. Na žalost trenutno ne uporablja vsaka komponenta tega zemljevida Sass. Prihodnje posodobitve si bodo prizadevale to izboljšati. Do takrat načrtujte uporabo ${color}spremenljivk in tega zemljevida Sass.

Komponente

Številne komponente in pripomočki Bootstrapa so zgrajeni z @eachzankami, ki ponavljajo zemljevid Sass. To je še posebej koristno za generiranje različic komponente z našimi $theme-colorsin ustvarjanje odzivnih različic za vsako prelomno točko. Ko prilagodite te zemljevide Sass in jih znova prevedete, boste samodejno videli, da se vaše spremembe odražajo v teh zankah.

Modifikatorji

Številne komponente Bootstrapa so zgrajene s pristopom razreda osnovnega modifikatorja. To pomeni, da je večina sloga vsebovana v osnovnem razredu (npr. .btn), medtem ko so različice sloga omejene na razrede modifikatorjev (npr. .btn-danger). Ti razredi modifikatorjev so zgrajeni iz $theme-colorszemljevida za prilagoditev števila in imena naših razredov modifikatorjev.

Tukaj sta dva primera, kako preletimo $theme-colorszemljevid, da ustvarimo modifikatorje za .alertkomponento in vse naše .bg-*pripomočke v ozadju.

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

Odzivna

Tudi te Sassove zanke niso omejene na barvne zemljevide. Ustvarite lahko tudi odzivne različice svojih komponent ali pripomočkov. Vzemimo za primer naše odzivne pripomočke za poravnavo besedila, kjer pomešamo @eachzanko za $grid-breakpointszemljevid Sass z vključevanjem medijske poizvedbe.

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

Če bi morali spremeniti svoj $grid-breakpoints, bodo vaše spremembe veljale za vse zanke, ki ponavljajo ta zemljevid.

spremenljivke CSS

Bootstrap 4 vključuje približno dva ducata lastnosti (spremenljivk) CSS po meri v svoj prevedeni CSS. Ti omogočajo enostaven dostop do običajno uporabljenih vrednosti, kot so naše barve teme, prelomne točke in primarni skladi pisav, ko delate v brskalniku Inspector, peskovniku kode ali splošnem izdelavi prototipov.

Razpoložljive spremenljivke

Tukaj so spremenljivke, ki jih vključimo (upoštevajte, da :rootje zahtevana). Nahajajo se v naši _root.scssdatoteki.

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

Primeri

Spremenljivke CSS ponujajo podobno prilagodljivost kot Sassove spremenljivke, vendar brez potrebe po prevajanju, preden se prikažejo brskalniku. Tukaj na primer ponastavljamo pisavo naše strani in sloge povezav s spremenljivkami CSS.

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

Spremenljivke prelomne točke

Medtem ko smo prvotno vključili prelomne točke v naše spremenljivke CSS (npr. --breakpoint-md), te niso podprte v medijskih poizvedbah , vendar jih je še vedno mogoče uporabiti v nizih pravil v medijskih poizvedbah. Te spremenljivke prekinitvene točke ostanejo v prevedenem CSS zaradi združljivosti za nazaj, saj jih lahko uporablja JavaScript. Več o tem v specifikaciji .

Tukaj je primer, kaj ni podprto:

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

In tukaj je primer, kaj je podprto:

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