Source

Omulamwa Bootstrap

Customize Bootstrap 4 n'enkyukakyuka zaffe empya eza Sass ezizimbibwamu okusobola okwettanira sitayiro y'ensi yonna okusobola okwanguyiza omulamwa n'okukyusa ebitundu.

Okwanjula

Mu Bootstrap 3, theming yasinga kuvugirwa variable overrides mu LESS, custom CSS, ne theme stylesheet ey’enjawulo gye twassaamu mu distfayiro zaffe. Nga waliwo okufuba, omuntu asobola okuddamu okukola ddala endabika ya Bootstrap 3 nga takwata ku fayiro enkulu. Bootstrap 4 ekuwa enkola emanyiddwa, naye nga ya njawulo katono.

Kati, theming etuukirira nga Sass variables, Sass maps, ne custom CSS. Tewali stylesheet ya mulamwa ekyali yeewaddeyo; mu kifo ky’ekyo, osobola okusobozesa omulamwa oguzimbibwamu okwongerako gradients, shadows, n’ebirala.

Sass nga bwe kiri

Kozesa fayiro zaffe eza Sass ez'ensibuko okweyambisa enkyukakyuka, maapu, mixins, n'ebirala.

Ensengeka ya fayiro

Buli lwe kiba kisoboka, weewale okukyusa fayiro za Bootstrap enkulu. Ku Sass, ekyo kitegeeza okukola stylesheet yo eyingiza Bootstrap osobole okugikyusa n’okugigaziya. Nga tufudde nti okozesa package manager nga npm, ojja kuba n'ensengeka ya fayiro eringa eno:

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

Bw’oba owanula fayiro zaffe ez’ensibuko era nga tokozesa muddukanya package, ojja kwagala okuteekawo mu ngalo ekintu ekifaananako n’ensengeka eyo, okukuuma fayiro z’ensibuko za Bootstrap nga zaawukana ku zo.

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

Okuyingiza ebintu mu ggwanga

Mu custom.scss, ojja kuyingiza fayiro za Bootstrap ez'ensibuko Sass. Olina engeri bbiri: ssaamu byonna ebya Bootstrap, oba londa ebitundu by’olina. Tukubiriza eky’oluvannyuma, wadde nga kimanye nti waliwo ebyetaago ebimu n’okwesigamira mu bitundu byaffe byonna. Era ojja kwetaaga okussaamu JavaScript ezimu ku plugins zaffe.

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

Nga ensengeka eyo eri mu kifo, osobola okutandika okukyusa ekintu kyonna ku nkyukakyuka za Sass ne maapu mu custom.scss. Osobola n’okutandika okwongera ebitundu bya Bootstrap wansi // Optionalw’ekitundu nga bwe kyetaagisa. Tukuwa amagezi okukozesa omutambi gw'okuyingiza mu bujjuvu okuva mu bootstrap.scssfayiro yaffe ng'entandikwa yo.

Enkyukakyuka ezisookerwako

Buli nkyukakyuka ya Sass mu Bootstrap 4 erimu !defaultbendera ekusobozesa okusazaamu omuwendo gw’enkyukakyuka ogusookerwako mu Sass yo nga tokyusizza nsibuko ya Bootstrap. Koppa era oteeke enkyukakyuka nga bwe kyetaagisa, kyusa emiwendo gyazo, era oggyewo !defaultbendera. Singa enkyukakyuka eba yaweebwa dda, olwo tejja kuddamu kuweebwa miwendo egy'enjawulo mu Bootstrap.

Ojja kusanga olukalala lw'enkyukakyuka za Bootstrap mu bujjuvu mu scss/_variables.scss.

Okusazaamu enkyukakyuka munda mu fayiro ya Sass y’emu kuyinza okujja nga enkyukakyuka ezisookerwako oba oluvannyuma lw’enkyukakyuka ezisookerwako. Naye, nga okyusa mu fayiro za Sass zonna, okusazaamu kwo kulina okujja nga tonnayingiza fayiro za Sass eza Bootstrap.

Wano waliwo ekyokulabirako ekikyusa background-colorne colorfor the <body>nga oyingiza n'okukung'aanya Bootstrap okuyita mu npm:

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

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

