Source

Theming Bootstrap

Pas Bootstrap 4 aan met ons nuwe ingeboude Sass-veranderlikes vir globale stylvoorkeure vir maklike temas en komponentveranderings.

Inleiding

In Bootstrap 3 is temas grootliks gedryf deur veranderlike oorskrywings in MINDER, pasgemaakte CSS en 'n aparte temastylblad wat ons by ons distlêers ingesluit het. Met 'n bietjie moeite kan 'n mens die voorkoms van Bootstrap 3 heeltemal herontwerp sonder om aan die kernlêers te raak. Bootstrap 4 bied 'n bekende, maar effens ander benadering.

Tema word nou bewerkstellig deur Sass-veranderlikes, Sass-kaarte en pasgemaakte CSS. Daar is nie meer toegewyde temastylblad nie; in plaas daarvan kan jy die ingeboude tema aktiveer om gradiënte, skaduwees en meer by te voeg.

Sass

Gebruik ons bron Sass-lêers om voordeel te trek uit veranderlikes, kaarte, mixins, en meer.

Lêerstruktuur

Waar moontlik, vermy die wysiging van Bootstrap se kernlêers. Vir Sass beteken dit om jou eie stylblad te skep wat Bootstrap invoer sodat jy dit kan verander en uitbrei. As u aanvaar dat u 'n pakketbestuurder soos npm gebruik, sal u 'n lêerstruktuur hê wat soos volg lyk:

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

As jy ons bronlêers afgelaai het en nie 'n pakketbestuurder gebruik nie, sal jy iets soortgelyk aan daardie struktuur met die hand wil opstel, en Bootstrap se bronlêers apart van jou eie hou.

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

Invoer

In jou custom.scsssal jy Bootstrap se bron Sass-lêers invoer. Jy het twee opsies: sluit die hele Bootstrap in, of kies die onderdele wat jy nodig het. Ons moedig laasgenoemde aan, maar wees bewus daarvan dat daar sekere vereistes en afhanklikhede oor ons komponente heen is. Jy sal ook JavaScript vir ons inproppe moet insluit.

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

Met daardie opstelling in plek, kan jy begin om enige van die Sass veranderlikes en kaarte in jou custom.scss. Jy kan ook begin om dele van Bootstrap onder die // Optionalafdeling by te voeg soos nodig. Ons stel voor dat u die volledige invoerstapel vanaf ons bootstrap.scsslêer as u beginpunt gebruik.

Veranderlike verstekke

Elke Sass-veranderlike in Bootstrap 4 bevat die !defaultvlag wat jou toelaat om die veranderlike se verstekwaarde in jou eie Sass te ignoreer sonder om Bootstrap se bronkode te verander. Kopieer en plak veranderlikes soos nodig, verander hul waardes en verwyder die !defaultvlag. As 'n veranderlike reeds toegewys is, sal dit nie hertoegewys word deur die verstekwaardes in Bootstrap nie.

Veranderlike vervangings binne dieselfde Sass-lêer kan voor of na die verstekveranderlikes kom. Wanneer jy egter oor Sass-lêers oorskryf, moet jou ignorering kom voordat jy Bootstrap se Sass-lêers invoer.

Hier is 'n voorbeeld wat die background-coloren colorvir die verander <body>wanneer Bootstrap via npm invoer en saamgestel word:

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

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

Herhaal soos nodig vir enige veranderlike in Bootstrap, insluitend die globale opsies hieronder.

Kaarte en lusse

Bootstrap 4 bevat 'n handvol Sass-kaarte, sleutelwaardepare wat dit makliker maak om families van verwante CSS te genereer. Ons gebruik Sass-kaarte vir ons kleure, roosterafbreekpunte en meer. Net soos Sass-veranderlikes, bevat alle Sass-kaarte die !defaultvlag en kan dit oorskryf en uitgebrei word.

Sommige van ons Sass-kaarte word by verstek in leë kaarte saamgevoeg. Dit word gedoen om maklike uitbreiding van 'n gegewe Sass-kaart moontlik te maak, maar dit kom ten koste daarvan om die verwydering van items van 'n kaart effens moeiliker te maak.

Verander kaart

Om 'n bestaande kleur in ons $theme-colorskaart te verander, voeg die volgende by jou pasgemaakte Sass-lêer:

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

Voeg by kaart

Om 'n nuwe kleur by te $theme-colorsvoeg, voeg die nuwe sleutel en waarde by:

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

Verwyder van kaart

Om kleure van $theme-colorsof enige ander kaart te verwyder, gebruik map-remove:

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

