Source

Correa de Botas de Temática

Bootstrap 4 musuq ruwasqa Sass tikraqniykuwan ruway tukuy pacha estilo munasqakunarayku mana sasa temakuna chaymanta componente tikraykunapaq.

Qallariy

Bootstrap 3 kaqpi, temakuna aswanta LESS kaqpi, sapanchasqa CSS kaqpi, chaymanta huk sapaq tema estilo raphipi tikraq llallichiykunawan purichisqa karqa mayqinkunatachus distwillañiqiykupi churarqayku. Wakin kallpachakuywan, huk tukuyninpi musuqmanta ruwayta atinman Bootstrap 3 kaqpa rikchayninta mana llamispa uma willañiqikunata. Bootstrap 4 huk riqsisqa, ichaqa pisi hukniray ruwayta qun.

Kunanqa, tema ruwayqa Sass variables kaqwan, Sass mapakunawan, chaymanta CSS ruwasqawan hunt'akun. Mana aswan dedicado tema estilo raphi kanchu; aswanpas, ruwasqa temata atichiyta atikunki gradientekuna, llantukuna chaymanta aswan yapanapaq.

Sass

Sass pukyuta willañiqiykuta llamk'achiy variables, mapas, mixins, chaymanta aswan aprovechanaykipaq.

Willañiqip rurasqan

Atikuqtinqa, Bootstrappa uma willañiqikunata ama tikraychu. Sass kaqpaq, chay niyta munan ruwayta kikin estilo raphiyki chaymanta Bootstrap apamun chaymanta chayta tikrayta chaymanta mast'ariyta atikunki. npm hina huk paquete kamachiqta llamk'achkanki nispa yupaspa, huk willañiqi estructurayuq kanki kayhina rikch'akuq:

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

Sichus pukyuta willañiqiykuta uraykachirqanki chaymanta mana huk paquete kamachiqta llamk'achkankichu, makiwan chay ruwanaman rikch'akuq ruwayta munanki, Bootstrap pukyuta willañiqikunata sapallaykimanta sapaq waqaychaspa.

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

Importando

Qampa kaqpi custom.scss, Bootstrap kaqpa pukyuta Sass willañiqikunata apamunki. Iskay akllanakunayuq kanki: llapa Bootstrap kaqmanta churay, utaq necesitasqayki partekunata akllay. Kay qhipa kaqta kallpachayku, ichaqa yachay wakin requisitos chaymanta dependenciakuna kanku tukuy componentesniykupi. Hinallataq wakin JavaScript pluginsniykupaq churanayki tiyan.

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

Chay churaywan, mayqin Sass tikraqkuna chaymanta mapakunaykipi tikrayta qallariyta atikunki custom.scss. Hinallataq qallariyta atikunki yapayta Bootstrap kaqmanta wakinkuna // Optionalt'aqa ukhupi necesitasqanmanhina. Willañiqiykumanta hunt'asqa apamuy pilata bootstrap.scssqallariyniyki hina llamk'achiyta yuyaychayku.

Variable nisqa ñawpaqmanta churasqakuna

Sapa Sass tikraq Bootstrap 4 kaqpi !defaultbanderayuq kachkan chaymanta tikraqpa ñawpaqmanta chaninninta kikiyki Sass kaqpi mana Bootstrap pukyuta tikraspa llallichiyta atikun. Munasqaykimanhina tikraqkunata qillqaspa k'askachiy, chanikunata tikray, !defaultbanderatapas hurquy. Sichus huk tikraq churasqaña kachkan, chaymanta mana musuqmanta qusqachu kanqa Bootstrap kaqpi ñawpaqmanta chanikunawan.

Bootstrap kaqpa tikraqninkunap hunt'asqa listanta tarinki kaypi scss/_variables.scss.

Kikin Sass willañiqi ukhupi tikraq llalliykuna ñawpaqmanta utaq qhipaman ñawpaqmanta tikraqkunap hamunman. Ichaqa, Sass willañiqikunapura llalliq kachkaspa, llalliyniyki hamunan tiyan manaraq Bootstrap kaqpa Sass willañiqikunata apamuchkaptiyki.

Kaypi huk rikch'ana kachkan chaymanta chaymanta chaypaq tikran background-colorchaymanta colorBootstrap <body>npm kaqnintakama apamuspa chaymanta huñuypi:

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

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

Bootstrap kaqpi mayqin tikraqpaqpas necesario hina yapay, uraypi tukuypaq akllanakuna kaqwan.

