in English

Theming Bootstrap

Pielāgojiet Bootstrap 4, izmantojot mūsu jaunos iebūvētos Sass mainīgos, lai iegūtu globālas stila preferences, lai atvieglotu tēmu un komponentu maiņu.

Ievads

Operētājsistēmā Bootstrap 3 motīvu veidošanu lielā mērā noteica mainīgo ignorēšana LESS, pielāgotā CSS un atsevišķa motīva stila lapa, ko iekļāvām savos distfailos. Ar nelielu piepūli varētu pilnībā pārveidot Bootstrap 3 izskatu, nepieskaroties galvenajiem failiem. Bootstrap 4 nodrošina pazīstamu, bet nedaudz atšķirīgu pieeju.

Tagad tēmu veidošanu veic, izmantojot Sass mainīgos, Sass kartes un pielāgoto CSS. Nav vairs īpašas tēmas stila lapas; tā vietā varat iespējot iebūvēto motīvu, lai pievienotu gradientus, ēnas un daudz ko citu.

Sass

Izmantojiet mūsu avota Sass failus, lai izmantotu mainīgo, karšu, mixins un citas priekšrocības, kompilējot Sass , izmantojot savu līdzekļu konveijeru.

Failu struktūra

Kad vien iespējams, izvairieties no Bootstrap pamatfailu modificēšanas. Sass gadījumā tas nozīmē izveidot savu stila lapu, kas importē Bootstrap, lai jūs varētu to modificēt un paplašināt. Pieņemot, ka izmantojat pakotņu pārvaldnieku, piemēram, npm, faila struktūra izskatīsies šādi:

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

Ja esat lejupielādējis mūsu avota failus un neizmantojat pakotņu pārvaldnieku, vēlēsities manuāli iestatīt kaut ko līdzīgu šai struktūrai, turot Bootstrap avota failus atsevišķi no saviem.

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

Notiek importēšana

Savā custom.scss, jūs importēsit Bootstrap avota Sass failus. Jums ir divas iespējas: iekļaut visu Bootstrap vai izvēlēties vajadzīgās daļas. Mēs iesakām izmantot pēdējo, lai gan ņemiet vērā, ka mūsu komponentiem ir dažas prasības un atkarības. Jums būs jāiekļauj arī daži JavaScript spraudņi.

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

Kad šī iestatīšana ir ieviesta, varat sākt modificēt jebkuru no Sass mainīgajiem un kartēm savā custom.scss. Varat arī sākt pievienot Bootstrap daļas zem // Optionalsadaļas, ja nepieciešams. Mēs iesakām bootstrap.scsskā sākumpunktu izmantot pilnu importēšanas steku no mūsu faila.

Mainīgie noklusējuma iestatījumi

Katrs Bootstrap Sass mainīgais ietver !defaultkarogu, kas ļauj ignorēt mainīgā noklusējuma vērtību savā Sass, nemainot Bootstrap avota kodu. Ja nepieciešams, kopējiet un ielīmējiet mainīgos, mainiet to vērtības un noņemiet !defaultkarogu. Ja mainīgais jau ir piešķirts, tas netiks atkārtoti piešķirts pēc noklusējuma vērtībām programmā Bootstrap.

Pilnu Bootstrap mainīgo sarakstu atradīsit scss/_variables.scss. Daži mainīgie ir iestatīti uz null, šie mainīgie neizvada rekvizītu, ja vien tie nav ignorēti jūsu konfigurācijā.

Mainīgo ignorēšanai ir jānāk pēc mūsu funkciju, mainīgo un kombināciju importēšanas, bet pirms pārējās importēšanas.

Šeit ir piemērs, kas maina background-colorun colorfor <body>, importējot un kompilējot Bootstrap, izmantojot 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

Atkārtojiet pēc vajadzības jebkuram Bootstrap mainīgajam, tostarp tālāk norādītajām globālajām opcijām.

Sāciet darbu ar Bootstrap, izmantojot mūsu sākuma projektu, izmantojot npm! Dodieties uz twbs/bootstrap-npm-starter veidņu repozitoriju, lai uzzinātu, kā izveidot un pielāgot Bootstrap savā npm projektā. Ietver Sass kompilatoru, Autoprefixer, Stylelint, PurgeCSS un Bootstrap ikonas.

Kartes un cilpas

Bootstrap 4 ietver dažas Sass kartes, atslēgu vērtību pārus, kas atvieglo saistīto CSS saišu ģenerēšanu. Mēs izmantojam Sass kartes savām krāsām, režģa pārtraukuma punktiem un citiem. Tāpat kā Sass mainīgajos, visās Sass kartēs ir ietverts !defaultkarogs, un tās var ignorēt un paplašināt.

