Theming Bootstrap

Personalizoni Bootstrap 4 me variablat tona të reja të integruara Sass për preferencat globale të stilit për ndryshime të lehta të temave dhe komponentëve.

Prezantimi

Në Bootstrap 3, tematika u drejtua kryesisht nga zëvendësimet e variablave në LESS, CSS me porosi dhe një fletë stili të veçantë të temave që ne përfshimë në distskedarët tanë. Me disa përpjekje, mund të ridizajnoni plotësisht pamjen e Bootstrap 3 pa prekur skedarët bazë. Bootstrap 4 ofron një qasje të njohur, por paksa të ndryshme.

Tani, tematika realizohet nga variablat Sass, hartat Sass dhe CSS me porosi. Nuk ka më fletë stili të dedikuar për temën; në vend të kësaj, mund të aktivizoni temën e integruar për të shtuar gradientë, hije dhe më shumë.

Sass

Përdorni skedarët tanë burimor Sass për të përfituar nga variablat, hartat, përzierjet dhe më shumë kur përpiloni Sass duke përdorur linjën tuaj të aseteve.

Struktura e skedarit

Kurdoherë që është e mundur, shmangni modifikimin e skedarëve bazë të Bootstrap. Për Sass, kjo do të thotë të krijoni fletën tuaj të stilit që importon Bootstrap në mënyrë që të mund ta modifikoni dhe zgjeroni atë. Duke supozuar se po përdorni një menaxher paketash si npm, do të keni një strukturë skedari që duket si kjo:

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

Nëse keni shkarkuar skedarët tanë burimor dhe nuk jeni duke përdorur një menaxher paketash, do të dëshironi të konfiguroni manualisht diçka të ngjashme me atë strukturë, duke i mbajtur skedarët burimor të Bootstrap të ndara nga tuajat.

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

Importimi

Në tuaj custom.scss, ju do të importoni skedarët burimor Sass të Bootstrap. Ju keni dy opsione: përfshini të gjithë Bootstrap, ose zgjidhni pjesët që ju nevojiten. Ne inkurajojmë këtë të fundit, megjithëse kini parasysh se ka disa kërkesa dhe varësi në të gjithë komponentët tanë. Ju gjithashtu do të duhet të përfshini disa JavaScript për shtojcat tona.

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

Me këtë konfigurim në vend, mund të filloni të modifikoni cilindo nga variablat dhe hartat Sass në custom.scss. Ju gjithashtu mund të filloni të shtoni pjesë të Bootstrap nën // Optionalseksionin sipas nevojës. Ne sugjerojmë përdorimin e pirgut të plotë të importit nga bootstrap.scssskedari ynë si pikënisje.

Standardet e ndryshueshme

Çdo variabël Sass në Bootstrap përfshin !defaultflamurin që ju lejon të anashkaloni vlerën e paracaktuar të ndryshores në Sass-in tuaj pa modifikuar kodin burimor të Bootstrap. Kopjoni dhe ngjitni variablat sipas nevojës, modifikoni vlerat e tyre dhe hiqni !defaultflamurin. Nëse një ndryshore është caktuar tashmë, atëherë ajo nuk do të ricaktohet nga vlerat e paracaktuara në Bootstrap.

Ju do të gjeni listën e plotë të variablave të Bootstrap në scss/_variables.scss. Disa variabla janë vendosur në null, këto variabla nuk e nxjerrin veçorinë nëse nuk janë anashkaluar në konfigurimin tuaj.

Mbështetjet e variablave duhet të vijnë pasi të importohen funksionet, variablat dhe miksat tona, por përpara pjesës tjetër të importeve.

Këtu është një shembull që ndryshon background-colordhe colorpër <body>kur importoni dhe përpiloni Bootstrap përmes 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

Përsëriteni sipas nevojës për çdo variabël në Bootstrap, duke përfshirë opsionet globale më poshtë.

Hartat dhe sythe

Bootstrap 4 përfshin një sërë hartash Sass, çifte të vlerave kryesore që e bëjnë më të lehtë gjenerimin e familjeve të CSS të lidhura. Ne përdorim hartat Sass për ngjyrat tona, pikat e ndarjes së rrjetit dhe më shumë. Ashtu si variablat Sass, të gjitha hartat Sass përfshijnë !defaultflamurin dhe mund të anashkalohen dhe zgjerohen.

Disa nga hartat tona Sass janë shkrirë në ato boshe si parazgjedhje. Kjo është bërë për të lejuar zgjerimin e lehtë të një harte të caktuar Sass, por vjen me koston e heqjes së artikujve nga një hartë pak më e vështirë.

Modifiko hartën

Për të modifikuar një ngjyrë ekzistuese në $theme-colorshartën tonë, shtoni sa vijon në skedarin tuaj të personalizuar Sass:

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

Shto në hartë

Për të shtuar një ngjyrë të re në $theme-colors, shtoni çelësin dhe vlerën e re:

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

