Xihloko xa Bootstrap

Endla Bootstrap 4 hi ku landza swilaveko swa hina leswintshwa swa Sass leswi akiweke eka swihlawulekisi swa xitayili xa misava hinkwayo eka ku olova ka theming na ku cinca ka swiphemu.

Manghenelo

Eka Bootstrap 3, theming yi fambisiwa ngopfu hi ku cinca-cinca ku tlula eka LESS, custom CSS, na xitayili xa theme lexi hambaneke lexi hi xi katseke eka disttifayela ta hina. Hi matshalatshala yo karhi, munhu a nga ha endla hi vuntshwa hi ku helela ndlela leyi Bootstrap 3 yi langutekaka ha yona handle ko khumba tifayela ta nkoka. Bootstrap 4 yi nyika endlelo leri tolovelekeke, kambe leri hambaneke nyana.

Sweswi, theming yi hetisisiwa hi swilo leswi cinca-cincaka swa Sass, mimepe ya Sass, na CSS ya ntolovelo. A ku na xitayili xa theme lexi tinyiketeleke; ematshan’weni ya sweswo, u nga endla leswaku nhloko-mhaka leyi akiweke endzeni yi engetela swirhendzevutana, mindzhuti ni swin’wana.

Sass

Tirhisa tifayela ta hina ta Sass ta xihlovo ku tirhisa swilo leswi cinca-cincaka, mimepe, mixins, na swin’wana. Eka ku aka ka hina hi engeterile ku kongoma ka ku rhendzeleka ka Sass ku ya eka 6 (hi ku tiyimisela i 5) ku sivela swiphiqo swa ku rhendzeleka ka browser.

Xivumbeko xa fayili

Loko swi koteka, papalata ku cinca tifayela ta nkoka ta Bootstrap. Eka Sass, sweswo swi vula ku endla stylesheet ya wena leyi nghenisaka Bootstrap leswaku u ta kota ku yi cinca no yi andlala. Loko hi ehleketa leswaku u tirhisa mufambisi wa phasela ku fana na npm, u ta va na xivumbeko xa fayili lexi langutekaka hi ndlela leyi:

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

Loko u dawunilode tifayela ta hina ta xihlovo naswona u nga tirhisi mufambisi wa tiphasela, u ta lava ku veka hi voko nchumu lowu fanaka ni xivumbeko xexo, u hlayisa tifayela ta xihlovo ta Bootstrap ti hambanile ni ta wena.

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

Ku nghenisa swilo etikweni

Eka custom.scss, u ta nghenisa tifayela ta Sass ta xihlovo xa Bootstrap. U na tindlela timbirhi: katsa hinkwaswo swa Bootstrap, kutani u hlawula swiphemu leswi u swi lavaka. Hi khutaza leswi swo hetelela, hambi leswi tivaka leswaku ku na swilaveko swo karhi na ku titshega eka swiphemu swa hina hinkwaswo. U ta tlhela u lava ku katsa JavaScript yin’wana ya ti-plugin ta hina.

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

Loko setup yoleyo yi ri kona, u nga sungula ku cinca xin’wana ni xin’wana xa swilo leswi cinca-cincaka swa Sass ni mimepe eka custom.scss. U nga ha tlhela u sungula ku engetela swiphemu swa Bootstrap ehansi ka // Optionalxiyenge tanihilaha swi lavekaka hakona. Hi ringanyeta ku tirhisa xithaki xo nghenisa hi ku helela ku suka eka bootstrap.scssfayili ya hina tanihi masungulo ya wena.

Swihlawulekisi leswi cinca-cincaka

Xihlawulekisi xin’wana na xin’wana xa Sass eka Bootstrap 4 xi katsa !defaultmujeko lowu ku pfumelelaka ku tlula nkoka wa xiviri wa xihlawulekisi eka Sass ya wena handle ko cinca khodi ya xihlovo ya Bootstrap. Kopa u tlhela u namarheta swilo leswi cinca-cincaka hilaha swi lavekaka hakona, cinca mimpimo ya swona, ivi u susa !defaultmujeko. Loko xihlawulekisi se xi averiwe, kutani a xi nge he averiwi nakambe hi mimpimo ya ntolovelo eka Bootstrap.

U ta kuma nxaxamelo lowu heleleke wa swilo leswi cinca-cincaka swa Bootstrap eka scss/_variables.scss. Swilo swin’wana leswi cinca-cincaka swi vekiwile eka null, swilo leswi swi nga humesi nhundzu handle ka loko swi tluriwile eka xivumbeko xa wena.

Ku tlula ka swilo leswi cinca-cincaka endzeni ka fayili yin’we ya Sass swi nga ta emahlweni kumbe endzhaku ka swilo leswi cinca-cincaka swa ntolovelo. Kambe, loko u tlula ku tsemakanya tifayela ta Sass, ku tlula ka wena ku fanele ku ta u nga si nghenisa tifayela ta Sass ta Bootstrap.

