Pagtema nga Bootstrap

Ipasayaat ti Bootstrap 4 babaen dagiti baro a naibangon a Sass a variablemi para kadagiti sangalubongan a kaykayat ti estilo para kadagiti nalaka a panagtema ken panagbalbaliw ti paset.

Pauna

Iti Bootstrap 3, ti panagtema ket kaaduan a naiturong babaen dagiti variable a panagbaliw iti LESS, kostumbre a CSS, ken ti naisina nga estilo ti tema nga inramanmi kadagiti distpapelesmi. Babaen ti sumagmamano a panagregget, mabalin a naan-anay a disenioen manen ti maysa ti langa ti Bootstrap 3 a dina sagiden dagiti kangrunaan a file. Mangipaay ti Bootstrap 4 iti pamiliar, ngem naiduma bassit a pamay-an.

Ita, ti panagtema ket maibanag babaen dagiti variable ti Sass, dagiti mapa ti Sass, ken dagiti kostumbre a CSS. Awanen ti naipamaysa a tema nga stylesheet; imbes ketdi, mabalinmo a pagbalinen ti naibangon a tema a mangnayon kadagiti gradient, anniniwan, ken dadduma pay.

Sass nga

Usaren dagiti taudan a Sass a file-tayo tapno magundawayan dagiti variable, mapa, mixin, ken dadduma pay.

Estruktura ti file

No mabalin, liklikan ti panangbalbaliw kadagiti kangrunaan a file ti Bootstrap. Para iti Sass, kayatna a sawen ti panagpartuat ti bukodmo nga stylesheet a mangi-import ti Bootstrap tapno mabalinmo a baliwan ken palawaen daytoy. No ipapanmo nga agus-usar ka ti manager ti pakete a kas ti npm, maaddaanka ti estruktura ti papeles a kastoy ti langana:

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

No nai-downloadmo dagiti taudan a papelesmi ken saanmo nga agus-usar iti manager ti pakete, kayatmo a manual nga i-setup ti maysa a banag a kapada dayta nga estruktura, a pagtalinaeden dagiti taudan a file ti Bootstrap a naisina manipud iti bukodmo.

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

Panag-import

Iti custom.scss, i-importmo dagiti taudan a Sass a file ti Bootstrap. Adda dua a pagpiliam: iraman amin ti Bootstrap, wenno piliem dagiti paset a kasapulam. Paregtaenmi ti naud-udi, nupay ammom nga adda sumagmamano a kasapulan ken panagpannuray iti ballasiw dagiti pasetmi. Masapul met nga iramanmo ti sumagmamano a JavaScript para kadagiti plugin-mi.

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

Iti dayta a panagisaad iti lugar, mabalinmo a rugian a baliwan ti ania man kadagiti variable ken mapa ti Sass iti custom.scss. Mabalinmo pay a rugian ti manginayon kadagiti paset ti Bootstrap iti baba ti // Optionalbenneg no kasapulan. Isingasingmi ti panagusar ti naan-anay nga import stack manipud iti bootstrap.scssfilemi a kas ti pangrugian a puntom.

Dagiti default ti variable

Tunggal Sass a variable iti Bootstrap 4 ket mangiraman ti !defaultbandera a mangipalubos kenka a mangbalbaliw ti default a pateg ti variable iti bukodmo a Sass a saan a mangbalbaliw ti taudan a kodigo ti Bootstrap. Kopiaen ken i-paste dagiti variable no kasapulan, baliwan dagiti pategda, ken ikkaten ti !defaultbandera. No ti maysa a variable ket naitudingen, kalpasanna daytoy ket saan a maituding manen babaen dagiti kasisigud a pateg iti Bootstrap.

Masarakanmo ti kompleto a listaan ​​dagiti variable ti Bootstrap iti scss/_variables.scss.

Dagiti panagbalbaliw ti panagbalbaliw iti uneg ti isu met laeng a papeles ti Sass ket mabalin nga umay sakbay wenno kalpasan dagiti kasisigud a variable. Nupay kasta, no ag-override iti ballasiw dagiti papeles ti Sass, dagiti panagbaliwmo ket masapul nga umay sakbay nga i-importmo dagiti papeles ti Sass ti Bootstrap.

