Source

Theming Bootstrap

Oanpasse Bootstrap 4 mei ús nije ynboude Sass-fariabelen foar foarkarren foar globale styl foar maklike tema- en komponintwizigingen.

Ynlieding

Yn Bootstrap 3 waard tematyk foar in grut part dreaun troch fariabele oerskriuwingen yn LESS, oanpaste CSS, en in apart temastylblêd dat wy yn ús distbestannen opnommen hawwe. Mei wat muoite koe men it uterlik fan Bootstrap 3 folslein opnij ûntwerpe sûnder de kearnbestannen oan te reitsjen. Bootstrap 4 biedt in fertroude, mar wat oare oanpak.

No, tematyk wurdt berikt troch Sass fariabelen, Sass kaarten, en oanpaste CSS. D'r is gjin tawijd temastylblêd mear; ynstee kinne jo it ynboude tema ynskeakelje om gradiënten, skaden en mear ta te foegjen.

Sass

Brûk ús boarne Sass-bestannen om te profitearjen fan fariabelen, kaarten, mixins, en mear.

Triemstruktuer

Foarkom it wizigjen fan Bootstrap's kearnbestannen wannear mooglik. Foar Sass betsjut dat it meitsjen fan jo eigen stylblêd dat Bootstrap ymportearret sadat jo it kinne wizigje en útwreidzje. Oannommen dat jo in pakketbehearder lykas npm brûke, sille jo in bestânstruktuer hawwe dy't der sa útsjocht:

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

As jo ús boarnebestannen hawwe ynladen en gjin pakketbehearder brûke, wolle jo wat ferlykber mei dy struktuer manuell ynstelle, en de boarnebestannen fan Bootstrap apart fan jo eigen hâlde.

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

Ymportearje

Yn jo custom.scsssille jo Bootstrap's boarne Sass-bestannen ymportearje. Jo hawwe twa opsjes: befetsje alle Bootstrap, of kies de dielen dy't jo nedich binne. Wy stimulearje dat lêste, hoewol bewust wêze dat d'r wat easken en ôfhinklikens binne oer ús komponinten. Jo sille ek wat JavaScript moatte opnimme foar ús plugins.

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

Mei dy opset yn plak, kinne jo begjinne te wizigjen ien fan de Sass fariabelen en kaarten yn jo custom.scss. Jo kinne ek begjinne te foegjen dielen fan Bootstrap ûnder de // Optionalseksje as nedich. Wy stelle foar om de folsleine ymportstapel út ús bootstrap.scssbestân te brûken as jo útgongspunt.

Fariabele standerts

Elke Sass-fariabele yn Bootstrap 4 omfettet de !defaultflagge wêrtroch jo de standertwearde fan 'e fariabele yn jo eigen Sass kinne oerskriuwe sûnder de boarnekoade fan Bootstrap te feroarjen. Kopiearje en plakke fariabelen as nedich, wizigje har wearden en ferwiderje de !defaultflagge. As in fariabele al is tawiisd, dan sil it net opnij wurde tawiisd troch de standertwearden yn Bootstrap.

Jo sille de folsleine list fan Bootstrap's fariabelen fine yn scss/_variables.scss.

Fariabele oerskriuwingen binnen deselde Sass-bestân kinne foar of nei de standertfariabelen komme. As jo lykwols oer Sass-bestannen oerskriuwe, moatte jo oerskriuwen komme foardat jo Bootstrap's Sass-bestannen ymportearje.

Hjir is in foarbyld dat de background-coloren feroaret by colorit <body>ymportearjen en kompilearjen fan Bootstrap fia npm:

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

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

Werhelje as nedich foar elke fariabele yn Bootstrap, ynklusyf de globale opsjes hjirûnder.

Kaarten en loops

Bootstrap 4 omfettet in hânfol Sass-kaarten, kaaiweardepearen dy't it makliker meitsje om famyljes fan relatearre CSS te generearjen. Wy brûke Sass kaarten foar ús kleuren, raster breakpoints, en mear. Krekt as Sass fariabelen, alle Sass kaarten befetsje de !defaultflagge en kin wurde oerskreaun en útwreide.

Guon fan ús Sass-kaarten binne standert gearfoege yn lege. Dit wurdt dien om te tastean maklik útwreiding fan in opjûne Sass map, mar komt op 'e kosten fan in make fuortsmite items út in kaart wat dreger.

Map feroarje

Om in besteande kleur yn ús $theme-colorskaart te feroarjen, foegje it folgjende ta oan jo oanpaste Sass-bestân:

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

Taheakje oan kaart

Om in nije kleur ta te $theme-colorsfoegjen, foegje de nije kaai en wearde ta:

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

Fuortsmite fan kaart

Om kleuren te ferwiderjen fan $theme-colors, of in oare kaart, brûk map-remove. Wês bewust dat jo it moatte ynfoegje tusken ús easken en opsjes:

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

