Source

Theming Bootstrap

Testreszabhatja a Bootstrap 4-et az új beépített Sass-változóinkkal a globális stíluspreferenciák érdekében az egyszerű tematika és komponensváltás érdekében.

Bevezetés

A Bootstrap 3-ban a témát nagyrészt a LESS változó-felülírása, az egyéni CSS és egy külön témastíluslap vezérelte, amelyet a distfájljainkba foglaltunk. Némi erőfeszítéssel teljesen újratervezheti a Bootstrap 3 megjelenését anélkül, hogy megérintené az alapvető fájlokat. A Bootstrap 4 ismerős, de kissé eltérő megközelítést kínál.

Mostantól a tematikázást Sass-változók, Sass-térképek és egyéni CSS-k érik el. Nincs több dedikált téma stíluslap; ehelyett engedélyezheti a beépített témát színátmenetek, árnyékok és egyebek hozzáadásához.

Sass

Használja forrás Sass fájljainkat a változók, térképek, mixinek és egyebek kihasználásához. Összeállításunkban a Sass kerekítési pontosságát 6-ra növeltük (alapértelmezés szerint 5), hogy megelőzzük a böngésző kerekítésével kapcsolatos problémákat.

Fájlszerkezet

Amikor csak lehetséges, kerülje a Bootstrap alapvető fájljainak módosítását. A Sass esetében ez azt jelenti, hogy saját stíluslapot kell létrehozni, amely importálja a Bootstrap-et, így módosíthatja és kiterjesztheti azt. Feltételezve, hogy csomagkezelőt, például npm-et használ, a következőképpen néz ki a fájlszerkezet:

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

Ha letöltötte a forrásfájljainkat, és nem használ csomagkezelőt, akkor manuálisan kell beállítania valami hasonlót ehhez a struktúrához, elkülönítve a Bootstrap forrásfájljait a sajátjától.

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

Importálás

A custom.scssfájlba importálja a Bootstrap forrás Sass fájljait. Két lehetőség közül választhat: tartalmazza az összes Bootstrapet, vagy válassza ki a szükséges részeket. Ez utóbbit javasoljuk, bár ne feledje, hogy összetevőink között vannak bizonyos követelmények és függőségek. Beépülő moduljainkhoz néhány JavaScript-kódot is tartalmaznia kell.

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

Ha ezt a beállítást elvégezte, megkezdheti a Sass-változók és térképek bármelyikének módosítását a custom.scss. // OptionalSzükség esetén a Bootstrap részeit is hozzáadhatja a szakaszhoz. Javasoljuk, hogy bootstrap.scsskiindulási pontként használja a fájlunkból származó teljes importálási veremet.

Változó alapértelmezések

A Bootstrap 4 minden Sass-változója tartalmazza a !defaultjelzőt, amely lehetővé teszi a változó alapértelmezett értékének felülírását a saját Sass-ben a Bootstrap forráskódjának módosítása nélkül. Szükség szerint másolja és illessze be a változókat, módosítsa értékeiket, és távolítsa el a !defaultjelzőt. Ha egy változó már hozzá van rendelve, akkor a rendszer nem fogja újra hozzárendelni a Bootstrap alapértelmezett értékeit.

A Bootstrap változóinak teljes listáját itt találja scss/_variables.scss.

Az ugyanazon Sass-fájlon belüli változók felülírásai az alapértelmezett változók előtt vagy után is előfordulhatnak. A Sass-fájlok felülbírálásakor azonban a felülírásoknak a Bootstrap Sass-fájlok importálása előtt kell megtörténniük.

Íme egy példa, amely megváltoztatja a background-colorés colora <body>Bootstrap npm-en keresztüli importálásakor és fordításakor:

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

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

Szükség szerint ismételje meg a műveletet a Bootstrap bármely változójával, beleértve az alábbi globális beállításokat is.

Térképek és hurkok

A Bootstrap 4 tartalmaz egy maroknyi Sass térképet, kulcsértékpárokat, amelyek megkönnyítik a kapcsolódó CSS-családok létrehozását. A Sass térképeket használjuk színeinkhez, rácstöréspontjainkhoz és egyebekhez. Csakúgy, mint a Sass változók, minden Sass térkép tartalmazza a !defaultzászlót, és felülbírálható és kiterjeszthető.

Egyes Sass térképeink alapértelmezés szerint üresekké vannak egyesítve. Ennek célja egy adott Sass térkép egyszerű bővítése, de ennek az az ára, hogy kissé megnehezíti az elemek eltávolítását a térképről.

Térkép módosítása

Ha módosítani szeretne egy meglévő színt a $theme-colorstérképünkön, adja hozzá a következőket az egyéni Sass fájlhoz:

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

Hozzáadás a térképhez

Új szín $theme-colorshozzáadásához adja hozzá az új kulcsot és értéket:

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

Eltávolítás a térképről