Adda ditoy ti pagarigan a mangbalbaliw ti background-colorken colorpara iti <body>no ag-import ken ag-compile ti Bootstrap babaen ti npm:

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

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

Uliten no kasapulan para iti ania man a variable iti Bootstrap, a mairaman dagiti sangalubongan a pagpilian iti baba.

Mapa ken loop

Ti Bootstrap 4 ket mangiraman ti sumagmamano a mapa ti Sass, dagiti tulbek a paris ti pateg a mangpalaka ti panagpataud kadagiti pamilia dagiti mainaig a CSS. Usarenmi dagiti mapa ti Sass para kadagiti kolormi, dagiti grid breakpoint, ken dadduma pay. Kas met laeng kadagiti variable ti Sass, amin a mapa ti Sass ket mangiraman ti !defaultbandera ken mabalin a maibabawi ken mapalawa.

Dadduma kadagiti mapatayo ti Sass ket naikaykaysa kadagiti awan kargana babaen ti default. Daytoy ket naaramid tapno mangipalubos ti nalaka a panagpalawa ti naited a mapa ti Sass, ngem umay iti gastos ti panagaramid ti panangikkat kadagiti banag manipud iti mapa a narigrigat bassit.

Baliwan ti mapa

Tapno mabaliwan ti addan a kolor iti $theme-colorsmapami, inayon dagiti sumaganad iti kostumbre a Sass file-mo:

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

Inayon iti mapa

Tapno manginayon ti baro a kolor iti $theme-colors, inayon ti baro a tulbek ken pateg:

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

Ikkaten iti mapa

Tapno maikkat dagiti kolor manipud iti $theme-colors, wenno aniaman a sabali a mapa, usaren ti map-remove. Ammuem a masapul nga ikabilmo dayta iti nagbaetan dagiti kasapulan ken pagpilianmi:

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

Masapul dagiti tulbek

Ti Bootstrap ket mangipapan ti kaadda dagiti sumagmamano nga espesipiko a tulbek iti uneg dagiti mapa ti Sass bayat nga inus-usarmi ken palawaenmi dagitoy a mismo. Bayat ti panangipasayaatmo kadagiti nairaman a mapa, mabalin a makasabetka kadagiti biddut no sadino a maus-usar ti espesipiko a tulbek ti mapa ti Sass.

Kas pagarigan, usarenmi ti primary, success, ken dagiti dangertulbek manipud $theme-colorspara kadagiti silpo, buton, ken estado ti porma. Ti panangsukat kadagiti pateg dagitoy a tulbek ket rumbeng a mangiparang kadagiti awan nga isyu, ngem ti panangikkat kadagitoy ket mabalin a mangpataud kadagiti isyu ti panagtipon ti Sass. Kadagitoy a pagarigan, kasapulam a baliwan ti kodigo ti Sass nga agus-usar kadagita a pateg.

Dagiti Aramid

Ti Bootstrap ket agus-usar kadagiti sumagmamano a panagandar ti Sass, ngem ti laeng subgrupo ti maipakat iti sapasap a panagtema. Inramanmi ti tallo a panagandar para iti panangala kadagiti pateg manipud kadagiti mapa ti kolor:

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

Dagitoy ket mangipalubos kenka a mangpili ti maysa a kolor manipud iti mapa ti Sass a kasla unay no kasano nga usarem ti maysa a variable ti kolor manipud iti v3.

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

Adda met sabali a functiontayo para iti pananggun-od iti partikular a lebel ti kolor manipud iti $theme-colorsmapa. Dagiti negatibo a pateg ti lebel ket mangpalag-an ti kolor, bayat a dagiti nangatngato a lebel ket agsipnget.

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

Iti praktis, awagam koma ti function ken ipasa ti dua a parametro: ti nagan ti kolor manipud iti $theme-colors(kas pagarigan, kangrunaan wenno peggad) ken ti numeriko a lebel.

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

