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.
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.
Usaren dagiti taudan a Sass a file-tayo tapno magundawayan dagiti variable, mapa, mixin, ken dadduma pay.
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
└── scssNo in-downloadmo dagiti taudan a filemi 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
└── scssIti 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.
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.
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.
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.
Tapno mabaliwan ti addan a kolor iti $theme-colorsmapami, inayon dagiti sumaganad iti kostumbre a Sass file-mo:
$theme-colors: (
"primary": #0074d9,
"danger": #ff4136
);Tapno manginayon ti baro a kolor iti $theme-colors, inayon ti baro a tulbek ken pateg:
$theme-colors: (
"custom-color": #900
);Tapno maikkat dagiti kolor manipud iti $theme-colors, wenno ania man a sabali a mapa, usaren ti map-remove:
$theme-colors: map-remove($theme-colors, "success", "info", "danger");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 nga ipasayaatmo dagiti 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.
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.
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`
}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 _variables.scsspapelesmi.
| Variable nga | Dagiti Pagalagadan | Panangiladawan |
|---|---|---|
$spacer |
1rem(default), wenno ania man a pateg > 0 |
Ikeddeng ti kasisigud a pateg ti spacer tapno programatiko a mangpataud kadagiti utilidadtayo ti spacer . |
$enable-rounded |
true(default) wennofalse |
Pagbalinenna dagiti nasakbay a naikeddeng border-radiusnga estilo kadagiti nadumaduma a paset. |
$enable-shadows |
truewenno false(default) . |
Pagbalinenna dagiti nasakbay a naikeddeng box-shadownga estilo kadagiti nadumaduma a paset. |
$enable-gradients |
truewenno false(default) . |
Pagbalinenna dagiti nasakbay a naikeddeng a panagrang-ay babaen background-imagedagiti estilo kadagiti nadumaduma a paset. |
$enable-transitions |
true(default) wennofalse |
Pagbalinenna dagiti nasakbay a naikeddeng transitionnga s kadagiti nadumaduma a paset. |
$enable-hover-media-query |
truewenno false(default) . |
Saanen a maus-usar |
$enable-grid-classes |
true(default) wennofalse |
Pagbalinenna ti pannakapataud dagiti klase ti CSS para iti sistema ti grid (kas pagarigan, .container, .row, .col-md-1, kdpy.). |
$enable-caret |
true(default) wennofalse |
Pagbalinenna ti pseudo nga elemento a caret iti .dropdown-toggle. |
$enable-print-styles |
true(default) wennofalse |
Pagbalinenna dagiti estilo para iti panangpasayaat iti panagimprenta. |
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 a magun-od iti Bootstrap 4, ket magun-od a kas dagiti variable ti Sass ken ti mapa ti Sass iti filemi scss/_variables.scss. 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.
Iti masakbayan, panggepmi ti mangipaay kadagiti mapa ti Sass ken dagiti variable para kadagiti maris ti tunggal maysa a kolor a kas ti inaramidmi kadagiti kolor ti grayscale iti baba.
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.scsspapelesmi.
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 _variables.scssti , masarakam dagiti variable ti kolormi 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.
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.
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);
}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.
Ti Bootstrap 4 ket mangiraman ti agarup a dua a dosena a CSS a kostumbre a tagikua (dagiti variable) iti daytoy ket naurnong a CSS. 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.
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 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);
}Mabalinmo pay nga usaren dagiti breakpoint variablemi kadagiti saludsodmo iti media:
.content-secondary {
display: none;
}
@media (min-width(var(--breakpoint-sm))) {
.content-secondary {
display: block;
}
}