Source

Tematski Bootstrap

Prilagodite Bootstrap 4 s našim novim ugrađenim Sass varijablama za globalne postavke stila za jednostavne izmjene tema i komponenti.

Uvod

U Bootstrapu 3, tematiziranje je uglavnom bilo vođeno nadjačavanjem varijabli u LESS-u, prilagođenim CSS-om i zasebnom tablicom stilova teme koju smo uključili u naše distdatoteke. Uz nešto truda, moglo bi se potpuno redizajnirati izgled Bootstrapa 3 bez diranja osnovnih datoteka. Bootstrap 4 nudi poznati, ali malo drugačiji pristup.

Sada se tematizacija postiže pomoću Sass varijabli, Sass mapa i prilagođenog CSS-a. Nema više namjenske tablice stilova teme; umjesto toga, možete omogućiti ugrađenu temu za dodavanje gradijenata, sjena i više.

Sass

Upotrijebite naše izvorne Sass datoteke kako biste iskoristili prednosti varijabli, mapa, mixina i još mnogo toga. U našoj verziji povećali smo preciznost Sass zaokruživanja na 6 (prema zadanim postavkama je 5) kako bismo spriječili probleme sa zaokruživanjem preglednika.

Struktura datoteke

Kad god je moguće, izbjegavajte mijenjanje osnovnih datoteka Bootstrapa. Za Sass to znači stvaranje vlastite tablice stilova koja uvozi Bootstrap tako da je možete mijenjati i proširivati. 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, trebali biste ručno postaviti nešto slično toj strukturi, držeći Bootstrapove izvorne datoteke odvojene od svojih.

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

Uvoz

U svoj custom.scss, uvest ćete Bootstrapove izvorne Sass datoteke. Imate dvije mogućnosti: uključite cijeli Bootstrap ili odaberite dijelove koji su vam potrebni. Potičemo potonje, iako imajte na umu da postoje neki zahtjevi i ovisnosti među našim komponentama. Također ćete morati uključiti malo JavaScripta 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 postavkama možete početi mijenjati bilo koju od Sass varijabli i mapa u vašem custom.scss. Također možete početi dodavati dijelove Bootstrapa u // Optionalodjeljak prema potrebi. Predlažemo da bootstrap.scsskao početnu točku koristite cijeli uvozni stog iz naše datoteke.

Zadane postavke varijable

Svaka Sass varijabla u Bootstrapu 4 uključuje !defaultoznaku koja vam omogućuje nadjačavanje zadane vrijednosti varijable u vlastitom Sassu bez mijenjanja izvornog koda Bootstrapa. Kopirajte i zalijepite varijable prema potrebi, promijenite njihove vrijednosti i uklonite !defaultoznaku. Ako je varijabla već dodijeljena, neće joj se ponovno dodijeliti zadane vrijednosti u Bootstrapu.

Potpuni popis Bootstrapovih varijabli pronaći ćete u scss/_variables.scss. Neke su varijable postavljene na null, te varijable ne prikazuju svojstvo osim ako nisu nadjačane u vašoj konfiguraciji.

Nadjačavanja varijabli unutar iste Sass datoteke mogu biti prije ili poslije zadanih varijabli. Međutim, kod nadjačavanja preko Sass datoteka, vaša nadjačavanja moraju doći prije uvoza Bootstrapovih Sass datoteka.

Evo primjera koji mijenja background-colori colorza <body>prilikom uvoza i kompajliranja Bootstrapa putem npm-a:

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

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

Po potrebi ponovite za bilo koju varijablu u Bootstrapu, uključujući globalne opcije u nastavku.

Karte i petlje

Bootstrap 4 uključuje pregršt Sass mapa, parova ključnih vrijednosti koji olakšavaju generiranje obitelji povezanih CSS-ova. Koristimo Sass karte za naše boje, prijelomne točke 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 prema zadanim postavkama spojene u prazne. Ovo je učinjeno kako bi se omogućilo jednostavno proširenje dane Sass karte, ali dolazi po cijenu malo težeg uklanjanja stavki s karte.

Izmijeni kartu

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

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

Dodaj na kartu

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

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

Ukloni s karte

Za uklanjanje boja s $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 prisutnost nekih specifičnih ključeva unutar Sass mapa koje smo koristili i sami ih proširujemo. Dok prilagođavate uključene karte, možete naići na pogreške gdje se koristi određeni ključ karte Sass.

