Source

Theming Bootstrap

Tinkinkite „Bootstrap 4“ naudodami mūsų naujus integruotus „Sass“ kintamuosius, kad gautumėte visuotines stiliaus nuostatas, kad būtų lengviau nustatyti temas ir keisti komponentus.

Įvadas

„Bootstrap 3“ temą daugiausia lėmė kintamųjų nepaisymas LESS, tinkintas CSS ir atskiras temos stiliaus lapas, kurį įtraukėme į savo distfailus. Įdėjus tam tikrų pastangų, būtų galima visiškai pakeisti „Bootstrap 3“ išvaizdą nepaliečiant pagrindinių failų. „Bootstrap 4“ siūlo pažįstamą, bet šiek tiek kitokį požiūrį.

Dabar tematika atliekama naudojant Sass kintamuosius, Sass žemėlapius ir tinkintą CSS. Nėra daugiau specialios temos stiliaus lapo; vietoj to galite įjungti įtaisytąją temą, kad pridėtumėte gradientus, šešėlius ir kt.

Sass

Pasinaudokite mūsų šaltinio Sass failais, kad galėtumėte pasinaudoti kintamaisiais, žemėlapiais, mišiniais ir kt. Savo versijoje padidinome Sass apvalinimo tikslumą iki 6 (pagal numatytuosius nustatymus jis yra 5), kad išvengtume naršyklės apvalinimo problemų.

Failo struktūra

Kai tik įmanoma, nekeiskite pagrindinių „Bootstrap“ failų. „Sass“ tai reiškia, kad reikia sukurti savo stiliaus lapą, kuris importuoja „Bootstrap“, kad galėtumėte jį modifikuoti ir išplėsti. Darant prielaidą, kad naudojate paketų tvarkyklę, pvz., npm, failo struktūra atrodys taip:

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

Jei atsisiuntėte mūsų šaltinio failus ir nenaudojate paketų tvarkyklės, norėsite rankiniu būdu nustatyti kažką panašaus į tą struktūrą, atskirdami Bootstrap šaltinio failus nuo savo.

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

Importuojama

Į savo custom.scss, importuosite Bootstrap šaltinio Sass failus. Turite dvi parinktis: įtraukti visą „Bootstrap“ arba pasirinkti reikalingas dalis. Mes skatiname pastarąjį, nors atminkite, kad mūsų komponentams yra tam tikrų reikalavimų ir priklausomybių. Taip pat turėsite įtraukti šiek tiek „JavaScript“ į mūsų papildinius.

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

Sukūrę šią sąranką, galite pradėti keisti bet kuriuos Sass kintamuosius ir žemėlapius savo custom.scss. Taip pat galite pradėti pridėti „Bootstrap“ dalis po // Optionalskyriumi, jei reikia. bootstrap.scssKaip išeities tašką siūlome naudoti visą importavimo krūvą iš mūsų failo.

Kintamieji numatytieji nustatymai

Kiekviename „Bootstrap 4“ Sass kintamajame yra !defaultvėliavėlė, leidžianti nepaisyti numatytosios kintamojo reikšmės savo „Sass“ nekeičiant „Bootstrap“ šaltinio kodo. Jei reikia, nukopijuokite ir įklijuokite kintamuosius, pakeiskite jų reikšmes ir pašalinkite !defaultvėliavėlę. Jei kintamasis jau buvo priskirtas, jis nebus iš naujo priskirtas pagal numatytąsias „Bootstrap“ reikšmes.

Visą „Bootstrap“ kintamųjų sąrašą rasite scss/_variables.scss. Kai kurie kintamieji nustatyti į null, šie kintamieji nepateikia nuosavybės, nebent jūsų konfigūracijoje jų nepaisoma.

Kintamųjų nepaisymas tame pačiame Sass faile gali būti prieš numatytuosius kintamuosius arba po jų. Tačiau, kai nepaisoma visų Sass failų, jūsų nepaisymai turi būti atlikti prieš importuojant Bootstrap Sass failus.

Štai pavyzdys, kuris pakeičia background-colorir color, <body>kai importuojamas ir kompiliuojamas Bootstrap per npm:

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

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

Pakartokite, jei reikia, naudodami bet kurį „Bootstrap“ kintamąjį, įskaitant toliau pateiktas visuotines parinktis.

Žemėlapiai ir kilpos