A színek eltávolításához a $theme-colorsvagy bármely más térképről használja a gombot map-remove. Ne feledje, hogy a követelményeink és a lehetőségeink közé kell beillesztenie:

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

Szükséges kulcsok

A Bootstrap feltételezi bizonyos kulcsok jelenlétét a Sass térképeken belül, ahogy mi magunk használtuk és bővítettük ezeket. A mellékelt térképek testreszabása során hibákat tapasztalhat, ha egy adott Sass térkép kulcsát használják.

Például a primary, successés dangera gombokat $theme-colorshasználjuk hivatkozásokhoz, gombokhoz és űrlapállapotokhoz. A kulcsok értékeinek cseréje nem okozhat problémát, de eltávolításuk Sass fordítási problémákat okozhat. Ezekben az esetekben módosítania kell az ezeket az értékeket használó Sass-kódot.

Funkciók

A Bootstrap számos Sass-függvényt használ, de csak egy részhalmaz alkalmazható az általános témákra. Három funkciót tartalmaztunk a színtérképek értékeinek lekéréséhez:

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

Ezek lehetővé teszik egy szín kiválasztását a Sass térképről, hasonlóan ahhoz, ahogyan a v3 színváltozóját használná.

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

Van egy másik funkciónk is, amellyel egy adott színszintet kaphatunk a térképről $theme-colors. A negatív szintértékek világosabbá teszik a színt, míg a magasabb szintek sötétítik.

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

A gyakorlatban meghívja a függvényt, és két paramétert ad át: a szín nevét $theme-colors(pl. elsődleges vagy veszély) és egy numerikus szintet.

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

A jövőben további funkciókat is hozzáadhat, vagy saját egyéni Sass-t, amellyel szintfüggvényeket hozhat létre további Sass-térképekhez, vagy akár egy általánosat is, ha bőbeszédűbb szeretne lenni.

Színkontraszt

