in English

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 ​​Sass-bronlêers om voordeel te trek uit veranderlikes, kaarte, mixins en meer wanneer Sass saamgestel word deur jou eie bate-pyplyn te gebruik.

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

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

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

Jy sal die volledige lys van Bootstrap se veranderlikes in vind scss/_variables.scss. Sommige veranderlikes is ingestel op null, hierdie veranderlikes voer nie die eienskap uit nie, tensy hulle in jou konfigurasie oorskryf word.

Veranderlike oorskrywings moet kom nadat ons funksies, veranderlikes en mixins ingevoer is, maar voor die res van die invoere.

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

@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

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

Begin met Bootstrap via npm met ons beginnersprojek! Gaan na die twbs/bootstrap-npm-starter- sjabloonbewaarplek om te sien hoe om Bootstrap in u eie npm-projek te bou en aan te pas. Sluit Sass-samesteller, Autoprefixer, Stylelint, PurgeCSS en Bootstrap-ikone in.

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-colors, of enige ander kaart te verwyder, gebruik map-remove. Wees bewus daarvan dat jy dit tussen ons vereistes en opsies moet invoeg:

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

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

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

Ontsnap SVG

Ons gebruik die escape-svgfunksie om die <, >en #karakters vir SVG agtergrond beelde te ontsnap. Hierdie karakters moet ontsnap word om die agtergrondprente behoorlik in IE weer te gee. Wanneer die escape-svgfunksie gebruik word, moet data-URI's aangehaal word.

Optel en aftrek funksies

Ons gebruik die adden subtract-funksies om die CSS- calcfunksie om te draai. Die primêre doel van hierdie funksies is om foute te vermy wanneer 'n "eenheidlose" 0waarde in 'n calcuitdrukking oorgedra word. Uitdrukkings soos calc(10px - 0)sal 'n fout in alle blaaiers gee, al is dit wiskundig korrek.

Voorbeeld waar die berekening geldig is:

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

Voorbeeld waar die berekening ongeldig is:

$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 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 Bootstrap se scss/_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) offalse Aktiveer vooraf gedefinieerde border-radiusstyle op verskeie komponente.
$enable-shadows trueof false(verstek) Maak vooraf gedefinieerde dekoratiewe box-shadowstyle op verskeie komponente moontlik. Affekteer nie box-shadows wat vir fokustoestande gebruik word nie.
$enable-gradients trueof false(verstek) Aktiveer voorafbepaalde gradiënte via background-imagestyle op verskeie komponente.
$enable-transitions true(verstek) offalse Aktiveer vooraf gedefinieerde transitions op verskeie komponente.
$enable-prefers-reduced-motion-media-query true(verstek) offalse Aktiveer die prefers-reduced-motionmedianavraag , wat sekere animasies/oorgange onderdruk op grond van die gebruikers se blaaier/bedryfstelselvoorkeure.
$enable-hover-media-query trueof false(verstek) Afgedank
$enable-grid-classes true(verstek) offalse Aktiveer die generering van CSS-klasse vir die roosterstelsel (bv. .container, .row, .col-md-1, ens.).
$enable-caret true(verstek) offalse Aktiveer pseudo-element-karet op .dropdown-toggle.
$enable-pointer-cursor-for-buttons true(verstek) offalse Voeg "hand"-wyser by nie-gedeaktiveerde knoppie-elemente.
$enable-print-styles true(verstek) offalse Aktiveer style vir die optimalisering van drukwerk.
$enable-responsive-font-sizes trueof false(verstek) Aktiveer responsiewe lettergroottes .
$enable-validation-icons true(verstek) offalse Aktiveer background-imageikone binne tekstuele invoere en sommige pasgemaakte vorms vir bekragtigingstate.
$enable-deprecation-messages true(verstek) offalse Stel op falseom waarskuwings te versteek wanneer enige van die verouderde mengsels en funksies gebruik word wat beplan word om in verwyder te word v5.

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 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 #007bff
$indigo #6610f2
$pers #6f42c1
$pienk #e83e8c
$rooi #dc3545
$oranje #fd7e14
$geel #ffc107
$groen #28a745
$teal #20c997
$sian #17a2b8

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 Bootstrap se scss/_variables.scsslêer.

$primêr #007bff
$sekondêr #6c757d
$sukses #28a745
$gevaar #dc3545
$waarskuwing #ffc107
$inligting #17a2b8
$lig #f8f9fa
$donker #343a40

Grys

'n Uitgebreide stel grys veranderlikes en 'n Sass-kaart in scss/_variables.scssvir konsekwente skakerings van grys oor jou projek. Let daarop dat dit "koel grys" is, wat neig na 'n subtiele blou toon, eerder as neutrale grys.

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

Binne scss/_variables.scsssal jy Bootstrap se kleurveranderlikes en Sass-kaart vind. 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 jy in jou 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, "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;
}

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

Breekpunt veranderlikes

Alhoewel ons oorspronklik breekpunte in ons CSS-veranderlikes ingesluit het (bv. --breakpoint-md), word dit nie in medianavrae ondersteun nie , maar hulle kan steeds binne reëlstelle in medianavrae gebruik word. Hierdie breekpuntveranderlikes bly in die saamgestelde CSS vir terugwaartse versoenbaarheid, aangesien dit deur JavaScript gebruik kan word. Kom meer te wete in die spesifikasie .

Hier is 'n voorbeeld van wat nie ondersteun word nie:

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

En hier is 'n voorbeeld van wat ondersteun word:

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