Source

Theming Bootstrap

Prilagodite Bootstrap 4 s našim novim ugrađenim Sass varijablama za globalne preferencije stila za laku promjenu tema i komponenti.

Uvod

U Bootstrapu 3, tematiziranje je uglavnom bilo vođeno zamjenama varijabli u LESS-u, prilagođenim CSS-om i zasebnom tablicom stilova teme koju smo uključili u naše distdatoteke. Uz malo truda, moglo bi se u potpunosti redizajnirati izgled Bootstrapa 3 bez dodirivanja osnovnih datoteka. Bootstrap 4 pruža poznat, ali malo drugačiji pristup.

Sada se teme postižu pomoću Sass varijabli, Sass mapa i prilagođenog CSS-a. Nema više posvećene tematske tablice stilova; umjesto toga, možete omogućiti ugrađenu temu da dodate gradijente, sjene i još mnogo toga.

Sass

Iskoristite naše izvorne Sass datoteke da iskoristite prednosti varijabli, mapa, miksa i još mnogo toga. U našoj verziji smo povećali Sass preciznost zaokruživanja na 6 (podrazumevano je 5) da bismo sprečili probleme sa zaokruživanjem pretraživača.

Struktura fajla

Kad god je moguće, izbjegavajte modificiranje osnovnih datoteka Bootstrapa. Za Sass, to znači kreiranje vlastite tablice stilova koja uvozi Bootstrap tako da ga možete modificirati i proširiti. Pod pretpostavkom da koristite upravitelj paketa kao što je npm, imat ćete strukturu datoteke koja izgleda ovako:

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

Ako ste preuzeli naše izvorne datoteke i ne koristite upravitelj paketa, poželjet ćete ručno postaviti nešto slično toj strukturi, držeći izvorne datoteke Bootstrapa odvojene od vaših.

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

Uvoz

U vaš custom.scss, uvest ćete izvorne Sass datoteke Bootstrapa. Imate dvije opcije: uključite cijeli Bootstrap ili odaberite dijelove koji su vam potrebni. Podstičemo ovo drugo, iako imajte na umu da postoje neki zahtjevi i ovisnosti među našim komponentama. Također ćete morati uključiti neki JavaScript za naše dodatke.

// 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 tim podešavanjem možete početi mijenjati bilo koju od Sass varijabli i mapa u vašem custom.scss. Također možete početi da dodajete dijelove Bootstrapa ispod // Optionalodjeljka po potrebi. Predlažemo da koristite kompletan stog uvoza iz naše bootstrap.scssdatoteke kao početnu tačku.

Varijabilne zadane postavke

Svaka Sass varijabla u Bootstrapu 4 uključuje !defaultoznaku koja vam omogućava da nadjačate zadanu vrijednost varijable u svom vlastitom Sass-u bez modifikacije izvornog koda Bootstrapa. Kopirajte i zalijepite varijable po potrebi, izmijenite njihove vrijednosti i uklonite !defaultoznaku. Ako je varijabla već dodijeljena, neće biti ponovo dodijeljena prema zadanim vrijednostima u Bootstrapu.

Naći ćete kompletnu listu varijabli Bootstrapa u scss/_variables.scss.

Zaobilaženja varijable unutar iste Sass datoteke mogu doći prije ili iza zadanih varijabli. Međutim, kada se nadjačavaju Sass fajlovi, vaša nadjačavanja moraju doći prije nego uvezete Bootstrap-ove Sass datoteke.

Evo primjera koji mijenja background-colori colorza <body>pri uvozu i kompajliranju Bootstrapa putem npm-a:

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

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

Ponovite po potrebi za bilo koju varijablu u Bootstrapu, uključujući globalne opcije ispod.

Mape i petlje

Bootstrap 4 uključuje pregršt Sass mapa, parova ključnih vrijednosti koji olakšavaju generiranje porodica povezanih CSS-a. Koristimo Sass mape za naše boje, tačke prekida mreže i još mnogo toga. Baš kao i Sass varijable, sve Sass mape uključuju !defaultzastavu i mogu se nadjačati i proširiti.

Neke od naših Sass mapa su standardno spojene u prazne. Ovo je učinjeno kako bi se omogućilo jednostavno proširenje date Sass mape, ali dolazi po cijenu da uklanjanje stavki sa mape bude malo teže.

Izmijenite mapu

Da biste izmijenili postojeću boju na našoj $theme-colorsmapi, dodajte sljedeće u svoju prilagođenu Sass datoteku:

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

Dodaj na mapu

Da dodate novu boju u $theme-colors, dodajte novi ključ i vrijednost:

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

Ukloni sa mape

Za uklanjanje boja sa $theme-colors, ili bilo koje druge karte, koristite map-remove. Imajte na umu da ga morate umetnuti između naših zahtjeva i opcija:

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