Mapas y bucles

Bootstrap 4 huk makilla Sass mapakunayuq, llave chanin pariskuna ruwan chaymanta aswan facil ayllukuna tupaq CSS kaqmanta ruwayta ruwan. Sass mapakunata llamk'achiyku llimp'iykupaq, rejilla p'akiyniykupaq, chaymanta aswan. Sass tikraqkuna hina, llapa Sass mapakuna !defaultbanderayuq kanku chaymanta llallichisqa chaymanta mast'arisqa kanman.

Wakin Sass mapaykuqa ch'usaqkunaman hukllachasqa kachkan ñawpaqmanta. Kayqa ruwakun huk qusqa Sass mapamanta mana sasa mast'ariyta saqinanpaq, ichaqa hamun huk mapamanta imakuna hurquyta aswan sasata ruwanapaq qullqiwan.

Mapata tikray

Mapaykupi huk kachkaq llimp'ita tikranaykipaq $theme-colors, kayta yapay sapanchasqa Sass willañiqiykiman:

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

Mapaman yapay

Musuq llimp'ita $theme-colorsyapanaykipaqqa, musuq llaveta chanta chanita yapay:

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

Mapamanta hurquy

$theme-colors, utaq mayqin mapamantapas llimp'ikunata hurqunaykipaqqa , llamk'achiy map-remove. Yachay chayta churanayki tiyan mañakuyniyku chaymanta akllanayku chawpipi:

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

Llaves requeridas

Bootstrap wakin llavekuna específicas kaqpa kayninta Sass mapakuna ukhupi hapin imaynachus ñuqayku llamk'achisqayku chaymanta kaykunata mast'arisqayku. Imaynachus yapasqa mapakuna ruwanki, pantaykunawan tinkiyta atikunki maypi huk Sass mapapa llaven llamk'achkan.

Ejemplopaq, primary, success, chaymanta dangerllaves kaqmanta $theme-colorsllamk'achiyku t'inkikuna, botones chaymanta formulario estadokuna kaqpaq. Kay llavekuna chanikunata tikrayqa mana ima sasachakuykunata rikuchinanchu tiyan, ichaqa chayta hurquyqa Sass huñusqa sasachakuykunata ruwanman. Kay instanciakunapi, Sass codigota tikranayki tiyan mayqinchus chay chanikunata llamk'achin.

Ruwaykuna

Bootstrap achka Sass ruwanakunata llamk'achin, ichaqa huk huch'uy huñulla general tematico kaqpaq ruwanapaq kanku. Kimsa ruwanakunata churarqayku llimp'i mapakunamanta chanikunata jap'inapaq:

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

Kaykunaqa huk Sass mapamanta huk llimp'ita akllayta atikunki imaynachus huk llimp'i tikraq v3 kaqmanta llamk'achinki hina.

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

Hinallataqmi huk ruwanayuq kayku mapamanta huk nivel particular colorta chaskinapaq $theme-colors. Mana allin pata chanikunaqa llimp'ita k'anchanqa, aswan hatun patakunataq yanayachinqa.

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

Ruwaypi, ruwayta waqyanki chaymanta iskay parámetros kaqpi pasanki: sutimanta llimp'imanta $theme-colors(kayhina, primaria utaq peligro) chaymanta huk yupay nivel kaqmanta.

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

Yapa ruwanakuna hamuq pachapi yapasqa kanman utaq kikiyki sapanchasqa Sass ruwanapaq nivel ruwanakuna yapasqa Sass mapakunapaq, utaq huk genérico kaqpas sichus aswan verbose kayta munarqanki.

Contraste de colores nisqa

