Source

Theming Bootstrap

Ippersonalizza Bootstrap 4 bil-varjabbli Sass ġodda integrati tagħna għall-preferenzi globali tal-istil għal temi faċli u bidliet fil-komponenti.

Introduzzjoni

F'Bootstrap 3, it-tema kienet immexxija fil-biċċa l-kbira minn overrides varjabbli f'LESS, CSS personalizzati, u stylesheet separata tat-tema li inkludejna fil- distfajls tagħna. B'xi sforz, wieħed jista 'jfassal kompletament mill-ġdid id-dehra ta' Bootstrap 3 mingħajr ma jmiss il-fajls ewlenin. Bootstrap 4 jipprovdi approċċ familjari, iżda kemmxejn differenti.

Issa, it-tema titwettaq minn varjabbli Sass, mapep Sass, u CSS tad-dwana. M'hemm l-ebda stylesheet aktar dedikat tema; minflok, tista 'tippermetti li t-tema integrata żżid gradjenti, dellijiet, u aktar.

Sass

Uża l-fajls Sass tas-sors tagħna biex tieħu vantaġġ minn varjabbli, mapep, mixins, u aktar. Fil-bini tagħna żdidna l-preċiżjoni tal-arrotondament Sass għal 6 (b'mod awtomatiku huwa 5) biex jipprevjenu problemi bl-arrotondament tal-browser.

Struttura tal-fajl

Kull meta jkun possibbli, evita li timmodifika l-fajls ewlenin tal-Bootstrap. Għal Sass, dan ifisser li toħloq stylesheet tiegħek stess li timporta Bootstrap sabiex tkun tista' timmodifikaha u testendiha. Jekk wieħed jassumi li qed tuża maniġer tal-pakketti bħal npm, ser ikollok struttura tal-fajls li tidher bħal din:

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

Jekk niżżilt il-fajls tas-sors tagħna u m'intix qed tuża maniġer tal-pakketti, tkun trid issettja manwalment xi ħaġa simili għal dik l-istruttura, u żżomm il-fajls tas-sors ta' Bootstrap separati minn tiegħek.

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

L-importazzjoni

Fil- custom.scss, int ser timporta l-fajls Sass sors ta' Bootstrap. Għandek żewġ għażliet: inkludi Bootstrap kollu, jew agħżel il-partijiet li għandek bżonn. Inħeġġu lil dawn tal-aħħar, għalkemm kun konxju li hemm xi rekwiżiti u dipendenzi madwar il-komponenti tagħna. Ikollok bżonn ukoll tinkludi xi JavaScript għall-plugins tagħna.

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

B'dik is-setup fis-seħħ, tista 'tibda timmodifika kwalunkwe waħda mill-varjabbli u l-mapep Sass fil- custom.scss. Tista 'wkoll tibda żżid partijiet ta' Bootstrap taħt it- // Optionaltaqsima kif meħtieġ. Nissuġġerixxu li tuża l-munzell sħiħ ta 'importazzjoni mill- bootstrap.scssfajl tagħna bħala l-punt tat-tluq tiegħek.

Inadempjenzi varjabbli

Kull varjabbli Sass f'Bootstrap 4 tinkludi l- !defaultbandiera li tippermettilek tegħleb il-valur default tal-varjabbli fis-Sass tiegħek stess mingħajr ma timmodifika l-kodiċi sors ta 'Bootstrap. Ikkopja u waħħal il-varjabbli kif meħtieġ, immodifika l-valuri tagħhom, u neħħi l- !defaultbandiera. Jekk varjabbli tkun diġà ġiet assenjata, allura ma tkunx assenjata mill-ġdid mill-valuri awtomatiċi f'Bootstrap.

Issib il-lista kompleta tal-varjabbli ta' Bootstrap f' scss/_variables.scss. Xi varjabbli huma ssettjati għal null, dawn il-varjabbli ma joħorġux il-proprjetà sakemm ma jiġux sostitwiti fil-konfigurazzjoni tiegħek.

L-overrides varjabbli fl-istess fajl Sass jistgħu jiġu qabel jew wara l-varjabbli default. Madankollu, meta tipprevali fuq il-fajls Sass, l-invalidi tiegħek għandhom jiġu qabel ma timporta l-fajls Sass ta' Bootstrap.

Hawn eżempju li jibdel l- background-coloru colorgħall- <body>meta jimporta u jikkompila Bootstrap permezz ta' npm:

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

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

Irrepeti kif meħtieġ għal kwalunkwe varjabbli f'Bootstrap, inklużi l-għażliet globali hawn taħt.

Mapep u loops

Bootstrap 4 jinkludi numru żgħir ta 'mapep Sass, pari ta' valur ewlenin li jagħmluha aktar faċli biex jiġġeneraw familji ta 'CSS relatati. Aħna nużaw il-mapep Sass għall-kuluri tagħna, il-punti ta 'waqfien tal-grilja, u aktar. Eżatt bħall-varjabbli Sass, il-mapep kollha Sass jinkludu l- !defaultbandiera u jistgħu jiġu sostitwiti u estiżi.

Uħud mill-mapep Sass tagħna huma magħquda f'dawk vojta awtomatikament. Dan isir biex jippermetti espansjoni faċli ta 'mappa Sass partikolari, iżda jiġi għall-ispiża li tagħmel it- tneħħija ta ' oġġetti minn mappa kemmxejn aktar diffiċli.

Ibdel il-mappa

Biex timmodifika kulur eżistenti fil- $theme-colorsmappa tagħna, żid dan li ġej mal-fajl Sass tad-dwana tiegħek:

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

Żid mal-mappa

Biex iżżid kulur ġdid ma' $theme-colors, żid iċ-ċavetta u l-valur il-ġdid:

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

Neħħi mill-mappa

Biex tneħħi kuluri minn $theme-colors, jew minn kwalunkwe mappa oħra, uża map-remove. Kun konxju li trid daħħalha bejn ir-rekwiżiti u l-għażliet tagħna:

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

Ċwievet meħtieġa

Bootstrap jassumi l-preżenza ta 'xi ċwievet speċifiċi fi ħdan il-mapep Sass kif użajna u testendi dawn aħna stess. Hekk kif tippersonalizza l-mapep inklużi, tista’ tiltaqa’ ma’ żbalji fejn tkun qed tintuża ċavetta speċifika ta’ mappa Sass.

Pereżempju, nużaw iċ- ċwievet primary, success, u minn għal links, buttuni u stati tal-formola. Is-sostituzzjoni tal-valuri ta 'dawn iċ-ċwievet m'għandha tippreżenta l-ebda problemi, iżda t-tneħħija tagħhom tista' tikkawża problemi ta 'kumpilazzjoni ta' Sass. F'dawn il-każijiet, ikollok bżonn timmodifika l-kodiċi Sass li jagħmel użu minn dawk il-valuri.danger$theme-colors

Funzjonijiet

Bootstrap tutilizza diversi funzjonijiet Sass, iżda subsett biss huma applikabbli għat-tema ġenerali. Inkludejna tliet funzjonijiet biex niksbu valuri mill-mapep tal-kuluri:

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

Dawn jippermettulek tagħżel kulur wieħed minn mappa ta' Sass ħafna bħal kif tuża varjabbli tal-kulur minn v3.

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

Għandna wkoll funzjoni oħra biex niksbu livell partikolari ta 'kulur mill- $theme-colorsmappa. Valuri tal-livell negattivi se jħaffu l-kulur, filwaqt li livelli ogħla jiskuraw.

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

Fil-prattika, inti ssejjaħ il-funzjoni u tgħaddi żewġ parametri: l-isem tal-kulur minn $theme-colors(eż., primarju jew periklu) u livell numeriku.

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

Funzjonijiet addizzjonali jistgħu jiġu miżjuda fil-futur jew Sass tad-dwana tiegħek biex toħloq funzjonijiet ta 'livell għal mapep Sass addizzjonali, jew saħansitra waħda ġenerika jekk ridt tkun aktar verbose.

Kuntrast tal-kulur

Funzjoni addizzjonali li ninkludu f'Bootstrap hija l-funzjoni tal-kuntrast tal-kulur, color-yiq. Jutilizza l- ispazju tal- kulur YIQ biex jirritorna awtomatikament kulur ta 'kuntrast ċar ( #fff) jew skur ( #111) ibbażat fuq il-kulur bażi speċifikat. Din il-funzjoni hija speċjalment utli għal mixins jew loops fejn qed tiġġenera klassijiet multipli.

Pereżempju, biex tiġġenera kampjuni tal-kulur mill- $theme-colorsmappa tagħna:

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

Jista' jintuża wkoll għal bżonnijiet ta' kuntrast ta' darba:

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

Tista' wkoll tispeċifika kulur bażi bil-funzjonijiet tagħna tal-mappa tal-kulur:

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

Ħarab SVG

Aħna nużaw il- escape-svgfunzjoni biex naħarbu l- <, >u l- #karattri għal stampi fl-isfond SVG. Dawn il-karattri jeħtieġ li jinħarbu biex jirrendu sew l-immaġini fl-isfond fl-IE.

Żid u Naqqas il-funzjonijiet

Aħna nużaw il- funzjonijiet addu subtractbiex nagħlaq il-funzjoni CSS calc. L-għan primarju ta 'dawn il-funzjonijiet huwa li jiġu evitati żbalji meta 0valur "mingħajr unità" jiġi mgħoddi calcf'espressjoni. Espressjonijiet bħal calc(10px - 0)dawn jirritornaw żball fil-browsers kollha, minkejja li huma matematikament korretti.

Eżempju fejn il-calc huwa validu:

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

Eżempju fejn il-calc huwa invalidu:

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

Għażliet Sass

Ippersonalizza Bootstrap 4 bil-fajl tal-varjabbli tad-dwana integrat tagħna u taqleb faċilment il-preferenzi CSS globali ma ' $enable-*varjabbli Sass ġodda. Ikkalkola l-valur ta' varjabbli u kompila mill-ġdid ma' npm run testkif meħtieġ.

Tista' ssib u tippersonalizza dawn il-varjabbli għal għażliet globali ewlenin fil- scss/_variables.scssfajl ta' Bootstrap.

Varjabbli	Valuri	Deskrizzjoni
`$spacer`	`1rem`(default), jew kwalunkwe valur > 0	Jispeċifika l-valur default spacer biex b'mod programmatiku jiġġenera l- utilitajiet spacer tagħna .
`$enable-rounded`	`true`(default) jew`false`	Jippermetti stili predefiniti `border-radius`fuq diversi komponenti.
`$enable-shadows`	`true`jew `false`(default)	Jippermetti stili predefiniti `box-shadow`fuq diversi komponenti.
`$enable-gradients`	`true`jew `false`(default)	Jippermetti gradjenti predefiniti permezz ta ' `background-image`stili fuq diversi komponenti.
`$enable-transitions`	`true`(default) jew`false`	Jippermetti `transition`s predefiniti fuq komponenti varji.
`$enable-prefers-reduced-motion-media-query`	`true`(default) jew`false`	Jippermetti l `prefers-reduced-motion`-interrogazzjoni tal-midja , li trażżan ċerti animazzjonijiet/tranżizzjonijiet ibbażati fuq il-preferenzi tal-browser/sistema operattiva tal-utenti.
`$enable-hover-media-query`	`true`jew `false`(default)	Deprecated
`$enable-grid-classes`	`true`(default) jew`false`	Jippermetti l-ġenerazzjoni ta' klassijiet CSS għas-sistema tal-grilja (eż., `.container`, `.row`, `.col-md-1`, eċċ.).
`$enable-caret`	`true`(default) jew`false`	Jippermetti psewdo element caret fuq `.dropdown-toggle`.
`$enable-pointer-cursor-for-buttons`	`true`(default) jew`false`	Żid il-cursor tal-"idejn" ma' elementi tal-buttuni mhux b'diżabilità.
`$enable-print-styles`	`true`(default) jew`false`	Jippermetti stili għall-ottimizzazzjoni tal-istampar.
`$enable-responsive-font-sizes`	`true`jew `false`(default)	Jippermetti daqsijiet tat-tipa li jirrispondu .
`$enable-validation-icons`	`true`(default) jew`false`	Jippermetti `background-image`ikoni fi ħdan inputs testwali u xi forom tad-dwana għal stati ta 'validazzjoni.
`$enable-deprecation-messages`	`true`jew `false`(default)	Issettja għal `true`biex turi twissijiet meta tuża kwalunkwe mixins u funzjonijiet deprecati li huma ppjanati li jitneħħew fi `v5`.

Kulur

Ħafna mid-diversi komponenti u utilitajiet ta' Bootstrap huma mibnija permezz ta' serje ta' kuluri definiti f'mappa Sass. Din il-mappa tista' tiġi miġbura f'Sass biex tiġġenera malajr serje ta' settijiet ta' regoli.

Kuluri kollha

Il-kuluri kollha disponibbli f'Bootstrap 4, huma disponibbli bħala varjabbli Sass u mappa Sass fil- scss/_variables.scssfajl. Dan se jiġi estiż f'rilaxxi minuri sussegwenti biex jiżdiedu sfumaturi addizzjonali, bħall- paletta ta 'skala griża li diġà nkludu.

Blu

Indigo

Vjola

Roża

aħmar

Oranġjo

Isfar

Aħdar

Teal

Ċjan

Hawn kif tista' tuża dawn fis-Sass tiegħek:

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

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

Klassijiet ta 'utilità tal-kulur huma wkoll disponibbli għall-issettjar coloru background-color.

Fil-futur, aħna ser nimmiraw li nipprovdu mapep u varjabbli Sass għal sfumaturi ta 'kull kulur kif għamilna bil-kuluri fuq skala griża hawn taħt.

Kuluri tat-tema

Aħna nużaw subsett tal-kuluri kollha biex noħolqu paletta tal-kuluri iżgħar għall-ġenerazzjoni ta 'skemi ta' kuluri, disponibbli wkoll bħala varjabbli Sass u mappa Sass fil- scss/_variables.scssfajl ta 'Bootstrap.

Primarja

Sekondarja

Suċċess

Periklu

Twissija

Info

Dawl

Dlam

Griżi

Sett espansiv ta 'varjabbli griż u mappa Sass scss/_variables.scssgħal sfumaturi ta' griż konsistenti fil-proġett tiegħek. Innota li dawn huma "griżi kesħin", li għandhom tendenza lejn ton blu sottili, aktar milli griżi newtrali.

100

200

300

400

500

600

700

800

900

Fi ħdan scss/_variables.scss, issib il-varjabbli tal-kulur ta' Bootstrap u l-mappa ta' Sass. Hawn eżempju tal- $colorsmappa Sass:

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

Żid, neħħi jew immodifika valuri fil-mappa biex taġġorna kif jintużaw f'ħafna komponenti oħra. Sfortunatament f'dan iż-żmien, mhux kull komponent juża din il-mappa Sass. Aġġornamenti futuri se jagħmlu ħilithom biex itejbu dan. Sa dakinhar, ippjana li tagħmel użu mill- ${color}varjabbli u din il-mappa Sass.

Komponenti

Ħafna mill-komponenti u l-utilitajiet ta 'Bootstrap huma mibnija @eachb'linji li jtennu fuq mappa Sass. Dan huwa speċjalment utli għall-ġenerazzjoni ta 'varjanti ta' komponent minn tagħna $theme-colorsu l-ħolqien ta 'varjanti li jirrispondu għal kull breakpoint. Hekk kif tippersonalizza dawn il-mapep Sass u tikkompila mill-ġdid, awtomatikament tara l-bidliet tiegħek riflessi f'dawn il-linji.

Modifikaturi

Ħafna mill-komponenti ta' Bootstrap huma mibnija b'approċċ ta' klassi ta' modifikatur bażi. Dan ifisser li l-biċċa l-kbira tal-grafika tinsab għal klassi bażi (eż, .btn) filwaqt li l-varjazzjonijiet tal-istil huma limitati għal klassijiet ta 'modifikatur (eż, .btn-danger). Dawn il-klassijiet modifikaturi huma mibnija mill- $theme-colorsmappa biex jagħmlu customizing in-numru u l-isem tal-klassijiet modifikatur tagħna.

Hawn żewġ eżempji ta 'kif aħna loop fuq il- $theme-colorsmappa biex niġġeneraw modifikaturi għall- .alertkomponent u l- .bg-*utilitajiet kollha ta' l-isfond tagħna.

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

Jirrispondi

Dawn il-linji Sass mhumiex limitati għal mapep tal-kulur, lanqas. Tista 'wkoll tiġġenera varjazzjonijiet li jirrispondu tal-komponenti jew l-utilitajiet tiegħek. Ħu pereżempju l-utilitajiet tal-allinjament tat-test li jirrispondu tagħna fejn aħna nħalltu @eachloop għall- $grid-breakpointsmappa Sass b'mistoqsija tal-midja tinkludi.

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

Jekk ikollok bżonn timmodifika tiegħek $grid-breakpoints, il-bidliet tiegħek se japplikaw għal-linji kollha li jirrepetu fuq dik il-mappa.

Varjabbli CSS

Bootstrap 4 jinkludi madwar żewġ tużżani proprjetajiet personalizzati CSS (varjabbli) fis-CSS ikkumpilat tiegħu. Dawn jipprovdu aċċess faċli għal valuri użati b'mod komuni bħall-kuluri tat-temi, il-punti ta' waqfien, u l-munzell ta' font primarji tagħna meta taħdem fl-Ispettur tal-browser tiegħek, sandbox tal-kodiċi, jew prototipi ġenerali.

Varjabbli disponibbli

Hawn huma l-varjabbli li ninkludu (innota li :roothija meħtieġa). Huma jinsabu fil- _root.scssfajl tagħna.

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

Eżempji

Il-varjabbli tas-CSS joffru flessibilità simili għall-varjabbli ta' Sass, iżda mingħajr il-ħtieġa ta' kumpilazzjoni qabel ma jiġu moqdija lill-browser. Pereżempju, hawnhekk qed nissettjaw mill-ġdid il-font tal-paġna tagħna u l-istili tal-link b'varjabbli CSS.

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

Varjabbli ta' breakpoint

Filwaqt li oriġinarjament inkludejna breakpoints fil-varjabbli tas-CSS tagħna (eż, --breakpoint-md), dawn mhumiex appoġġjati f'mistoqsijiet tal-midja , iżda xorta jistgħu jintużaw fi ħdan settijiet ta' regoli f'mistoqsijiet tal-midja. Dawn il-varjabbli tal-breakpoint jibqgħu fis-CSS ikkumpilat għal kompatibilità b'lura peress li jistgħu jiġu utilizzati minn JavaScript. Tgħallem aktar fl-ispeċifikazzjonijiet .

Hawn eżempju ta ' dak li mhux appoġġjat:

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

U hawn eżempju ta ' dak li huwa appoġġjat:

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