Tanya ƒe Bootstrap
Trɔ asi le Bootstrap 4 ŋu kple míaƒe Sass tɔtrɔ yeye siwo wotu ɖe eme na xexeame katã ƒe atsyã ƒe tiatia hena tanya bɔbɔe kple akpa ƒe tɔtrɔ.
Le Bootstrap 3 me la, tanyawo ƒe akpa gãtɔ tso tɔtrɔwo ƒe tsɔtsɔ ɖe le LESS me, CSS si wowɔ ɖe ɖoɖo nu, kple tanya ƒe atsyã gbalẽvi si to vovo si míetsɔ de míaƒe distfaɛlwo me gbɔ. Ne ame aɖe dze agbagba vie la, ate ŋu atrɔ asi le Bootstrap 3 ƒe dzedzeme ŋu keŋkeŋ evɔ meka asi faɛl veviawo ŋu o. Bootstrap 4 naa mɔnu nyanyɛ aɖe, gake wòto vovo vie.
Fifia, wowɔa tanya to Sass ƒe tɔtrɔwo, Sass ƒe anyigbatatawo, kple CSS si wowɔ ɖe ɖoɖo nu dzi. Tanya ƒe atsyãgbalẽ si woɖo ɖi na ame aɖeke megali o; ke boŋ àte ŋu ana tanya si wotu ɖe eme la nate ŋu atsɔ gradients, shadows, kple bubuwo akpe ɖe eŋu.
Zã míaƒe dzɔtsoƒe Sass faɛlwo nàtsɔ awɔ tɔtrɔwo, anyigbatatawo, mixins, kple bubuwo ŋudɔ.
Ɣesiaɣi si wòanya wɔ la, ƒo asa na asitɔtrɔ le Bootstrap ƒe faɛl veviwo ŋu. Le Sass gome la, ema fia be nàwɔ wò ŋutɔ wò atsyãgbalẽ si xɔa Bootstrap ale be nàte ŋu atrɔ asi le eŋu ahakekee ɖe enu. Ne míetsɔe be èle package manager abe npm ene zãm la, àkpɔ faɛl ƒe ɖoɖo si le abe esia ene:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scssNe èɖe míaƒe dzɔtsoƒe faɛlwo eye mèle package manager zãm o la, àdi be yeatsɔ asi aɖo nane si sɔ kple ɖoɖo ma, si ana Bootstrap ƒe dzɔtsoƒe faɛlwo nato vovo tso tɔwò gbɔ.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scssLe wò custom.scss, àxɔ Bootstrap ƒe dzɔtsoƒe Sass faɛlwo. Tiatia eve le asiwò: tsɔ Bootstrap la katã de eme, alo nàtia akpa siwo nèhiã. Míele dzi dem ƒo na mamlɛtɔa, togbɔ be nyae be nudidi aɖewo kple nusiwo dzi woanɔ te ɖo le míaƒe akpawo katã me hã. Ahiã hã be nàde JavaScript aɖewo eme na míaƒe plugins.
// 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";Ne ɖoɖo ma le teƒea la, àte ŋu adze asitɔtrɔ le Sass ƒe tɔtrɔwo kple anyigbatata siwo le wò custom.scss. Àteŋu adze Bootstrap ƒe akpa aɖewo tsɔtsɔ kpee hã gɔme le // Optionalakpaa te ne ehiã. Míeɖo aɖaŋu be nàzã import stack bliboa tso míaƒe bootstrap.scssfaɛl me abe wò gɔmedzedze ene.
Sass ƒe tɔtrɔ ɖesiaɖe le Bootstrap 4 me la de !defaultaflaga si ɖe mɔ na wò be nàɖe asi le tɔtrɔ ƒe asixɔxɔ gbãtɔ ŋu le wò ŋutɔ wò Sass me evɔ màtrɔ asi le Bootstrap ƒe dzɔtsoƒe ƒe nuŋɔŋlɔ ŋu o. Kpɔ tɔtrɔwo ƒe kɔpi eye nàde wo eme alesi wòhiã, trɔ asi le woƒe asixɔxɔwo ŋu, eye nàɖe !defaultaflagaa ɖa. Ne wotsɔ tɔtrɔ aɖe de asi na ame xoxo la, ekema womagagbugbɔe ade asi na to asixɔxɔ gbãtɔ siwo le Bootstrap me dzi o.
Àkpɔ Bootstrap ƒe tɔtrɔwo ƒe xexlẽdzesi bliboa le scss/_variables.scss.
Tɔtrɔwo ƒe ʋuʋu le Sass faɛl ɖeka me ateŋu ava do ŋgɔ na tɔtrɔ gbãtɔwo alo le wo megbe. Ke hã, ne èle asi trɔm le Sass faɛlwo katã ŋu la, ele be wò asiɖeɖe le wo ŋu nava hafi nàxɔ Bootstrap ƒe Sass faɛlwo.
Kpɔɖeŋu aɖe si trɔa background-colorkple colorna <body>ne wole Bootstrap xɔm hele eƒom ƒu to npm dzi lae nye esi:
// Your variable overrides
$body-bg: #000;
$body-color: #111;
// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";Gbugbɔ gblɔ alesi wòhiã na tɔtrɔ ɖesiaɖe le Bootstrap me, si me xexeame katã ƒe tiatia siwo le ete hã le.
Bootstrap 4 la lɔ Sass anyigbatata ʋee aɖewo ɖe eme, asixɔxɔ vevi eve siwo nana wònɔa bɔbɔe be woawɔ CSS siwo do ƒome kplii ƒe ƒomewo. Míezãa Sass ƒe anyigbatatawo na míaƒe amadedewo, grid breakpoints, kple bubuwo. Abe Sass ƒe tɔtrɔwo ene la, Sass ƒe anyigbatatawo katã me !defaultaflaga la le eye woateŋu axe mɔ ɖe wo nu ahakeke wo ɖe enu.
Woƒoa míaƒe Sass anyigbatata aɖewo nu ƒu ɖe ƒuƒluwo me le gɔmedzedzea me. Wowɔa esia be woaɖe mɔ be woakeke Sass ƒe anyigbatata aɖe ɖe enu bɔbɔe, gake eva le ga si woatsɔ ana nuwo ɖeɖe le anyigbatata dzi nasesẽ vie ta.
Ne èdi be yeatrɔ asi le amadede aɖe si li xoxo le míaƒe $theme-colorsanyigbatata dzi ŋu la, tsɔ nusiwo gbɔna kpe ɖe wò Sass faɛl si nèwɔ ɖe ɖoɖo nu ŋu:
$theme-colors: (
"primary": #0074d9,
"danger": #ff4136
);Ne èdi be yeatsɔ amadede yeye akpe ɖe , ŋu $theme-colorsla, tsɔ safui yeyea kple asixɔxɔ kpee:
$theme-colors: (
"custom-color": #900
);Ne èdi be yeaɖe amadedewo ɖa le $theme-colors, alo anyigbatata bubu ɖesiaɖe dzi la, zã map-remove. Nyae be ele be nàtsɔe ade míaƒe nudidiwo kple tiatiawɔblɔɖewo dome:
// 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";
...Bootstrap tsɔe be safui tɔxɛ aɖewo le Sass ƒe anyigbatatawo me abe alesi míezãe eye mía ŋutɔwo míekeke esiawo ɖe enu ene. Ne èle anyigbatata siwo le eme la trɔm la, àte ŋu ado go vodadawo le afisi wole Sass ƒe anyigbatata aɖe koŋ ƒe safui zãm le.
Le kpɔɖeŋu me, míezãa primary, success, kple dangersafui siwo tso $theme-colorshena kadodowo, abɔtawo, kple nuŋlɔɖi ƒe nɔnɔmewo. Mele be safui siawo ƒe asixɔxɔwo ɖɔliɖɔli nahe nya aɖeke vɛ o, gake wo ɖeɖeɖa ateŋu ahe Sass ƒe nuƒoƒoƒu ƒe kuxiwo vɛ. Le nɔnɔme siawo me la, ahiã be nàtrɔ asi le Sass ƒe kɔda si wɔa asixɔxɔ mawo ŋudɔ la ŋu.
Bootstrap zãa Sass dɔwɔwɔ geɖewo, gake ƒuƒoƒo sue aɖe koe woateŋu awɔ dɔ le tanya gbadzaa me. Míetsɔ dɔwɔwɔ etɔ̃ de eme hena asixɔxɔwo xɔxɔ tso amadede ƒe anyigbatatawo me:
@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);
}Esiawo na be nàte ŋu atia amadede ɖeka tso Sass ƒe anyigbatata me abe alesi nàzã amadede ƒe tɔtrɔ tso v3 me ene.
.custom-element {
color: gray("100");
background-color: theme-color("dark");
}Dɔ bubu aɖe hã le mía si hena amadede ƒe seƒe$theme-colors aɖe koŋ xɔxɔ tso anyigbatataa dzi. Negative level values ana amadedea nakɔ, gake level siwo kɔkɔ wu ado viviti.
@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);
}Le nuwɔna me la, àyɔ dɔwɔwɔa eye nàto parameter eve me: amadede ƒe ŋkɔ tso $theme-colors(le kpɔɖeŋu me, gbãtɔ alo afɔku) kple xexlẽdzesi ƒe dzidzenu.
.custom-element {
color: theme-color-level(primary, -10);
}Woateŋu atsɔ dɔwɔwɔ bubuwo akpe ɖe eŋu le etsɔme alo wò ŋutɔ wò Sass si wowɔ ɖe ɖoɖo nu be nàwɔ level dɔwɔwɔwo na Sass ƒe anyigbatata bubuwo, alo gɔ̃ hã generic ɖeka ne èdi be yeanye nyagbɔgblɔ geɖe wu.
Dɔ bubu ɖeka si míetsɔ de Bootstrap mee nye amadede ƒe vovototodedeameme ƒe dɔwɔwɔ, color-yiq. Ezãa YIQ ƒe amadede ƒe teƒea tsɔ trɔa amadede si me kɔ ( #fff) alo viviti ( #111) si to vovo le eɖokui si si wotu ɖe gɔmeɖoanyi ƒe amadede si woɖo dzi. Dɔwɔwɔ sia ɖea vi ŋutɔ na mixins alo loops afisi nèle klass geɖewo wɔm le.
Le kpɔɖeŋu me, be nàwɔ amadede ƒe nɔnɔmetatawo tso míaƒe $theme-colorsanyigbatata dzi la:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-yiq($value);
}
}Woate ŋu azãe hã na vovototodedeameme ƒe hiahiã siwo hiã zi ɖeka:
.custom-element {
color: color-yiq(#000); // returns `color: #fff`
}Àte ŋu agblɔ gɔmeɖoanyi ƒe amadede hã kple míaƒe amadede ƒe nɔnɔmetata ƒe dɔwɔwɔwo:
.custom-element {
color: color-yiq(theme-color("dark")); // returns `color: #fff`
}Trɔ asi le Bootstrap 4 ŋu kple míaƒe tɔtrɔ tɔxɛwo ƒe faɛl si wotu ɖe eme eye nàtrɔ xexeame katã ƒe CSS ƒe didiwo bɔbɔe kple $enable-*Sass tɔtrɔ yeyewo. Trɔ asi le tɔtrɔ aɖe ƒe asixɔxɔ ŋu eye nàgbugbɔ aƒo ƒu kple npm run testalesi wòhiã.
Àteŋu akpɔ tɔtrɔ siawo eye nàtrɔ asi le wo ŋu na xexeame katã ƒe tiatia veviwo le Bootstrap ƒe scss/_variables.scssfaɛl me.
| Nusiwo trɔna | Dzidzenuwo | Nuɖᴐɖᴐ |
|---|---|---|
$spacer |
1rem(si woɖo ɖi), alo asixɔxɔ ɖesiaɖe > 0 |
Tsɔ spacer ƒe asixɔxɔ gbãtɔ si woatsɔ awɔ míaƒe spacer dɔwɔnuwo le ɖoɖowɔɖi me . |
$enable-rounded |
true(si woɖo ɖi) alofalse |
Enaa border-radiusatsyã siwo woɖo ɖi do ŋgɔ la wɔa dɔ le akpa vovovowo dzi. |
$enable-shadows |
truealo false(si woɖo ɖi) . |
Enaa box-shadowatsyã siwo woɖo ɖi do ŋgɔ la wɔa dɔ le akpa vovovowo dzi. |
$enable-gradients |
truealo false(si woɖo ɖi) . |
Enaa gradients siwo woɖo do ŋgɔ la wɔa dɔ to background-imageatsyãwo dzi le akpa vovovowo dzi. |
$enable-transitions |
true(si woɖo ɖi) alofalse |
Enaa transitions siwo woɖo ɖi do ŋgɔ la wɔa dɔ le akpa vovovowo dzi. |
$enable-hover-media-query |
truealo false(si woɖo ɖi) . |
Woɖe asi le eŋu |
$enable-grid-classes |
true(si woɖo ɖi) alofalse |
Enaa CSS ƒe klasswo ƒe dzidzi na grid ɖoɖoa (le kpɔɖeŋu me, .container, .row, .col-md-1, kple bubuawo). |
$enable-caret |
true(si woɖo ɖi) alofalse |
Enaa pseudo element caret wɔa dɔ le .dropdown-toggle. |
$enable-print-styles |
true(si woɖo ɖi) alofalse |
Enaa atsyãwo wɔa dɔ hena agbalẽtata nyuie wu. |
Wotu Bootstrap ƒe akpa vovovoawo kple dɔwɔnu geɖewo to amadede siwo kplɔ wo nɔewo ɖo siwo woɖe fia le Sass ƒe anyigbatata me dzi. Woateŋu atsɔ anyigbatata sia awɔ loop le Sass me be woawɔ se siwo kplɔ wo nɔewo ɖo kaba.
Amadede siwo katã le Bootstrap 4 me, li abe Sass ƒe tɔtrɔwo kple Sass ƒe nɔnɔmetata le scss/_variables.scssfaɛl me ene. Woakeke esia ɖe enu le nu suesuesue siwo woaɖe ɖe go emegbe me be woatsɔ amadede bubuwo akpe ɖe eŋu, abe greyscale palette si míetsɔ de eme xoxo ene.
Ale si nàte ŋu azã esiawo le wò Sass me enye si:
// With variable
.alpha { color: $purple; }
// From the Sass map with our `color()` function
.beta { color: color("purple"); }Amadede ƒe dɔwɔnu ƒe klasswo hã li na ɖoɖowɔwɔ colorkple background-color.
Le etsɔme la, míaɖoe be míana Sass ƒe anyigbatatawo kple tɔtrɔwo na amadede ɖesiaɖe ƒe vɔvɔliwo abe alesi míewɔe kple amadede ɣi siwo le ete ene.
Míezãa amadedewo katã ƒe akpa sue aɖe tsɔ wɔa amadede ƒe ƒuƒoƒo sue aɖe hena amadede ƒe ɖoɖowo wɔwɔ, si hã li abe Sass ƒe tɔtrɔwo kple Sass ƒe anyigbatata le Bootstraps ƒe scss/_variables.scssfaɛl me.
Gbeɖiɖi ƒe tɔtrɔwo ƒe ƒuƒoƒo si keke ta kple Sass ƒe nɔnɔmetata le scss/_variables.scsshena amadede ɣi ƒe vɔvɔli siwo mewɔa tɔtrɔ o le wò dɔa katã me.
Le scss/_variables.scss, me la, àkpɔ Bootstrap ƒe amadede ƒe tɔtrɔwo kple Sass ƒe anyigbatata. $colorsSass ƒe anyigbatata ƒe kpɔɖeŋu aɖee nye esi :
$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;Tsɔ asixɔxɔwo kpee, ɖe wo ɖa, alo trɔ asi le wo ŋu le anyigbatataa me be nàtrɔ asi le alesi wozãa wo le akpa bubu geɖe me ŋu. Nublanuitɔe le ɣeyiɣi sia me la, menye akpa ɖesiaɖee zãa Sass ƒe anyigbatata sia o. Nu yeye siwo woawɔ le etsɔme adze agbagba be yewoawɔ esia wòanyo ɖe edzi. Vaseɖe ɣemaɣi la, wɔ ɖoɖo ɖe ${color}tɔtrɔawo kple Sass ƒe anyigbatata sia zazã ŋu.
Wotu Bootstrap ƒe akpa kple dɔwɔnu geɖewo kple @eachloop siwo gbugbɔna yia Sass ƒe anyigbatata dzi. Esia kpena ɖe ame ŋu vevietɔ na akpa aɖe ƒe tɔtrɔwo wɔwɔ to míaƒe $theme-colorskple tɔtrɔ siwo ɖoa nya ŋu wɔwɔ na breakpoint ɖesiaɖe. Ne èle Sass ƒe anyigbatata siawo trɔm eye nègbugbɔ ƒo wo nu ƒu la, àkpɔ wò tɔtrɔwo le ɖokuiwò si wòadze le loop siawo me.
Wotu Bootstrap ƒe akpa geɖewo kple base-modifier class mɔnu. Esia fia be atsyã ƒe akpa gãtɔ le gɔmeɖoanyi ƒe hatsotso aɖe me (le kpɔɖeŋu me, .btn) esime atsyã ƒe tɔtrɔwo le tɔtrɔ ƒe hatsotsowo me ko (le kpɔɖeŋu me, .btn-danger). Wotu tɔtrɔɖenu ƒe hatsotso siawo tso $theme-colorsanyigbatata dzi be woawɔ tɔtrɔ ɖe míaƒe tɔtrɔ ƒe hatsotsowo ƒe xexlẽme kple ŋkɔ ŋu.
Alesi míewɔa loop ɖe $theme-colorsanyigbatata dzi tsɔ wɔa tɔtrɔwo ɖe .alertakpaa kple míaƒe .bg-*megbe dɔwɔnuwo katã ŋu ƒe kpɔɖeŋu evee nye esi.
// 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);
}Sass loop siawo menye amadede ƒe anyigbatatawo ɖeɖeko o, nenema ke. Àte ŋu awɔ wò akpawo alo dɔwɔnuwo ƒe tɔtrɔ siwo ɖoa nya ŋu hã. Tsɔ kpɔɖeŋu míaƒe ŋuɖoɖo nuŋɔŋlɔ ƒe ɖoɖowɔwɔ dɔwɔnuwo afisi míetsakaa @eachloop na $grid-breakpointsSass anyigbatata kple media biabia de eme.
@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; }
}
}Ne ehiã be nàtrɔ asi le wò $grid-breakpoints, wò tɔtrɔwo awɔ dɔ ɖe loop siwo katã gbugbɔna le anyigbatata ma dzi la dzi.
Bootstrap 4 tsɔ CSS ƒe nɔnɔme tɔxɛwo (trɔtrɔwo) siwo ade blaeve vɔ eve de eƒe CSS si woƒo ƒu me. Esiawo naa mɔnukpɔkpɔ bɔbɔe be nàkpɔ asixɔxɔ siwo wozãna zi geɖe abe míaƒe tanya ƒe amadedewo, breakpoints, kple ŋɔŋlɔdzesi gbãtɔwo ƒe ƒuƒoƒo ne èle dɔ wɔm le wò web-browser ƒe Inspector, code sandbox, alo general prototyping me.
Trɔtrɔ siwo míetsɔ de eme lae nye esi (de dzesii be the :rootis required). Wole míaƒe _root.scssfaɛl la me.
: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;
}CSS ƒe tɔtrɔwo naa asitɔtrɔ le nɔnɔmewo ŋu abe Sass ƒe tɔtrɔwo ene, gake mehiã be woaƒo wo nu ƒu hafi atsɔ wo ana web-browser la o. Le kpɔɖeŋu me, afisia míele míaƒe axaa ƒe nuŋɔŋlɔ kple kadodo ƒe atsyãwo gbugbɔ ɖom kple CSS tɔtrɔwo.
body {
font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
color: var(--blue);
}Togbɔ be míetsɔ breakpoints de míaƒe CSS tɔtrɔwo me gbã (le kpɔɖeŋu me, --breakpoint-md), womedoa alɔ esiawo le media biabiawo me o , gake woateŋu azã wo kokoko le sewo me le media biabiawo me. Brekpoint ƒe tɔtrɔ siawo gakpɔtɔ le CSS si woƒo ƒu me hena megbedede ƒe sɔsɔ ne wobu be woateŋu azã wo to JavaScript dzi. Srɔ̃ nu geɖe le spec la me.
Nusiwo womeda asi ɖe edzi o ƒe kpɔɖeŋu aɖee nye esi:
@media (min-width: var(--breakpoint-sm)) {
...
}Eye nusiwo ŋu wodoa alɔe ƒe kpɔɖeŋu aɖee nye esi:
@media (min-width: 768px) {
.custom-element {
color: var(--primary);
}
}