Hi lexi xikombiso lexi cincaka background-colorna colorxa <body>loko u nghenisa na ku hlengeleta Bootstrap hi ku tirhisa npm:

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

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

Phindha tanihilaha swi lavekaka hakona eka xihlawulekisi xihi na xihi eka Bootstrap, ku katsa na swihlawulekisi swa misava hinkwayo laha hansi.

Mimepe na swirhendzevutana

Bootstrap 4 yi katsa mimepe yitsongo ya Sass, mimpatswa ya nkoka ya nkoka leyi endlaka leswaku swi olova ku tumbuluxa mindyangu ya CSS leyi fambelanaka. Hi tirhisa mimepe ya Sass eka mihlovo ya hina, tindhawu to tshoveka ta gridi ni swin’wana. Ku fana na swilo leswi cinca-cincaka swa Sass, mimepe hinkwayo ya Sass yi katsa !defaultmujeko naswona yi nga ha tluriwa no andlariwa.

Yin’wana ya mimepe ya hina ya Sass yi hlanganisiwa yi va leyi nga riki na nchumu hi ku tiyimisela. Leswi swi endliwa ku pfumelela ku ndlandlamuxiwa ko olova ka mepe wa Sass lowu nyikiweke, kambe swi ta hi ntsengo wo endla leswaku ku susa swilo eka mepe swi tika nyana.

Cinca mepe

Ku cinca muvala lowu nga kona eka $theme-colorsmepe wa hina, engetela leswi landzelaka eka fayili ya wena ya Sass ya ntolovelo:

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

Engetela eka mepe

Ku engetela muvala lowuntshwa eka $theme-colors, engetela xilotlelo lexintshwa ni ntikelo:

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

Susa eka mepe

Ku susa mihlovo eka $theme-colors, kumbe mepe wun’wana ni wun’wana, tirhisa map-remove. Tiva leswaku u fanele ku yi nghenisa exikarhi ka swilaveko swa hina na swihlawulekisi:

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

Swilotlelo leswi lavekaka

Bootstrap yi teka vukona bya swilotlelo swin’wana swo karhi endzeni ka mimepe ya Sass tani hi leswi hi tirhiseke na ku andlala leswi hi hexe. Loko u ri karhi u lulamisa mimepe leyi katsekaka, u nga ha hlangana ni swihoxo laha ku tirhisiwaka xilotlelo xo karhi xa mepe wa Sass.

Hi xikombiso, hi tirhisa primary, success, na dangerswilotlelo leswi humaka $theme-colorseka swihlanganisi, swikomba-nkarhi ni swiyimo swa fomo. Ku cinca mimpimo ya swilotlelo leswi a swi fanelanga ku humesa timhaka, kambe ku swi susa swi nga vanga swiphiqo swa nhlengeleto wa Sass. Eka swiyimo leswi, u ta lava ku cinca khodi ya Sass leyi tirhisaka mimpimo yoleyo.

Mintirho

Bootstrap yi tirhisa mintirho yo hlayanyana ya Sass, kambe i ntlawa lowutsongo ntsena lowu tirhaka eka theming yo angarhela. Hi katsile mintirho yinharhu yo kuma mimpimo eka mimepe ya mihlovo:

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

Leswi swi ku pfumelela ku hlawula muvala wun’we eka mepe wa Sass ku fana swinene na ndlela leyi u nga tirhisaka xihlawulekisi xa muvala ku suka eka v3.

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

Hi tlhela hi va ni ntirho wun’wana wo kuma mpimo wo karhi wa muvala eka $theme-colorsmepe. Mimpimo ya levele yo biha yita voningela muvala, kasi ti levele tale henhla tita endla ntima.

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

Hi ku tirhisa, u ta vitana ntirho ivi u hundza eka tipharamitha timbirhi: vito ra muvala ku suka eka $theme-colors(xikombiso, xa le henhla kumbe xa khombo) na xiyimo xa tinhlayo.

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

Mintirho yo engetela yi nga engeteriwa enkarhini lowu taka kumbe Sass ya wena ya ntolovelo ku tumbuluxa mintirho ya xiyimo xa mimepe yo engetela ya Sass, kumbe hambi ku ri ya xivumbeko xa le henhla loko u lava ku va na marito yo tala.

Ku hambana ka mihlovo

