Source

Bootstrap ka barokun

Bootstrap 4 bɛrɛbɛn ni an ka Sass fɛn caman sɛgɛsɛgɛli ye minnu bɛ don a kɔnɔ diɲɛ kɔnɔ cogoya fɛɛrɛw fɛ walasa ka barokun nɔgɔya ani ka fɛnw caman cili kɛ.

Daminɛ kuma

Bootstrap 3 kɔnɔ, barokunko tùn bɛ Laɲini kosɛbɛ ni fɛn caman sɛgɛsɛgɛli ye LESS kɔnɔ, CSS ladamulen na, ani barokun cogoya-sɛbɛn danfaralen dɔ min tùn bɛ an ka distdosiyew kɔnɔ. Ni cɛsiri dɔw kɛra, mɔgɔ bɛ se ka Bootstrap 3 cogoya labɛn kokura pewu k’a sɔrɔ a ma maga filenw kolomaw la. Bootstrap 4 bɛ fɛɛrɛ dɔ di min bɛ dɔn, nka a tɛ kelen ye dɔɔnin.

Sisan, barokun bɛ Kɛ ni Sass fɛn caman sɛgɛsɛgɛli ye, Sass kartiw, ani CSS ladamulen. Barokun cogoya sɛbɛn min ɲɛsinnen bɛ o ma tugun, o tɛ yen; o nɔ na, i bɛ se ka barokun jɔlen in kɛ walasa ka fɛnw fara ɲɔgɔn kan minnu bɛ fɛnw jiginni, biɲɛw ani fɛn wɛrɛw fara a kan.

Sass ye

Baara kɛ ni an ka source Sass files ye walasa ka nafa sɔrɔ variables, maps, mixins ani fɛn wɛrɛw la.

Dosiyew sigicogo

Ni aw bɛ se tuma o tuma, aw kana Bootstrap ka filenw kolomaw sɛmɛntiya. Sass fɛ, o kɔrɔ ye k'i yɛrɛ ka stylesheet (fɔlikan) Dabɔ min bɛ Bootstrap (Bootstrap) Ladon walasa i ka Se k'a Lakodɔn k'a janya. Ni an y’a miiri ko i bɛ baara kɛ ni pake ɲɛmɔgɔ ye i n’a fɔ npm, i bɛna dosiye dɔ sɔrɔ min bɛ i n’a fɔ nin:

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

N’i y’an ka source files telesarse ani n’i tɛ baara kɛ ni package manager ye, i b’a fɛ ka fɛn dɔ sigi sen kan i bolo fɛ min bɛ tali kɛ o structure la, ka Bootstrap ka source files to u dan na ni i ta ye.

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

Import kɛli

I ka custom.scss, i bɛ Bootstrap ka source Sass filew ladon. Sugandili fila bɛ aw bolo: Bootstrap bɛɛ don a la, walima aw mago bɛ yɔrɔ minnu na, aw bɛ olu ta. An bɛ dusu don o labanw kɔnɔ, hali n’a y’a sɔrɔ aw k’a dɔn ko wajibi dɔw ni fɛn dɔw bɛ yen minnu bɛ tali kɛ an ka yɔrɔw bɛɛ la. Aw fana bɛna JavaScript dɔw Dòn an ka 'pluginw na.

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

Ni o sigicogo in bɛ sen na, i bɛ se ka daminɛ ka Sass fɛn caman sɛmɛntiya ani ka kartiw dɔw ladilan i ka custom.scss. Aw bɛ se fana ka Bootstrap yɔrɔ dɔw farali daminɛ // Optionaldakun jukɔrɔ i n’a fɔ aw mago bɛ cogo min na. An b’a Fɔ ko i ka baara Kɛ ni import stack dafalen ye ka Bɔ an ka bootstrap.scssdosiye la k’a Kɛ i ka daminɛyɔrɔ ye.

Defaults (dafalenw) bεε bε Yεlεma

