Source

Theming Bootstrap

Mukauta Bootstrap 4:ää uusilla sisäänrakennetuilla Sass-muuttujillamme, jotta voit valita yleiset tyyliasetukset helpon teeman ja komponenttien muuttamisen vuoksi.

Johdanto

Bootstrap 3:ssa teemaa ohjasivat suurelta osin muuttujien ohitukset LESS:ssä, mukautettu CSS ja erillinen teematyylitaulukko, jonka sisällytimme disttiedostoihimme. Pienellä vaivalla Bootstrap 3:n ulkoasu voitaisiin suunnitella kokonaan uudelleen koskematta ydintiedostoihin. Bootstrap 4 tarjoaa tutun, mutta hieman erilaisen lähestymistavan.

Nyt teemat toteutetaan Sass-muuttujien, Sass-karttojen ja mukautetun CSS:n avulla. Ei ole enää omaa teematyylitaulukkoa; sen sijaan voit ottaa käyttöön sisäänrakennetun teeman lisätäksesi liukuvärejä, varjoja ja paljon muuta.

Sass

Hyödynnä Sass-lähdetiedostojamme muuttujien, karttojen, mixinien ja muiden ominaisuuksien hyödyntämiseksi. Rakenneessamme olemme lisänneet Sassin pyöristystarkkuuden 6:een (oletuksena se on 5) estääksemme selaimen pyöristämiseen liittyvät ongelmat.

Tiedoston rakenne

Vältä Bootstrapin ydintiedostojen muokkaamista aina kun mahdollista. Sassille tämä tarkoittaa oman tyylisivun luomista, joka tuo Bootstrapin, jotta voit muokata ja laajentaa sitä. Olettaen, että käytät paketinhallintaohjelmaa, kuten npm, tiedostorakenne näyttää tältä:

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

Jos olet ladannut lähdetiedostomme etkä käytä paketinhallintaa, sinun kannattaa määrittää manuaalisesti jotain samankaltaista rakennetta ja pitää Bootstrapin lähdetiedostot erillään omista tiedostoistasi.

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

Tuodaan

Tuot custom.scssBootstrapin Sass-lähdetiedostot tiedostoosi. Sinulla on kaksi vaihtoehtoa: sisällytä kaikki Bootstrap tai valitse tarvitsemasi osat. Suosittelemme jälkimmäistä, mutta muista, että komponenttiemme välillä on joitain vaatimuksia ja riippuvuuksia. Sinun on myös sisällytettävä JavaScript-laajennuksiamme varten.

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

Kun tämä asetus on tehty, voit alkaa muokata mitä tahansa Sass-muuttujia ja -karttoja custom.scss. Voit myös aloittaa Bootstrapin osien lisäämisen // Optionalosion alle tarpeen mukaan. Suosittelemme käyttämään bootstrap.scsstiedostomme koko tuontipinoa lähtökohtana.

Muuttuva oletusarvo

Jokainen Bootstrap 4:n Sass-muuttuja sisältää !defaultlipun, jonka avulla voit ohittaa muuttujan oletusarvon omassa Sassissasi muuttamatta Bootstrapin lähdekoodia. Kopioi ja liitä muuttujia tarpeen mukaan, muokkaa niiden arvoja ja poista !defaultlippu. Jos muuttuja on jo määritetty, sitä ei määritetä uudelleen Bootstrapin oletusarvoilla.

Löydät täydellisen luettelon Bootstrapin muuttujista kohdasta scss/_variables.scss.

Saman Sass-tiedoston muuttujien ohitukset voivat tulla oletusmuuttujien eteen tai jälkeen. Kuitenkin, kun ohitat Sass-tiedostoja, ohitusten on tapahduttava ennen Bootstrapin Sass-tiedostojen tuontia.

Tässä on esimerkki, joka muuttaa background-colorja colorfor the, <body>kun Bootstrap tuodaan ja käännetään npm:n kautta:

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

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

Toista tarvittaessa mille tahansa Bootstrapin muuttujalle, mukaan lukien alla olevat yleiset asetukset.

