Source

Mata duree Bootstrap jedhu

Jijjiiramoota Sass keenya haaraa ijaaraman waliin Bootstrap 4 filannoo akkaataa addunyaa mata duree salphaa fi jijjiirama qaamaaf dhuunfachiisi.

Seensa

Bootstrap 3 keessatti, mata dureen baay'inaan LESS keessatti jijjiiramaa irra darbuu, CSS amala, fi akkaataa mata duree adda ta'een kan nuti distfaayiloota keenya keessatti hammatameen oofaa ture. Carraaqqii tokko tokkoon, namni tokko faayiloota ijoo osoo hin tuqin bifa Bootstrap 3 guutummaatti irra deebi'ee dizaayinii gochuu danda'a. Bootstrap 4 mala barame, garuu xiqqoo adda ta'e kenna.

Amma, mataduree jijjiiramoota Sass, kaartaa Sass, fi CSS amalaatiin raawwatama. Kana booda barruu akkaataa mata duree of kenne hin jiru; kanaa mannaa, mata duree ijaarame garagalcha, gaaddidduu fi kkf akka dabalu dandeessisuu dandeessa.

Sass jedhama

Jijjiiramoota, kaartaa, mixins, fi kkf fayyadamuuf faayiloota Sass madda keenya fayyadami. Ijaarsa keenya keessatti dhimmoota naannessuu biraawzari irratti uumaman ittisuuf sirritti naanneffamuu Sass gara 6tti guddifneerra (durtii 5 dha).

Caasaa faayilii

Yeroo danda'ametti, faayiloota ijoo Bootstrap fooyyessuu irraa fagaadhu. Sass'f, sun jechuun akkaataa mataa keetii kan Bootstrap galchu uumuu jechuudha akka ati fooyyessuu fi dheeressuu dandeessuuf. Geggeessaa paakeejii akka npm fayyadamaa jirta jennee yoo fudhanne, caasaa faayilii akkas fakkaatu ni qabaatta:

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

Yoo faayiloota madda keenya buufattee fi geggeessaa paakeejii hin fayyadamne ta'e, faayiloota madda Bootstrap kan kee irraa adda baasuun, waan caasaa sanaa wajjin walfakkaatu harkaan qindeessuu barbaadda.

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

Galchuu

Keessan keessatti custom.scss, faayiloota Sass madda Bootstrap galchita. Filannoo lama qabda: Bootstrap hunda hammachiisi, ykn kutaalee si barbaachisan filadhu. Kanneen lammaffaa ni jajjabeessina, qaamolee keenya hunda keessatti ulaagaalee fi hirkattummaa tokko tokko akka jiran beekaa ta'us. Akkasumas JavaScript tokko tokko plugins keenyaaf dabaluu si barbaachisa.

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

Qindaa'inni sun bakka jirutti, jijjiiramoota Sass fi kaartaa kamiyyuu fooyyessuu jalqabuu dandeessa custom.scss. // OptionalAkkasumas kutaalee Bootstrap kutaa jalatti akka barbaachisummaa isaatti dabaluu jalqabuu dandeessa . Tuuta galchuu guutuu bootstrap.scssfaayilii keenya irraa akka ka'umsa keetti fayyadamuu yaada kennina.

Durtii jijjiiramaa

Jijjiiramaan Sass hundi Bootstrap 4 keessatti !defaultalaabaa gatii durtii jijjiiramaa Sass mataa kee keessatti osoo koodii madda Bootstrap hin fooyyessin akka irra darbitu si dandeessisu of keessatti qabata. Jijjiiramoota akka barbaachisummaa isaatti waraabii fi maxxansi, gatiiwwan isaanii fooyyessi, fi !defaultalaabaa haqi. Yoo jijjiiramaan duraan ramadame, kana booda gatiiwwan durtii Bootstrap keessatti argamaniin irra deebi'amee hin ramadamu.

Tarree guutuu jijjiiramoota Bootstrap keessatti ni argattu scss/_variables.scss.

Jijjiiramaan irra darbuun faayilii Sass walfakkaataa keessaa jijjiiramoota durtii dura ykn booda dhufuu danda'a. Haa ta'u malee, yeroo faayilii Sass hunda irra darbitu, irra darbiin kee osoo faayilii Sass Bootstrap galchuu kee dura dhufuu qaba.

Fakkeenyi yeroo Bootstrap karaa npm galchuu fi qindeessuu fi background-colorkan colorjijjiiru kunooti:<body>

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

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

Jijjiiramaa kamiyyuu Bootstrap keessatti akka barbaachisummaa isaatti irra deebi'i, filannoowwan waliigalaa armaan gadii dabalatee.

Kaartaa fi loopoota