Potrebni ključevi

Bootstrap pretpostavlja prisustvo nekih specifičnih ključeva unutar Sass mapa jer smo ih sami koristili i proširivali. Dok prilagođavate uključene mape, možete naići na greške kada se koristi određeni ključ Sass karte.

Na primjer, koristimo primary, success, i dangertipke from $theme-colorsza veze, dugmad i stanja obrasca. Zamjena vrijednosti ovih ključeva ne bi trebala predstavljati probleme, ali njihovo uklanjanje može uzrokovati probleme sa Sass kompilacijom. U ovim slučajevima, morat ćete izmijeniti Sass kod koji koristi te vrijednosti.

Funkcije

Bootstrap koristi nekoliko Sass funkcija, ali samo podskup je primjenjiv na opće teme. Uključili smo tri funkcije za dobivanje vrijednosti iz mapa boja:

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

Ovo vam omogućava da odaberete jednu boju sa Sass mape, slično kao što biste koristili varijablu boje iz v3.

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

Imamo i drugu funkciju za dobijanje određenog nivoa boje sa $theme-colorsmape. Negativne vrijednosti nivoa će posvijetliti boju, dok će viši nivoi potamniti.

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

U praksi biste pozvali funkciju i prenijeli dva parametra: naziv boje iz $theme-colors(npr. primarna ili opasnost) i numerički nivo.

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

Dodatne funkcije bi se mogle dodati u budućnosti ili vaš vlastiti prilagođeni Sass za kreiranje funkcija nivoa za dodatne Sass mape, ili čak generičku ako želite da budete opširniji.

Kontrast boja