Vereiste sleutels

Bootstrap veronderstel die teenwoordigheid van 'n paar spesifieke sleutels binne Sass-kaarte soos ons dit gebruik het en dit self uitbrei. Soos jy die ingeslote kaarte pasmaak, kan jy foute teëkom waar 'n spesifieke Sass-kaart se sleutel gebruik word.

Byvoorbeeld, ons gebruik die primary, success, en dangersleutels van $theme-colorsvir skakels, knoppies en vormtoestande. Die vervanging van die waardes van hierdie sleutels behoort geen probleme op te lewer nie, maar die verwydering daarvan kan probleme met Sass-samestelling veroorsaak. In hierdie gevalle sal jy die Sass-kode wat van daardie waardes gebruik maak, moet verander.

Funksies

Bootstrap gebruik verskeie Sass-funksies, maar slegs 'n subset is van toepassing op algemene temas. Ons het drie funksies ingesluit om waardes uit die kleurkaarte te kry:

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

Dit laat jou toe om een kleur van 'n Sass-kaart te kies, baie soos hoe jy 'n kleurveranderlike van v3 sou gebruik.

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

Ons het ook 'n ander funksie om 'n spesifieke vlak van kleur van die $theme-colorskaart af te kry. Negatiewe vlakwaardes sal die kleur ligter maak, terwyl hoër vlakke donkerder sal word.

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

In die praktyk sal jy die funksie noem en twee parameters deurgee: die naam van die kleur van $theme-colors(bv. primêre of gevaar) en 'n numeriese vlak.

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

Bykomende funksies kan in die toekoms bygevoeg word of jou eie pasgemaakte Sass om vlakfunksies vir bykomende Sass-kaarte te skep, of selfs 'n generiese een as jy meer breedvoerig wil wees.

Kleur kontras

Een bykomende funksie wat ons in Bootstrap insluit, is die kleurkontrasfunksie, color-yiq. Dit gebruik die YIQ-kleurspasie om outomaties 'n ligte ( #fff) of donker ( #111) kontraskleur terug te gee gebaseer op die gespesifiseerde basiskleur. Hierdie funksie is veral nuttig vir mixins of loops waar jy verskeie klasse genereer.

Byvoorbeeld, om kleurmonsters vanaf ons $theme-colorskaart te genereer:

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

Dit kan ook gebruik word vir eenmalige kontrasbehoeftes:

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

U kan ook 'n basiskleur spesifiseer met ons kleurkaartfunksies:

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

Sass opsies

Pas Bootstrap 4 aan met ons ingeboude persoonlike veranderlikes-lêer en wissel maklik globale CSS-voorkeure met nuwe $enable-*Sass-veranderlikes. Ignoreer 'n veranderlike se waarde en hersaamstel met npm run testsoos nodig.

Jy kan hierdie veranderlikes vind en pasmaak vir sleutel globale opsies in ons _variables.scsslêer.

Veranderlik	Waardes	Beskrywing
`$spacer`	`1rem`(verstek), of enige waarde > 0	Spesifiseer die verstekspasieerwaarde om ons spasieerhulpprogramme programmaties te genereer .
`$enable-rounded`	`true`(verstek) of`false`	Aktiveer vooraf gedefinieerde `border-radius`style op verskeie komponente.
`$enable-shadows`	`true`of `false`(verstek)	Aktiveer vooraf gedefinieerde `box-shadow`style op verskeie komponente.
`$enable-gradients`	`true`of `false`(verstek)	Aktiveer voorafbepaalde gradiënte via `background-image`style op verskeie komponente.
`$enable-transitions`	`true`(verstek) of`false`	Aktiveer vooraf gedefinieerde `transition`s op verskeie komponente.
`$enable-hover-media-query`	`true`of `false`(verstek)	Afgedank
`$enable-grid-classes`	`true`(verstek) of`false`	Aktiveer die generering van CSS-klasse vir die roosterstelsel (bv. `.container`, `.row`, `.col-md-1`, ens.).
`$enable-caret`	`true`(verstek) of`false`	Aktiveer pseudo-element-karet op `.dropdown-toggle`.
`$enable-print-styles`	`true`(verstek) of`false`	Aktiveer style vir die optimalisering van drukwerk.

Kleur

Baie van Bootstrap se verskillende komponente en nutsprogramme word gebou deur 'n reeks kleure wat in 'n Sass-kaart gedefinieer word. Hierdie kaart kan in Sass oorgeskakel word om vinnig 'n reeks reëls te genereer.