Bootstrap 4 kaartaa Sass muraasa, lamaan gatii furtuu maatii CSS walqabatan uumuuf salphaa taasisan of keessatti qabata. Halluuwwan keenyaaf, qabxiiwwan ciccitaa giiridii fi kkf kaartaa Sass fayyadamna. Akkuma jijjiiramoota Sass, kaartoonni Sass hundi !defaultalaabaa of keessatti qabatanii irra darbuu fi dheerachuu danda'u.

Kaartoonni Sass keenya tokko tokko durtiidhaan gara duwwaatti walitti makamu. Kunis kaartaa Sass kenname salphaatti babal'isuuf kan raawwatamu yoo ta'u, garuu baasii wantoota kaartaa irraa buqqisuun xiqqoo rakkisaa taasisuun dhufa.

Kaartaa fooyyessuu

Halluu kaartaa keenya keessatti jiru fooyyessuuf $theme-colors, faayilii Sass amala kee irratti kanneen armaan gadii dabali:

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

Kaartaa irratti dabali

Halluu haaraa gara tti $theme-colorsdabaluuf, furtuu fi gatii haaraa dabali:

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

Kaartaa irraa kaasi

$theme-colorsHalluuwwan , ykn kaartaa biroo kamiyyuu irraa haquuf , fayyadami map-remove. Ulaagaalee fi filannoowwan keenya gidduutti galchuu akka qabdan beekaa:

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

Furtuuwwan barbaachisan

Bootstrap akka nuti fayyadamnetti furtuuwwan murtaa'an tokko tokko kaartaa Sass keessa jiraachuu isaanii fudhatee ofuma keenyaan kanneen dheeressina. Yeroo kaartaa hammataman dhuunfattu, bakka furtuun kaartaa Sass murtaa'e fayyadamaa jirutti dogongorri si mudachuu danda'a.

Fakkeenyaaf, primary, success, fi dangerfurtuuwwan irraa $theme-colorshidhannoowwan, qareewwanii fi haalata unkaaf fayyadamna. Gatii furtuuwwan kanaa bakka buusuun dhimma tokkollee dhiyeessu hin qabu, garuu isaan haquun dhimmoota qindeessaa Sass fiduu danda'a. Fakkeenyota kana keessatti, koodii Sass kan gatiiwwan sana fayyadamu fooyyessuu si barbaachisa.

Faankishiniiwwan

Bootstrap faankishiniiwwan Sass hedduu fayyadama, garuu tuuta xiqqaa qofatu mata duree waliigalaa irratti hojiirra oola. Gatii kaartaa halluu irraa argachuuf faankishiniiwwan sadii hammanneerra:

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

Isaan kun kaartaa Sass irraa halluu tokko akka filattu si dandeessisu akkuma akkaataa jijjiiramaa halluu v3 irraa fayyadamtu.

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

Akkasumas kaartaa irraa halluu sadarkaa murtaa'e argachuuf faankishinii biraa qabna. $theme-colorsGatiin sadarkaa negaatiivii halluu ni ibsu, sadarkaan ol'aanaa ammoo ni dukkaneessa.

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

Qabatamaan, faankishinii waamtee qajoojiiwwan lama keessa darbita: maqaa halluu irraa $theme-colors(fkn, jalqabaa ykn balaa) fi sadarkaa lakkoofsaa.

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

Faankishiniiwwan dabalataa gara fuulduraatti dabalamuu danda'u ykn Sass amala mataa keetii faankishiniiwwan sadarkaa kaartaa Sass dabalataa uumuuf, ykn illee yoo caalaatti verbose ta'uu barbaadde kan waliigalaa.

Faallaa halluu

Faankishiniin dabalataa tokko Bootstrap keessatti hammatamnu faankishinii walfaallaa halluu, color-yiq. Halluu bu'uuraa ifteessame irratti hundaa'uun halluu walfaallaa ifaa ( ) ykn dukkanaa'aa ( ) ofumaan deebisuuf iddoo halluu YIQ fayyadama . Faankishiniin kun keessumaa mixins ykn loops bakka ati gita hedduu uumuuf faayidaa qaba.#fff#111

Fakkeenyaaf, $theme-colorskaartaa keenya irraa sajoo halluu uumuuf:

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

Akkasumas fedhii walfaallaa yeroo tokkootiif fayyadamuu ni danda'a:

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

Akkasumas faankishiniiwwan kaartaa halluu keenyaatiin halluu bu'uuraa ifteessuu dandeessa:

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

Filannoowwan Sass

Bootstrap 4 faayilii jijjiiramoota amala ijaarame keenyaan dhuunfachiisi fi filannoowwan CSS addunyaa $enable-*jijjiiramoota Sass haaraatiin salphaatti jijjiiri. Gatii jijjiiramaa irra darbiiti npm run testakka barbaachisummaa isaatti waliin irra deebi'ii qindeessii.