Sass bεε bε Bootstrap 4 kɔnɔ, !defaultdarapo bε yen min b’a To i bε se ka bεnkansεbεn nafama bεε bε bεn i yɛrɛ ka Sass kɔnɔ k’a sɔrɔ i ma Bootstrap ka source code bε Yεlεma. Yɛlɛmafɛnw kopi kɛ ani k’u nɔrɔ i n’a fɔ a mago bɛ cogo min na, k’u nafaw sɛmɛntiya, ani ka !defaultdarapo bɔ. Ni fɛn dɔ bɛ Di a ma kaban, o tuma a tɛna Segin ka Di a ma ni nafalanw ye minnu bɛ Bootstrap kɔnɔ.

Variable overrides (daɲɛw sɛgɛsɛgɛli) minnu bɛ Sass file kelen kɔnɔ, olu bɛ se ka na ka kɔn variables defaults ɲɛ walima u kɔfɛ. Nka, ni i bɛ Sass filenw bɛɛ lajɛlen sɛgɛsɛgɛli Kɛ, i ka sɛgɛsɛgɛliw ka kan ka Nà sani i ka Bootstrap ka Sass filenw Ladon.

Nin ye misali ye min bɛ fɛn caman Changer background-colorani colorfor the <body>ni i bɛ Bootstrap don ani ka a lajɛ npm fɛ:

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

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

Segin kɛ i n’a fɔ a mago bɛ fɛn o fɛn na Bootstrap kɔnɔ, diɲɛ sugandiliw fana sen bɛ o la min bɛ duguma.

Kartiw ni loopuw

Bootstrap 4 kɔnɔ, Sass karti damadɔ bɛ yen, nafa fila-fila minnu bɛ CSS ni ɲɔgɔn cɛ denbayaw labɔli nɔgɔya. An bɛ baara kɛ ni Sass kartiw ye an ka kulɛriw, grid breakpoints ani fɛn wɛrɛw kama. I n’a fɔ Sass bεε bε bεn cogo min na, Sass kartiw bεε la, !defaultdarapo bε yen wa u bε se ka bεn ani ka janya.

An ka Sass karti dɔw bɛ fara ɲɔgɔn kan ka kɛ lankolonw ye ka kɛɲɛ ni u ka daminɛ ye. O bɛ kɛ walasa ka sira di Sass karti dilen dɔ bonya nɔgɔya ma, nka a bɛ na ni musaka ye min bɛ kɛ sababu ye ka fɛnw bɔ karti dɔ kɔnɔ ka gɛlɛya dɔɔnin.

Karti ladilan

Walasa ka kulɛri dɔ sɛmɛntiya min bɛ an ka $theme-colorskarti kɔnɔ, i ka ninnu fara i ka Sass file ladamulen kan:

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

A fara a kan karti kan

Walasa ka kulɛri kura $theme-colorsfara , i ka kilisi kura ni nafa fara a kan:

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

Aw bɛ bɔ karti kan

Walasa ka kulɛriw bɔ $theme-colors, walima karti wɛrɛ la, aw bɛ baara kɛ ni map-remove:

$theme-colors: map-remove($theme-colors, "success", "info", "danger");

Kilisi wajibiyalenw

Bootstrap bɛ a miiri ko kilisi kɛrɛnkɛrɛnnen dɔw bɛ Sass kartiw kɔnɔ i n’a fɔ an yɛrɛ bɛ baara kɛ cogo min na ani k’u janya. Ni i bɛ karti minnu bɛ a kɔnɔ, i bɛ olu kɛ ka kɛɲɛ ni i yɛrɛ sago ye, i bɛ se ka filiw sɔrɔ yɔrɔ min na Sass karti kɛrɛnkɛrɛnnen dɔ ka kilisi bɛ baara kɛ.

Misali la, an bɛ baara Kɛ ni primary, success, ani dangerbutɔnw ye minnu bɛ Bɔ ka $theme-colorsɲɛsin jɛgɛnsira, butɔni ani foroko cogoyaw ma. Nin kilisi ninnu nafaw falen-falen man kan ka ko si jira, nka n’i y’u bɔ, o bɛ se ka kɛ sababu ye ka Sass ka jatebɔko gɛlɛyaw lase. O ko ninnu na, i b’a fɛ ka Sass kode caman sɛmɛntiya min bɛ baara kɛ ni o nafaw ye.