Ddamu nga bwe kyetaagisa ku nkyukakyuka yonna mu Bootstrap, nga mw'otwalidde n'enkola z'ensi yonna wansi.

Maapu ne loopu

Bootstrap 4 erimu maapu za Sass ntono, ebisumuluzo ebibiri ebiyamba okukola amaka ga CSS ekwatagana. Tukozesa maapu za Sass ku langi zaffe, ebifo ebikutukamu giridi, n’ebirala. Nga enkyukakyuka za Sass, maapu zonna eza Sass zirimu !defaultbendera era zisobola okukyusibwa n’okugaziwa.

Ezimu ku maapu zaffe eza Sass zigattibwa ne zifuuka empty by default. Kino kikolebwa okusobozesa okugaziya okwangu okwa maapu ya Sass eweereddwa, naye kijja ku muwendo gw’okufuula okuggya ebintu ku maapu okukaluba katono.

Okukyusa mu maapu

Okukyusa langi eriwo mu $theme-colorsmaapu yaffe, yongera bino wammanga ku fayiro yo eya Sass eya bulijjo:

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

Okwongera ku maapu

Okwongera langi empya ku $theme-colors, yongera ku kisumuluzo ekipya n'omuwendo:

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

Ggyawo ku maapu

Okuggya langi ku $theme-colors, oba ku maapu endala yonna, kozesa map-remove. Kimanye nti olina okugiyingiza wakati w'ebyetaago byaffe n'eby'okulonda:

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

Ebisumuluzo ebyetaagisa

Bootstrap etwala okubeerawo kw’ebisumuluzo ebimu ebitongole munda mu maapu za Sass nga bwe twakozesa era ne tugaziya bino ffekka. Nga bw’olongoosa maapu ezirimu, oyinza okusanga ensobi ekisumuluzo kya maapu ya Sass ekigere we kikozesebwa.

Okugeza, tukozesa primary, success, dangern’ebisumuluzo okuva $theme-colorsku ku biyungo, obutambi, n’embeera za ffoomu. Okukyusa emiwendo gy'ebisumuluzo bino tekirina kuleeta nsonga yonna, naye okubiggyawo kiyinza okuleeta ensonga z'okukung'aanya kwa Sass. Mu mbeera zino, ojja kwetaaga okukyusa mu koodi ya Sass ekozesa emiwendo egyo.

Emirimu

Bootstrap ekozesa emirimu gya Sass egiwerako, naye subset yokka ekola ku general theming. Tutaddemu emirimu esatu egy'okufuna emiwendo okuva mu maapu za langi:

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

Bino bikusobozesa okulonda langi emu okuva ku maapu ya Sass okufaananako nnyo engeri gye wandikozesezza enkyukakyuka ya langi okuva mu v3.

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

Tulina n’omulimu omulala ogw’okufuna omutendera ogw’enjawulo ogwa langi okuva ku $theme-colorsmaapu. Emiwendo gy’emitendera egy’obubi gijja kutangaaza langi, ate emitendera egy’oku ntikko gijja kuzikiza.

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

Mu nkola, wandiyise omulimu n'oyisa mu parameters bbiri: erinnya lya langi okuva $theme-colors(okugeza, primary oba danger) n'omutendera gw'ennamba.

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

Emirimu emirala giyinza okugattibwako mu biseera eby’omu maaso oba Sass yo eya custom okukola emirimu gy’omutendera ku maapu za Sass ez’enjawulo, oba wadde eya generic singa oba oyagala okubeera verbose ennyo.

Okwawukana kwa langi

