in English

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 előnyeinek kihasználásához, amikor a Sass -t saját eszközfolyamatával fordítja.

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

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

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 minden Sass-változója tartalmazza a !defaultjelzőt, amely lehetővé teszi a változó alapértelmezett értékének felülbírálá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. Egyes változók értéke null, ezek a változók nem adják ki a tulajdonságot, hacsak nincsenek felülírva a konfigurációban.

A változók felülírásának a függvényeink, változóink és mixinjeink importálása után kell érkeznie, de a többi importálás előtt.

Í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:

@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

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.

Kezdő projektünkkel kezdje el a Bootstrap használatát az npm-en keresztül! Nyissa meg a twbs/bootstrap-npm-starter sablontárat, és nézze meg, hogyan hozhatja létre és testreszabhatja a Bootstrap-ot saját npm-projektjében. Tartalmazza a Sass fordítót, az Autoprefixert, a Stylelint, a PurgeCSS és a Bootstrap ikonokat.

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

Egy további funkció, amelyet a Bootstrap-ban tartalmaz, 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`
}

Escape SVG

A escape-svgfüggvényt használjuk a <, >és #karakterek kihagyására SVG háttérképeknél. Ezeket a karaktereket meg kell szabadítani a háttérképek megfelelő megjelenítéséhez az IE-ben. A escape-svgfüggvény használatakor az adat URI-kat idézni kell.

Összeadás és kivonás függvények

A addés subtractfüggvényeket használjuk a CSS calcfüggvény burkolására. Ezeknek a függvényeknek az elsődleges célja a hibák elkerülése, amikor „egység nélküli” 0értéket adnak át egy calckifejezésbe. A hasonló kifejezések calc(10px - 0)minden böngészőben hibát adnak vissza, annak ellenére, hogy matematikailag helyesek.

Példa, ahol a számítás érvényes:

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

Példa, ahol a számítás érvénytelen:

$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 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 dekorációs box-shadowstílusokat a különböző alkatrészeken. Nem befolyásolja box-shadowa fókuszállapotokhoz használt s-t.
$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 a felhasználók böngészőjének/operációs rendszerének beállításai alapján letilt bizonyos animációkat/átmeneteket.
$enable-hover-media-query truevagy false(alapértelmezett) Elavult
$enable-grid-classes true(alapértelmezett) vagyfalse Lehetővé teszi CSS-osztályok létrehozá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-pointer-cursor-for-buttons true(alapértelmezett) vagyfalse Adja hozzá a „kéz” kurzort a nem letiltott gombelemekhez.
$enable-print-styles true(alapértelmezett) vagyfalse Stílusokat engedélyez a nyomtatás optimalizálásához.
$enable-responsive-font-sizes truevagy false(alapértelmezett) Engedélyezi az adaptív betűméreteket .
$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.
$enable-deprecation-messages true(alapértelmezett) vagyfalse Állítsa értékre, falsehogy elrejtse a figyelmeztetéseket, ha olyan elavult keverőket és funkciókat használ, amelyek eltávolítását tervezik a -ban v5.

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 az általunk már szereplő szürkeárnyalatos palettához .

$kék #007bff
$indigo #6610f2
$lila #6f42c1
$rózsaszín #e83e8c
$piros #dc3545
$narancs #fd7e14
$sárga #ffc107
$zöld #28a745
$kék kékeszöld #20c997
$cián #17a2b8

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 Bootstrap scss/_variables.scssfájljában.

$elsődleges #007bff
$másodlagos #6c757d
$siker #28a745
$veszély #dc3545
$figyelmeztetés #ffc107
$info #17a2b8
$light #f8f9fa
$sötét #343a40

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

szürke-100 dollár #f8f9fa
szürke-200 dollár #e9ecef
szürke-300 dollár #dee2e6
szürke-400 dollár #ced4da
szürke-500 dollár #adb5bd
szürke-600 dollár #6c757d
szürke-700 dollár #495057
szürke-800 dollár #343a40
szürke-900 dollár #212529

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-leképezések testreszabása és újrafordítása során automatikusan látni fogja a változtatásokat ezekben a ciklusokban.

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, "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;
}

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