A Bootstrap egyik további funkciója a színkontraszt funkció, color-yiq. A YIQ színteret használja fel , hogy automatikusan világos ( #fff) vagy sötét ( #111) kontrasztszínt adjon vissza a megadott alapszín alapján. Ez a funkció különösen hasznos mixineknél vagy ciklusoknál, ahol több osztályt generál.

Például színminták létrehozásához a $theme-colorstérképünkről:

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

Egyszeri kontraszt igényekhez is használható:

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

Színtérkép funkcióinkkal alapszínt is megadhat:

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

Sass opciók

Testreszabhatja a Bootstrap 4-et a beépített egyéni változófájlunkkal, és könnyedén válthat a globális CSS-beállítások között az új $enable-*Sass-változókkal. Írja felül a változó értékét, és npm run testszükség szerint fordítsa újra.

Ezeket a változókat megtalálhatja és testreszabhatja a kulcsfontosságú globális beállításokhoz a Bootstrap scss/_variables.scssfájljában.

Változó Értékek Leírás
$spacer 1rem(alapértelmezett), vagy bármely 0-nál nagyobb érték Megadja az alapértelmezett spacer értéket a spacer segédprogramok programozott létrehozásához .
$enable-rounded true(alapértelmezett) vagyfalse Lehetővé teszi az előre definiált border-radiusstílusokat a különböző összetevőknél.
$enable-shadows truevagy false(alapértelmezett) Lehetővé teszi az előre definiált box-shadowstílusokat a különböző összetevőknél.
$enable-gradients truevagy false(alapértelmezett) Lehetővé teszi az előre meghatározott színátmeneteket background-imagea különböző összetevők stílusain keresztül.
$enable-transitions true(alapértelmezett) vagyfalse Lehetővé teszi az előre definiált transitions-eket a különböző komponenseken.
$enable-prefers-reduced-motion-media-query true(alapértelmezett) vagyfalse Engedélyezi a prefers-reduced-motionmédialekérdezést , amely elnyom bizonyos animációkat/átmeneteket a felhasználók böngészőjének/operációs rendszerének beállításai alapján.
$enable-hover-media-query truevagy false(alapértelmezett) Elavult
$enable-grid-classes true(alapértelmezett) vagyfalse Lehetővé teszi CSS-osztályok generálását a rácsrendszerhez (pl. .container, .row, .col-md-1, stb.).
$enable-caret true(alapértelmezett) vagyfalse Engedélyezi a pszeudoelem caret on .dropdown-toggle.
$enable-print-styles true(alapértelmezett) vagyfalse Stílusokat engedélyez a nyomtatás optimalizálásához.
$enable-validation-icons true(alapértelmezett) vagyfalse Engedélyezi background-imageaz ikonokat a szöveges bevitelekben és néhány egyéni űrlapon az érvényesítési állapotokhoz.

Szín

A Bootstrap számos összetevője és segédprogramja egy Sass térképen meghatározott színsorozaton keresztül épül fel. Ez a térkép áthurkolható a Sass-ban, hogy gyorsan generáljon egy sor szabálykészletet.

Minden szín

A Bootstrap 4-ben elérhető összes szín elérhető Sass változóként és Sass térképként scss/_variables.scssfájlban. Ezt a későbbi kisebb kiadásokban kibővítjük, és további árnyalatokat adunk hozzá, hasonlóan a már meglévő szürkeárnyalatos palettához .

Kék
Indigó
Lila
Rózsaszín
Piros
narancssárga
Sárga
Zöld
A zöldeskék
Cián

A következőképpen használhatja ezeket a Sass-ban:

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

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

Színhasználati osztályok is rendelkezésre állnak a beállításhoz colorés background-color.

A jövőben arra törekszünk, hogy Sass térképeket és változókat biztosítsunk az egyes színek árnyalataihoz, ahogyan azt az alábbi szürkeárnyalatos színekkel tettük.

Téma színei

Az összes szín egy részhalmazát használjuk, hogy létrehozzunk egy kisebb színpalettát a színsémák létrehozásához, amelyek Sass változóként és Sass térképként is elérhetők a Bootstraps scss/_variables.scssfájljában.

Elsődleges
Másodlagos
Siker
Veszély
Figyelem
Info
Könnyű
Sötét

Szürkék

Szürke változók kiterjedt készlete és egy Sass térkép a scss/_variables.scssszürke árnyalatainak konzisztenséhez a projektben. Vegye figyelembe, hogy ezek „hűvös szürkék”, amelyek inkább a finom kék tónus felé hajlanak, mint a semleges szürkékre.

100
200
300
400
500
600
700
800
900

Ezen belül scss/_variables.scssmegtalálja a Bootstrap színváltozóit és a Sass térképet. Íme egy példa a $colorsSass térképre:

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

Adjon hozzá, távolítson el vagy módosítson értékeket a térképen, hogy frissítse azok felhasználási módját sok más összetevőben. Sajnos jelenleg nem minden összetevő használja ezt a Sass térképet. A jövőbeli frissítések ezen javítani fognak. Addig is tervezze a ${color}változók és a Sass térkép felhasználását.

Alkatrészek

A Bootstrap számos összetevője és segédprogramja ciklusokkal épül fel, @eachamelyek Sass térképen iterálnak. Ez különösen akkor hasznos, ha egy összetevő változatait generáljuk, $theme-colorsés minden törésponthoz érzékeny változatokat hozunk létre. A Sass térképek testreszabása és újrafordítása során automatikusan látni fogja a változtatásokat ezekben a hurkokban.

Módosítók

A Bootstrap számos összetevője alapmódosító osztályú megközelítéssel készült. Ez azt jelenti, hogy a stílus nagy része egy alaposztályhoz (pl. .btn), míg a stílusváltozatok módosító osztályokhoz (pl. .btn-danger) korlátozódik. Ezek a módosító osztályok a térképből épülnek fel $theme-colors, hogy testreszabhassák módosító osztályaink számát és nevét.

Íme két példa arra, hogyan hurkoljuk át a $theme-colorstérképet, hogy módosítókat generáljunk az .alertösszetevőhöz és az összes .bg-*háttér-segédprogramunkhoz.

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

Fogékony

Ezek a Sass hurkok nem korlátozódnak a színes térképekre sem. Az összetevők vagy segédprogramok adaptív változatait is létrehozhatja. Vegyük például reszponzív szövegigazító segédprogramjainkat, ahol @eacha $grid-breakpointsSass-térkép ciklusát keverjük egy médialekérdezéssel.

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

Ha módosítania kell a -t $grid-breakpoints, a módosítások az adott térképen iteráló összes hurokra vonatkoznak.

CSS-változók

A Bootstrap 4 körülbelül két tucat egyéni CSS-tulajdonságot (változót) tartalmaz a lefordított CSS-ben. Ezek egyszerű hozzáférést biztosítanak a gyakran használt értékekhez, például a témaszínekhez, a töréspontokhoz és az elsődleges betűkészletekhez, amikor a böngésző Inspector-jában, kód-sandboxban vagy általános prototípus-készítésben dolgozik.

Elérhető változók

Itt vannak az általunk használt változók (megjegyezzük, hogy :rootez kötelező). Az aktánkban találhatók _root.scss.

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

Példák

A CSS-változók hasonló rugalmasságot kínálnak, mint a Sass változói, de nincs szükség fordításra, mielőtt kiszolgálnák őket a böngészőnek. Itt például visszaállítjuk oldalunk betűtípusát és hivatkozási stílusát CSS-változókkal.

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

Töréspont változók

Míg eredetileg töréspontokat vettünk fel CSS-változóinkba (pl. --breakpoint-md), ezeket a médialekérdezések nem támogatják , de a médialekérdezések szabálykészletében továbbra is használhatók . Ezek a töréspont-változók a visszafelé kompatibilitás érdekében a lefordított CSS-ben maradnak, mivel a JavaScript felhasználhatja őket. További információ a specifikációban .

Íme egy példa arra, hogy mi nem támogatott:

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

És itt van egy példa a támogatott dolgokra:

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