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 hammachuudhaan 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

Yeroo Sass qindeessitu ujummoo qabeenya mataa keetii fayyadamuun jijjiiramoota, kaartaa, mixins, fi kanneen biroo fayyadamuuf faayiloota madda Sass keenya fayyadami .

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

// Include any default variable overrides here (though functions won't be available)

@import "../node_modules/bootstrap/scss/bootstrap";

// Then add additional custom code here

// Custom.scss
// Option B: Include parts of Bootstrap

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@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 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. Jijjiiramoonni tokko tokko gara tti qindaa'u null, jijjiiramoonni kun qindeessaa kee keessatti yoo irra darbaman malee qabeentaa hin baasan.

Jijjiiramaan irra darbuun erga faankishiniiwwan, jijjiiramoonni, fi makaawwan keenya galfamaniin booda dhufuu qabu, garuu galteewwan hafan dura.

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

@import "../node_modules/bootstrap/scss/functions";

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

// Required
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

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 akka durtiitti 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 addaa 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 Bootstrap keessatti hammannu 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`
}

SVG irraa miliquu

escape-svgFaankishinii <, >fi #arfiilee fakkiiwwan duubbee SVG miliquuf fayyadamna . Fakkiiwwan duubbee IE keessatti sirriitti agarsiisuuf arfiileen kun miliquu qabu. Yeroo escape-svgfaankishinii fayyadamtu, URIwwan deetaa caqafamuu qabu.

Faankishiniiwwan Dabaluu fi Hir'isuu

Faankishinii CSS marsuuf faankishinii addfi fayyadamna . Kaayyoon inni jalqabaa faankishiniiwwan kanaa yeroo gatii “yunitii hin qabne” gara ibsaatti darbu dogongora akka hin uumamneefidha. Ibsitoonni akka dogongora biraawzaroota hunda keessatti deebisa, herregaan sirrii ta'us.subtractcalc0calccalc(10px - 0)

Fakkeenya bakka calc sirrii ta'etti:

$border-radius: .25rem;
$border-width: 1px;

.element {
  // Output calc(.25rem - 1px) is valid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output the same calc(.25rem - 1px) as above
  border-radius: subtract($border-radius, $border-width);
}

Fakkeenya bakka calc sirrii hin taane:

$border-radius: .25rem;
$border-width: 0;

.element {
  // Output calc(.25rem - 0) is invalid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output .25rem
  border-radius: subtract($border-radius, $border-width);
}

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.

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.

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.

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 Bootstrap keessatti argama.

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.

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 nuti $theme-colorskaartaa irratti loop goonu fooyyessitoota qaama fi faayidaa duubbee .alertkeenya hunda maddisiisuudhaaf 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, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --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);
  }
}