Required kaaien

Bootstrap giet oan fan de oanwêzigens fan guon spesifike kaaien binnen Sass-kaarten lykas wy dizze sels brûkten en útwreidzje. As jo de opnommen kaarten oanpasse, kinne jo flaters tsjinkomme wêr't de kaai fan in spesifike Sass-kaart wurdt brûkt.

Wy brûke bygelyks de primary, success, en dangertoetsen fan $theme-colorsfoar keppelings, knoppen en formulierstaten. It ferfangen fan de wearden fan dizze kaaien soe gjin problemen presintearje, mar it fuortheljen fan se kin Sass-kompilaasjeproblemen feroarsaakje. Yn dizze gefallen moatte jo de Sass-koade oanpasse dy't gebrûk makket fan dy wearden.

Funksjes

Bootstrap brûkt ferskate Sass-funksjes, mar allinich in subset is fan tapassing op algemiene tema's. Wy hawwe trije funksjes opnommen foar it heljen fan wearden fan 'e kleurkaarten:

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

Hjirmei kinne jo ien kleur kieze fan in Sass-kaart, lykas jo in kleurfariabele fan v3 soene brûke.

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

Wy hawwe ek in oare funksje foar it krijen fan in bepaald nivo fan kleur fan 'e $theme-colorskaart. Negative nivowearden sille de kleur ferljochtsje, wylst hegere nivo's tsjusterder wurde.

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

Yn 'e praktyk soene jo de funksje neame en twa parameters trochjaan: de namme fan' e kleur fan $theme-colors(bygelyks primêr of gefaar) en in numerike nivo.

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

Oanfoljende funksjes kinne yn 'e takomst tafoege wurde of jo eigen oanpaste Sass om nivofunksjes te meitsjen foar ekstra Sass-kaarten, of sels in generike as jo mear verbose woene.

Kleur kontrast

Ien ekstra funksje dy't wy opnimme yn Bootstrap is de kleurkontrastfunksje color-yiq,. It brûkt de YIQ-kleurromte om automatysk in ljochte ( #fff) of donkere ( #111) kontrastkleur werom te jaan op basis fan de opjûne basiskleur. Dizze funksje is benammen nuttich foar mixins as loops wêr't jo meardere klassen generearje.

Bygelyks om kleurstalen te generearjen fan ús $theme-colorskaart:

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

It kin ek brûkt wurde foar ienmalige kontrastbehoeften:

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

Jo kinne ek in basiskleur opjaan mei ús kleurkaartfunksjes:

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

Sass opsjes

Oanpasse Bootstrap 4 mei ús ynboude triem mei oanpaste fariabelen en wikselje maklik globale CSS-foarkarren mei nije $enable-*Sass-fariabelen. Oerskriuwe de wearde fan in fariabele en kompilearje mei npm run testas nedich.

Jo kinne dizze fariabelen fine en oanpasse foar wichtige globale opsjes yn it scss/_variables.scssbestân fan Bootstrap.

Fariabel	Wearden	Beskriuwing
`$spacer`	`1rem`(standert), of elke wearde > 0	Spesifisearret de standert spacerwearde om programmatysk ús spacer-hulpprogramma 's te generearjen .
`$enable-rounded`	`true`(standert) of`false`	Aktivearret foarôf definieare `border-radius`stilen op ferskate komponinten.
`$enable-shadows`	`true`of `false`(standert)	Aktivearret foarôf definieare `box-shadow`stilen op ferskate komponinten.
`$enable-gradients`	`true`of `false`(standert)	Aktivearret foarôf definieare gradiënten fia `background-image`stilen op ferskate komponinten.
`$enable-transitions`	`true`(standert) of`false`	Aktivearret foarôf definieare `transition`s op ferskate komponinten.
`$enable-hover-media-query`	`true`of `false`(standert)	Deprecated
`$enable-grid-classes`	`true`(standert) of`false`	Aktivearret de generaasje fan CSS-klassen foar it rastersysteem (bgl. `.container`, `.row`, `.col-md-1`, ensfh.).
`$enable-caret`	`true`(standert) of`false`	Aktivearret pseudo elemint caret op `.dropdown-toggle`.
`$enable-print-styles`	`true`(standert) of`false`	Stelt stilen yn foar optimalisearjen fan printsjen.

Kleur

In protte fan Bootstrap's ferskate komponinten en nutsbedriuwen binne boud troch in searje kleuren definieare yn in Sass-kaart. Dizze kaart kin yn Sass oerlutsen wurde om fluch in searje regelsets te generearjen.

Alle kleuren

Alle kleuren beskikber yn Bootstrap 4, binne beskikber as Sass fariabelen en in Sass map yn scss/_variables.scsstriem. Dit sil wurde útwreide yn folgjende lytse releases om ekstra skaden ta te foegjen, krekt lykas it griisskalepalet dat wy al befetsje.

