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.

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.

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:

$theme-colors: map-remove($theme-colors, "success", "info", "danger");

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 mixineissä 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 globaaleille vaihtoehdoille _variables.scsstiedostostamme.

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

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.scsstiedostossamme. 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, jotka ovat saatavilla myös tiedostossamme Sass-muuttujina ja Sass-kartana scss/_variables.scss.

Ensisijainen

Toissijainen

Menestys

Vaara

Varoitus

Tiedot

Kevyt

Tumma

Harmaat

An expansive set of gray variables and a Sass map in scss/_variables.scss for consistent shades of gray across your project.

100

200

300

400

500

600

700

800

900

Within _variables.scss, you’ll find our color variables and Sass map. Here’s an example of the $colors Sass map:

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

Add, remove, or modify values within the map to update how they’re used in many other components. Unfortunately at this time, not every component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the ${color} variables and this Sass map.

Components

Many of Bootstrap’s components and utilities are built with @each loops that iterate over a Sass map. This is especially helpful for generating variants of a component by our $theme-colors and creating responsive variants for each breakpoint. As you customize these Sass maps and recompile, you’ll automatically see your changes reflected in these loops.

Modifiers

Many of Bootstrap’s components are built with a base-modifier class approach. This means the bulk of the styling is contained to a base class (e.g., .btn) while style variations are confined to modifier classes (e.g., .btn-danger). These modifier classes are built from the $theme-colors map to make customizing the number and name of our modifier classes.

Here are two examples of how we loop over the $theme-colors map to generate modifiers to the .alert component and all our .bg-* background utilities.

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

These Sass loops aren’t limited to color maps, either. You can also generate responsive variations of your components or utilities. Take for example our responsive text alignment utilities where we mix an @each loop for the $grid-breakpoints Sass map with a media query include.

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

Should you need to modify your $grid-breakpoints, your changes will apply to all the loops iterating over that map.

CSS variables

Bootstrap 4 sisältää noin kaksi tusinaa mukautettua CSS-ominaisuutta (muuttujaa) sen käännetyssä 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);
}

Voit myös käyttää keskeytyspistemuuttujiamme mediakyselyissäsi:

.content-secondary {
  display: none;
}

@media (min-width(var(--breakpoint-sm))) {
  .content-secondary {
    display: block;
  }
}