Kartat ja silmukat

Bootstrap 4 sisältää kourallisen Sass-karttoja, avainarvopareja, jotka helpottavat toisiinsa liittyvien CSS-perheiden luomista. Käytämme Sass-karttoja väreissämme, ruudukon keskeytyspisteissä ja monessa muussa. Aivan kuten Sass-muuttujat, kaikki Sass-kartat sisältävät !defaultlipun, ja ne voidaan ohittaa ja laajentaa.

Jotkut Sass-kartoistamme on oletuksena yhdistetty tyhjiksi. Tämä tehdään tietyn Sass-kartan helpon laajentamisen mahdollistamiseksi, mutta sen kustannuksella on kohteiden poistaminen kartalta hieman vaikeampaa.

Muokkaa karttaa

Jos haluat muokata kartallamme olevaa väriä $theme-colors, lisää seuraavat mukautettuun Sass-tiedostoosi:

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

Lisää karttaan

Lisää uusi väri $theme-colorslisäämällä uusi avain ja arvo:

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

Poista kartalta

Voit poistaa värit $theme-colorskartalta tai mistä tahansa muusta kartasta käyttämällä map-remove. Huomaa, että sinun on lisättävä se vaatimustemme ja vaihtoehtojemme väliin:

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

Tarvittavat avaimet

Bootstrap olettaa joidenkin tiettyjen avainten läsnäolon Sass-kartoissa, kun käytimme ja laajennamme niitä itse. Kun mukautat mukana olevia karttoja, saatat kohdata virheitä, kun käytetään tiettyä Sass-kartan avainta.

Käytämme esimerkiksi primary, successja danger-näppäimiä $theme-colorslinkkien, painikkeiden ja lomakkeiden tiloihin. Näiden avainten arvojen korvaamisen ei pitäisi aiheuttaa ongelmia, mutta niiden poistaminen voi aiheuttaa Sass-kääntämisongelmia. Näissä tapauksissa sinun on muutettava Sass-koodia, joka käyttää näitä arvoja.

Toiminnot

Bootstrap hyödyntää useita Sass-toimintoja, mutta vain osa on sovellettavissa yleiseen teemaan. Olemme sisällyttäneet kolme toimintoa arvojen saamiseksi värikartoista:

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

Niiden avulla voit valita yhden värin Sass-kartalta aivan samalla tavalla kuin käyttäisit värimuuttujaa v3:sta.

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

Meillä on myös toinen toiminto tietyn väritason saamiseksi $theme-colorskartasta. Negatiivinen tasoarvo vaalentaa väriä, kun taas korkeammat tasot tummenevat.

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

Käytännössä kutsuisit funktiota ja välität kaksi parametria: värin nimi $theme-colors(esim. ensisijainen tai vaara) ja numeerinen taso.

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

Lisätoimintoja voidaan lisätä tulevaisuudessa tai omaa mukautettua Sassia luodaksesi tasofunktioita ylimääräisille Sass-kartoille, tai jopa yleisen, jos haluat olla monisanaisempi.

Värikontrasti

