Source

Bootstrap tematikoa

Pertsonalizatu Bootstrap 4 gure integratutako Sass aldagai berriekin, estilo orokorreko hobespenetarako, gai eta osagaien aldaketa errazetarako.

Sarrera

distBootstrap 3-n, gaitzea, neurri handi batean, LESS-en, CSS pertsonalizatuan eta gure fitxategietan sartu genuen gaiaren estilo-orri bereiziaren aldagaien gainidatzeek bultzatu zuten . Ahalegin pixka batekin, Bootstrap 3-ren itxura guztiz birdiseinatu liteke oinarrizko fitxategiak ukitu gabe. Bootstrap 4-k ikuspegi ezagun bat eskaintzen du, baina apur bat desberdina.

Orain, gaitzea Sass aldagaiek, Sass mapek eta CSS pertsonalizatuek lortzen dute. Ez dago estilo-orri dedikaturik; horren ordez, gai integratua gai dezakezu gradienteak, itzalak eta gehiago gehitzeko.

Sass

Erabili gure iturburuko Sass fitxategiak aldagaiak, mapak, nahasketak eta abar aprobetxatzeko.

Fitxategien egitura

Ahal den guztietan, saihestu Bootstrap-en oinarrizko fitxategiak aldatzea. Sass-entzat, horrek esan nahi du Bootstrap inportatzen duen zure estilo-orria sortzea, aldatu eta luzatu ahal izateko. npm bezalako pakete-kudeatzaile bat erabiltzen ari zarela suposatuz, honelako fitxategi-egitura izango duzu:

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

Gure iturburu-fitxategiak deskargatu badituzu eta pakete-kudeatzailerik erabiltzen ez baduzu, eskuz konfiguratu nahi duzu egitura horren antzeko zerbait, Bootstrap-en iturburu-fitxategiak zuretik bereizita mantenduz.

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

Inportatzen

Zure custom.scss, Bootstrap-en Sass fitxategiak inportatuko dituzu. Bi aukera dituzu: sartu Bootstrap guztia edo aukeratu behar dituzun piezak. Azken hau bultzatzen dugu, nahiz eta kontutan izan gure osagaietan baldintza eta menpekotasun batzuk daudela. Gure pluginetarako JavaScript batzuk ere sartu beharko dituzu.

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

Konfigurazio hori ezarrita, Sass aldagai eta maparen bat aldatzen has zaitezke zure custom.scss. Bootstrap-en zatiak gehitzen ere has zaitezke // Optionalatalaren azpian behar duzun moduan. Gure bootstrap.scssfitxategiko inportazio-pila osoa abiapuntu gisa erabiltzea gomendatzen dizugu.

Aldagai lehenetsiak

Bootstrap 4-ko Sass aldagai guztiek aldagaiaren !defaultbalio lehenetsia gainidazteko aukera ematen dizute zure Sass-en Bootstrap-en iturburu-kodea aldatu gabe. Kopiatu eta itsatsi aldagaiak behar bezala, aldatu haien balioak eta kendu !defaultbandera. Dagoeneko aldagai bat esleitu bada, ez dute berriro esleituko Bootstrap-en balio lehenetsiek.

Bootstrap-en aldagaien zerrenda osoa aurkituko duzu scss/_variables.scss.

Sass fitxategi bereko aldagaien baliogabetzeak aldagai lehenetsien aurretik edo ondoren etor daitezke. Hala ere, Sass fitxategiak gainidazten dituzunean, zure baliogabetzeak Bootstrap-en Sass fitxategiak inportatu aurretik etorri behar dira.

Hona hemen Bootstrap npm bidez inportatzean eta konpilatzean eta background-coloraldatzen duen adibide bat color:<body>

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

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

Errepikatu behar den moduan Bootstrap-eko edozein aldagaitan, beheko aukera orokorrak barne.

Mapak eta begiztak

Bootstrap 4-k Sass mapa batzuk biltzen ditu, erlazionatutako CSS-en familiak sortzea errazten duten gako-balio bikoteak. Sass mapak erabiltzen ditugu gure koloreetarako, sareko eten puntuetarako eta abar. Sass aldagaiek bezala, Sass mapa guztiek !defaultbandera barne hartzen dute eta gainidatzi eta heda daitezke.

Gure Sass mapa batzuk hutsik daudenekin bateratzen dira lehenespenez. Sass mapa jakin bat erraz zabaltzeko egiten da, baina mapa batetik elementuak kentzea apur bat zailagoa izatearen kostua da.

Aldatu mapa

Gure mapan dagoen kolore bat aldatzeko $theme-colors, gehitu honako hau zure Sass fitxategi pertsonalizatuan:

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

Gehitu mapara

Kolore berri bat $theme-colorsgehitzeko, gehitu gako eta balio berria:

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

Kendu mapatik

Koloreak $theme-colorsedo beste edozein mapatik kentzeko, erabili map-remove. Kontuan izan gure eskakizun eta aukeren artean sartu behar duzula:

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