Jedna dodatna funkcija koju uključujemo u Bootstrap je funkcija kontrasta boja, color-yiq. Koristi YIQ prostor boja da automatski vrati svijetlu ( #fff) ili tamnu ( #111) kontrastnu boju na osnovu specificirane osnovne boje. Ova funkcija je posebno korisna za miksine ili petlje gdje generišete više klasa.

Na primjer, za generiranje uzoraka boja s naše $theme-colorskarte:

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

Može se koristiti i za jednokratne potrebe za kontrastom:

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

Također možete odrediti osnovnu boju pomoću naših funkcija mape boja:

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

Sass opcije

Prilagodite Bootstrap 4 pomoću naše ugrađene datoteke prilagođenih varijabli i lako mijenjajte globalne CSS postavke s novim $enable-*Sass varijablama. Zaobiđite vrijednost varijable i ponovo kompajlirajte npm run testpo potrebi.

Možete pronaći i prilagoditi ove varijable za ključne globalne opcije u Bootstrap scss/_variables.scssdatoteci.

Varijabilna	Vrijednosti	Opis
`$spacer`	`1rem`(zadano) ili bilo koja vrijednost > 0	Određuje zadanu vrijednost razmaknice za programski generiranje naših uslužnih programa za razmak .
`$enable-rounded`	`true`(podrazumevano) ili`false`	Omogućava unaprijed definirane `border-radius`stilove na različitim komponentama.
`$enable-shadows`	`true`ili `false`(zadano)	Omogućava unaprijed definirane `box-shadow`stilove na različitim komponentama.
`$enable-gradients`	`true`ili `false`(zadano)	Omogućava unaprijed definirane gradijente putem `background-image`stilova na različitim komponentama.
`$enable-transitions`	`true`(podrazumevano) ili`false`	Omogućava unaprijed definirane `transition`s na različitim komponentama.
`$enable-prefers-reduced-motion-media-query`	`true`(podrazumevano) ili`false`	Omogućava `prefers-reduced-motion`medijski upit , koji potiskuje određene animacije/prijelaze na osnovu preferencija pretraživača/operativnog sistema korisnika.
`$enable-hover-media-query`	`true`ili `false`(zadano)	Zastarjelo
`$enable-grid-classes`	`true`(podrazumevano) ili`false`	Omogućava generiranje CSS klasa za grid sistem (npr. `.container`, `.row`, `.col-md-1`, itd.).
`$enable-caret`	`true`(podrazumevano) ili`false`	Omogućava pseudo element ubacivanje na `.dropdown-toggle`.
`$enable-print-styles`	`true`(podrazumevano) ili`false`	Omogućava stilove za optimizaciju štampanja.
`$enable-validation-icons`	`true`(podrazumevano) ili`false`	Omogućava `background-image`ikone unutar tekstualnih unosa i neke prilagođene obrasce za stanja validacije.

Boja

Mnoge od Bootstrap-ovih različitih komponenti i uslužnih programa izgrađene su kroz niz boja definisanih u Sass mapi. Ova mapa se može premotati u Sass-u kako bi se brzo generirao niz skupova pravila.

Sve boje

Sve boje dostupne u Bootstrap 4, dostupne su kao Sass varijable i Sass mapa u scss/_variables.scssdatoteci. Ovo će biti prošireno u narednim manjim izdanjima kako bi se dodale dodatne nijanse, slično paleti sivih tonova koju već uključujemo.

Plava

Indigo

Ljubičasta

Pink

Crveni

Narandžasta

Žuta

Zeleno

Teal

Cyan

Evo kako ih možete koristiti u svom Sass-u:

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

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

Korisne klase boja su također dostupne za postavljanje colori background-color.

U budućnosti ćemo nastojati da pružimo Sass mape i varijable za nijanse svake boje kao što smo uradili sa bojama sivih tonova ispod.

Tematske boje

Koristimo podskup svih boja da kreiramo manju paletu boja za generisanje šema boja, koje su takođe dostupne kao Sass varijable i Sass mapa u Bootstrapsovom scss/_variables.scssfajlu.

Primarni

Sekundarni

Uspjeh

Opasnost

Upozorenje

Info

Light

Dark

Greys

Ekspanzivni skup sivih varijabli i Sass mapa scss/_variables.scssza dosljedne nijanse sive u vašem projektu. Imajte na umu da su to „hladne sive“, koje teže suptilnom plavom tonu, a ne neutralnim sivim.

100

200

300

400

500

600

700

800

900

Unutar scss/_variables.scss, naći ćete Bootstrap-ove varijable boja i Sass mapu. Evo primjera $colorsSass mape:

$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, uklonite ili izmijenite vrijednosti unutar karte da ažurirate način na koji se koriste u mnogim drugim komponentama. Nažalost, u ovom trenutku, ne koristi svaka komponenta ovu Sass mapu. Buduća ažuriranja će nastojati poboljšati ovo. Do tada planirajte da koristite ${color}varijable i ovu Sass mapu.

Komponente

Mnoge Bootstrap komponente i uslužni programi su izgrađeni sa @eachpetljama koje se ponavljaju preko Sass mape. Ovo je posebno korisno za generiranje varijanti komponente od strane našeg $theme-colorsi kreiranje responzivnih varijanti za svaku tačku prekida. Dok prilagođavate ove Sass mape i ponovo kompajlirate, automatski ćete vidjeti svoje promjene koje se odražavaju u ovim petljama.

Modifikatori

Mnoge Bootstrap komponente su izgrađene sa pristupom klase baznih modifikatora. To znači da je najveći dio stila sadržan u osnovnoj klasi (npr. .btn), dok su varijacije stila ograničene na klase modifikatora (npr. .btn-danger). Ove klase modifikatora su izgrađene iz $theme-colorsmape kako bi se prilagodili broj i naziv naših modifikatorskih klasa.

Evo dva primjera kako prelazimo preko $theme-colorskarte da bismo generirali modifikatore za .alertkomponentu i sve naše .bg-*pozadinske uslužne programe.

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

Responsive

Ni ove Sass petlje nisu ograničene na mape boja. Također možete generirati prilagodljive varijacije vaših komponenti ili uslužnih programa. Uzmimo za primjer naše pomoćne programe za poravnavanje teksta u kojima miješamo @eachpetlju za $grid-breakpointsSass mapu s medijskim upitom koji uključuje.

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

Ako trebate izmijeniti svoj $grid-breakpoints, vaše promjene će se primijeniti na sve petlje koje se ponavljaju preko te mape.

CSS varijable

Bootstrap 4 uključuje oko dva tuceta CSS prilagođenih svojstava (varijabli) u svom prevedenom CSS-u. One omogućavaju lak pristup uobičajenim vrijednostima kao što su boje naše teme, tačke prekida i primarni skupovi fontova kada radite u Inspector-u vašeg pretraživača, zaštićenom okruženju koda ili generalnom prototipu.

Dostupne varijable

Evo varijabli koje uključujemo (imajte na umu da :rootje potrebno). Oni se nalaze u našem _root.scssdosijeu.

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

Primjeri

CSS varijable nude sličnu fleksibilnost kao i Sass-ove varijable, ali bez potrebe za kompilacijom prije nego što se serviraju u pretraživač. Na primjer, ovdje resetujemo font i stilove veze naše stranice pomoću CSS varijabli.

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

Varijable prelomne tačke

Iako smo prvobitno uključili tačke prekida u naše CSS varijable (npr. --breakpoint-md), one nisu podržane u medijskim upitima , ali se i dalje mogu koristiti unutar skupova pravila u medijskim upitima. Ove varijable tačke prekida ostaju u prevedenom CSS-u radi kompatibilnosti unazad s obzirom da ih JavaScript može koristiti. Saznajte više u specifikaciji .

Evo primjera onoga što nije podržano:

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

A evo i primjera onoga što je podržano:

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