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ű téma- és összetevőcsere é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.

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. Szükség esetén elkezdheti hozzáadni a Bootstrap részeit a // Optionalszakaszhoz. 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ó-felülírások 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. Sass térképeket használunk színeinkhez, rácstöréspontjainkhoz és sok máshoz. 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 ezeket mi magunk használtuk és kiterjesztettük. 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) vagy`false`	Lehetővé teszi az előre definiált `border-radius`stílusokat a különböző összetevőknél.
`$enable-shadows`	`true`vagy `false`(alapértelmezett)	Lehetővé teszi az előre definiált `box-shadow`stílusokat a különböző összetevőknél.
`$enable-gradients`	`true`vagy `false`(alapértelmezett)	Lehetővé teszi az előre meghatározott színátmeneteket `background-image`a különböző összetevők stílusain keresztül.
`$enable-transitions`	`true`(alapértelmezett) vagy`false`	Lehetővé teszi az előre definiált `transition`s-eket a különböző komponenseken.
`$enable-hover-media-query`	`true`vagy `false`(alapértelmezett)	Elavult
`$enable-grid-classes`	`true`(alapértelmezett) vagy`false`	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) vagy`false`	Engedélyezi a pszeudoelem caret on `.dropdown-toggle`.
`$enable-print-styles`	`true`(alapértelmezett) vagy`false`	Stílusokat engedélyez a nyomtatás optimalizálásához.

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 szín egységes árnyalataihoz a projektben.

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