Source

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.

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

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

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 4 vključuje !defaultzastavico, ki vam omogoča, da preglasite privzeto vrednost spremenljivke v svojem Sassu brez spreminjanja izvorne kode 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.

Preglasitve spremenljivk znotraj iste datoteke Sass so lahko pred ali za privzetimi spremenljivkami. Vendar pa morajo pri preglasitvi datotek Sass vaše preglasitve priti pred uvozom datotek Sass Bootstrapa.

Tukaj je primer, ki spremeni background-colorin colorza <body>pri uvažanju in prevajanju Bootstrapa prek npm:

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

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

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

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

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

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) oz`false`	Omogoča vnaprej določene `border-radius`sloge na različnih komponentah.
`$enable-shadows`	`true`ali `false`(privzeto)	Omogoča vnaprej določene `box-shadow`sloge na različnih komponentah.
`$enable-gradients`	`true`ali `false`(privzeto)	Omogoča vnaprej določene prelive prek `background-image`slogov na različnih komponentah.
`$enable-transitions`	`true`(privzeto) oz`false`	Omogoča vnaprej določene `transition`s na različnih komponentah.
`$enable-hover-media-query`	`true`ali `false`(privzeto)	Zastarelo
`$enable-grid-classes`	`true`(privzeto) oz`false`	Omogoča generiranje razredov CSS za mrežni sistem (npr., `.container`, `.row`, `.col-md-1`itd.).
`$enable-caret`	`true`(privzeto) oz`false`	Omogoči kazalko psevdo elementa na `.dropdown-toggle`.
`$enable-print-styles`	`true`(privzeto) oz`false`	Omogoča sloge za optimizacijo tiskanja.

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

Indigo

Vijolična

Roza

rdeča

Oranžna

Rumena

Zelena

Zelenomodra

Cyan

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 Bootstraps.

Primarni

Sekundarno

Uspeh

Nevarnost

Opozorilo

Informacije

Svetloba

Temno

Greys

Obsežen nabor sivih spremenljivk in zemljevid Sass scss/_variables.scssza dosledne odtenke sive v vašem projektu.

100

200

300

400

500

600

700

800

900

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, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --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);
  }
}