Na primjer, koristimo tipke , primary, successi za veze, gumbe i stanja obrazaca. Zamjena vrijednosti ovih ključeva ne bi trebala predstavljati probleme, ali njihovo uklanjanje može uzrokovati probleme s Sass kompilacijom. U tim slučajevima morat ćete izmijeniti Sass kod koji koristi te vrijednosti.danger$theme-colors

Funkcije

Bootstrap koristi nekoliko Sass funkcija, ali samo je podskup primjenjiv na opće tematiziranje. 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);
}

Oni vam omogućuju da odaberete jednu boju sa Sass karte 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 dobivanje određene razine boje s $theme-colorskarte. Negativne vrijednosti razine će posvijetliti boju, dok će više razine 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 proslijedili dva parametra: naziv boje iz $theme-colors(npr. primarna ili opasnost) i numeričku razinu.

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

U budućnosti se mogu dodati dodatne funkcije ili vaš vlastiti prilagođeni Sass za stvaranje funkcija razine za dodatne Sass mape, ili čak generičku ako želite biti opširniji.

Kontrast boja

Dodatna funkcija koju uključujemo u Bootstrap je funkcija kontrasta boja, color-yiq. Koristi YIQ prostor boja za automatsko vraćanje svijetle ( #fff) ili tamne ( #111) kontrastne boje na temelju navedene osnovne boje. Ova je funkcija posebno korisna za mixins ili petlje u kojima generirate 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);
  }
}

Također se može koristiti za jednokratne potrebe kontrasta:

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

Također možete odrediti osnovnu boju s našim funkcijama karte boja:

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

Escape SVG

Koristimo ovu escape-svgfunkciju za izbjegavanje znakova <, >i #za SVG pozadinske slike. Ovi znakovi moraju biti izbjegnuti kako bi se pozadinske slike ispravno renderirale u IE.

Funkcije zbrajanja i oduzimanja

Koristimo funkcije addi subtractza omotavanje CSS calcfunkcije. Primarna svrha ovih funkcija je izbjegavanje pogrešaka kada se 0vrijednost "bez jedinice" prenese u calcizraz. Izrazi poput calc(10px - 0)će vratiti pogrešku u svim preglednicima, unatoč tome što su matematički točni.

Primjer gdje je izračun valjan:

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

Primjer gdje je izračun nevažeći:

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

Prilagodite Bootstrap 4 s našom ugrađenom datotekom prilagođenih varijabli i jednostavno mijenjajte globalne CSS postavke s novim $enable-*Sass varijablama. Nadjačajte vrijednost varijable i npm run testpo potrebi ponovno kompajlirajte s njom.

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

Varijabilna Vrijednosti Opis
$spacer 1rem(zadano) ili bilo koja vrijednost > 0 Određuje zadanu vrijednost razmaknice za programsko generiranje naših uslužnih programa razmaknice .
$enable-rounded true(zadano) ilifalse Omogućuje unaprijed definirane border-radiusstilove na različitim komponentama.
$enable-shadows trueili false(zadano) Omogućuje unaprijed definirane box-shadowstilove na različitim komponentama.
$enable-gradients trueili false(zadano) Omogućuje unaprijed definirane gradijente putem background-imagestilova na različitim komponentama.
$enable-transitions true(zadano) ilifalse Omogućuje unaprijed definirane transitions na različitim komponentama.
$enable-prefers-reduced-motion-media-query true(zadano) ilifalse Omogućuje prefers-reduced-motionmedijski upit koji potiskuje određene animacije/prijelaze na temelju postavki preglednika/operativnog sustava korisnika.
$enable-hover-media-query trueili false(zadano) Zastarjelo
$enable-grid-classes true(zadano) ilifalse Omogućuje generiranje CSS klasa za mrežni sustav (npr. .container, .row, .col-md-1, itd.).
$enable-caret true(zadano) ilifalse Omogućuje umetanje pseudo elementa na .dropdown-toggle.
$enable-pointer-cursor-for-buttons true(zadano) ilifalse Dodajte pokazivač "ruke" elementima gumba koji nisu onemogućeni.
$enable-print-styles true(zadano) ilifalse Omogućuje stilove za optimiziranje ispisa.
$enable-responsive-font-sizes trueili false(zadano) Omogućuje odgovarajuće veličine fonta .
$enable-validation-icons true(zadano) ilifalse Omogućuje background-imageikone unutar tekstualnih unosa i neke prilagođene obrasce za stanja provjere valjanosti.
$enable-deprecation-messages trueili false(zadano) Postavite na trueza prikaz upozorenja kada koristite bilo koji od zastarjelih miksina i funkcija koje se planiraju ukloniti u v5.