Alle kleure

Alle kleure beskikbaar in Bootstrap 4, is beskikbaar as Sass veranderlikes en 'n Sass kaart in ons scss/_variables.scsslêer. Dit sal uitgebrei word in die daaropvolgende klein vrystellings om bykomende skakerings by te voeg, baie soos die grysskaalpalet wat ons reeds insluit.

Blou

Indigo

Pers

Pienk

Rooi

Oranje

Geel

Groen

Blauwgroen

Siaan

Hier is hoe jy dit in jou Sass kan gebruik:

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

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

Kleurnutsklasse is ook beskikbaar vir instelling coloren background-color.

Ons sal in die toekoms daarna streef om Sass-kaarte en veranderlikes vir skakerings van elke kleur te verskaf, soos ons met die grysskaalkleure hieronder gedoen het.

Tema kleure

Ons gebruik 'n subset van alle kleure om 'n kleiner kleurpalet te skep vir die generering van kleurskemas, ook beskikbaar as Sass-veranderlikes en 'n Sass-kaart in ons scss/_variables.scsslêer.

Primêr

Sekondêr

Sukses

Gevaar

Waarskuwing

Inligting

Lig

Donker

Grys

'n Uitgebreide stel grys veranderlikes en 'n Sass-kaart in scss/_variables.scssvir konsekwente skakerings van grys oor jou projek.

100

200

300

400

500

600

700

800

900

Binne _variables.scssvind u ons kleurveranderlikes en Sass-kaart. Hier is 'n voorbeeld van die $colorsSass-kaart:

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

Voeg waardes by, verwyder of wysig waardes binne die kaart om op te dateer hoe dit in baie ander komponente gebruik word. Ongelukkig gebruik nie elke komponent tans hierdie Sass-kaart nie. Toekomstige opdaterings sal daarna streef om hierop te verbeter. Beplan tot dan om van die ${color}veranderlikes en hierdie Sass-kaart gebruik te maak.

Komponente

Baie van Bootstrap se komponente en nutsprogramme is gebou met @eachlusse wat oor 'n Sass-kaart herhaal. Dit is veral nuttig om variante van 'n komponent deur ons te genereer $theme-colorsen responsiewe variante vir elke breekpunt te skep. Soos jy hierdie Sass-kaarte pasmaak en hersaamstel, sal jy outomaties jou veranderinge in hierdie lusse weerspieël sien.

Wysigers

Baie van Bootstrap se komponente is gebou met 'n basis-modifiseerder klas benadering. Dit beteken die grootste deel van die stilering is in 'n basisklas (bv. .btn) vervat terwyl stylvariasies beperk is tot wysigerklasse (bv. .btn-danger). Hierdie wysigerklasse word vanaf die $theme-colorskaart gebou om die nommer en naam van ons wysigerklasse aan te pas.

Hier is twee voorbeelde van hoe ons oor die $theme-colorskaart loop om wysigers vir die .alertkomponent en al ons .bg-*agtergrondhulpmiddels te genereer.

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

Responsief

Hierdie Sass-lusse is ook nie beperk tot kleurkaarte nie. U kan ook responsiewe variasies van u komponente of nutsprogramme genereer. Neem byvoorbeeld ons responsiewe teksbelyningshulpmiddels waar ons 'n @eachlus vir die $grid-breakpointsSass-kaart meng met 'n medianavraag.

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

As jy jou , moet wysig $grid-breakpoints, sal jou veranderinge van toepassing wees op al die lusse wat oor daardie kaart herhaal.

CSS veranderlikes

Bootstrap 4 bevat ongeveer twee dosyn pasgemaakte CSS-eienskappe (veranderlikes) in sy saamgestelde CSS. Dit bied maklike toegang tot algemeen gebruikte waardes soos ons temakleure, breekpunte en primêre lettertipestapels wanneer u in u blaaier se Inspekteur, 'n kodesandbak of algemene prototipering werk.

Beskikbare veranderlikes

Hier is die veranderlikes wat ons insluit (let daarop dat die :rootvereis word). Hulle is in ons _root.scsslêer geleë.

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

Voorbeelde

CSS-veranderlikes bied soortgelyke buigsaamheid as Sass se veranderlikes, maar sonder die behoefte aan samestelling voordat dit aan die blaaier bedien word. Hier stel ons byvoorbeeld ons bladsy se lettertipe en skakelstyle met CSS-veranderlikes terug.

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

Jy kan ook ons breekpuntveranderlikes in jou medianavrae gebruik:

.content-secondary {
  display: none;
}

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