Baarakɛcogo

Bootstrap bɛ baara Kɛ ni Sass baarakɛcogo damadɔ ye, nka kulu fitinin dɔrɔn de bɛ Kɛ ka ɲɛsin barokun caman ma. An ye baara saba Dòn a la walasa ka nafaw Sɔrɔ ka Bɔ kulɛri kartiw la:

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

Olu b’a To i bɛ Se ka kulɛri kelen Tà Sass karti la i n’a fɔ i bɛ baara Kɛ ni kulɛri caman ɲɔgɔnna ye cogo min na ka Bɔ v3 la.

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

An fana bɛ baara wɛrɛ Kɛ walasa ka kulɛri hakɛ$theme-colors kɛrɛnkɛrɛnnen dɔ Sɔrɔ karti kan. Nivo negative nafaw bɛna kulɛri yeelen, ka sɔrɔ nivo sanfɛtaw bɛna dibi don.

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

Tiɲɛ na, i tun bɛ baara Weele ka tɛmɛ paramɛtɛrɛ fla la: kulɛri tɔgɔ ka Bɔ $theme-colors(misali la, fɔlɔ walima farati) ani jatebla hakɛ dɔ.

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

Baarakɛcogo wɛrɛw bɛ Se ka Fàra ɲɔgɔn kan don nataw la walima i yɛrɛ ka Sass ladamulen walasa ka nivo baarakɛcogo Dabɔ Sass karti wɛrɛw kama, walima hali jenɛriki dɔ n’i b’a fɛ ka kumakan fɔ ka caya.

Kulɛriw danfara

