Source

Theming Bootstrap

Hazie Bootstrap 4 site na iji mgbanwe Sass ọhụrụ arụnyere n'ime ya maka mmasị ụdị ụwa maka mgbanwe isiokwu dị mfe yana mgbanwe akụrụngwa.

Okwu mmalite

Na Bootstrap 3, a na-ebute isiokwu site na mgbanwe mgbanwe na LESS, omenala CSS na ụdị isiokwu dị iche nke anyị tinyere na distfaịlụ anyị. Site na mgbalị ụfọdụ, mmadụ nwere ike megharịa ọdịdị Bootstrap 3 kpamkpam na-enweghị imetụ faịlụ ndị bụ isi. Bootstrap 4 na-enye usoro a maara nke ọma mana ọ dịtụ iche.

Ugbu a, Sass variables, maapụ Sass, na CSS omenala na-arụzu isiokwu. Enweghị akwụkwọ ụdị isiokwu raara onwe ya nye ọzọ; Kama, ị nwere ike ime ka isiokwu arụnyere n'ime ya tinye gradients, onyinyo, na ndị ọzọ.

Sass

Jiri faịlụ Sass isi mmalite anyị were ohere mgbanwe, maapụ, mixins na ndị ọzọ.

Ọdịdị faịlụ

Mgbe ọ bụla enwere ike, zere imegharị faịlụ isi Bootstrap. Maka Sass, nke ahụ pụtara ịmepụta ụdị gị nke na-ebubata Bootstrap ka ị nwee ike gbanwee ma gbasaa ya. Na-eche na ị na-eji njikwa ngwugwu dị ka npm, ị ga-enwe nhazi faịlụ nke dị ka nke a:

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

Ọ bụrụ na ị budatala faịlụ isi mmalite anyị ma ị naghị eji njikwa ngwugwu, ị ga-achọ iji aka gị hazie ihe yiri usoro ahụ, debe faịlụ isi mmalite Bootstrap na nke gị.

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

Na-ebubata

Na nke gị custom.scss, ị ga-ebubata faịlụ Sass isi mmalite Bootstrap. Ị nwere nhọrọ abụọ: tinye ihe niile Bootstrap, ma ọ bụ họrọ akụkụ ndị ị chọrọ. Anyị na-akwado nke ikpeazụ, n'agbanyeghị na mara na e nwere ụfọdụ ihe a chọrọ na adabere na akụkụ anyị. Ị ga-achọkwa itinye ụfọdụ Javascript maka plugins anyị.

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

Site na ntọala ahụ, ị ​​nwere ike ịmalite gbanwee mgbanwe Sass ọ bụla na maapụ gị custom.scss. Ị nwekwara ike ịmalite itinye akụkụ nke Bootstrap n'okpuru // Optionalngalaba dịka ọ dị mkpa. Anyị na-atụ aro ka iji nchịkọta mbubata zuru ezu sitere na bootstrap.scssfaịlụ anyị ka mmalite gị.

Ndabara dị iche iche

Sass ọ bụla na-agbanwe na Bootstrap 4 gụnyere !defaultọkọlọtọ na-enye gị ohere ịkwụsị uru ndabara nke mgbanwe na Sass nke gị na-enweghị ịgbanwe koodu isi mmalite Bootstrap. Detuo na mado mgbanwe dị ka achọrọ, gbanwee ụkpụrụ ha, wee wepụ !defaultọkọlọtọ. Ọ bụrụ na ekenyelarị mgbanwe, mgbe ahụ, ụkpụrụ ndabara agaghị ekenye ya ọzọ na Bootstrap.

Mgbanwe mgbanwe n'ime otu faịlụ Sass nwere ike ịbịa tupu ma ọ bụ mgbe mgbanwe ndabara gasịrị. Agbanyeghị, mgbe ị na-agafe faịlụ Sass, nbibi gị ga-abịarịrị tupu ibubata faịlụ Sass Bootstrap.

Nke a bụ ọmụmaatụ na-agbanwe background-colorna colormaka <body>mgbe ị na-ebubata ma na-achịkọta Bootstrap site na npm:

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

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

