Source

Theming Bootstrap

Customize Bootstrap 4 with our new built-in Sass variables for global style preferences for easy theming and component changes.

Introduction

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. Gure eraikuntzan Sass biribilketaren zehaztasuna 6ra igo dugu (lehenespenez 5 da) arakatzailearen biribilketarekin arazoak saihesteko.

Fitxategien egitura

Whenever possible, avoid modifying Bootstrap’s core files. For Sass, that means creating your own stylesheet that imports Bootstrap so you can modify and extend it. Assuming you’re using a package manager like npm, you’ll have a file structure that looks like this:

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

If you’ve downloaded our source files and aren’t using a package manager, you’ll want to manually setup something similar to that structure, keeping Bootstrap’s source files separate from your own.

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

Importing

In your custom.scss, you’ll import Bootstrap’s source Sass files. You have two options: include all of Bootstrap, or pick the parts you need. We encourage the latter, though be aware there are some requirements and dependencies across our components. You also will need to include some JavaScript for our plugins.

// 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 fitxategiko inportazio-pila osoa bootstrap.scssabiapuntu gisa erabiltzea gomendatzen dugu.

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. Aldagai batzuk ezarrita daude null, aldagai hauek ez dute propietatea ateratzen zure konfigurazioan gainidazten ez badira.

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

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.<>#

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 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-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 trueedo false(lehenetsia) Ezarri truehemen kentzeko aurreikusita dauden nahasketa eta funtzio zaharkituak erabiltzen dituzunean abisuak erakusteko 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
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-eskema sortzeko kolore-paleta txikiagoa sortzeko, Sass aldagai gisa eta Sass mapa Bootstrap-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. Kontuan izan hauek "gris freskoak" direla, tonu urdin sotil batera jotzen dutenak, gris neutroak baino.

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