Hiq nga harta

Për të hequr ngjyrat nga $theme-colors, ose ndonjë hartë tjetër, përdorni map-remove. Kini parasysh se duhet ta futni atë midis kërkesave dhe opsioneve tona:

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

Çelësat e kërkuar

Bootstrap supozon praninë e disa çelësave specifikë brenda hartave Sass pasi i kemi përdorur dhe i zgjerojmë vetë. Ndërsa personalizoni hartat e përfshira, mund të hasni gabime kur përdoret një çelës specifik i hartës Sass.

Për shembull, ne përdorim çelësat primary, success, dhe dangernga $theme-colorspër lidhjet, butonat dhe gjendjet e formës. Zëvendësimi i vlerave të këtyre çelësave nuk duhet të paraqesë probleme, por heqja e tyre mund të shkaktojë probleme me përpilimin e Sass. Në këto raste, do t'ju duhet të modifikoni kodin Sass që i përdor ato vlera.

Funksione

Bootstrap përdor disa funksione Sass, por vetëm një nëngrup është i zbatueshëm për tematikën e përgjithshme. Ne kemi përfshirë tre funksione për marrjen e vlerave nga hartat me ngjyra:

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

Këto ju lejojnë të zgjidhni një ngjyrë nga një hartë Sass, ashtu si do të përdorni një variabël ngjyrash nga v3.

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

Ne gjithashtu kemi një funksion tjetër për marrjen e një niveli të caktuar ngjyre nga $theme-colorsharta. Vlerat e nivelit negativ do të ndriçojnë ngjyrën, ndërsa nivelet më të larta do të errësohen.

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

Në praktikë, ju do të thërrisni funksionin dhe do të kaloni në dy parametra: emrin e ngjyrës nga $theme-colors(p.sh., primare ose rrezik) dhe një nivel numerik.

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

Funksione shtesë mund të shtohen në të ardhmen ose Sass-i juaj i personalizuar për të krijuar funksione të nivelit për harta shtesë Sass, ose edhe një të përgjithshme nëse dëshironi të jeni më të përfolur.

Kontrasti i ngjyrave