Blau

Indigo

Pears

Rôze

Read

Oranje

Giel

Grien

Teal

Cyan

Hjir is hoe't jo dizze kinne brûke yn jo Sass:

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

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

Kleur nutklassen binne ek beskikber foar ynstelling coloren background-color.

Yn 'e takomst sille wy fan doel hawwe Sass-kaarten en fariabelen te leverjen foar skaden fan elke kleur lykas wy hawwe dien mei de griisskalenkleuren hjirûnder.

Tema kleuren

Wy brûke in subset fan alle kleuren om in lytser kleurpalet te meitsjen foar it generearjen fan kleurskema's, ek beskikber as Sass-fariabelen en in Sass-kaart yn Bootstraps's scss/_variables.scssbestân.

Primêr

Sekundêr

Sukses

Gefaar

Warskôging

Info

Ljocht

Tsjuster

Griis

In wiidweidige set grize fariabelen en in Sass-kaart yn scss/_variables.scssfoar konsekwinte tinten griis oer jo projekt.

100

200

300

400

500

600

700

800

900

Binnen scss/_variables.scssfine jo Bootstrap's kleurfariabelen en Sass-kaart. Hjir is in foarbyld fan 'e $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;

Wearden tafoegje, fuortsmite of wizigje binnen de kaart om te aktualisearjen hoe't se wurde brûkt yn in protte oare komponinten. Spitigernôch brûkt op dit stuit net elke komponint dizze Sass-kaart. Takomstige updates sille stribje om dit te ferbetterjen. Oant dan plan om gebrûk te meitsjen fan de ${color}fariabelen en dizze Sass-kaart.

Components

In protte fan Bootstrap's komponinten en nutsbedriuwen binne boud mei @eachloops dy't iterearje oer in Sass-kaart. Dit is benammen nuttich foar it generearjen fan farianten fan in komponint troch ús $theme-colorsen it meitsjen fan responsive farianten foar elk brekpunt. Wylst jo dizze Sass-kaarten oanpasse en opnij kompilearje, sille jo jo wizigingen automatysk sjen yn dizze loops.

Modifiers

In protte fan Bootstrap's komponinten binne boud mei in base-modifier klasse oanpak. Dit betsjut dat it grutste part fan 'e styling is befette yn in basisklasse (bgl. .btn) wylst stylfariaasjes beheind binne ta modifierklassen (bgl. .btn-danger). Dizze modifier-klassen binne boud fan 'e $theme-colorskaart om it oantal en de namme fan ús modifier-klassen oan te passen.

Hjir binne twa foarbylden fan hoe't wy oer de $theme-colorskaart rinne om modifiers te generearjen foar de .alertkomponint en al ús .bg-*eftergrûnhelpprogramma's.

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

Dizze Sass-loops binne ek net beheind ta kleurkaarten. Jo kinne ek responsive fariaasjes generearje fan jo komponinten of nutsbedriuwen. Nim bygelyks ús responsive nutsfoarsjenningen foar tekstôfstimming wêr't wy in @eachlus mingje foar de $grid-breakpointsSass-kaart mei in mediafraach omfetsje.

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

Mochten jo jo wizigje moatte $grid-breakpoints, dan sille jo wizigingen jilde foar alle loops dy't oer dy kaart iterearje.

CSS fariabelen

Bootstrap 4 omfettet sawat twa tsientallen oanpaste CSS-eigenskippen (fariabelen) yn syn kompilearre CSS. Dizze jouwe maklike tagong ta gewoan brûkte wearden lykas ús temakleuren, brekpunten en primêre lettertypestapels as jo wurkje yn 'e Inspector fan jo blêder, in koade sânbak, of algemiene prototyping.

Beskikbere fariabelen

Hjir binne de fariabelen dy't wy opnimme (notysje dat de :rootfereaske is). Se steane yn ús _root.scssbestân.

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

Foarbylden

CSS-fariabelen biede ferlykbere fleksibiliteit as de fariabelen fan Sass, mar sûnder de needsaak foar kompilaasje foardat se wurde tsjinne oan 'e browser. Bygelyks, hjir stelle wy it lettertype en keppelingsstilen fan ús side werom mei CSS-fariabelen.

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

Breakpoint fariabelen

Wylst wy oarspronklik brekpunten opnommen hawwe yn ús CSS-fariabelen (bgl. --breakpoint-md), wurde dizze net stipe yn mediafragen , mar se kinne noch brûkt wurde binnen regelsets yn mediafragen. Dizze brekpuntfariabelen bliuwe yn 'e kompilearre CSS foar efterkompatibiliteit, om't se kinne wurde brûkt troch JavaScript. Learje mear yn 'e spesifikaasje.

Hjir is in foarbyld fan wat net stipe wurdt:

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

En hjir is in foarbyld fan wat wurdt stipe:

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