An bɛ baara wɛrɛ min Kɛ Bootstrap kɔnɔ o ye kulɛri danfara baarakɛcogo ye, color-yiq. A bɛ baara Kɛ ni YIQ kulɛri yɔrɔ ye walasa ka yeelen ( #fff) walima dibi ( #111) danfaralan dɔ Lasegin a yɛrɛma ka Da basigi kulɛri kofɔlen kan. Nin baara in nafa ka bon kɛrɛnkɛrɛnnenya la mixins walima loops (lupulu) la i bɛ kalasi caman lawuli yɔrɔ minnu na.

Misali la, walasa ka kulɛriw sɛgɛsɛgɛli kɛ ka bɔ an ka $theme-colorskarti la:

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

A bɛ se ka kɛ fana danfara magow la minnu bɛ kɛ siɲɛ kelen:

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

Aw bɛ se fana ka basigi kulɛri dɔ jira ni an ka kulɛri karti baarakɛcogo ye:

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

Sass sugandiliw

Bootstrap 4 bɛrɛbɛn ni an ka custom variables file ye min bɛ a kɔnɔ ani ka diɲɛ CSS fɛɛrɛw wuli nɔgɔya la ni $enable-*Sass variables kura ye. Override a variable's value ani ka recompile ni npm run testi n'a fɔ a mago bɛ cogo min na.

Aw bɛ se ka nin fɛn caman ɲɔgɔnna sɔrɔ ani k’u labɛn diɲɛ sugandili jɔnjɔnw kama an ka _variables.scssdosiye kɔnɔ.

Yɛlɛma-yɛlɛma	Nafaw	Cogojirali
`$spacer`	`1rem`(default), walima nafa o nafa > 0	a bɛ spacer nafa dafalen jira walasa ka an ka spacer nafalanw lawuli porogaramu fɛ .
`$enable-rounded`	`true`(default) walima`false`	A bɛ se ka kɛcogo ɲɛfɔlenw `border-radius`kɛ yɔrɔ suguya caman kan.
`$enable-shadows`	`true`walima `false`(default) .	A bɛ se ka kɛcogo ɲɛfɔlenw `box-shadow`kɛ yɔrɔ suguya caman kan.
`$enable-gradients`	`true`walima `false`(default) .	A bɛ se ka gradients (gradients) minnu ɲɛfɔlen don ka kɔn, `background-image`styles (fɔcogo) fɛ components (yɔrɔ suguya caman) kan.
`$enable-transitions`	`true`(default) walima`false`	`transition`A bɛ se ka s ɲɛfɔlenw kɛ yɔrɔ suguya caman kan.
`$enable-hover-media-query`	`true`walima `false`(default) .	A ma deli ka kɛ
`$enable-grid-classes`	`true`(default) walima`false`	A bɛ CSS kalanw bɔli daminɛ grid system (misali la, `.container`, `.row`, `.col-md-1`, wdfl).
`$enable-caret`	`true`(default) walima`false`	A bɛ se ka kɛ sababu ye ka pseudo element caret kɛ `.dropdown-toggle`.
`$enable-print-styles`	`true`(default) walima`false`	A bɛ se ka cogoyaw kɛ walasa ka sɛbɛnni kɛcogo ɲɛ.

Ɲɛ

Bootstrap ka fɛn suguya caman ni nafalan caman bɛ jɔ ni kulɛriw ye minnu ɲɛfɔlen don Sass karti dɔ kɔnɔ. Nin karti in bɛ se ka loopu kɛ Sass kɔnɔ walasa ka sariyaw sigi senkan teliya la.

Kulɛriw bɛɛ

Kulɛri minnu bɛ sɔrɔ Bootstrap 4 kɔnɔ, olu bɛɛ bɛ sɔrɔ i n’a fɔ Sass variables ani Sass map an ka scss/_variables.scssfile kɔnɔ. O bɛna bonya bɔko misɛnnin nataw la walasa ka biɲɛ wɛrɛw fara a kan, i n’a fɔ an bɛ palɛti gris min don a la kaban.

Bula

Indigo ye

Koloji

Bilenman

Bilema

Lenburuba

Nɛrɛmuguman

Binkɛnɛ

Teal ye

Siyan

Aw bɛ se ka baara kɛ ni ninnu ye cogo min na aw ka Sass kɔnɔ, o filɛ nin ye:

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

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

Kulɛri nafama kalanw fana bɛ sɔrɔ sigicogo colorni background-color.

Don nataw la, an bɛna a laɲini ka Sass kartiw ni fɛn caman ɲɔgɔnna di kulɛri kelen-kelen bɛɛ ɲɛw ma i n’a fɔ an y’a kɛ cogo min na ni kulɛriw ye minnu bɛ duguma.

Barokun kulɛriw

An bɛ baara Kɛ ni kulɛri bɛɛ kulu fitinin dɔ ye walasa ka kulɛri fitinin dɔ Dabɔ kulɛriw labɛnni kama, o fana bɛ Sɔrɔ i n’a fɔ Sass fɛn caman sɛgɛsɛgɛli ani Sass karti an ka scss/_variables.scssdosiye kɔnɔ.

Fɔlɔ

Seginnkanni

Sanga

Farati

Lasɔmi

Info

Yeelen

Dibi

Gris ye

A ye fɛn caman sɛgɛsɛgɛli kɛ fɛn caman sɛgɛsɛgɛli la ani Sass karti in scss/_variables.scssfor consistent shades of gray across your project.

100 ye

200 ye

300 ye

400 ye

500 ye

600 ye

700 ye

800 ye

900 ye

, kɔnɔ _variables.scss, i bɛ an ka kulɛri caman ɲɔgɔnna sɔrɔ ani Sass karti. $colorsSass karti misali dɔ filɛ nin ye :

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

Nafaw fara ɲɔgɔn kan, ka bɔ yen, walima ka fɛn dɔw sɛmɛntiya karti kɔnɔ walasa ka u baaracogo kura ye yɔrɔ caman wɛrɛw la. A fɔ man di nka nin waati in na, yɔrɔ bɛɛ tɛ baara kɛ ni Sass karti in ye. Kuma kura nataw bɛna an jija ka ɲɛtaa kɛ o ko la. Fɔ ka se o waati ma, aw bɛ labɛn kɛ ka baara kɛ ni ${color}fɛn caman sɛgɛsɛgɛli ye ani nin Sass karti in.

A yɔrɔw

Bootstrap ka fɛn caman ni a ka nafalanw bɛ jɔ ni @eachlupuw ye minnu bɛ segin-ka-bɔ Sass karti kan. O bɛ dɛmɛ kɛrɛnkɛrɛnnenya la ka ɲɛsin fɛn dɔ ka fɛn caman ɲɔgɔnnabɔli ma an fɛ $theme-colorsani ka jaabiw sɛgɛsɛgɛli kɛ kariyɔrɔ kelen-kelen bɛɛ la. Ni i bɛ nin Sass kartiw labɛn ka kɛɲɛ ni u yɛrɛ sago ye ani ka u labɛn kokura, i bɛ i yɛrɛ ye i ka fɛn caman Changements (Yɛlɛma) bɛ jira nin loops (lupulu) ninnu na.

Fɛn minnu bɛ fɛn caman sɛmɛntiya

Bootstrap ka yɔrɔ caman bɛ jɔ ni base-modifier class approach ye. O kɔrɔ ye ko cogoya fanba bɛ sɔrɔ basigi kalasi dɔ la (misali la, .btn) k’a sɔrɔ cogoya caman ɲɔgɔnna bɛ dan fɛn caman sɛmɛntiyalanw ma (misali la, .btn-danger). O bεε lajɛlen bε jɔ ka Bɔ $theme-colorskarti la walasa ka an ka bεnkansεbεn kalasi hakɛ n’a tɔgɔ bεε Labɛn.

$theme-colorsAn bɛ loop (lupu) Kɛ cogo min na karti kan walasa ka modifiers (daɲɛw) Sɔrɔ .alertcomponent (yɔrɔ) la ani an ka .bg-*kɔkanna nafalanw bɛɛ la, misali fla filɛ nin ye .

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

Jaabiw

Nin Sass loop ninnu tɛ dan kulɛri kartiw dɔrɔn ma, olu fana. Aw bɛ se fana ka jaabi caman ɲɔgɔnna caman lawuli aw ka yɔrɔw walima aw ka nafamafɛnw na. An ka misali ta an ka jaabi sɛbɛnni ɲɔgɔndan nafamayɔrɔw la an bɛ yɔrɔ min na an bɛ @eachlupu dɔ ɲagami $grid-breakpointsSass karti kama ni media ɲininkali dɔ ye min kɔnɔ.

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

Ni i ka kan ka i ka , i ka fɛn caman sɛmɛntiya $grid-breakpoints, i ka fɛn caman Changements bɛna kɛ ka ɲɛsin loop bɛɛ ma minnu bɛ segin-ka-bɔ o karti kan.

CSS bεε bεε bε bεn

Bootstrap 4 bɛ CSS custom properties (variables) tan ni fila ɲɔgɔn Sɔrɔ a ka CSS lajɛlen kɔnɔ. Olu bɛ nafaw sɔrɔ nɔgɔya la minnu bɛ kɛ ka caya i n’a fɔ an ka barokun kulɛriw, kariyɔrɔw, ani sɛbɛnnibolo fɔlɔw kuluw ni i bɛ baara kɛ i ka navigatɔrɔ ka Inspecteur kɔnɔ, kode sandbox kɔnɔ, walima prototyping caman na.

Yɛlɛma minnu bɛ sɔrɔ

An bɛ fɛn minnu Blà ɲɔgɔn na, olu filɛ nin ye (a kɔlɔsi ko the :rootis required). U bɛ sɔrɔ an ka _root.scssdosiye kɔnɔ.

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

Misaliw

CSS bεε bε Se ka bεnkansεbεn di ni Sass ka bεnkanw ye, nka k’a sɔrɔ u mago tε ɲɔgɔndan na sani u ka Di navigatɔrɔ ma. Misali la, yan an bɛ an ka ɲɛ in sɛbɛnnibolow ni jɛgɛncogo cogoyaw Lasegin ni CSS fɛn caman sɛgɛsɛgɛli ye.

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

Aw bɛ se fana ka baara kɛ ni an ka breakpoint variables ye aw ka media ɲininkaliw la:

.content-secondary {
  display: none;
}

@media (min-width(var(--breakpoint-sm))) {
  .content-secondary {
    display: block;
  }
}