Yksi lisätoiminto, jonka sisällytämme Bootstrapiin, on värikontrastitoiminto, color-yiq. Se käyttää YIQ-väriavaruutta palauttamaan automaattisesti vaalean ( #fff) tai tumman ( #111) kontrastivärin määritetyn perusvärin perusteella. Tämä toiminto on erityisen hyödyllinen mikseissä tai silmukoissa, joissa luot useita luokkia.

Voit esimerkiksi luoda värimalleja $theme-colorskartastamme seuraavasti:

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

Sitä voidaan käyttää myös kertaluonteisiin kontrastitarpeisiin:

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

Voit myös määrittää perusvärin värikarttatoiminnoillamme:

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

Sass vaihtoehdot

Mukauta Bootstrap 4:ää sisäänrakennetun mukautetun muuttujatiedoston avulla ja vaihda globaaleja CSS-asetuksia helposti uusilla $enable-*Sass-muuttujilla. Ohita muuttujan arvo ja käännä uudelleen npm run testtarvittaessa.

Voit etsiä ja mukauttaa nämä muuttujat tärkeimmille yleisille asetuksille Bootstrap- scss/_variables.scsstiedostosta.

Muuttuva	Arvot	Kuvaus
`$spacer`	`1rem`(oletus) tai mikä tahansa arvo > 0	Määrittää oletusarvoisen spacerin arvon, jonka avulla ohjelmallisesti luodaan spacer-apuohjelmamme .
`$enable-rounded`	`true`(oletus) tai`false`	Ottaa käyttöön ennalta määritetyt `border-radius`tyylit eri komponenteissa.
`$enable-shadows`	`true`tai `false`(oletus)	Ottaa käyttöön ennalta määritetyt `box-shadow`tyylit eri komponenteissa.
`$enable-gradients`	`true`tai `false`(oletus)	Ottaa käyttöön ennalta määritetyt liukuvärit `background-image`eri komponenttien tyylien kautta.
`$enable-transitions`	`true`(oletus) tai`false`	Ottaa käyttöön ennalta määritetyt `transition`s-toiminnot eri komponenteissa.
`$enable-prefers-reduced-motion-media-query`	`true`(oletus) tai`false`	Ottaa käyttöön `prefers-reduced-motion`mediakyselyn , joka estää tietyt animaatiot/siirtymät käyttäjien selaimen/käyttöjärjestelmän asetusten perusteella.
`$enable-hover-media-query`	`true`tai `false`(oletus)	Käytöstä poistettu
`$enable-grid-classes`	`true`(oletus) tai`false`	Mahdollistaa CSS-luokkien luomisen ruudukkojärjestelmälle (esim. `.container`, `.row`, `.col-md-1`, jne.).
`$enable-caret`	`true`(oletus) tai`false`	Ottaa käyttöön pseudoelementin caret on `.dropdown-toggle`.
`$enable-print-styles`	`true`(oletus) tai`false`	Ottaa käyttöön tyylit tulostuksen optimoimiseksi.
`$enable-validation-icons`	`true`(oletus) tai`false`	Ottaa käyttöön `background-image`kuvakkeet tekstisyötteissä ja joissakin mukautetuissa lomakkeissa vahvistustiloissa.

Väri

Monet Bootstrapin eri komponenteista ja apuohjelmista on rakennettu Sass-kartassa määritettyjen värien avulla. Tämä kartta voidaan silmukalla Sassissa luodaksesi nopeasti sarjan sääntöjoukkoja.

Kaikki värit

Kaikki Bootstrap 4:ssä saatavilla olevat värit ovat saatavilla Sass-muuttujina ja Sass-kartana scss/_variables.scsstiedostona. Tätä laajennetaan myöhemmissä pienissä julkaisuissa lisäämällä lisää sävyjä, aivan kuten jo mukanamme oleva harmaasävypaletti .

Sininen

Indigo

Violetti

Vaaleanpunainen

Punainen

Oranssi

Keltainen

Vihreä

Sinivihreä

Syaani

Näin voit käyttää näitä Sassissasi:

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

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

Värien käyttöluokat ovat myös saatavilla asettamiseen colorja background-color.

Jatkossa pyrimme tarjoamaan Sass-kartat ja muuttujat kunkin värin sävyille, kuten olemme tehneet alla olevien harmaasävyvärien kanssa.

Teeman värit

Käytämme osajoukkoa kaikista väreistä luodaksemme pienemmän väripaletin väriteemoja varten. Saatavilla myös Sass-muuttujina ja Sass-kartana Bootstraps- scss/_variables.scsstiedostossa.

Ensisijainen

Toissijainen

Menestys

Vaara

Varoitus

Tiedot

Kevyt

Tumma

Harmaat

Laaja joukko harmaita muuttujia ja Sass-kartta, joka scss/_variables.scsstakaa yhtenäiset harmaan sävyt projektissasi. Huomaa, että nämä ovat "kylmiä harmaita", jotka pyrkivät kohti hienovaraista sinistä sävyä neutraalien harmaiden sijaan.

100

200

300

400

500

600

700

800

900

Sisältä scss/_variables.scsslöydät Bootstrapin värimuuttujat ja Sass-kartan. Tässä on esimerkki $colorsSass-kartasta:

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

Lisää, poista tai muokkaa kartan arvoja päivittääksesi niiden käyttöä monissa muissa osissa. Valitettavasti tällä hetkellä kaikki komponentit eivät käytä tätä Sass-karttaa. Tulevat päivitykset pyrkivät parantamaan tätä. Suunnittele siihen asti ${color}muuttujien ja tämän Sass-kartan hyödyntämistä.

Komponentit

Monet Bootstrapin komponenteista ja apuohjelmista on rakennettu @eachsilmukoilla, jotka toistuvat Sass-kartan yli. Tämä on erityisen hyödyllistä luotaessamme komponentin $theme-colorsmuunnelmia ja luotaessa responsiivisia muunnelmia kullekin keskeytyspisteelle. Kun mukautat näitä Sass-karttoja ja käännät uudelleen, näet automaattisesti tekemäsi muutokset näissä silmukoissa.

Muokkaimet

Monet Bootstrapin komponenteista on rakennettu perusmodifier-luokan lähestymistavalla. Tämä tarkoittaa, että suurin osa tyylistä sisältyy .btnperusluokkaan (esim. ), kun taas tyylimuunnelmat rajoittuvat muokkausluokkiin (esim. .btn-danger). Nämä muokkausluokat on rakennettu $theme-colorskartasta muokkausluokkien lukumäärän ja nimen mukauttamiseksi.

Tässä on kaksi esimerkkiä siitä, kuinka luomme $theme-colorskartan muokkaajia .alertkomponentille ja kaikille .bg-*taustaapuohjelmillemme.

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

Responsiivinen

Nämä Sass-silmukat eivät myöskään rajoitu värikarttoihin. Voit myös luoda reagoivia muunnelmia komponenteistasi tai apuohjelmistasi. Otetaan esimerkiksi responsiiviset tekstin tasausapuohjelmamme, joissa yhdistämme Sass-kartan @eachsilmukan $grid-breakpointsmediakyselyyn.

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

Jos sinun on muokattava $grid-breakpoints, tekemäsi muutokset koskevat kaikkia silmukoita, jotka iteroidaan kyseisen kartan yli.

CSS-muuttujat

Bootstrap 4 sisältää noin kaksi tusinaa mukautettua CSS-ominaisuutta (muuttujaa) kootussa CSS:ssä. Nämä tarjoavat helpon pääsyn yleisesti käytettyihin arvoihin, kuten teemaväreihin, keskeytyskohtiin ja ensisijaisiin kirjasinpinoihin, kun työskentelet selaimesi Inspectorissa, koodihiekkalaatikossa tai yleisessä prototyypeissä.

Saatavilla olevat muuttujat

Tässä ovat sisällyttämämme muuttujat (huomaa, että se :rooton pakollinen). Ne sijaitsevat _root.scsstiedostossamme.

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

Esimerkkejä

CSS-muuttujat tarjoavat samanlaista joustavuutta kuin Sassin muuttujat, mutta niitä ei tarvitse kääntää ennen kuin ne toimitetaan selaimelle. Esimerkiksi tässä nollaamme sivumme kirjasinten ja linkkien tyylit CSS-muuttujilla.

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

Katkaisupisteen muuttujat

Vaikka alun perin sisällytimme keskeytyspisteitä CSS-muuttujiimme (esim. --breakpoint-md), niitä ei tueta mediakyselyissä , mutta niitä voidaan silti käyttää mediakyselyjen sääntöjoukoissa. Nämä keskeytyspistemuuttujat pysyvät käännetyssä CSS:ssä taaksepäin yhteensopivuuden takaamiseksi, koska JavaScript voi käyttää niitä. Lisätietoja spesifikaatiosta .

Tässä on esimerkki siitä, mitä ei tueta:

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

Ja tässä on esimerkki siitä, mitä tuetaan:

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