Beharrezko giltzak

Bootstrap-ek Sass mapetan gako zehatz batzuen presentzia hartzen du guk geuk erabili eta hedatzen ditugun heinean. Sartutako mapak pertsonalizatzen dituzun heinean, akatsak aurki ditzakezu Sass maparen gako zehatz bat erabiltzen ari direnean.

Adibidez, primary, success, eta dangerteklak $theme-colorserabiltzen ditugu esteketarako, botoietarako eta inprimaki-egoeretarako. Gako hauen balioak ordezkatzeak ez luke arazorik sortu behar, baina kentzeak Sass-en konpilazio arazoak sor ditzake. Kasu hauetan, balio horiek erabiltzen dituen Sass kodea aldatu beharko duzu.

Funtzioak

Bootstrap-ek Sass-en hainbat funtzio erabiltzen ditu, baina azpimultzo bat baino ez da aplikagarria gai orokorrari. Kolore-mapetatik balioak lortzeko hiru funtzio sartu ditugu:

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

Hauek Sass mapa batetik kolore bat hautatzea ahalbidetzen dute v3-ko kolore-aldagai bat nola erabiliko zenukeen antzera.

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

Mapatik kolore- maila jakin bat lortzeko beste funtzio bat ere $theme-colorsbadugu. Maila negatiboek kolorea argituko dute, eta maila altuagoek ilundu egingo dute.

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

Praktikan, funtzioari deituko zenioke eta bi parametro pasatuko zenituzke: kolorearen izena $theme-colors(adibidez, lehena edo arriskua) eta zenbakizko maila.

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

Funtzio gehigarriak gehi daitezke etorkizunean edo zure Sass pertsonalizatua Sass mapa gehigarrietarako maila-funtzioak sortzeko, edo baita generikoa ere zehatzagoa izan nahi baduzu.

Kolore kontrastea