Një funksion shtesë që ne përfshijmë në Bootstrap është funksioni i kontrastit të ngjyrave, color-yiq. Ai përdor hapësirën e ngjyrave YIQ për të kthyer automatikisht një ngjyrë kontrasti të lehtë ( #fff) ose të errët ( #111) bazuar në ngjyrën bazë të specifikuar. Ky funksion është veçanërisht i dobishëm për miksat ose loop-et ku jeni duke gjeneruar klasa të shumta.

Për shembull, për të gjeneruar mostra me ngjyra nga $theme-colorsharta jonë:

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

Mund të përdoret gjithashtu për nevoja të njëhershme të kontrastit:

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

Ju gjithashtu mund të specifikoni një ngjyrë bazë me funksionet tona të hartës së ngjyrave:

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

Ik SVG

Ne përdorim escape-svgfunksionin për t'i shpëtuar <, >dhe #karakteret për imazhet e sfondit SVG. Këta karaktere duhet të shmangen për të paraqitur siç duhet imazhet e sfondit në IE. Kur përdorni escape-svgfunksionin, URI-të e të dhënave duhet të citohen.

Funksionet e mbledhjes dhe zbritjes

Ne përdorim funksionet adddhe subtractpër të mbështjellë calcfunksionin CSS. Qëllimi kryesor i këtyre funksioneve është të shmangin gabimet kur një 0vlerë "pa njësi" kalohet në një calcshprehje. Shprehjet si calc(10px - 0)do të kthejnë një gabim në të gjithë shfletuesit, pavarësisht se janë matematikisht të sakta.

Shembull ku llogaritja është e vlefshme:

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

Shembull ku llogaritja është e pavlefshme:

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

Opsionet sass

Personalizoni Bootstrap 4 me skedarin tonë të integruar të variablave të personalizuar dhe ndërroni lehtësisht preferencat globale të CSS me $enable-*variablat e rinj Sass. Anuloni vlerën e një ndryshoreje dhe ripërpiloni npm run testsipas nevojës.

Ju mund t'i gjeni dhe personalizoni këto variabla për opsionet kryesore globale në scss/_variables.scssskedarin e Bootstrap.

Ngjyrë

Shumë nga komponentët dhe shërbimet e ndryshme të Bootstrap janë ndërtuar përmes një serie ngjyrash të përcaktuara në një hartë Sass. Kjo hartë mund të vendoset në Sass për të gjeneruar shpejt një seri rregullash.

Të gjitha ngjyrat

Të gjitha ngjyrat e disponueshme në Bootstrap 4, janë të disponueshme si variabla Sass dhe një hartë Sass në scss/_variables.scssskedar. Kjo do të zgjerohet në publikimet e vogla të mëvonshme për të shtuar nuanca shtesë, njësoj si paleta e shkallës gri që kemi përfshirë tashmë.

Ja se si mund t'i përdorni këto në Sass tuaj:

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

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

Klasat e përdorimit të ngjyrave janë gjithashtu të disponueshme për vendosjen colordhe background-color.

Ngjyrat e temave

Ne përdorim një nëngrup të të gjitha ngjyrave për të krijuar një gamë më të vogël ngjyrash për gjenerimin e skemave të ngjyrave, të disponueshme gjithashtu si variabla Sass dhe një hartë Sass në scss/_variables.scssskedarin e Bootstrap.

Gritë

Një grup i gjerë variablash gri dhe një hartë Sass scss/_variables.scsspër nuancat e qëndrueshme të grisë në projektin tuaj. Vini re se këto janë "gri të ftohta", të cilat priren drejt një toni delikate blu, në vend të grive neutrale.

Brenda scss/_variables.scss, do të gjeni variablat e ngjyrave të Bootstrap dhe hartën Sass. Këtu është një shembull i $colorshartës 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;

Shtoni, hiqni ose modifikoni vlerat brenda hartës për të përditësuar mënyrën se si ato përdoren në shumë komponentë të tjerë. Fatkeqësisht në këtë kohë, jo çdo komponent e përdor këtë hartë Sass. Përditësimet e ardhshme do të përpiqen ta përmirësojnë këtë. Deri atëherë, planifikoni të përdorni ${color}variablat dhe këtë hartë Sass.

Komponentët

Shumë nga komponentët dhe shërbimet e Bootstrap janë ndërtuar me @eachsythe që përsëriten mbi një hartë Sass. Kjo është veçanërisht e dobishme për gjenerimin e varianteve të një komponenti nga ana jonë $theme-colorsdhe krijimin e varianteve të përgjegjshme për çdo pikë ndërprerjeje. Ndërsa personalizoni këto harta Sass dhe ripërpiloni, do të shihni automatikisht ndryshimet tuaja të pasqyruara në këto sythe.

Modifikuesit

Shumë nga komponentët e Bootstrap janë ndërtuar me një qasje të klasës së modifikuesit bazë. Kjo do të thotë se pjesa më e madhe e stilimit përmbahet në një klasë bazë (p.sh., .btn) ndërsa variacionet e stilit kufizohen në klasa modifikuese (p.sh., .btn-danger). Këto klasa modifikuesi janë ndërtuar nga $theme-colorsharta për të bërë personalizimin e numrit dhe emrit të klasave tona të modifikuesve.

Këtu janë dy shembuj se si ne kalojmë në $theme-colorshartë për të gjeneruar modifikues të .alertkomponentit dhe të gjitha .bg-*shërbimeve tona të sfondit.

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

Të përgjegjshme

Këto sythe Sass nuk kufizohen as në hartat me ngjyra. Ju gjithashtu mund të gjeneroni variacione të përgjegjshme të komponentëve ose shërbimeve tuaja. Merrni për shembull shërbimet tona të përgjegjshme të shtrirjes së tekstit ku ne përziejmë një @eachlak për $grid-breakpointshartën Sass me një pyetje mediatike.

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

Nëse keni nevojë të modifikoni $grid-breakpoints, ndryshimet tuaja do të zbatohen për të gjitha unazat që përsëriten mbi atë hartë.

Variablat CSS

Bootstrap 4 përfshin rreth dy duzina veti (variabla) të personalizuara CSS në CSS-në e tij të përpiluar. Këto sigurojnë qasje të lehtë në vlerat e përdorura zakonisht si ngjyrat e temave tona, pikat e ndërprerjes dhe grupet kryesore të shkronjave kur punoni në Inspektorin e shfletuesit tuaj, një kuti rërë kodi ose prototipi të përgjithshëm.

Variablat e disponueshëm

Këtu janë variablat që përfshijmë (vini re se :rootkërkohet). Ato gjenden në _root.scssdosjen tonë.

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

Shembuj

Variablat CSS ofrojnë fleksibilitet të ngjashëm me variablat e Sass, por pa nevojën për përpilim përpara se të shërbehen në shfletues. Për shembull, këtu po rivendosim stilet e shkronjave dhe lidhjeve të faqes sonë me variabla CSS.

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

Variablat e pikës së ndërprerjes

Ndërsa fillimisht ne kemi përfshirë pikat e ndërprerjes në variablat tona CSS (p.sh., --breakpoint-md), këto nuk mbështeten në pyetjet e medias , por ato mund të përdoren ende brenda grupeve të rregullave në pyetjet e medias. Këto variabla të pikës së ndërprerjes mbeten në CSS të përpiluar për pajtueshmërinë e prapambetur duke qenë se ato mund të përdoren nga JavaScript. Mësoni më shumë në specifikimet .

Këtu është një shembull i asaj që nuk mbështetet:

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

Dhe këtu është një shembull i asaj që mbështetet:

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