in English

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 pasinaudotumėte kintamųjų, žemėlapių, mišinių ir kt. pranašumais, kai kompiliuojate Sass naudodami savo išteklių vamzdyną.

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

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

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

Kiekvienas Bootstrap Sass kintamasis turi !defaultvėliavėlę, leidžiančią 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 turi būti atliktas po to, kai importuojamos mūsų funkcijos, kintamieji ir mišiniai, bet prieš likusį importavimą.

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

@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

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

Pradėkite naudoti „Bootstrap“ naudodami „npm“ su mūsų pradedančiuoju projektu! Eikite į twbs/bootstrap-npm-starter šablonų saugyklą ir sužinokite, kaip sukurti ir tinkinti Bootstrap savo npm projekte. Apima Sass kompiliatorių, Autoprefixer, Stylelint, PurgeCSS ir Bootstrap piktogramas.

Ž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 formų 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šinukams ar 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. Naudojant escape-svgfunkciją, duomenų URI turi būti cituojami.

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.

Šiuos kintamuosius galite rasti ir pritaikyti pagrindinėms visuotinėms parinktims „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) arbafalse Įgalina iš anksto nustatytus border-radiusįvairių komponentų stilius.
$enable-shadows truearba false(numatytasis) Įgalina iš anksto nustatytus box-shadowįvairių komponentų dekoratyvinius stilius. Neturi įtakos box-shadowfokusavimo būsenoms.
$enable-gradients truearba false(numatytasis) Įgalinami iš anksto nustatyti gradientai naudojant background-imageįvairių komponentų stilius.
$enable-transitions true(numatytasis) arbafalse Įgalina iš anksto nustatytus transitions įvairiuose komponentuose.
$enable-prefers-reduced-motion-media-query true(numatytasis) arbafalse Įgalina prefers-reduced-motionmedijos užklausą , kuri slopina tam tikras animacijas / perėjimus pagal naudotojų naršyklės / operacinės sistemos nuostatas.
$enable-hover-media-query truearba false(numatytasis) Nebenaudojama
$enable-grid-classes true(numatytasis) arbafalse Įgalinamas tinklelio sistemos CSS klasių generavimas (pvz., .container, .row, .col-md-1, ir kt.).
$enable-caret true(numatytasis) arbafalse Įgalinamas pseudo elementas caret on .dropdown-toggle.
$enable-pointer-cursor-for-buttons true(numatytasis) arbafalse Pridėkite „rankos“ žymeklį prie neišjungtų mygtukų elementų.
$enable-print-styles true(numatytasis) arbafalse Įgalinami stiliai optimizuojant spausdinimą.
$enable-responsive-font-sizes truearba false(numatytasis) Įgalinami reaguojantys šriftų dydžiai .
$enable-validation-icons true(numatytasis) arbafalse Įgalina background-imagepiktogramas teksto įvestyje ir kai kurias pasirinktines patvirtinimo būsenų formas.
$enable-deprecation-messages true(numatytasis) arbafalse Nustatykite, falsekad paslėptumėte įspėjimus, 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 #007bff
$indigo #6610f2
$ violetinė #6f42c1
$ rožinė #e83e8c
$ raudona #dc3545
$oranžinė #fd7e14
$geltona #ffc107
$ žalias #28a745
$teal #20c997
$ žydra #17a2b8

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

$pagrindinis #007bff
$antrinis #6c757d
$sėkmė #28a745
$ pavojus #dc3545
$ įspėjimas #ffc107
$informacija #17a2b8
$ šviesos #f8f9fa
$ tamsus #343a40

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.

pilka - 100 USD #f8f9fa
pilka - 200 USD #e9ecef
pilka - 300 USD #dee2e6
pilka - 400 USD #ced4da
pilka - 500 USD #adb5bd
Pilka – 600 USD #6c757d
Pilka – 700 USD #495057
Pilka – 800 USD #343a40
pilka - 900 USD #212529

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 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 apjungiame $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 pakeisti savo $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 su naršyklės inspektoriumi, kodo smėlio dėže 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", "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;
}

Pavyzdžiai

CSS kintamieji siūlo panašų lankstumą kaip ir Sass kintamieji, tačiau jų nereikia kompiliuoti prieš pateikiant juos naršyklei. Pavyzdžiui, čia 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);
  }
}