Jijjiiramoota kana filannoowwan waliigalaa furtuu scss/_variables.scssfaayilii Bootstrap keessatti argachuu fi dhuunfachuu dandeessa.

Jijjiiramaa Duudhaalee Ibsa
$spacer 1rem(durtii), ykn gatii kamiyyuu > 0 Faayidaalee addaan baafannaa keenya sagantaadhaan uumuuf gatii addaan baafannaa durtii ifteessa .
$enable-rounded true(durtii) yknfalse border-radiusQaamolee adda addaa irratti akkaataa durtii ibsaman dandeessisa .
$enable-shadows trueykn false(durtii) . box-shadowQaamolee adda addaa irratti akkaataa durtii ibsaman dandeessisa .
$enable-gradients trueykn false(durtii) . Garaagariiwwan durtii ibsaman karaa background-imageakkaataa qaamolee adda addaa irratti dandeessisa.
$enable-transitions true(durtii) yknfalse transitionQaamolee adda addaa irratti s durtii ibsame dandeessisa .
$enable-prefers-reduced-motion-media-query true(durtii) yknfalse prefers-reduced-motionGaaffii miidiyaa dandeessisa , kan sochiiwwan/ce'umsa murtaa'an filannoowwan fayyadamtootaa biraawzari/sirna hojii irratti hundaa'uun ukkaamsa.
$enable-hover-media-query trueykn false(durtii) . Kan hin fayyadamne
$enable-grid-classes true(durtii) yknfalse Dhaloota gita CSS sirna tarjaadhaaf dandeessisa (fkn, .container, .row, .col-md-1, fi kkf).
$enable-caret true(durtii) yknfalse Qaama sobaa caret irratti dandeessisa .dropdown-toggle.
$enable-print-styles true(durtii) yknfalse Akkaataawwan maxxansaa fooyyessuuf dandeessisa.
$enable-validation-icons true(durtii) yknfalse Mallattoolee background-imagegaltee barruu keessaa fi unkaalee amala tokko tokko haalata mirkaneessuuf dandeessisa.

Halluu

Qaamolee fi faayidaa adda addaa Bootstrap hedduun isaanii halluuwwan walduraa duubaan kaartaa Sass keessatti ibsamaniin ijaaramaniiru. Kaartaan kun Sass keessatti loop gochuun saffisaan tartiiba tuuta seeraa uumuuf ni danda'ama.

Halluu hunda

Halluuwwan Bootstrap 4 keessatti argaman hundi, akka jijjiiramoota Sass fi kaartaa Sass scss/_variables.scssfaayilii keessatti argamu. Kunis gadhiifama xixiqqoo itti aanan keessatti golgaa dabalataa dabaluudhaaf ni babal'ata, baay'ee akkuma paleetii halluu diimaa duraan daballee.

Cuquliisa
Indiigoo
Diimaa-cuquliisa
Halluu diimaatti dhiyaatu
Diimaa
Burtukaana
Keelloo
Magariisa
Teal jedhama
Saayaan

Sass keessan keessatti akkamitti kanneen itti fayyadamuu dandeessan kunooti:

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

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

Gitoota faayidaa halluucolor saaguufis ni argamu background-color.

Gara fuulduraatti, akkuma halluuwwan halluu diimaa armaan gadiitiin goone, kaartaa Sass fi jijjiiramoota golgaa halluu tokkoon tokkoo isaaniif dhiyeessuuf kaayyeffanna.

Halluuwwan mata duree

Tuuta xiqqaa halluuwwan hunda fayyadamnee iskiimota halluu uumuuf paleetii halluu xiqqaa uumuuf, akkasumas akka jijjiiramoota Sass fi kaartaa Sass scss/_variables.scssfaayilii Bootstraps keessatti argama.

Sadarkaa tokkoffaa
Sadarkaa lammaffaa
Milkaa'ina
Hamaa
Akeekkachiisa
Info
Ifa
Duukkana

Gurraacha

Tuuta bal'aa jijjiiramoota halluu diimaa fi kaartaa Sass scss/_variables.scsskeessaa golgaawwan halluu walfakkaataa piroojektii kee irratti. Hubadhaa kunniin “halluu diimaa qabbanaawaa” ta’uu isaanii, isaanis gara sagalee halluu diimaa xixiqqootti kan ce’an yoo ta’u, halluu diimaa giddu galeessa ta’e osoo hin taane.

100 ta’a
200 ta’a
300 ta’a
400 ta’a
500 ta’a
600 ta’a
700 ta’a
800 ta’a
900 ta’a

Keessatti scss/_variables.scss, jijjiiramoota halluu Bootstrap fi kaartaa Sass ni argatta. $colorsFakkeenyi kaartaa Sass kunooti :

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