„Bootstrap 4“ apima keletą „Sass“ žemėlapių, pagrindinių reikšmių porų, kurios palengvina susijusių CSS šeimų generavimą. Savo spalvoms, tinklelio lūžio taškams ir kt. naudojame Sass žemėlapius. Kaip ir Sass kintamieji, visuose Sass žemėlapiuose yra !defaultvėliavėlė ir juos galima nepaisyti bei išplėsti.

Kai kurie mūsų Sass žemėlapiai pagal numatytuosius nustatymus yra sujungti į tuščius. Tai daroma tam, kad būtų galima lengvai išplėsti tam tikrą Sass žemėlapį, tačiau dėl to elementų pašalinimas iš žemėlapio yra šiek tiek sudėtingesnis.

Keisti žemėlapį

Norėdami modifikuoti esamą spalvą mūsų $theme-colorsžemėlapyje, į savo pasirinktinį Sass failą pridėkite:

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

Pridėti į žemėlapį

Norėdami pridėti naują spalvą $theme-colors, pridėkite naują raktą ir reikšmę:

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

Pašalinti iš žemėlapio

Norėdami pašalinti spalvas iš $theme-colorsar bet kurio kito žemėlapio, naudokite map-remove. Atminkite, kad jį turite įrašyti tarp mūsų reikalavimų ir parinkčių:

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

Reikalingi raktai

„Bootstrap“ daro prielaidą, kad „Sass“ žemėlapiuose yra tam tikrų specifinių raktų, kuriuos naudojome ir išplėtėme patys. Kai tinkinate įtrauktus žemėlapius, galite susidurti su klaidomis, kai naudojamas konkretus Sass žemėlapio raktas.

Pavyzdžiui, nuorodoms, mygtukams ir formos būsenoms naudojame klavišus , primaryir success. Pakeitus šių raktų reikšmes neturėtų kilti problemų, tačiau jas pašalinus gali kilti Sass kompiliavimo problemų. Tokiais atvejais turėsite modifikuoti Sass kodą, kuris naudoja šias reikšmes.danger$theme-colors

Funkcijos

„Bootstrap“ naudoja kelias „Sass“ funkcijas, tačiau tik poaibis taikomas bendrai temai. Mes įtraukėme tris funkcijas, kad gautume reikšmes iš spalvų žemėlapių:

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

Tai leidžia pasirinkti vieną spalvą iš Sass žemėlapio, panašiai kaip naudotumėte spalvų kintamąjį iš v3.

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

Taip pat turime dar vieną funkciją, leidžiančią gauti tam tikrą spalvų lygį iš $theme-colorsžemėlapio. Neigiamos lygio reikšmės pašviesins spalvą, o aukštesnės – patamsės.

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

Praktiškai iškviečiate funkciją ir perduodate du parametrus: spalvos pavadinimą $theme-colors(pvz., pirminis arba pavojus) ir skaitinį lygį.

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

Ateityje gali būti pridėtos papildomos funkcijos arba jūsų pasirinktas Sass, kad būtų sukurtos papildomos Sass žemėlapių lygio funkcijos arba net bendrosios funkcijos, jei norite būti išsamesni.

Spalvų kontrastas

