Source

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ë. Në versionin tonë, ne kemi rritur saktësinë e rrumbullakosjes Sass në 6 (si parazgjedhje është 5) për të parandaluar problemet me rrumbullakimin e shfletuesit.

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

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

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 4 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ë variabël tashmë është caktuar, atëherë 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.

Anulimet e variablave brenda të njëjtit skedar Sass mund të vijnë para ose pas variablave të paracaktuar. Megjithatë, kur anashkaloni skedarët Sass, zëvendësimet tuaja duhet të vijnë përpara se të importoni skedarët Sass të Bootstrap.

Këtu është një shembull që ndryshon background-colordhe colorpër <body>kur importoni dhe përpiloni Bootstrap përmes npm:

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

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

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, apo edhe një të përgjithshme nëse dëshironi të jeni më të folur.

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 miksin ose lak 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.

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.

E ndryshueshme	Vlerat	Përshkrim
`$spacer`	`1rem`(e parazgjedhur), ose çdo vlerë > 0	Përcakton vlerën e paracaktuar të ndarësit për të gjeneruar programatikisht shërbimet tona të ndarjes .
`$enable-rounded`	`true`(e parazgjedhur) ose`false`	Aktivizon `border-radius`stilet e paracaktuara në komponentë të ndryshëm.
`$enable-shadows`	`true`ose `false`(e parazgjedhur)	Aktivizon `box-shadow`stilet e paracaktuara në komponentë të ndryshëm.
`$enable-gradients`	`true`ose `false`(e parazgjedhur)	Aktivizon gradientët e paracaktuar nëpërmjet `background-image`stileve në komponentë të ndryshëm.
`$enable-transitions`	`true`(e parazgjedhur) ose`false`	Aktivizon `transition`s të paracaktuara në komponentë të ndryshëm.
`$enable-prefers-reduced-motion-media-query`	`true`(e parazgjedhur) ose`false`	Aktivizon `prefers-reduced-motion`pyetjen e medias , e cila shtyp animacione/tranzicione të caktuara bazuar në preferencat e shfletuesit/sistemit operativ të përdoruesve.
`$enable-hover-media-query`	`true`ose `false`(e parazgjedhur)	I zhvlerësuar
`$enable-grid-classes`	`true`(e parazgjedhur) ose`false`	Mundëson gjenerimin e klasave CSS për sistemin e rrjetit (p.sh., `.container`, `.row`, `.col-md-1`etj.).
`$enable-caret`	`true`(e parazgjedhur) ose`false`	Aktivizon përshkrimin e pseudo elementit në `.dropdown-toggle`.
`$enable-pointer-cursor-for-buttons`	`true`(e parazgjedhur) ose`false`	Shtoni kursorin "dora" te elementët e butonit jo të çaktivizuar.
`$enable-print-styles`	`true`(e parazgjedhur) ose`false`	Aktivizon stilet për optimizimin e printimit.
`$enable-responsive-font-sizes`	`true`ose `false`(e parazgjedhur)	Aktivizon madhësitë e përgjegjshme të shkronjave .
`$enable-validation-icons`	`true`(e parazgjedhur) ose`false`	Aktivizon `background-image`ikonat brenda hyrjeve tekstuale dhe disa forma të personalizuara për gjendjet e vërtetimit.
`$enable-deprecation-messages`	`true`ose `false`(e parazgjedhur)	Cakto në `true`për të shfaqur paralajmërimet kur përdorni ndonjë prej mikseve dhe funksioneve të vjetruara që janë planifikuar të hiqen në `v5`.

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

Blu

Lejla

Vjollcë

Rozë

E kuqe

portokalli

E verdhe

E gjelbër

Teal

Cyan

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.

Në të ardhmen, ne do të synojmë të ofrojmë harta dhe variabla Sass për nuancat e çdo ngjyre, siç kemi bërë me ngjyrat e grisë më poshtë.

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.

fillore

E mesme

Sukses

Rrezik

Paralajmërim

Informacion

Drita

E errët

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.

100

200

300

400

500

600

700

800

900

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 reaguese 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) me porosi të 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", 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);
  }
}