Boja

Mnoge Bootstrapove različite komponente i pomoćni programi izgrađeni su kroz niz boja definiranih u Sass mapi. Ovu mapu je moguće prevrtati u Sass kako bi se brzo generirao niz skupova pravila.

Sve boje

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

Plava
Indigo
Ljubičasta
Ružičasta
Crvena
naranča
Žuta boja
zelena
Teal
cijan

Evo kako ih možete koristiti u svom Sassu:

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

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

Klase korisnosti boja također su dostupne za postavljanje colori background-color.

U budućnosti ćemo nastojati pružiti Sass karte i varijable za nijanse svake boje kao što smo učinili s bojama u sivim tonovima u nastavku.

Tematske boje

Koristimo podskup svih boja za stvaranje manje palete boja za generiranje shema boja, također dostupnih kao Sass varijable i Sass mapa u Bootstrapovoj scss/_variables.scssdatoteci.

Primarni
Sekundarna
Uspjeh
Opasnost
Upozorenje
Info
Svjetlo
tamno

Sivi

Ekspanzivan 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ćete pronaći Bootstrapove varijable boja i Sass mapu. Evo primjera $colorsSass karte:

$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 modificirajte vrijednosti unutar karte kako biste ažurirali 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 nastojat će to poboljšati. Do tada planirajte koristiti ${color}varijable i ovu Sass mapu.

Komponente

Mnoge Bootstrapove komponente i uslužni programi izgrađeni su s @eachpetljama koje ponavljaju Sass mapu. Ovo je posebno korisno za naše generiranje varijanti komponente $theme-colorsi stvaranje odgovarajućih varijanti za svaku prijelomnu točku. Dok prilagođavate ove Sass mape i ponovno kompajlirate, automatski ćete vidjeti svoje promjene reflektirane u ovim petljama.

Modifikatori

Mnoge Bootstrapove komponente izgrađene su s pristupom klase osnovnog modifikatora. To znači da je većina stila sadržana u osnovnoj klasi (npr. .btn), dok su varijacije stila ograničene na klase modifikatora (npr. .btn-danger). Ove klase modifikatora izgrađene su iz $theme-colorsmape kako bi se prilagodio broj i naziv naših klasa modifikatora.

Ovdje su dva primjera kako prelazimo preko $theme-colorskarte da generiramo modifikatore .alertkomponente i svih naših .bg-*pomoćnih programa u pozadini.

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

Uzvratni

Ni ove Sassove petlje nisu ograničene na mape boja. Također možete generirati odgovarajuće varijacije svojih komponenti ili uslužnih programa. Uzmimo za primjer naše responzivne alate za poravnanje teksta gdje miješamo @eachpetlju za $grid-breakpointsSass mapu s medijskim upitom za uključivanje.

@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 će se promjene primijeniti na sve petlje koje ponavljaju preko te karte.

CSS varijable

Bootstrap 4 uključuje oko dva tuceta CSS prilagođenih svojstava (varijabli) u svoj kompilirani CSS. One omogućuju jednostavan pristup često korištenim vrijednostima kao što su naše boje teme, prijelomne točke i primarni hrpovi fontova kada radite u Inspectoru preglednika, sandboxu koda ili općoj izradi prototipova.

Dostupne varijable

Ovdje su varijable koje uključujemo (imajte na umu da :rootje obavezno). Nalaze se u našoj _root.scssdatoteci.

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

Primjeri

CSS varijable nude sličnu fleksibilnost kao Sassove varijable, ali bez potrebe za kompilacijom prije posluživanja pregledniku. Na primjer, ovdje poništavamo font naše stranice i stilove veza s CSS varijablama.

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

Varijable prijelomne točke

Iako smo prvotno uključili prijelomne točke u naše CSS varijable (npr., --breakpoint-md), one nisu podržane u medijskim upitima , ali se još uvijek mogu koristiti unutar skupova pravila u medijskim upitima. Ove varijable prijelomne točke ostaju u kompajliranom CSS-u radi kompatibilnosti s prethodnim verzijama budući da ih JavaScript može koristiti. Saznajte više u specifikaciji .

Evo primjera onoga što nije podržano:

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

Evo primjera onoga što je podržano:

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