Tinyegharịa dịka ọ dị mkpa maka mgbanwe ọ bụla na Bootstrap, gụnyere nhọrọ zuru ụwa ọnụ n'okpuru.

Maapụ na loops

Bootstrap 4 gụnyere maapụ Sass ole na ole, isi uru ụzọ abụọ na-eme ka ọ dịrị mfe ịmepụta ezinụlọ CSS nwere njikọ. Anyị na-eji maapụ Sass maka agba anyị, ebe nkwụsịtụ grid na ndị ọzọ. Dịka mgbanwe Sass, maapụ Sass niile gụnyere !defaultọkọlọtọ na enwere ike ịkagbu ya ma gbatịa ya.

Ụfọdụ maapụ Sass anyị jikọtara ọnụ na nke efu na ndabara. Emere nke a ka o kwe ka mgbasawanye nke maapụ Sass dị mfe, mana ọ na-abịa na ọnụ ahịa iji mee ka iwepụ ihe na maapụ sie ike karị.

Megharịa map

Ka ịgbanwee agba dị na $theme-colorsmaapụ anyị, tinye ihe ndị a na faịlụ Sass gị:

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

Tinye na map

Ka ịgbakwunye agba ọhụrụ na $theme-colors, tinye igodo na uru ọhụrụ:

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

Wepu na maapụ

Iji wepu agba na $theme-colors, ma ọ bụ maapụ ọ bụla ọzọ, jiri map-remove:

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

Igodo achọrọ

Bootstrap na-eche na ọnụnọ ụfọdụ igodo dị n'ime maapụ Sass ka anyị na-eji wee gbasaa ndị a n'onwe anyị. Ka ị na-ahazi maapụ ndị agbakwunyere, ị nwere ike izute mperi ebe a na-eji igodo Sass akọwapụtara.

Dịka ọmụmaatụ, anyị na-eji igodo primary, success, na dangerigodo sitere na $theme-colorsnjikọ, bọtịnụ, na steeti ụdị. Dochie ụkpụrụ nke igodo ndị a ekwesịghị iwepụta nsogbu ọ bụla, mana iwepu ha nwere ike bute nsogbu mkpokọta Sass. N'ọnọdụ ndị a, ị ga-achọ ịgbanwe koodu Sass nke na-eji ụkpụrụ ndị ahụ.

Ọrụ

Bootstrap na-eji ọtụtụ ọrụ Sass, mana ọ bụ naanị obere nkeji ka ọdabara na isiokwu izugbe. Anyị etinyela ọrụ atọ maka inweta ụkpụrụ site na maapụ agba:

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

Ndị a na-enye gị ohere ịhọrọ otu agba na maapụ Sass dị ka otu ị ga-esi jiri agba agbanwe site na v3.

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

Anyị nwekwara ọrụ ọzọ iji nweta ọkwa agba site na $theme-colorsmaapụ. Ụkpụrụ na-adịghị mma ga-eme ka agba dị mfe, ebe ọkwa dị elu ga-agba ọchịchịrị.

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

Na omume, ị ga-akpọ ọrụ ahụ wee gafee n'ime akụkụ abụọ: aha agba sitere na $theme-colors(dịka, isi ma ọ bụ ihe egwu) na ọkwa ọnụọgụ.

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

Enwere ike ịgbakwunye ọrụ ndị ọzọ n'ọdịniihu ma ọ bụ omenala Sass nke gị iji mepụta ọrụ dị larịị maka maapụ Sass agbakwunyere, ma ọ bụ ọbụna nke ọ bụla ma ọ bụrụ na ịchọrọ ka ị na-ekwu okwu ọnụ.

Agba dị iche