Huk yapasqa ruwana Bootstrap kaqpi churasqaykuqa llimp'i chiqanchay ruwaymi, color-yiq. YIQ llimp'i espaciota llamk'achin kikinmanta kutichinanpaq huk k'anchay ( #fff) utaq yana ( #111) contraste llimp'ita chaymanta nisqa base llimp'i kaqpi. Kay ruwana aswan allin mixins utaq loops kaqpaq maypi achka clasekuna paqarichichkanki.

Ejemplopaq, mapaykumanta color muestrakuna ruwanapaq $theme-colors:

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

Huk kutilla contraste necesidadkunapaqpas llamk'achiy atikunmi:

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

Huk sapsi llimp'itapas llimp'i mapa ruwanaykuwan niyta atinki:

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

Sass akllaykuna

Bootstrap 4 ruwasqayku ruwasqa sapanchasqa tikraqkuna willakuyniykuwan ruway chaymanta musuq $enable-*Sass tikraqkunawan tukuypaq CSS munasqakunata mana sasachu tikray. Huk tikraqpa chaninninta llalliy hinaspa npm run testnecesitasqanman hina musuqmanta huñuy.

Kay tikraqkunata tariyta chaymanta ruwayta atikunki llave global akllanakuna Bootstrap scss/_variables.scsswillañiqipi.

Variable nisqa	Chaninkuna	Willay
`$spacer`	`1rem`(ñawpaqmanta churasqa), icha mayqin chanipas > 0	Espaciador yanapakuyniyku programawan ruwanapaq ñawpaqmanta espaciador chanita willan .
`$enable-rounded`	`true`(ñawpaqmanta churasqa) o`false`	`border-radius`Imaymana componentekunapi ñawpaqmanta riqsisqa estilokunata atichin .
`$enable-shadows`	`true`icha `false`(ñawpaqmanta churasqa) .	`box-shadow`Imaymana componentekunapi ñawpaqmanta riqsisqa estilokunata atichin .
`$enable-gradients`	`true`icha `false`(ñawpaqmanta churasqa) .	`background-image`Imaymana componentekunapi estilokuna kaqnintakama ñawpaqmanta riqsisqa gradientekunata atichin .
`$enable-transitions`	`true`(ñawpaqmanta churasqa) o`false`	`transition`Imaymana componentekunapi ñawpaqmanta riqsisqa s atichin .
`$enable-hover-media-query`	`true`icha `false`(ñawpaqmanta churasqa) .	Deprecado
`$enable-grid-classes`	`true`(ñawpaqmanta churasqa) o`false`	Llika llamkanapaq CSS clasekuna paqarichiyta atichin (kayhina, `.container`, `.row`, `.col-md-1`, hukkunapas).
`$enable-caret`	`true`(ñawpaqmanta churasqa) o`false`	Pseudo elemento caret nisqatam atichin `.dropdown-toggle`.
`$enable-print-styles`	`true`(ñawpaqmanta churasqa) o`false`	Imprimiyta allinchaypaq estilokunata atichin.

Llinpi

Achka Bootstrap imaymana componentekuna chaymanta yanapakuyninkuna huk Sass mapapi riqsichisqa llimp'ikuna qatiqninwan ruwasqa. Kay mapaqa Sass nisqapi llimp'isqa kanman, huk kamachiy huñukunata utqaylla paqarichinanpaq.

Tukuy llimpikuna

Llapan llimp'ikuna Bootstrap 4 kaqpi tarikuq, Sass tikraq hina chaymanta huk Sass mapa scss/_variables.scsswillañiqipi tarikun. Kayqa qatiq uchuy lluqsichiykunapi mast'arisqa kanqa yapa llimp'ikuna yapanapaq, anchata hina gris escala paleta yaykusqayku hina.

Anqas

Indigo

Kulli

Panti

Puka

Naranja

Qillu

Qumir

Teal

Cian

Kaypi imaynata kaykunata Sass nisqaykipi llamk'achiyta atinki:

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

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

Color utilidad clasekunapas kanmi churanapaq colorchaymanta background-color.

Hamuq pachapi, Sass mapakuna chaymanta tikraqkuna sapa llimp'ipaq quyta munasaqku imaynachus ruwasqayku gris escala llimp'ikunawan uraypi.

Tema colores

Llapa llimp'ikuna huk huch'uy huñuta llamk'achiyku huk aswan huch'uy llimp'ikuna ruwanapaq llimp'ikuna ruwanapaq, chaymanta Sass tikraq hina chaymanta huk Sass mapa Bootstraps scss/_variables.scsswillañiqipi tarikun.

Qallariq

Iskay ñiqin

Allinmi

Manchay

Manchachiy

Info

Kanchi

Tutayasqa

Grises

Un expansivo conjunto de variables grises y un mapa Sass en scss/_variables.scsspara tonos consistentes de gris a través de tu proyecto.

100 nisqa

200 nisqa

300 nisqa

400 nisqa

500 nisqa

600 nisqa

700 nisqa

800 nisqa

900 nisqa

, ukhupi scss/_variables.scss, Bootstrap llimp'i tikraqkunata chaymanta Sass mapata tarinki. Kaypi huk rikch'ana $colorsSass mapamanta:

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

Mapa ukhupi chanikunata yapay, hurquy utaq tikray imayna huk achka componentekunapi llamk'achisqa kasqankuta musuqyachinaykipaq. Llakikuypaq kay pacha, mana sapa componente kay Sass mapata llamk'achin. Hamuq musuqyachiykuna kayta allinchaypaq kallpachakunqa. Chaykamaqa, planificay ${color}variables nisqakunata, kay mapa Sass nisqakunatapas llamk’achinapaq.

Componentes nisqakuna

Askha Bootstrap kaqpa componentesnin chaymanta yanapakuyninkuna ruwasqa kanku @eachllañukunawan chaymanta huk Sass mapa kaqpi iteranku. Kayqa aswanta yanapakun huk componentemanta $theme-colorsvariantes ruwanapaq ñuqaykuwan chaymanta sapa ruphaypaq kutichiq variantes ruwanapaq. Imaynatachus kay Sass mapakuna ruwanki chaymanta wakmanta huñunki, kikillanmanta rikunki tikrayniyki kay llimp'ikunapi rikuchisqa.

Modificadores nisqakuna

Bootstrap kaqpa achka componentenkuna huk base-modifier clase ruwaywan ruwasqa kanku. Kayqa niyta munan, aswan hatun estilo huk base clase kaqpi hap'isqa kachkan (kayhina, .btn) estilo variaciones kaqtaq huk clasekuna modificador kaqpi (kayhina, .btn-danger). Kay tikraq clasekuna $theme-colorsmapamanta ruwasqa kanku ruwanapaq sapanchasqa yupayta chaymanta sutita tikraq claseykumanta.

Kaypi iskay rikch'anakuna imayna $theme-colorsmapa patapi llimp'iyku .alertcomponente kaqman chaymanta llapa .bg-*qhipa yanapakuyniykuman tikraqkunata ruwanapaq.

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

Kutichiq

Kay Sass llimp'ikuna mana llimp'i mapakunallapichu, nitaq. Chantapas componentekunaykimanta utaq yanapakuyniykimanta kutichiq variaciones ruwayta atikunki. Ejemplopaq hap'iy kutichiq qillqa chiqanchay yanapakuyniyku maypi huk @eachllimp'ita $grid-breakpointsSass mapapaq huk willay mast'ariy tapuywan chaqruyku.

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

Sichus qam hukchayta necesitanki $grid-breakpoints, tikrayniyki llapa llimp'ikuna chay mapa hawapi kuti-kutiriq kaqman ruwakunqa.

CSS nisqa tikraqkuna

Bootstrap 4 yaqa iskay chunka CSS sapanchasqa propiedades (variables) huñusqa CSS kaqninpi churan. Kaykunaqa sapa kuti llamk'achisqa chanikunaman mana sasa yaykuyta qunku imaynachus tema llimp'iyku, pakikunayku chaymanta primaria letra pilakuna llamk'achkanki maskaqniykipa Inspector kaqpi, huk código rit'i caja kaqpi utaq general prototipo kaqpi.

Kaqlla kaq variables nisqakuna

Kaypiqa kachkanmi variables nisqakuna churasqanchik (reparay chay :rootes requerido). Chaykunaqa _root.scssarchivoykupin tarikunku.

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

Ejemplos

CSS tikraqkuna Sass tikraqkunaman rikch'aq flexibilidadta qun, ichaqa mana huñusqa necesidadniyuq manaraq maskaqman sirwisqa kachkaptin. Ejemplopaq, kaypi p'anqaykupa letranta chaymanta t'inki estilokunata CSS tikraqkunawan musuqmanta churachkayku.

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

Variables de punto de ruptura

Qallariypi CSS tikraqniykupi p'akiykunata churarqayku chaypas (kayhina, --breakpoint-md), kaykunaqa mana willay mast'ariy tapuykunapi yanapasqachu , ichaqa willay huñukuna ukhupi willay mast'ariy tapuykunapi llamk'achiy atikunkuraq. Kay p'akisqa tikraqkuna huñusqa CSS kaqpi qhipakunku tupachiypaq qusqa JavaScript kaqwan llamk'achiy atikunku. Astawan yachay spec nisqapi.

Kaypi huk rikch'ana kachkan imakuna mana yanapasqachu:

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

Hinaspa kaypi huk ejemplo imakuna yanapasqa kasqanmanta:

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