Omulimu gumu ogw’enjawulo gwe tussa mu Bootstrap gwe mulimu gw’okulaga enjawulo mu langi, color-yiq. Ekozesa ekifo kya langi ya YIQ okuzzaawo mu ngeri ey’otoma langi ey’enjawulo eyaka ( #fff) oba enzirugavu ( #111) okusinziira ku langi y’omusingi eragiddwa. Omulimu guno gwa mugaso nnyo naddala ku mixins oba loops nga okola classes eziwera.

Okugeza, okukola ebifaananyi bya langi okuva ku $theme-colorsmaapu yaffe:

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

Era esobola okukozesebwa ku byetaago by’enjawulo eby’omulundi gumu:

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

Osobola n'okulaga langi ey'omusingi n'emirimu gyaffe egya maapu ya langi:

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

Sass eby'okulondako

Customize Bootstrap 4 ne fayiro yaffe eya custom variables ezimbiddwamu era okyuse mu ngeri ennyangu CSS preferences z'ensi yonna $enable-*n'enkyukakyuka za Sass empya. Override a variable's value era oddemu okukuŋŋaanya ne npm run testnga bwe kyetaagisa.

Osobola okuzuula n'okulongoosa enkyukakyuka zino ku nkola enkulu ez'ensi yonna mu scss/_variables.scssfayiro ya Bootstrap.

Enkyukakyuka	Empisa	Okunnyonnyola
`$spacer`	`1rem`(ekisookerwako), oba omuwendo gwonna > 0	Elaga omuwendo gwa spacer ogusookerwako okukola mu pulogulaamu ebikozesebwa byaffe ebya spacer .
`$enable-rounded`	`true`(ekisookerwako) oba`false`	Esobozesa `border-radius`emisono egyategekebwa edda ku bitundu eby'enjawulo.
`$enable-shadows`	`true`oba `false`(ekisookerwako) .	Esobozesa `box-shadow`emisono egyategekebwa edda ku bitundu eby'enjawulo.
`$enable-gradients`	`true`oba `false`(ekisookerwako) .	Esobozesa gradients ezitegekeddwa nga ziyita mu `background-image`sitayiro ku bitundu eby'enjawulo.
`$enable-transitions`	`true`(ekisookerwako) oba`false`	Esobozesa `transition`s ezitegekeddwa edda ku bitundu eby’enjawulo.
`$enable-hover-media-query`	`true`oba `false`(ekisookerwako) .	Evudde ku mulembe
`$enable-grid-classes`	`true`(ekisookerwako) oba`false`	Esobozesa okukola ebika bya CSS eby'enkola ya grid (okugeza, `.container`, `.row`, `.col-md-1`, n'ebirala).
`$enable-caret`	`true`(ekisookerwako) oba`false`	Esobozesa ekintu eky'obulimba caret ku `.dropdown-toggle`.
`$enable-print-styles`	`true`(ekisookerwako) oba`false`	Esobozesa emisono egy'okulongoosa okukuba ebitabo.

Langi

Ebitundu bingi ebya Bootstrap eby’enjawulo n’ebikozesebwa bizimbibwa okuyita mu langi eziddiriŋŋana ezitegeezeddwa mu maapu ya Sass. Maapu eno esobola okukolebwako loopu mu Sass okukola amangu omuddirirwa gw’amateeka.

Langi zonna

Langi zonna eziri mu Bootstrap 4, zisangibwa nga Sass variables ne Sass map mu scss/_variables.scssfile. Kino kijja kugaziwa mu bifulumizibwa ebitonotono ebiddako okwongerako ebisiikirize ebirala, okufaananako nnyo ne paleedi ya greyscale gye twassaamu edda.

Bbululu

Indigo

Kakobe

Pinka

Myuufu

Omucumgwa

Kyenvu

Kiragala

Teal

Cyan

Laba engeri gy'oyinza okukozesaamu bino mu Sass yo:

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

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

Ebika by'okukozesa langi nabyo biriwo okuteekawo colorne background-color.

Mu biseera eby’omu maaso, tujja kugenderera okuwa Sass maps ne variables for shades za buli langi nga bwetukoze ne grayscale colors wansi.

Langi z’omulamwa

Tukozesa ekitundu ekitono ekya langi zonna okukola ekipande kya langi ekitono okukola ensengeka za langi, era nga kisangibwa nga enkyukakyuka za Sass ne maapu ya Sass mu scss/_variables.scssfayiro ya Bootstraps.

Pulayimale

Ekyokubiri

Okuyita

Akabi

Okulabula

Info

Koleeza

Ekizikiza

Enzirugavu

Ekibinja ekigazi eky'enkyukakyuka enzirugavu ne maapu ya Sass mu scss/_variables.scssku bisiikirize ebikwatagana eby'enzirugavu okwetoloola pulojekiti yo.

100 nga bwe kiri

200

300

400

500

600

700

800

900

Mu scss/_variables.scss, ojja kusangamu enkyukakyuka za langi za Bootstrap ne maapu ya Sass. Wano waliwo ekyokulabirako kya $colorsmaapu ya 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;