Otu ọrụ ọzọ anyị gụnyere na Bootstrap bụ ọrụ ọdịiche agba, color-yiq. Ọ na-eji oghere agba YIQ weghachi ọkụ na-akpaghị aka ( #fff) ma ọ bụ ọchịchịrị ( #111) agba dị iche dabere na agba ntọala akọwapụtara. Ọrụ a bara uru karịsịa maka mixins ma ọ bụ loops ebe ị na-emepụta ọtụtụ klaasị.

Dịka ọmụmaatụ, iji mepụta swatches agba na $theme-colorsmaapụ anyị:

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

Enwere ike iji ya maka mkpa iche iche nke otu oge:

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

Ị nwekwara ike ịkọwapụta agba isi na ọrụ maapụ agba anyị:

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

Nhọrọ Sass

$enable-*Hazie Bootstrap 4 site na iji faịlụ mgbanwe omenala arụnyere n'ime ya wee jiri mgbanwe Sass ọhụrụ gbanwee mmasị CSS zuru ụwa ọnụ . Wetuo uru nke mgbanwe wee chịkọta ya npm run testdịka achọrọ ya.

Ị nwere ike ịchọta ma hazie mgbanwe ndị a maka isi nhọrọ zuru ụwa ọnụ na _variables.scssfaịlụ anyị.

Na-agbanwe agbanwe Ụkpụrụ Nkọwa
$spacer 1rem(ndabere), ma ọ bụ uru ọ bụla> 0 Na-akọwapụta uru spacer ndabara iji mepụta ngwa spacer anyị na mmemme .
$enable-rounded true(ndabere) ma ọ bụfalse Na-akwado ụdị akọpụtagoro border-radiusna ngwa dị iche iche.
$enable-shadows truema ọ bụ false(ndabere) Na-akwado ụdị akọpụtagoro box-shadowna ngwa dị iche iche.
$enable-gradients truema ọ bụ false(ndabere) Na-akwado gradients akọwapụtagoro site na background-imageụdị n'ụdị dị iche iche.
$enable-transitions true(ndabere) ma ọ bụfalse Na-akwado s akọwapụtagoro transitionna ngwa dị iche iche.
$enable-hover-media-query truema ọ bụ false(ndabere) Akwụsịla
$enable-grid-classes true(ndabere) ma ọ bụfalse Na-akwado ọgbọ nke klaasị CSS maka sistemu grid (dịka, .container, .row, .col-md-1, wdg).
$enable-caret true(ndabere) ma ọ bụfalse Na-enyere aka ilekọta pseudo element na .dropdown-toggle.
$enable-print-styles true(ndabere) ma ọ bụfalse Na-akwado ụdị maka ịkwalite mbipụta.

Agba

A na-ewu ọtụtụ ihe dị iche iche na akụrụngwa Bootstrap site n'ụdị agba akọwapụtara na maapụ Sass. Enwere ike ịgbanye maapụ a na Sass ka iwepụta usoro iwu ngwa ngwa.

Agba niile

Agba niile dị na Bootstrap 4, dị ka Sass variables na maapụ Sass na scss/_variables.scssfaịlụ anyị. A ga-agbasawanye nke a na obere mwepụta ndị na-esote iji gbakwunye ndo ndị ọzọ, dị ka palette grayscale anyị gụnyelarị.

Acha anụnụ anụnụ
Indigo
Purple
Pink
Uhie
oroma
Odo
Akwụkwọ ndụ akwụkwọ ndụ
Teal
Cyan

Nke a bụ otu ị ga-esi jiri ndị a na Sass gị:

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

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

klaasị ịba uru dị maka ịtọ colorna background-color.

N'ọdịnihu, anyị ga-achọ ịnye maapụ Sass na mgbanwe dị iche iche maka ndo nke agba ọ bụla dịka anyị mere na agba isi awọ n'okpuru.

Agba isiokwu

Anyị na-eji akụkụ nke agba niile mepụta obere palette agba maka ịmepụta atụmatụ agba, dịkwa ka Sass variables na map Sass na scss/_variables.scssfaịlụ anyị.

Isi
Secondary
Ihe ịga nke ọma
Ihe egwu
Ịdọ aka ná ntị
Ozi
Ìhè
Ọchịchịrị

Agba ntụ

Ụdị mgbanwe isi awọ sara mbara yana maapụ Sass scss/_variables.scssmaka ndo isi awọ na-agbanwe agbanwe n'ofe ọrụ gị.

100
200
300
400
500
600
700
800
900

N'ime _variables.scss, ị ga-ahụ mgbanwe agba anyị na maapụ Sass. Nke a bụ ọmụmaatụ nke $colorsmaapụ 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;

Tinye, wepụ, ma ọ bụ gbanwee ụkpụrụ dị n'ime maapụ ahụ iji melite otu esi eji ha n'ọtụtụ ihe ndị ọzọ. Ọ dị nwute na oge a, ọ bụghị akụrụngwa ọ bụla na-eji maapụ Sass a. Mmelite ga-eme n'ọdịnihu ga-agbalịsi ike imeziwanye nke a. Ruo mgbe ahụ, mee atụmatụ iji ${color}mgbanwe ndị a na maapụ Sass a.

Ngwa

@eachEjiri loops rụọ ọtụtụ akụrụngwa na akụrụngwa Bootstrap na- aga n'ihu maapụ Sass. Nke a na-enye aka karịsịa maka ịmepụta ụdị dị iche iche nke akụrụngwa site na anyị $theme-colorsyana ịmepụta ụdị dị iche iche na-anabata maka ebe nkwụsịtụ ọ bụla. Ka ị na-ahazi maapụ Sass ndị a wee na-achịkọta, ị ga-ahụ mgbanwe gị ozugbo na loops ndị a.

Ndị na-eme mgbanwe

A na-ewu ọtụtụ ihe ndị Bootstrap site na usoro klaasị-mgbanwe. Nke a pụtara na ọtụtụ styling dị n'ime klaasị (dịka ọmụmaatụ .btn) ebe ụdịdị ndịiche dị na klaasị mgbanwe (dịka ọmụmaatụ, .btn-danger). Ewubere klaasị mgbanwe ndị a site na $theme-colorseserese ngosi iji hazie nọmba na aha klaasị mgbanwe anyị.

Nke a bụ ihe atụ abụọ nke otu anyị si elegharị $theme-colorsmaapụ ahụ iji mepụta ihe ngbanwe na akụrụngwa yana akụrụngwa ndabere .alertanyị niile ..bg-*

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

Na-anabata

Loops Sass ndị a ejedebeghị na maapụ agba, ma. Ị nwekwara ike iwepụta mgbanwe na-anabata nke akụrụngwa ma ọ bụ akụrụngwa gị. Were dịka ọmụmaatụ akụrụngwa nhazi ederede anyị na-anabata ebe anyị na-agwakọta @eachloop maka $grid-breakpointsmaapụ Sass yana ajụjụ mgbasa ozi gụnyere.

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

Ọ bụrụ na ịchọrọ ịgbanwe aha gị $grid-breakpoints, mgbanwe gị ga-emetụta loops niile na-atụgharị n'elu maapụ ahụ.

Ụdị mgbanwe CSS

Bootstrap 4 gụnyere ihe dị ka ihe dị iche iche nke CSS iri abụọ na abụọ na CSS achịkọtara. Ndị a na-enye ohere dị mfe iji nweta ụkpụrụ ndị a na-ejikarị eme ihe dị ka agba isiokwu anyị, ebe nkwụsịtụ, na nchịkọta mkpụrụedemede bụ isi mgbe ị na-arụ ọrụ na Inspector ihe nchọgharị gị, igbe igbe koodu, ma ọ bụ ihe ngosi izugbe.

Ụdị mgbanwe dị

Nke a bụ mgbanwe ndị anyị gụnyere (rịba ama na :rootachọrọ). Ha dị na _root.scssfaịlụ anyị.

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

Ihe atụ

Ụdị mgbanwe CSS na-enye ụdị mgbanwe mgbanwe nke Sass, mana na-enweghị mkpa nke nchịkọta tupu e zigara ya na ihe nchọgharị ahụ. Dịka ọmụmaatụ, ebe a, anyị na-emegharị font ibe anyị yana njikọ na mgbanwe CSS.

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

Ị nwekwara ike iji mgbanwe nkwụsịtụ anyị na ajụjụ mgbasa ozi gị:

.content-secondary {
  display: none;
}

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