Papildoma funkcija, kurią įtraukiame į „Bootstrap“, yra spalvų kontrasto funkcija color-yiq. Ji naudoja YIQ spalvų erdvę , kad automatiškai grąžintų šviesią ( #fff) arba tamsią ( #111) kontrasto spalvą pagal nurodytą bazinę spalvą. Ši funkcija ypač naudinga mišiniams arba ciklams, kuriuose generuojate kelias klases.

Pavyzdžiui, norėdami sugeneruoti spalvų pavyzdžius iš mūsų $theme-colorsžemėlapio:

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

Jis taip pat gali būti naudojamas vienkartiniams kontrasto poreikiams:

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

Taip pat galite nurodyti pagrindinę spalvą naudodami mūsų spalvų žemėlapio funkcijas:

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

Pabėgti nuo SVG

SVG fono vaizdams naudojame escape-svgfunkciją, kad išvengtume <, >ir simbolių. #Norint tinkamai pateikti fono paveikslėlius IE, šiuos simbolius reikia pakeisti.

Pridėti ir atimti funkcijos

CSS funkcijai apvynioti naudojame ir addfunkcijas . Pagrindinis šių funkcijų tikslas yra išvengti klaidų, kai į išraišką perduodama „be vieneto“ reikšmė . Tokios išraiškos kaip pateiks klaidą visose naršyklėse, nepaisant to, kad yra matematiškai teisingos.subtractcalc0calccalc(10px - 0)

Pavyzdys, kur skaičiavimas galioja:

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

Pavyzdys, kai skaičiavimas neteisingas:

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

Tinkinkite „Bootstrap 4“ naudodami mūsų integruotą tinkintų kintamųjų failą ir lengvai perjunkite visuotines CSS nuostatas naudodami naujus „ $enable-*Sass“ kintamuosius. Nepaisykite kintamojo reikšmės ir, npm run testjei reikia, iš naujo sukompiliuokite.

Galite rasti ir tinkinti šiuos kintamuosius pagal pagrindines visuotines parinktis Bootstrap scss/_variables.scssfaile.

Kintamasis	Vertybės	apibūdinimas
`$spacer`	`1rem`(numatytasis) arba bet kokia reikšmė > 0	Nurodoma numatytoji tarpiklio reikšmė, skirta programiškai generuoti mūsų tarpiklio priemones .
`$enable-rounded`	`true`(numatytasis) arba`false`	Įgalina iš anksto nustatytus `border-radius`įvairių komponentų stilius.
`$enable-shadows`	`true`arba `false`(numatytasis)	Įgalina iš anksto nustatytus `box-shadow`įvairių komponentų stilius.
`$enable-gradients`	`true`arba `false`(numatytasis)	Įgalinami iš anksto nustatyti gradientai naudojant `background-image`įvairių komponentų stilius.
`$enable-transitions`	`true`(numatytasis) arba`false`	Įgalina iš anksto nustatytus `transition`s įvairiuose komponentuose.
`$enable-prefers-reduced-motion-media-query`	`true`(numatytasis) arba`false`	Įgalina `prefers-reduced-motion`medijos užklausą , kuri slopina tam tikras animacijas / perėjimus pagal naudotojų naršyklės / operacinės sistemos nuostatas.
`$enable-hover-media-query`	`true`arba `false`(numatytasis)	Nebenaudojama
`$enable-grid-classes`	`true`(numatytasis) arba`false`	Leidžia generuoti CSS klases tinklelio sistemai (pvz., `.container`, `.row`, `.col-md-1`, ir kt.).
`$enable-caret`	`true`(numatytasis) arba`false`	Įgalinamas pseudo elementas caret `.dropdown-toggle`.
`$enable-pointer-cursor-for-buttons`	`true`(numatytasis) arba`false`	Pridėkite „rankos“ žymeklį prie neišjungtų mygtukų elementų.
`$enable-print-styles`	`true`(numatytasis) arba`false`	Įgalinami stiliai optimizuojant spausdinimą.
`$enable-responsive-font-sizes`	`true`arba `false`(numatytasis)	Įgalinami reaguojantys šriftų dydžiai .
`$enable-validation-icons`	`true`(numatytasis) arba`false`	Įgalina `background-image`piktogramas teksto įvestyje ir kai kurias pasirinktines patvirtinimo būsenų formas.
`$enable-deprecation-messages`	`true`arba `false`(numatytasis)	Nustatykite, kad `true`būtų rodomi įspėjimai, kai naudojate bet kurį iš nebenaudojamų mišinių ir funkcijų, kurias planuojama pašalinti `v5`.

Spalva

Daugelis įvairių „Bootstrap“ komponentų ir paslaugų yra sukurti naudojant spalvų seriją, apibrėžtą „Sass“ žemėlapyje. Šį žemėlapį galima perjungti Sass, kad būtų galima greitai sugeneruoti taisyklių rinkinius.

Visos spalvos

Visos Bootstrap 4 spalvos galimos kaip Sass kintamieji ir Sass žemėlapis scss/_variables.scssfaile. Tai bus išplėsta kituose nedideliuose leidimuose, kad būtų pridėta papildomų atspalvių, panašiai kaip jau įtraukta pilkų atspalvių paletė .

Mėlyna

Indigo

Violetinė

Rožinis

Raudona

Oranžinė

Geltona

Žalias

žalsvai mėlyna

Žydra spalva

Štai kaip galite juos naudoti savo „Sass“:

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

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

Taip pat galimos spalvų naudingumo klasės nustatymui colorir background-color.

Ateityje sieksime pateikti Sass žemėlapius ir kiekvienos spalvos atspalvių kintamuosius, kaip tai padarėme su toliau pateiktomis pilkos spalvos spalvomis.

Temos spalvos

Naudojame visų spalvų poaibį, kad sukurtume mažesnę spalvų paletę spalvų schemoms generuoti, taip pat kaip Sass kintamieji ir Sass žemėlapis Bootstrap scss/_variables.scssfaile.

Pirminis

Antrinis

Sėkmė

Pavojus

Įspėjimas

Informacija

Šviesa

Tamsus

Pilkos spalvos

Platus pilkų kintamųjų rinkinys ir Sass žemėlapis, scss/_variables.scsskad jūsų projekte būtų vienodi pilki atspalviai. Atkreipkite dėmesį, kad tai yra „vėsios pilkos spalvos“, kurios linkusios į subtilų mėlyną atspalvį, o ne į neutralias pilkas spalvas.

100

200

300

400

500

600

700

800

900

scss/_variables.scssSvetainėje rasite „Bootstrap“ spalvų kintamuosius ir „Sass“ žemėlapį . $colorsŠtai Sass žemėlapio pavyzdys :

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

Pridėkite, pašalinkite arba keiskite reikšmes žemėlapyje, kad atnaujintumėte, kaip jos naudojamos daugelyje kitų komponentų. Deja, šiuo metu ne kiekvienas komponentas naudoja šį Sass žemėlapį. Būsimi atnaujinimai stengsis tai pagerinti. Iki tol planuokite naudotis ${color}kintamaisiais ir šiuo Sass žemėlapiu.

Komponentai

Daugelis „Bootstrap“ komponentų ir paslaugų yra sukurti naudojant @eachkilpas, kurios kartojasi per Sass žemėlapį. Tai ypač naudinga generuojant mūsų komponento $theme-colorsvariantus ir kuriant reaguojančius variantus kiekvienam pertraukos taškui. Kai tinkinate šiuos Sass žemėlapius ir iš naujo kompiliuojate, automatiškai matysite pakeitimus, kurie atsispindės šiose kilpose.

Modifikatoriai

Daugelis „Bootstrap“ komponentų yra sukurti naudojant bazinio modifikatoriaus klasės metodą. Tai reiškia, kad didžioji stiliaus dalis yra pagrindinėje klasėje (pvz., .btn), o stiliaus variantai apsiriboja modifikavimo klasėmis (pvz., .btn-danger). Šios modifikavimo klasės yra sukurtos iš $theme-colorsžemėlapio, kad būtų galima tinkinti mūsų modifikatorių klasių skaičių ir pavadinimą.

Čia pateikiami du pavyzdžiai, kaip pereiname per $theme-colorsžemėlapį, kad sugeneruotume .alertkomponento ir visų mūsų .bg-*foninių paslaugų modifikatorius.

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

Atsakingas

Šios Sass kilpos taip pat neapsiriboja spalvų žemėlapiais. Taip pat galite sukurti reaguojančius komponentų ar paslaugų variantus. Paimkite, pavyzdžiui, mūsų reaguojančias teksto lygiavimo priemones, kuriose sumaišome Sass žemėlapio @eachkilpą $grid-breakpointssu medijos užklausa.

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

Jei jums reikės modifikuoti $grid-breakpoints, jūsų pakeitimai bus taikomi visoms kilpoms, kartojančioms tą žemėlapį.

CSS kintamieji

„ Bootstrap 4“ savo sudarytoje CSS apima maždaug dvi dešimtis tinkintų CSS ypatybių (kintamųjų) . Tai suteikia lengvą prieigą prie dažniausiai naudojamų reikšmių, pvz., temų spalvų, pertraukos taškų ir pagrindinių šriftų krūvų, kai dirbate naršyklės inspektoriuje, kodo smėlio dėžėje ar kuriant bendrą prototipą.

Galimi kintamieji

Čia yra kintamieji, kuriuos įtraukiame (atkreipkite dėmesį, kad :rootbūtina). Jie yra mūsų _root.scssbyloje.

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

Pavyzdžiai

CSS kintamieji siūlo panašų lankstumą kaip ir Sass kintamieji, tačiau nereikia jų kompiliuoti prieš pateikiant juos naršyklei. Pavyzdžiui, čia mes iš naujo nustatome savo puslapio šriftą ir nuorodų stilius naudodami CSS kintamuosius.

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

Lūžio taško kintamieji

Nors iš pradžių įtraukėme lūžio taškus į savo CSS kintamuosius (pvz., --breakpoint-md), jie nepalaikomi medijos užklausose , tačiau juos vis tiek galima naudoti medijos užklausų taisyklių rinkiniuose. Šie lūžio taško kintamieji lieka kompiliuotame CSS, kad būtų galima suderinti atgal, nes juos gali naudoti „JavaScript“. Sužinokite daugiau specifikacijoje .

Štai pavyzdys, kas nepalaikoma:

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

Ir štai pavyzdys, kas palaikoma:

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