Ntirho wun’wana lowu hi wu katsaka eka Bootstrap i ntirho wa ku hambana ka mihlovo, color-yiq. Yi tirhisa ndhawu ya mihlovo ya YIQ ku vuyisa hi yoxe muvala wo hambana wo vonakala ( #fff) kumbe wa ntima ( #111) lowu sekeriweke eka muvala wa le hansi lowu boxiweke. Ntirho lowu wu pfuna ngopfu eka ti mixins kumbe ti loops laha u humesaka ti class to tala.

Hi xikombiso, ku endla swifaniso swa mihlovo ku suka eka $theme-colorsmepe wa hina:

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

Yi nga ha tlhela yi tirhisiwa eka swilaveko swa ku hambana ka nkarhi wun’we:

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

U nga ha tlhela u boxa muvala wa le hansi hi mintirho ya hina ya mepe wa mihlovo:

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

Balekela SVG

Hi tirhisa escape-svgntirho ku balekela <, >na #swihlawulekisi swa swifaniso swa le ndzhaku swa SVG. Swihlawulekisi leswi swi lava ku baleka leswaku swi ta humesa kahle swifaniso swa le ndzhaku eka IE.

Mintirho yo Engetela na ku Susa

Hi tirhisa mintirho ya addna subtractku phutsela calcntirho wa CSS. Xikongomelonkulu xa mintirho leyi i ku papalata swihoxo loko ntikelo lowu “nga riki na yuniti” 0wu hundziseriwa eka calcxivulavulelo. Swivulavulelo swo fana na leswi calc(10px - 0)swi ta vuyisa xihoxo eka swihlamusela-marito hinkwaswo, hambileswi swi nga ntiyiso hi tlhelo ra tinhlayo.

Xikombiso laha calc yi tirhaka kona:

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

Xikombiso laha calc yi nga tirhiki:

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

Sass swihlawulekisi

Endla leswaku Bootstrap 4 yi va ya wena hi fayili ya hina ya swilo leswi cinca-cincaka swa ntolovelo leyi akiweke endzeni naswona u cinca-cinca hi ku olova swihlawulekisi swa CSS swa misava hinkwayo hi swilo leswintshwa $enable-*swa swilo leswi cinca-cincaka swa Sass. Tlula nkoka wa xihlawulekisi ivi u tlhela u hlengeleta hi npm run testtanihilaha swi lavekaka hakona.

U nga kuma no lulamisa swilo leswi swi cinca-cincaka eka swihlawulekisi swa nkoka swa misava hinkwayo eka scss/_variables.scssfayili ya Bootstrap.

Muhlovo

Swiphemu swo tala swo hambana-hambana swa Bootstrap ni switirhisiwa swi akiwile hi ku tirhisa nxaxamelo wa mihlovo leyi hlamuseriweke eka mepe wa Sass. Mepe lowu wu nga ha loop over eka Sass ku hatlisa wu tumbuluxa nxaxamelo wa milawu.

Mihlovo hinkwayo

Mihlovo hinkwayo leyi kumekaka eka Bootstrap 4, yi kumeka tanihi swilo leswi cinca-cincaka swa Sass ni mepe wa Sass eka scss/_variables.scssfayili. Leswi swi ta ndlandlamuxiwa eka ku humesiwa lokutsongo loku landzelaka ku engetela tinxaka to engetela, ku fana swinene na phalete ya greyscale leyi se hi yi katsaka.

Hi leyi ndlela leyi u nga tirhisaka leswi ha yona eka Sass ya wena:

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

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

Titlilasi ta vukorhokeri bya mihlovo na tona ta kumeka ku veka colorna background-color.

Mihlovo ya nhloko-mhaka

Hi tirhisa ntlawa lowutsongo wa mihlovo hinkwayo ku endla phalete ya mihlovo leyitsongo yo tumbuluxa swikimi swa mihlovo, leyi tlhelaka yi kumeka tanihi swilo leswi cinca-cincaka swa Sass na mepe wa Sass eka scss/_variables.scssfayili ya Bootstrap.

Swivunguvungu

Seti yo anama ya swilo leswi cinca-cincaka swa grey na mepe wa Sass eka scss/_variables.scsstinxaka leti nga cincekiki ta grey ku tsemakanya phurojeke ya wena. Xiya leswaku leti i “cool grays”, leti talaka eka thoni ya wasi leyi nga vonakiki, ku tlula ti neutral greys.

Endzeni ka scss/_variables.scss, u ta kuma swilo leswi cinca-cincaka swa mihlovo ya Bootstrap ni mepe wa Sass. Hi lexi xikombiso xa $colorsmepe wa 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;

Engetela, susa kumbe ku cinca mimpimo endzeni ka mepe ku pfuxeta ndlela leyi yi tirhisiwaka ha yona eka swiphemu swin’wana swo tala. Khombo ra kona eka nkarhi lowu, a hi xiphemu xin’wana na xin’wana lexi tirhisaka mepe lowu wa Sass. Swilo leswi pfuxetiweke swa nkarhi lowu taka swi ta lwela ku antswisa eka leswi. Ku fikela kwalaho, pulana ku tirhisa ${color}swilo leswi cinca-cincaka na mepe lowu wa Sass.

Swiphemu swa kona

Swiphemu swo tala swa Bootstrap na switirhisiwa swi akiwile hi @eachswirhendzevutana leswi vuyeleriwaka ehenhla ka mepe wa Sass. Leswi swi pfuna ngopfu eka ku tumbuluxa swihlawulekisi swa xiphemu hi hina $theme-colorsna ku tumbuluxa swihlawulekisi leswi hlamulaka eka breakpoint yin’wana na yin’wana. Loko u ri karhi u lulamisa mimepe leyi ya Sass ni ku hlengeleta nakambe, u ta vona hi ku tisungulela ku cinca ka wena ku kombisiwa eka swirhendzevutana leswi.

Swilo leswi cinca-cincaka

Swiphemu swo tala swa Bootstrap swi akiwile hi endlelo ra tlilasi ya base-modifier. Leswi swi vula leswaku xiphemu lexikulu xa xitayili xi khomiwile eka tlilasi ya le hansi (xikombiso, .btn) kasi ku hambana ka xitayili ku pfaleriwile eka titlilasi ta vacinci (xikombiso, .btn-danger). Titlilasi leti ta vacinci ti akiwile ku suka eka $theme-colorsmepe ku endla ku customizing nomboro na vito ra titlilasi ta hina ta vacinci.

Hi leswi swikombiso swimbirhi swa ndlela leyi hi rhendzelekaka ehenhla ka $theme-colorsmepe ku humesa swihundzuluxi eka .alertxiphemu na .bg-*switirhisiwa swa hina hinkwaswo swa le ndzhaku.

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

Ku hlamula

Ti loop leti ta Sass a ti pimiwi eka mimepe ya mihlovo ntsena, na tona. U nga ha tlhela u humesa ku hambana loku hlamulaka ka swiphemu swa wena kumbe switirhisiwa swa wena. Teka xikombiso switirhisiwa swa hina swa ku ringanisa matsalwa lama hlamulaka laha hi hlanganisaka @eachxirhendzevutana xa $grid-breakpointsmepe wa Sass na xivutiso xa midiya lexi katsaka.

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

Loko u fanele u lava ku cinca $grid-breakpoints, ku cinca ka wena ku ta tirha eka swirhendzevutana hinkwaswo leswi vuyeleriwaka ehenhla ka mepe wolowo.

Swilo leswi cinca-cincaka swa CSS

Bootstrap 4 yi katsa kwalomu ka khume-mbirhi wa swihlawulekisi swa ntolovelo swa CSS (swilo leswi cinca-cincaka) eka CSS ya yona leyi hlengeletiweke. Leswi swi nyika mfikelelo wo olova eka mimpimo leyi tirhisiwaka ngopfu ku fana na mihlovo ya hina ya nhlokomhaka, tindhawu to wisa, na switachi swa fonto ya nkoka loko u tirha eka Mukamberi wa browser ya wena, bokisi ra sava ra khodi, kumbe ku endla xikombiso hi ku angarhela.

Swilo leswi cinca-cincaka leswi kumekaka

Hi leswi swilo leswi cinca-cincaka leswi hi swi katsaka (lemuka leswaku the :rootis required). Va kumeka eka _root.scssfayili ya hina.

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

Swikombiso

Swilo leswi cinca-cincaka swa CSS swi nyika ku cinca-cinca loku fanaka na swilo leswi cinca-cincaka swa Sass, kambe handle ka xilaveko xa ku hlengeletiwa swi nga si tirhisiwa eka xihlamusela-marito. Xikombiso, laha hi tlhela hi veka fonto ya pheji ya hina na switayele swa vuhlanganisi hi swilo leswi cinca-cincaka swa CSS.

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

Swilo leswi cinca-cincaka swa breakpoint

Loko ekusunguleni hi katsile swiphemu swo tsema eka swilo swa hina leswi cinca-cincaka swa CSS (xikombiso, --breakpoint-md), leswi a swi seketeriwi eka swivutiso swa vuhangalasi bya mahungu , kambe swa ha kota ku tirhisiwa endzeni ka swiyenge swa milawu eka swivutiso swa vuhangalasi bya mahungu. Swilo leswi swi cinca-cincaka swa breakpoint swi tshama swi ri eka CSS leyi hlengeletiweke leswaku swi ta fambisana endzhaku hi ku nyikiwa leswaku swi nga tirhisiwa hi JavaScript. Dyondza swo tala eka spec .

Hi lexi xikombiso xa leswi nga seketeriwiki:

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

Naswona hi lexi xikombiso xa leswi seketeriwaka:

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