in English

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 gehiago aprobetxatzeko Sass konpilatzean zure aktibo kanalizazioa erabiliz.

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

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

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-eko Sass aldagai bakoitzak aldagaiaren !defaultbalio lehenetsia gainidazteko aukera ematen dizu Bootstrap-en 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. Aldagai batzuk ezarrita daude null, aldagai hauek ez dute propietatea ateratzen zure konfigurazioan gainidazten ez badira.

Aldagaien ordezkapenak gure funtzioak, aldagaiak eta nahasketak inportatu ondoren etorri behar dira, baina gainerako inportazioen aurretik.

Hona hemen Bootstrap npm bidez inportatzean eta konpilatzean eta background-coloraldatzen duen adibide bat color:<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

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

Hasi Bootstrap-ekin npm bidez gure hasierako proiektuarekin! Zoaz twbs /bootstrap-npm-starter txantiloien biltegira Bootstrap zure npm proiektuan nola eraiki eta pertsonalizatu ikusteko. Sass konpilatzailea, Autoprefixer, Stylelint, PurgeCSS eta Bootstrap ikonoak barne hartzen ditu.

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`
}

Ihes SVG

Funtzioa , eta karaktereetatik escape-svgihes egiteko erabiltzen dugu SVG atzeko planoko irudietarako. Karaktere horiei ihes egin behar zaie atzeko planoko irudiak IE-n behar bezala errendatzeko. Funtzioa erabiltzean , datu-URIak aipatu behar dira.<>#escape-svg

Gehitu eta kendu funtzioak

CSS funtzioa biltzeko addeta funtzioak erabiltzen ditugu . Funtzio hauen helburu nagusia "unitaterik gabeko" balio bat adierazpen batera pasatzen denean erroreak saihestea da. Horrelako esamoldeek errore bat itzuliko dute arakatzaile guztietan, matematikoki zuzenak izan arren.subtractcalc0calccalc(10px - 0)

Kalkuluak balio duen adibidea:

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

Kalkulua baliogabea den adibidea:

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

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 Hainbat osagaitan aurredefinitutako border-radiusestiloak gaitzen ditu.
$enable-shadows trueedo false(lehenetsia) Aldez aurretik definitutako dekorazio box-shadow-estiloak gaitzen ditu hainbat osagaitan. Ez die eragiten box-shadowfoku-egoeretarako erabiltzen direnei.
$enable-gradients trueedo false(lehenetsia) Aurrez definitutako gradienteak gaitzen background-imageditu hainbat osagaitako estiloen bidez.
$enable-transitions true(lehenetsia) edofalse Aurrez definitutako transitions gaitzen ditu hainbat osagaitan.
$enable-prefers-reduced-motion-media-query true(lehenetsia) edofalse prefers-reduced-motionMultimedia-kontsulta gaitzen du , erabiltzailearen arakatzaile/sistema eragilearen hobespenetan oinarritutako zenbait animazio/trantsizio kentzen dituena.
$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-pointer-cursor-for-buttons true(lehenetsia) edofalse Gehitu "eskua" kurtsorea desgaituta ez dauden botoien elementuei.
$enable-print-styles true(lehenetsia) edofalse Inprimaketa optimizatzeko estiloak gaitzen ditu.
$enable-responsive-font-sizes trueedo false(lehenetsia) Letra-tamaina erantzuleak gaitzen ditu .
$enable-validation-icons true(lehenetsia) edofalse background-imageTestu-sarrerak eta inprimaki pertsonalizatu batzuk gaitzen ditu baliozkotze-egoeretarako.
$enable-deprecation-messages true(lehenetsia) edofalse Ezarri gisa falseezkutatzeko abisuak ezabatzeko aurreikusita dauden nahasketa eta funtzio zaharkituak erabiltzen dituzunean v5.

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 argitalpen txikietan zabalduko da tonu gehigarriak gehitzeko, dagoeneko sartzen dugun gris- eskalako paleta bezala.

$urdina #007bff
$indigo #6610f2
$ morea #6f42c1
$arrosa #e83e8c
$gorria #dc3545
$laranja #fd7e14
$horia #ffc107
$berdea #28a745
$teal #20c997
$zian #17a2b8

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 Bootstrap-en scss/_variables.scssfitxategian ere eskuragarri.

$lehena #007bff
$bigarren mailakoa #6c757d
$arrakasta #28a745
$arriskua #dc3545
$abisua #ffc107
$info #17a2b8
$argia #f8f9fa
$iluna #343a40

Grisak

Aldagai grisen multzo zabala eta Sass mapa bat scss/_variables.scsszure proiektuan zehar gris tonu koherenteak lortzeko. Kontuan izan hauek "gris freskoak" direla, tonu urdin sotil batera jotzen dutenak, gris neutroak baino.

$ grisa-100 #f8f9fa
$ grisa-200 #e9ecef
$ grisa-300 #dee2e6
$ grisa-400 #ced4da
$ grisa-500 #adb5bd
$ grisa-600 #6c757d
$ grisa-700 #495057
$ grisa-800 #343a40
$ grisa-900 #212529

-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, "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;
}

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