in English

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, jotta voit hyödyntää muuttujia, karttoja, sekoituksia ja paljon muuta, kun käännät Sassia oman resurssiputken avulla.

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 pitäen 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

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

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 Bootstrapin 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. Jotkut muuttujat on asetettu arvoon null, nämä muuttujat eivät tuota ominaisuutta, ellei niitä ole ohitettu määrityksessäsi.

Muuttujien ohitukset tulee tehdä funktioiden, muuttujien ja mixinien tuonnin jälkeen, mutta ennen muuta tuontia.

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

@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

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

Aloita Bootstrapin käyttö npm:n kautta aloitusprojektimme avulla! Siirry twbs/bootstrap-npm-starter-mallivarastoon nähdäksesi, kuinka voit rakentaa ja mukauttaa Bootstrapia omassa npm-projektissasi. Sisältää Sass-kääntäjän, Autoprefixerin, Stylelintin, PurgeCSS- ja Bootstrap-kuvakkeet.

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 lisä Sass-kartoille, tai jopa yleisen, jos haluat olla monisanaisempi.

Värikontrasti

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

Escape SVG

Käytämme funktiota , ja -merkkien escape-svgvälttämiseen SVG-taustakuvissa. Nämä merkit on vaihdettava, jotta taustakuvat hahmonnetaan oikein IE:ssä. Funktiota käytettäessä datan URI:t on lainattava.<>#escape-svg

Lisää- ja vähennystoiminnot

Käytämme addja subtract-funktioita CSS-funktion käärimiseen calc. Näiden funktioiden ensisijainen tarkoitus on välttää virheet, kun lausekkeeseen 0välitetään "yksikkötön" arvo calc. Lausekkeet kuten calc(10px - 0)palauttavat virheilmoituksen kaikissa selaimissa, vaikka ne ovat matemaattisesti oikein.

Esimerkki, jossa laskenta on voimassa:

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

Esimerkki, jossa laskenta on virheellinen:

$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 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) taifalse Ottaa käyttöön ennalta määritetyt border-radiustyylit eri komponenteissa.
$enable-shadows truetai false(oletus) Mahdollistaa ennalta määritetyt koristetyylit box-shadoweri komponenteissa. Ei vaikuta box-shadowtarkennustiloissa käytettävään s-tilaan.
$enable-gradients truetai false(oletus) Ottaa käyttöön ennalta määritetyt liukuvärit background-imageeri komponenttien tyylien kautta.
$enable-transitions true(oletus) taifalse Ottaa käyttöön ennalta määritetyt transitions-toiminnot eri komponenteissa.
$enable-prefers-reduced-motion-media-query true(oletus) taifalse Ottaa käyttöön prefers-reduced-motionmediakyselyn , joka estää tietyt animaatiot/siirtymät käyttäjien selaimen/käyttöjärjestelmän asetusten perusteella.
$enable-hover-media-query truetai false(oletus) Käytöstä poistettu
$enable-grid-classes true(oletus) taifalse Mahdollistaa CSS-luokkien luomisen ruudukkojärjestelmälle (esim. .container, .row, .col-md-1, jne.).
$enable-caret true(oletus) taifalse Ottaa käyttöön pseudoelementin caret on .dropdown-toggle.
$enable-pointer-cursor-for-buttons true(oletus) taifalse Lisää "käsi"-kohdistin ei-poistettuihin painikeelementteihin.
$enable-print-styles true(oletus) taifalse Ottaa käyttöön tyylit tulostuksen optimoimiseksi.
$enable-responsive-font-sizes truetai false(oletus) Ottaa käyttöön reagoivat kirjasinkoot .
$enable-validation-icons true(oletus) taifalse Ottaa käyttöön background-imagekuvakkeet tekstisyötteissä ja joissakin mukautetuissa lomakkeissa vahvistustiloissa.
$enable-deprecation-messages true(oletus) taifalse Aseta arvoksi falsepiilottaaksesi varoitukset käytettäessä mitä tahansa vanhentuneita mixinejä ja toimintoja, jotka aiotaan poistaa v5.

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 #007bff
$indigo #6610f2
$violetti #6f42c1
$vaaleanpunainen #e83e8c
$punainen #dc3545
$oranssi #fd7e14
$keltainen #ffc107
$vihreä #28a745
$teal #20c997
$syaani #17a2b8

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 Bootstrapin scss/_variables.scsstiedostossa.

$ensisijainen #007bff
$toissijainen #6c757d
$menestys #28a745
$vaara #dc3545
$varoitus #ffc107
$info #17a2b8
$valoa #f8f9fa
$pimeä #343a40

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.

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

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

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