Dagiti kanayonan a panagandar ket mabalin a mainayon iti masakbayan wenno ti bukodmo a kostumbre a Sass tapno mangpartuat kadagiti panagandar ti lebel para kadagiti kanayonan a mapa ti Sass, wenno urayno ti sapasap no kayatmo ti agbalin nga ad-adu a berboso.

Panagduma ti kolor

Maysa a kanayonan a function nga iramanmi iti Bootstrap ket ti color contrast function, color-yiq. Daytoy ket agus-usar ti espasio ti kolor ti YIQ tapno automatiko nga agsubli ti nalawag ( #fff) wenno nasipnget ( #111) a panagdumaduma a kolor a naibatay iti naikeddeng a batayan a kolor. Daytoy a panagandar ket nangruna a makatulong para kadagiti mixin wenno dagiti loop a sadiay ket mangpatpataudka kadagiti adu a klase.

Kas pagarigan, tapno makapataud kadagiti swatch ti kolor manipud iti $theme-colorsmapatayo:

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

Mabalin pay nga usaren daytoy para kadagiti maminsan laeng a kasapulan ti panagdumaduma:

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

Mabalinmo pay nga ikeddeng ti batayan a kolor babaen dagiti panagandar ti mapa ti kolormi:

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

Sass dagiti pagpilian

Ipasayaat ti Bootstrap 4 babaen ti naibangon a kostumbre a variable a filemi ken nalaka a baliwan dagiti sangalubongan a kaykayat ti CSS babaen dagiti baro a $enable-*Sass a variable. I-override ti pateg ti maysa a variable ken ikompile manen babaen npm run testti kasapulan.

Mabalinmo a sapulen ken ipasayaat dagitoy a variable para kadagiti kangrunaan a sangalubongan a pagpilian iti scss/_variables.scsspapeles ti Bootstrap.

Maris

Adu kadagiti nadumaduma a paset ken utilidad ti Bootstrap ket naibangon babaen ti serye dagiti kolor a naikeddeng iti mapa ti Sass. Daytoy a mapa ket mabalin a mai-loop iti Sass tapno napardas a mangpataud ti serye dagiti ruleset.

Amin a kolor

Amin a kolor a magun-od iti Bootstrap 4, ket magun-od a kas dagiti variable ti Sass ken ti mapa ti Sass iti scss/_variables.scssfile. Daytoy ket mapalawa kadagiti sumaganad a babassit a pannakairuar tapno manginayon kadagiti kanayonan a maris, a kas ti grayscale a paleta a dati nga iramanmi.

Kastoy no kasano nga usaren dagitoy iti Sass mo:

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

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

Dagiti klase ti utilidad ti kolor ket magun-od pay para iti panangisaad colorken background-color.

Dagiti kolor ti tema

Usarenmi ti subgrupo dagiti amin a kolor tapno mangpartuat ti basbassit a paleta ti kolor para iti panagpataud kadagiti eskema ti kolor, a magun-od pay a kas dagiti variable ti Sass ken ti mapa ti Sass iti scss/_variables.scsspapeles ti Bootstraps.

Dagiti abuabu

Ti nalawa a grupo dagiti abuabuan a variable ken ti mapa ti Sass iti scss/_variables.scsspara kadagiti agtultuloy a maris ti abuabu iti ballasiw ti proyektom.

Iti uneg scss/_variables.scssti , makasarakka kadagiti variable ti kolor ti Bootstrap ken ti mapa ti Sass. Adda ditoy ti pagarigan ti $colorsmapa ti 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;

Inayon, ikkaten, wenno baliwan dagiti pateg iti uneg ti mapa tapno mapabaro no kasano a maus-usar dagitoy kadagiti adu a dadduma pay a paset. Ti makadakes iti daytoy a panawen, saan a tunggal maysa a paset ket agus-usar iti daytoy a mapa ti Sass. Ikagumaan dagiti masanguanan nga update a pasayaaten daytoy. Agingga iti dayta, agplano iti panangusar kadagiti ${color}variable ken daytoy a mapa ti Sass.

Dagiti paset

Adu kadagiti paset ken utilidad ti Bootstrap ket naibangon nga addaan kadagiti @eachloop nga agsublisubli iti rabaw ti mapa ti Sass. Daytoy ket nangruna a makatulong para iti panagpataud kadagiti variante ti maysa a paset babaen ti mi $theme-colorsken panagpartuat kadagiti makasungbat a variante para iti tunggal maysa a breakpoint. Bayat ti panangipasayaatmo kadagitoy a mapa ti Sass ken panagtipon manen, automatiko a makitam dagiti panagbalbaliwmo a maiparangarang kadagitoy a loop.

Dagiti Mangbalbaliw

Adu kadagiti paset ti Bootstrap ket naibangon babaen ti base-modifier class approach. Kayatna a sawen a ti kaaduan ti estilo ket naglaon iti maysa a batayan a klase (kas pagarigan, .btn) bayat a dagiti panagduduma ti estilo ket naikeddeng kadagiti klase ti mangbalbaliw (kas pagarigan, .btn-danger). Dagitoy a klase ti mangbalbaliw ket naibangon manipud iti $theme-colorsmapa tapno mangaramid ti panagpasayaat ti numero ken nagan dagiti klase ti mangbalbaliwtayo.

Adtoy ti dua a pagarigan no kasano ti panag-loop-tayo iti rabaw ti $theme-colorsmapa tapno mangpataud kadagiti mangbalbaliw iti .alertpaset ken amin a .bg-*utilidadtayo iti likudan.

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

Nasungbatan

Dagitoy a Sass loop ket saan a limitado kadagiti mapa ti kolor, met. Mabalinmo pay ti mangpataud kadagiti makasungbat a panagduduma dagiti paset wenno utilidadmo. Alaen a pagarigan dagiti responsive text alignment utilities mi a sadiay paglaokenmi ti maysa a @eachloop para iti $grid-breakpointsmapa ti Sass nga addaan iti media query include.

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

No kasapulam koma a baliwan ti $grid-breakpoints, dagiti panagbalbaliwmo ket agaplikar kadagiti amin a loop nga agsublisubli iti rabaw dayta a mapa.

Dagiti variable ti CSS

Ti Bootstrap 4 ket mangiraman ti agarup a dua a dosena a kostumbre a tagikua ti CSS (dagiti variable) iti naurnong a CSS-na. Dagitoy ket mangipaayda ti nalaka a panagserrek kadagiti kadawyan a maus-usar a pateg a kas dagiti kolor ti temami, dagiti breakpoint, ken dagiti kangrunaan a stack ti letra no agtartrabaho iti Inspektor ti browsermo, maysa a sandbox ti kodigo, wenno sapasap a panagprototipo.

Dagiti magun-od a variable

Adda ditoy dagiti variable nga iramantayo (lalagipen a ti :rootket kasapulan). Masarakan dagitoy iti _root.scssfile-mi.

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

Dagiti pagarigan

Dagiti variable ti CSS ket mangitukon ti kapada a fleksibilidad kadagiti variable ti Sass, ngem awan ti kasapulan ti panagtipon sakbay a maiserbi iti browser. Kas pagarigan, ditoy ket i-reset tayo ti font ken link styles ti panid tayo babaen kadagiti CSS variables.

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

Dagiti variable ti breakpoint

Bayat nga orihinal nga inramanmi dagiti breakpoint kadagiti CSS a variablemi (kas pagarigan, --breakpoint-md), dagitoy ket saan a nasuportaran kadagiti panagsaludsod ti media , ngem mabalin pay laeng nga usaren dagitoy iti uneg dagiti ruleset kadagiti panagsaludsod ti media. Dagitoy a breakpoint a variable ket agtalinaed iti naurnong a CSS para iti agpalikud a panagtunos gapu ta dagitoy ket mabalin nga usaren babaen ti JavaScript. Ammuen ti ad-adu pay iti spec.

Adtoy ti pagarigan no ania ti saan a nasuportaran:

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

Ket ditoy ti pagarigan no ania ti masuportaran:

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