Okwongera, okuggyawo, oba kyusa emiwendo munda mu maapu okutereeza engeri gye gikozesebwamu mu bitundu ebirala bingi. Ebyembi mu kiseera kino, si buli kitundu nti ekozesa maapu eno eya Sass. Ebipya ebigenda okufulumizibwa mu biseera eby’omu maaso bijja kufuba okulongoosa ku kino. Okutuusa olwo, teekateeka okukozesa ${color}enkyukakyuka ne maapu eno eya Sass.

Ebitundu ebikola omubiri

Ebitundu bingi ebya Bootstrap n’ebikozesebwa bizimbibwa ne @eachloopu eziddiŋŋana ku maapu ya Sass. Kino kiyamba naddala okukola enjawulo z’ekitundu nga zaffe $theme-colorsn’okukola enjawulo eziddamu ku buli breakpoint. Nga bw’olongoosa maapu zino eza Sass n’okuddamu okukung’aanya, ojja kulaba enkyukakyuka zo nga zeeyolekera mu loopu zino.

Ebikyusakyusa

Ebitundu bingi ebya Bootstrap bizimbibwa n’enkola ya base-modifier class. Kino kitegeeza nti ekitundu ekinene eky’okukola sitayiro kibeera mu kiraasi ey’omusingi (okugeza, .btn) ate enjawulo za sitayiro zikoma ku kiraasi z’abakyusa (okugeza, .btn-danger). Zino modifier classes zizimbibwa okuva ku $theme-colorsmaapu okukola customizing ennamba n'erinnya lya modifier classes zaffe.

Wano waliwo ebyokulabirako bibiri ku ngeri gye tukola loopu ku $theme-colorsmaapu okukola ebikyusakyusa ku .alertkitundu n’ebikozesebwa byaffe byonna .bg-*eby’emabega.

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

Okuddamu

Zino Sass loops tezikoma ku maapu za langi zokka, era. Osobola n’okukola enjawulo eziddamu ez’ebitundu byo oba ebikozesebwa. Twala okugeza ebikozesebwa byaffe eby’okulaganya ebiwandiiko ebiddamu mwe tutabula @eachloopu ya $grid-breakpointsmaapu ya Sass n’okubuuza kw’emikutu erimu.

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

Singa weetaaga okukyusa $grid-breakpoints, enkyukakyuka zo zijja kukola ku loopu zonna eziddiŋŋana ku maapu eyo.

Enkyukakyuka za CSS

Bootstrap 4 erimu nga daziini bbiri eza CSS custom properties (variables) mu CSS yaayo ekung'aanyiziddwa. Bino biwa ekkubo eryangu eri emiwendo egyakozesebwa ennyo nga langi zaffe ez’omulamwa, ebifo eby’okumenya, n’ebisenge by’empandiika ebisookerwako ng’okola mu Inspector ya bbulawuzi yo, sandbox ya koodi, oba okukola prototyping eya bulijjo.

Enkyukakyuka eziriwo

Wano waliwo enkyukakyuka ze tussaamu (weetegereze nti the :rootyeetaagibwa). Zisangibwa mu _root.scssfayiro yaffe.

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

Eby’okulabirako

Enkyukakyuka za CSS ziwa okukyukakyuka okufaananako n'enkyukakyuka za Sass, naye nga tekyetaagisa kukungaanya nga tezinnaweebwa ku bulawuzi. Okugeza, wano tuddamu okuteekawo efonti y’olupapula lwaffe n’emisono gy’okuyunga n’enkyukakyuka za CSS.

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

Enkyukakyuka za Breakpoint

Wadde nga mu kusooka twassaamu breakpoints mu CSS variables zaffe (okugeza, --breakpoint-md), zino teziwagirwa mu media queries , naye zikyayinza okukozesebwa munda mu rulesets mu media queries. Enkyukakyuka zino ez’okumenya zisigala mu CSS ekung’aanyiziddwa okusobola okukwatagana okudda emabega okusinziira ku ngeri gye zisobola okukozesebwa JavaScript. Ebisingawo bisange mu spec.

Wano waliwo ekyokulabirako ky'ebitawagirwa:

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

Era wano waliwo ekyokulabirako ky'ebyo ebiwagirwa:

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