Dažas no mūsu Sass kartēm pēc noklusējuma ir sapludinātas tukšās. Tas tiek darīts, lai dotu Sass karti viegli izvērstu, taču par to vienumu noņemšana no kartes ir nedaudz grūtāka.

Mainīt karti

Lai mainītu esošu krāsu mūsu $theme-colorskartē, pievienojiet savam pielāgotajam Sass failam:

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

Pievienot kartei

Lai pievienotu jaunu krāsu $theme-colors, pievienojiet jaunu atslēgu un vērtību:

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

Noņemt no kartes

Lai noņemtu krāsas no $theme-colorsvai jebkuras citas kartes, izmantojiet map-remove. Ņemiet vērā, ka tas ir jāievieto starp mūsu prasībām un opcijām:

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

Nepieciešamās atslēgas

Bootstrap pieņem noteiktu atslēgu klātbūtni Sass kartēs, kā mēs tās izmantojām un paplašinājām. Pielāgojot iekļautās kartes, var rasties kļūdas, ja tiek izmantota noteikta Sass kartes atslēga.

Piemēram, saitēm, pogām un veidlapu stāvokļiem mēs izmantojam taustiņus primary, successun . Šo atslēgu vērtību aizstāšana nedrīkst radīt problēmas, taču to noņemšana var izraisīt Sass kompilēšanas problēmas. Šādos gadījumos jums būs jāmaina Sass kods, kas izmanto šīs vērtības.danger$theme-colors

Funkcijas

Bootstrap izmanto vairākas Sass funkcijas, taču tikai apakškopa ir piemērojama vispārīgai tēmai. Mēs esam iekļāvuši trīs funkcijas vērtību iegūšanai no krāsu kartēm:

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

Tie ļauj izvēlēties vienu krāsu no Sass kartes līdzīgi kā jūs izmantotu krāsu mainīgo no v3.

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

Mums ir arī cita funkcija, lai no kartes iegūtu noteiktu krāsu līmeni . $theme-colorsNegatīvā līmeņa vērtības padarīs krāsu gaišāku, bet augstākas - tumšākas.

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

Praksē jūs izsaucat funkciju un nododat divus parametrus: krāsas nosaukumu no $theme-colors(piemēram, primārā vai bīstamā) un skaitlisko līmeni.

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

Nākotnē var pievienot papildu funkcijas vai savu pielāgoto Sass, lai izveidotu līmeņa funkcijas papildu Sass kartēm vai pat vispārīgas funkcijas, ja vēlaties būt detalizētāks.

Krāsu kontrasts