Akkaataa isaan qaamolee biroo hedduu keessatti itti fayyadaman haaromsuuf gatiiwwan kaartaa keessaa dabali, haqi, ykn fooyyessi. Kan nama dhibu yeroo kanatti, qaamni hundi kaartaa Sass kana hin fayyadamu. Fuulduratti wanti haaraan kana irratti fooyyessuuf ni carraaqu. ${color}Hanga sanatti jijjiiramootaa fi kaartaa Sass kana fayyadamuu irratti karoorfadhu .

Qaamolee

Qaamolee fi faayidaa Bootstrap hedduun isaanii @eachloopoota kaartaa Sass irratti irra deddeebi'an waliin ijaaramaniiru. Kun keessumaa garaagarummaa qaama tokkoo keenyaan maddisiisuu $theme-colorsfi tokkoon tokkoo qabxii cabsuuf garaagarummaa deebii kennuu danda'u uumuuf gargaara. Yeroo kaartaa Sass kana dhuunfachiiftuu fi irra deebitee qindeessitu, jijjiiramoonni kee ofumaan loopoota kana keessatti calaqqisan ni argita.

Fooyyessitoota

Qaamonni Bootstrap baay'een isaanii mala gita bu'uuraa-fooyyessaatiin ijaaramaniiru. Kana jechuun harki guddaan akkaataa gita bu'uuraatti qabama (fkn, .btn) yoo ta'u jijjiiramoonni akkaataa gita fooyyessaa (fkn, .btn-danger) irratti daangeffama. $theme-colorsGitoota fooyyessaa kun lakkoofsa fi maqaa gita fooyyessaa keenyaa dhuunfachuu gochuuf kaartaa irraa ijaaramaniiru .

Fakkeenyonni lama akkaataa $theme-colorskaartaa irratti fooyyessitoota qaama fi faayidaa duubbee .alertkeenya hunda maddisiisuudhaaf loop goonu kunooti..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);
}

Deebii kan kennu

Looppiiwwan Sass kun kaartaa halluu qofaan hin daangeffaman, akkasumas. Akkasumas garaagarummaa deebii qaamolee ykn faayidaa keetii maddisiisuu dandeessa. Fakkeenyaaf faayilii qindaa'ina barruu deebii kennuu keenyaa bakka nuti @eachloop $grid-breakpointskaartaa Sass gaaffii miidiyaa dabalatee walitti maknu fudhadhu.

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

Yoo kee fooyyessuu barbaadde $grid-breakpoints, jijjiiramoonni kee loopoota kaartaa sana irratti irra deddeebi'an hunda irratti raawwatiinsa ni qabaata.

Jijjiiramoota CSS

Bootstrap 4 naannoo amaloota amala CSS (jijjiiramoota) kudhan lama CSS isaa qindaa'e keessatti of keessatti qabata. Isaan kun yeroo Inspeektaraa biraawzari keetii, saanduqa cirrachaa koodii, ykn proototaayipii waliigalaa keessatti hojjettu gatiiwwan yeroo baay'ee fayyadamnu kan akka halluuwwan mata duree keenyaa, qabxiiwwan cabbii, fi tuullaawwan qubee jalqabaa salphaatti argachuuf ni kennu.

Jijjiiramoota jiran

Jijjiiramoonni nuti hammachiifnu kunooti (the :rootis required ta'uu isaa hubadhu). Isaanis _root.scssfaayila keenya keessatti argamu.

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

Fakkeenyaaf

Jijjiiramoonni CSS jijjiiramoota Sass wajjin wal fakkaatu kan dhiyeessan, garuu osoo gara biraawzariitti hin tajaajilamin dura qindeessuu osoo hin barbaachisin. Fakkeenyaaf, asitti qubee fuula keenyaa fi akkaataa walqabsiisaa jijjiiramoota CSS waliin deebisaa jirra.

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

Jijjiiramoota qabxii cabsuu

Jalqaba jijjiiramoota CSS keenya keessatti qabxiiwwan ciccituu hammanne yoo ta'u (fkn, --breakpoint-md), kunniin gaaffiiwwan miidiyaa keessatti hin deeggaraman , garuu ammas gaaffiiwwan miidiyaa keessatti tuuta seeraa keessaa fayyadamuun ni danda'ama . Jijjiiramoonni qabxii cabsuu kunniin JaavaScriptiin fayyadamuu akka danda'an yoo kennameef walsimsiisa duubatti deebi'uuf CSS qindaa'e keessatti hafu. Caalaatti spec keessatti baradhaa .

Fakkeenyi waan hin deeggaramne kunooti :

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

Akkasumas fakkeenya waan deeggarameef kunooti:

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