Bootstrap-en sartzen dugun funtzio gehigarri bat koloreen kontraste funtzioa da, color-yiq. YIQ kolore-espazioa erabiltzen du , zehaztutako oinarrizko kolorean oinarritutako kontraste-kolore argia ( #fff) edo iluna ( ) automatikoki itzultzeko . #111Funtzio hau bereziki erabilgarria da klase anitz sortzen ari zaren mixin edo loopetarako.

Adibidez, gure $theme-colorsmapatik kolore-laginak sortzeko:

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

Kontraste bakarreko beharretarako ere erabil daiteke:

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

Gure kolore-maparen funtzioekin oinarrizko kolore bat ere zehaztu dezakezu:

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

Sass aukerak

$enable-*Pertsonalizatu Bootstrap 4 gure aldagai pertsonalizatuen fitxategiarekin eta erraz aldatu CSS hobespen globalak Sass aldagai berriekin . Gainidatzi aldagai baten balioa eta birkonpilatu npm run testbehar den moduan.

scss/_variables.scssBootstrap-en fitxategian aldagai hauek aurkitu eta pertsonaliza ditzakezu aukera orokor nagusietarako .

Aldakorra Balioak Deskribapena
$spacer 1rem(lehenetsia), edo edozein balio > 0 Tarte-balio lehenetsia zehazten du gure espazio-utilitateak programatikoki sortzeko .
$enable-rounded true(lehenetsia) edofalse Aurrez definitutako border-radiusestiloak gaitzen ditu hainbat osagaitan.
$enable-shadows trueedo false(lehenetsia) Aurrez definitutako box-shadowestiloak gaitzen ditu hainbat osagaitan.
$enable-gradients trueedo false(lehenetsia) Aurrez definitutako gradienteak gaitzen background-imageditu hainbat osagaitako estiloen bidez.
$enable-transitions true(lehenetsia) edofalse Aurrez definitutako transitions-ak gaitzen ditu hainbat osagaitan.
$enable-hover-media-query trueedo false(lehenetsia) Zaharkituta
$enable-grid-classes true(lehenetsia) edofalse Sare sistemarako CSS klaseak sortzea ahalbidetzen du (adibidez, .container, .row, .col-md-1, etab.).
$enable-caret true(lehenetsia) edofalse Sasi elementuaren ikurra gaitzen du .dropdown-toggle.
$enable-print-styles true(lehenetsia) edofalse Inprimaketa optimizatzeko estiloak gaitzen ditu.

Kolore

Bootstrap-en osagai eta utilitate asko Sass mapa batean definitutako kolore batzuen bidez eraikitzen dira. Mapa hau Sass-en itzuli daiteke arau multzo bat azkar sortzeko.

Kolore guztiak

Bootstrap 4-n eskuragarri dauden kolore guztiak Sass aldagai gisa eta Sass mapa scss/_variables.scssfitxategian daude eskuragarri. Hau hurrengo bertsio txikietan zabalduko da tonu gehigarriak gehitzeko, dagoeneko sartzen dugun gris- eskalako paleta bezala.

Urdina
Indigo
Morea
Arrosa
Gorria
Laranja
Horia
Berdea
Zertzeta
Zian

Hona hemen nola erabil ditzakezun zure Sass-en:

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

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

Kolore erabilgarritasun klaseak ezartzeko coloreta background-color.

Etorkizunean, kolore bakoitzaren tonuetarako Sass mapak eta aldagaiak eskaintzea izango dugu helburu, beheko gris-eskalako koloreekin egin dugun bezala.

Gaiaren koloreak

Kolore guztien azpimultzo bat erabiltzen dugu kolore-eskemak sortzeko kolore-paleta txikiagoa sortzeko, Sass aldagai gisa eta Sass mapa Bootstraps-en scss/_variables.scssfitxategian ere eskuragarri.

Lehen mailakoa
Bigarren mailakoa
Arrakasta
Arriskua
Abisua
Info
Argia
Iluna

Grisak

Aldagai grisen multzo zabala eta Sass mapa bat scss/_variables.scsszure proiektuan zehar gris tonu koherenteak lortzeko.

100
200
300
400
500
600
700
800
900

-ren barruan scss/_variables.scss, Bootstrap-en kolore-aldagaiak eta Sass mapa aurkituko dituzu. $colorsHona hemen Sass maparen adibide bat :

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

Gehitu, kendu edo aldatu balioak mapan, beste osagai askotan nola erabiltzen diren eguneratzeko. Zoritxarrez, momentu honetan, osagai guztiek ez dute Sass mapa hau erabiltzen. Etorkizuneko eguneraketak hori hobetzen ahaleginduko dira. Ordura arte, planifikatu ${color}aldagaiak eta Sass mapa hau erabiltzeko.

Osagaiak

Bootstrap-en osagai eta utilitate asko @eachSass mapa batean errepikatzen diren begiztekin eraikita daude. Hau bereziki lagungarria da gure osagai baten aldaerak $theme-colorssortzeko eta eten puntu bakoitzerako aldaera sentikorrak sortzeko. Sass mapa hauek pertsonalizatzen eta birkonpilatzen dituzun heinean, automatikoki ikusiko dituzu zure aldaketak begizta hauetan islatuta.

Aldatzaileak

Bootstrap-en osagai asko oinarri-aldatzaile klaseen ikuspegi batekin eraiki dira. Horrek esan nahi du estiloaren zatirik handiena oinarrizko klase batean dagoela (adibidez, .btn) eta estilo-aldakuntzak modifikatzaile-klaseetara mugatzen direla (adibidez, .btn-danger). Mugatzaile-klase hauek $theme-colorsmapatik eraikitzen dira gure modifikatzaile-klaseen zenbakia eta izena pertsonalizatzeko.

Hona hemen bi adibide $theme-colorsmaparen gainean nola errepasatzen dugun osagaiaren aldatzaileak sortzeko .alerteta gure .bg-*atzeko tresna guztiak.

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

Erantzunkorra

Sass begizta hauek ez dira kolore-mapetara mugatzen, gainera. Zure osagaien edo utilitateen aldaera sentikorrak ere sor ditzakezu. Hartu adibidez gure erantzunezko testua lerrokatzeko utilitateak, non Sass maparako @eachbegizta bat nahasten dugun $grid-breakpointsmultimedia kontsulta batekin.

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

Zure . aldatu behar baduzu $grid-breakpoints, zure aldaketak mapa horretan errepikatzen diren begizta guztiei aplikatuko zaizkie.

CSS aldagaiak

Bootstrap 4-k bi dozena inguru CSS propietate pertsonalizatuak (aldagaiak) biltzen ditu bere CSS konpilatuan. Hauek sarbide erraza eskaintzen dute gure gaiaren koloreak, eten-puntuak eta letra-tipo pila nagusietara, hala nola, arakatzailearen Ikuskatzailean, kode-kutxa batean edo prototipo orokorrean lan egiten duzunean.

Eskuragarri dauden aldagaiak

Hona hemen sartzen ditugun aldagaiak (kontuan izan :rootbehar dela). Gure _root.scssfitxategian daude.

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

Adibideak

CSS aldagaiek Sassen aldagaien antzeko malgutasuna eskaintzen dute, baina arakatzaileari zerbitzatu aurretik konpilazio beharrik gabe. Adibidez, hemen gure orriaren letra-tipoa eta esteka estiloak CSS aldagaiekin berrezartzen ari gara.

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

Eten-puntuaren aldagaiak

Hasiera batean eten-puntuak gure CSS aldagaietan sartu genituen arren (adibidez, --breakpoint-md), hauek ez dira onartzen multimedia-kontsultetan , baina hala ere arau-multzoetan erabil daitezke multimedia -kontsultetan. Eten-puntuaren aldagai hauek konpilatutako CSSan geratzen dira atzerako bateragarritasunerako, JavaScript-ek erabil ditzaketelako. Lortu informazio gehiago zehaztapenetan.

Hona hemen onartzen ez denaren adibide bat :

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

Eta hona hemen onartzen denaren adibide bat :

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