Source

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īgos, kartes, mixins un daudz ko citu.

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

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

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 Sass mainīgais programmā Bootstrap 4 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.

Mainīgo ignorēšana tajā pašā Sass failā var būt pirms vai pēc noklusējuma mainīgajiem. Tomēr, ignorējot visus Sass failus, jums ir jānotiek pirms Bootstrap Sass failu importēšanas.

Šeit ir piemērs, kas maina background-colorun colorfor <body>, importējot un kompilējot Bootstrap, izmantojot npm:

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

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

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

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:

$theme-colors: map-remove($theme-colors, "success", "info", "danger");

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

Viena 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`
}

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.

Šos mainīgos varat atrast un pielāgot galvenajām globālajām opcijām mūsu _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) vai`false`	Iespējo iepriekš definētus `border-radius`stilus dažādiem komponentiem.
`$enable-shadows`	`true`vai `false`(noklusējums)	Iespējo iepriekš definētus `box-shadow`stilus dažādiem komponentiem.
`$enable-gradients`	`true`vai `false`(noklusējums)	Iespējo iepriekš definētus gradientus, izmantojot `background-image`dažādu komponentu stilus.
`$enable-transitions`	`true`(noklusējums) vai`false`	Iespējo iepriekš definētus `transition`s dažādos komponentos.
`$enable-hover-media-query`	`true`vai `false`(noklusējums)	Novecojis
`$enable-grid-classes`	`true`(noklusējums) vai`false`	Iespējo CSS klašu ģenerēšanu režģa sistēmai (piemēram, `.container`, `.row`, `.col-md-1`, utt.).
`$enable-caret`	`true`(noklusējums) vai`false`	Iespējo pseidoelementu caret on `.dropdown-toggle`.
`$enable-print-styles`	`true`(noklusējums) vai`false`	Iespējo stilus drukāšanas optimizēšanai.

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 mūsu 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

Indigo

Violets

Rozā

sarkans

apelsīns

Dzeltens

Zaļš

Teal

Ciāna

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 mūsu scss/_variables.scssfailā.

Primārs

Sekundārais

Panākumi

Briesmas

Brīdinājums

Informācija

Gaisma

Tumšs

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

100

200

300

400

500

600

700

800

900

Vietnē _variables.scss, jūs atradīsiet mūsu 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 mainiet 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, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --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);
}

Varat arī izmantot mūsu pārtraukuma punkta mainīgos savos multivides vaicājumos:

.content-secondary {
  display: none;
}

@media (min-width(var(--breakpoint-sm))) {
  .content-secondary {
    display: block;
  }
}