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 meta tikkompila Sass billi tuża l-pipeline tal-assi tiegħek stess.

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

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

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 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 għandhom jiġu wara li l-funzjonijiet, il-varjabbli u l-mixins tagħna jiġu importati, iżda qabel il-bqija tal-importazzjonijiet.

Hawn eżempju li jibdel l- background-coloru colorgħall- <body>meta jimporta u jikkompila Bootstrap permezz ta' 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

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. Meta tuża l- escape-svgfunzjoni, l-URIs tad-dejta għandhom jiġu kkwotati.

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

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.

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.

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.

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.

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

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