Papildu funkcija, ko mēs iekļaujam Bootstrap, ir krāsu kontrasta funkcija, color-yiq. Tas izmanto YIQ krāsu telpu , lai automātiski atgrieztu gaišu ( #fff) vai tumšu ( #111) kontrastkrāsu, pamatojoties uz norādīto pamatkrāsu. Šī funkcija ir īpaši noderīga miksīniem vai cilpām, kurās ģenerējat vairākas klases.

Piemēram, lai ģenerētu krāsu paraugus no mūsu $theme-colorskartes:

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

To var izmantot arī vienreizējām kontrasta vajadzībām:

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

Varat arī norādīt pamatkrāsu, izmantojot mūsu krāsu kartes funkcijas:

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

Aizbēgt no SVG

Mēs izmantojam escape-svgfunkciju, lai izvairītu no un <rakstzīmēm SVG fona attēliem. Lai pareizi atveidotu fona attēlus pārlūkprogrammā IE, šīs rakstzīmes ir jāaizpilda. Lietojot funkciju, datu URI ir jākotē.>#escape-svg

Pievienošanas un atņemšanas funkcijas

Mēs izmantojam addun subtractfunkcijas, lai aplauztu CSS calcfunkciju. Šo funkciju galvenais mērķis ir izvairīties no kļūdām, kad 0izteiksmē tiek nodota vērtība “bez vienības” calc. Izteiksmes, piemēram calc(10px - 0), atgriezīs kļūdu visās pārlūkprogrammās, neskatoties uz to, ka tās ir matemātiski pareizas.

Piemērs, kur aprēķins ir derīgs:

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

Piemērs, kur aprēķins nav derīgs:

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

Pielāgojiet Bootstrap 4, izmantojot mūsu iebūvēto pielāgoto mainīgo failu, un viegli pārslēdziet globālās CSS preferences ar jauniem $enable-*Sass mainīgajiem. Ignorēt mainīgā vērtību un npm run testpēc vajadzības atkārtoti kompilējiet ar.

Varat atrast un pielāgot šos mainīgos galvenajām globālajām opcijām Bootstrap scss/_variables.scssfailā.

Mainīgs Vērtības Apraksts
$spacer 1rem(noklusējums) vai jebkura vērtība > 0 Norāda noklusējuma atstarpes vērtību, lai programmatiski ģenerētu mūsu starplikas utilītas .
$enable-rounded true(noklusējums) vaifalse Iespējo iepriekš definētus border-radiusstilus dažādiem komponentiem.
$enable-shadows truevai false(noklusējums) Iespējo iepriekš definētus dekoratīvos box-shadowstilus dažādiem komponentiem. Neietekmē box-shadowfokusa stāvokļiem izmantoto s.
$enable-gradients truevai false(noklusējums) Iespējo iepriekš definētus gradientus, izmantojot background-imagedažādu komponentu stilus.
$enable-transitions true(noklusējums) vaifalse Iespējo iepriekš definētus transitions dažādos komponentos.
$enable-prefers-reduced-motion-media-query true(noklusējums) vaifalse Iespējo prefers-reduced-motionmultivides vaicājumu , kas apspiež noteiktas animācijas/pārejas, pamatojoties uz lietotāja pārlūkprogrammas/operētājsistēmas preferencēm.
$enable-hover-media-query truevai false(noklusējums) Novecojis
$enable-grid-classes true(noklusējums) vaifalse Iespējo CSS klašu ģenerēšanu režģa sistēmai (piemēram, .container, .row, .col-md-1, utt.).
$enable-caret true(noklusējums) vaifalse Iespējo pseidoelementu caret on .dropdown-toggle.
$enable-pointer-cursor-for-buttons true(noklusējums) vaifalse Pievienojiet “rokas” kursoru neatspējotajiem pogas elementiem.
$enable-print-styles true(noklusējums) vaifalse Iespējo stilus drukāšanas optimizēšanai.
$enable-responsive-font-sizes truevai false(noklusējums) Iespējo adaptīvus fontu izmērus .
$enable-validation-icons true(noklusējums) vaifalse Iespējo background-imageikonas teksta ievadē un dažās pielāgotajās veidlapās validācijas stāvokļiem.
$enable-deprecation-messages true(noklusējums) vaifalse Iestatiet uz, falselai paslēptu brīdinājumus, kad tiek izmantots kāds no novecojušajiem maisījumiem un funkcijām, ko plānots noņemt programmā v5.

Krāsa

Daudzi no Bootstrap dažādajiem komponentiem un utilītprogrammām ir veidoti, izmantojot vairākas krāsas, kas noteiktas Sass kartē. Šo karti var pārcilāt Sass, lai ātri ģenerētu kārtulu kopas.

Visas krāsas

Visas Bootstrap 4 pieejamās krāsas ir pieejamas kā Sass mainīgie un Sass karte scss/_variables.scssfailā. Tas tiks paplašināts turpmākajos nelielajos izlaidumos, lai pievienotu papildu nokrāsas, līdzīgi kā jau iekļautajai pelēktoņu paletei .

$ zils #007bff
$indigo #6610f2
$ violets #6f42c1
$ rozā #e83e8c
$sarkans #dc3545
$ oranžs #fd7e14
$dzeltens #ffc107
$ zaļš #28a745
$teal #20c997
$ciāna #17a2b8

Lūk, kā jūs varat tos izmantot savā Sass:

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

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

Krāsu lietderības klases ir pieejamas arī iestatīšanai colorun background-color.

Nākotnē mēs centīsimies nodrošināt Sass kartes un mainīgos katras krāsas toņos, kā mēs to darījām ar tālāk norādītajām pelēktoņu krāsām.

Tēmas krāsas

Mēs izmantojam visu krāsu apakškopu, lai izveidotu mazāku krāsu paleti krāsu shēmu ģenerēšanai, kas ir pieejama arī kā Sass mainīgie un Sass karte Bootstrap scss/_variables.scssfailā.

$primary #007bff
$sekundārais #6c757d
$veiksmi #28a745
$ briesmas #dc3545
$brīdinājums #ffc107
$informācija #17a2b8
$gaisma #f8f9fa
$ tumšs #343a40

Pelēki

Plašs pelēko mainīgo kopums un Sass karte, kas scss/_variables.scssnodrošina konsekventus pelēkos toņus visā jūsu projektā. Ņemiet vērā, ka tie ir “vēsi pelēkie”, kuriem ir tendence uz smalku zilu toni, nevis neitrālu pelēko toni.

pelēks — 100 $ #f8f9fa
$ pelēks-200 #e9ecef
pelēks — 300 $ #dee2e6
pelēks — 400 $ #ced4da
$ pelēks-500 #adb5bd
$ pelēks-600 #6c757d
pelēks — 700 $ #495057
$ pelēks-800 #343a40
$ pelēks-900 #212529

Vietnē scss/_variables.scss, jūs atradīsiet Bootstrap krāsu mainīgos un Sass karti. $colorsŠeit ir Sass kartes piemērs :

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

Pievienojiet, noņemiet vai modificējiet vērtības kartē, lai atjauninātu to izmantošanu daudzos citos komponentos. Diemžēl šobrīd ne katrs komponents izmanto šo Sass karti. Turpmākie atjauninājumi centīsies to uzlabot. Līdz tam plānojiet izmantot ${color}mainīgos lielumus un šo Sass karti.

Sastāvdaļas

Daudzi Bootstrap komponenti un utilītas ir veidoti ar @eachcilpām, kas atkārtojas Sass kartē. Tas ir īpaši noderīgi, lai mūsu ģenerētu komponenta $theme-colorsvariantus un izveidotu adaptīvus variantus katram pārtraukuma punktam. Pielāgojot šīs Sass kartes un atkārtoti kompilējot, jūsu izmaiņas tiks automātiski atspoguļotas šajās cilpās.

Modifikatori

Daudzi Bootstrap komponenti ir veidoti, izmantojot bāzes modifikatoru klases pieeju. Tas nozīmē, ka lielākā daļa stila ir ietverta pamatklasē (piemēram, .btn), savukārt stila variācijas ir ierobežotas ar modifikatoru klasēm (piemēram, .btn-danger). Šīs modifikatoru klases ir veidotas no $theme-colorskartes, lai pielāgotu mūsu modifikatoru klašu skaitu un nosaukumu.

Šeit ir divi piemēri tam, kā mēs $theme-colorspārveidojam karti, lai ģenerētu .alertkomponenta modifikatorus un visas mūsu .bg-*fona utilītas.

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

Atsaucīgs

Šīs Sass cilpas neaprobežojas tikai ar krāsu kartēm. Varat arī ģenerēt savu komponentu vai utilītu adaptīvas variācijas. Piemēram, mūsu adaptīvās teksta līdzināšanas utilītas, kurās mēs sajaucam Sass kartes @eachcilpu $grid-breakpointsar multivides vaicājumu.

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

Ja jums būs jāmaina $grid-breakpoints, jūsu izmaiņas attieksies uz visām cilpām, kas atkārtojas šajā kartē.

CSS mainīgie

Bootstrap 4 savā kompilētajā CSS ietver aptuveni divus desmitus pielāgotu CSS rekvizītu (mainīgo) . Tie nodrošina vieglu piekļuvi bieži lietotām vērtībām, piemēram, mūsu motīvu krāsām, pārtraukuma punktiem un primārajiem fontu skursteņiem, strādājot pārlūkprogrammas inspektorā, koda smilškastē vai vispārīgā prototipā.

Pieejamie mainīgie

Šeit ir iekļauti mainīgie (ņemiet vērā, ka tas :rootir obligāts). Tie atrodas mūsu _root.scssfailā.

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

Piemēri

CSS mainīgie piedāvā līdzīgu elastību kā Sass mainīgie, taču bez nepieciešamības tos apkopot, pirms tie tiek rādīti pārlūkprogrammai. Piemēram, šeit mēs atiestatām mūsu lapas fontu un saišu stilus, izmantojot CSS mainīgos.

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

Pārtraukuma punkta mainīgie

Lai gan sākotnēji savos CSS mainīgajos (piemēram, --breakpoint-md) iekļāvām pārtraukuma punktus, tie netiek atbalstīti multivides vaicājumos , taču tos joprojām var izmantot kārtulu kopās multivides vaicājumos. Šie pārtraukuma punkta mainīgie paliek kompilētajā CSS, lai nodrošinātu atpakaļsaderību, jo tos var izmantot JavaScript. Uzziniet vairāk specifikācijā .

Tālāk ir sniegts piemērs tam, kas netiek atbalstīts.

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

Un šeit ir atbalstītā atbalsta piemērs :

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