Tema nga Bootstrap

Ipasibo ang Bootstrap 4 gamit ang among bag-ong built-in nga Sass variables para sa global style preferences para sa sayon ​​nga tema ug component nga kausaban.

Pasiuna

Sa Bootstrap 3, ang tema kasagarang gimaneho sa mga variable override sa LESS, custom CSS, ug usa ka bulag nga stylesheet sa tema nga among gilakip sa among distmga file. Uban sa pipila ka mga paningkamot, ang usa mahimo nga hingpit nga magdesinyo pag-usab sa hitsura sa Bootstrap 3 nga dili makahikap sa mga kinauyokan nga mga file. Ang Bootstrap 4 naghatag usa ka pamilyar, apan gamay nga lahi nga pamaagi.

Karon, ang tema nahimo pinaagi sa Sass variables, Sass maps, ug custom CSS. Wala nay gipahinungod nga stylesheet sa tema; sa baylo, mahimo nimong palihokon ang built-in nga tema aron makadugang mga gradient, anino, ug uban pa.

Sass

Gamita ang among tinubdan nga Sass files aron mapahimuslan ang mga variable, mapa, mixins, ug uban pa. Sa among pagtukod gidugangan namo ang Sass rounding precision ngadto sa 6 (sa default kini 5) aron malikayan ang mga isyu sa browser rounding.

Istruktura sa file

Kung mahimo, likayi ang pag-usab sa mga core files sa Bootstrap. Alang sa Sass, nagpasabot kana sa paghimo sa imong kaugalingong stylesheet nga nag-import sa Bootstrap aron imong mabag-o ug mapalawig kini. Sa pag-ingon nga naggamit ka usa ka manager sa package sama sa npm, adunay usa ka istruktura sa file nga ingon niini:

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

Kung na-download nimo ang among gigikanan nga mga file ug wala mogamit usa ka manager sa pakete, gusto nimo nga mano-mano ang pag-setup sa usa ka butang nga parehas sa kana nga istruktura, nga gitago ang mga gigikanan nga file sa Bootstrap nga lahi sa imong kaugalingon.

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

Pag-import

Sa imong custom.scss, imong i-import ang gigikanan sa Bootstrap nga mga file nga Sass. Adunay ka duha ka kapilian: iapil ang tanan nga Bootstrap, o pilia ang mga bahin nga kinahanglan nimo. Among gidasig ang naulahi, bisan pa nahibal-an nga adunay pipila nga mga kinahanglanon ug dependency sa among mga sangkap. Kinahanglan mo usab nga ilakip ang pipila ka JavaScript para sa among mga 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";

Sa kana nga setup sa lugar, mahimo nimong sugdan ang pag-usab sa bisan unsang mga variable ug mapa sa Sass sa imong custom.scss. Mahimo ka usab magsugod sa pagdugang mga bahin sa Bootstrap sa ilawom sa // Optionalseksyon kung gikinahanglan. Among gisugyot nga gamiton ang bug-os nga import stack gikan sa among bootstrap.scssfile isip imong pagsugod.

Variable default

Ang matag variable nga Sass sa Bootstrap 4 naglakip sa !defaultbandila nga nagtugot kanimo sa pag-override sa default nga bili sa variable sa imong kaugalingon nga Sass nga wala’y pagbag-o sa source code sa Bootstrap. Kopyaha ug idikit ang mga variable kung gikinahanglan, usba ang ilang mga kantidad, ug kuhaa ang !defaultbandila. Kung na-assign na ang usa ka variable, dili na kini i-assign sa default values ​​sa Bootstrap.

Makita nimo ang kompleto nga lista sa mga variable sa Bootstrap sa scss/_variables.scss.

Ang mga variable override sulod sa parehas nga Sass file mahimong moabut sa wala pa o pagkahuman sa default nga mga variable. Bisan pa, kung mag-override sa mga file sa Sass, kinahanglan nga moabut ang imong mga override sa dili pa nimo i-import ang mga file sa Sass sa Bootstrap.

Ania ang usa ka pananglitan nga nagbag-o sa background-colorug coloralang sa <body>kung nag-import ug nag-compile sa Bootstrap pinaagi sa npm:

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

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

Balika kung gikinahanglan alang sa bisan unsang variable sa Bootstrap, lakip ang global nga mga kapilian sa ubos.

Mga mapa ug mga loop

Ang Bootstrap 4 naglakip sa pipila ka mga mapa sa Sass, importante nga mga pares sa bili nga makapasayon ​​sa pagmugna og mga pamilya sa may kalabutan nga CSS. Gigamit namo ang mga mapa sa Sass para sa among mga kolor, mga breakpoint sa grid, ug uban pa. Sama sa mga variable sa Sass, ang tanan nga mga mapa sa Sass naglakip sa !defaultbandila ug mahimong ma-overridden ug mapalawig.

Ang pipila sa among mga mapa sa Sass gihiusa sa mga walay sulod nga mga mapa pinaagi sa default. Gihimo kini aron tugotan ang dali nga pagpalapad sa gihatag nga mapa sa Sass, apan moabut sa gasto sa paghimo sa pagtangtang sa mga butang gikan sa usa ka mapa nga labi ka lisud.

Usba ang mapa

Aron usbon ang naglungtad nga kolor sa among $theme-colorsmapa, idugang ang mosunod sa imong naandan nga Sass file:

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

Idugang sa mapa

Aron makadugang ug bag-ong kolor sa $theme-colors, idugang ang bag-ong yawe ug bili:

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

Kuhaa gikan sa mapa

Aron makuha ang mga kolor gikan sa $theme-colors, o bisan unsang ubang mapa, gamita ang map-remove. Hibaloi nga kinahanglan nimong isulod kini tali sa among mga kinahanglanon ug mga kapilian:

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

Gikinahanglan nga mga yawe

Giangkon sa Bootstrap ang presensya sa pipila ka piho nga mga yawe sulod sa mga mapa sa Sass samtang among gigamit ug gipalapad kini sa among kaugalingon. Samtang imong i-customize ang gilakip nga mga mapa, mahimo nimong masugatan ang mga sayup kung diin gigamit ang usa ka piho nga yawe sa mapa sa Sass.

Pananglitan, among gigamit ang primary, success, ug mga dangeryawe gikan $theme-colorssa para sa mga link, buton, ug porma nga estado. Ang pag-ilis sa mga kantidad niini nga mga yawe kinahanglan nga walay mga isyu, apan ang pagtangtang niini mahimong hinungdan sa mga isyu sa pag-compile sa Sass. Niini nga mga higayon, kinahanglan nimo nga usbon ang Sass code nga naggamit sa mga kantidad.

Mga gimbuhaton

Ang Bootstrap naggamit sa daghang mga function sa Sass, apan usa ra ka subset ang magamit sa kinatibuk-ang tema. Naglakip kami og tulo ka mga gimbuhaton alang sa pagkuha og mga bili gikan sa mga mapa nga kolor:

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

Gitugotan ka niini nga makapili usa ka kolor gikan sa usa ka mapa sa Sass sama sa kung giunsa nimo paggamit ang usa ka variable sa kolor gikan sa v3.

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

Adunay usab kami laing function alang sa pagkuha sa usa ka partikular nga lebel sa kolor gikan sa $theme-colorsmapa. Ang mga kantidad sa negatibo nga lebel makapagaan sa kolor, samtang ang mas taas nga lebel mongitngit.

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

Sa praktis, tawgon nimo ang function ug ipasa sa duha ka mga parameter: ang ngalan sa kolor gikan sa $theme-colors(pananglitan, panguna o peligro) ug usa ka lebel sa numero.

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

Mahimong idugang ang dugang nga mga function sa umaabot o ang imong kaugalingon nga naandan nga Sass aron makahimo mga lebel nga gimbuhaton alang sa dugang nga mga mapa sa Sass, o bisan usa ka generic kung gusto nimo nga mahimong labi ka verbose.

Ang kalainan sa kolor

Usa ka dugang nga function nga among gilakip sa Bootstrap mao ang color contrast function, color-yiq. Gigamit niini ang luna sa kolor sa YIQ aron awtomatik nga ibalik ang kahayag ( #fff) o ngitngit ( #111) nga kolor sa contrast base sa gipiho nga base nga kolor. Kini nga function labi ka mapuslanon alang sa mga mixin o mga loop diin naghimo ka daghang mga klase.

Pananglitan, aron makamugna og color swatch gikan sa among $theme-colorsmapa:

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

Mahimo usab kini gamiton alang sa usa ka kinahanglanon nga kalainan:

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

Mahimo usab nimong ipiho ang usa ka base nga kolor sa among mga function sa mapa sa kolor:

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

Mga kapilian sa sass

Ipasibo ang Bootstrap 4 gamit ang among built-in custom variables file ug dali nga i-toggle ang global CSS preferences gamit ang bag-ong $enable-*Sass variables. I-override ang bili sa usa ka variable ug i-compile npm run testkung gikinahanglan.

Mahimo nimong makit-an ug ipasibo kini nga mga variable alang sa mga yawe nga kapilian sa kalibutan sa scss/_variables.scssfile sa Bootstrap.

Kolor

Daghan sa lainlaing mga sangkap ug mga gamit sa Bootstrap ang gihimo pinaagi sa usa ka serye sa mga kolor nga gihubit sa usa ka mapa sa Sass. Kini nga mapa mahimong i-loop sa Sass aron dali nga makamugna og serye sa mga lagda.

Tanang kolor

Ang tanan nga mga kolor nga magamit sa Bootstrap 4, magamit ingon mga variable sa Sass ug usa ka mapa sa Sass sa scss/_variables.scssfile. Kini palapdan sa sunod nga menor de edad nga pagpagawas aron makadugang dugang nga mga shade, sama sa grayscale palette nga among gilakip.

Ania kung giunsa nimo magamit kini sa imong Sass:

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

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

Ang mga klase sa gamit sa kolor magamit usab alang sa pag-set colorug background-color.

Mga kolor sa tema

Gigamit namo ang usa ka subset sa tanang mga kolor aron makahimo og mas gamay nga paleta sa kolor alang sa pagmugna og mga laraw sa kolor, anaa usab isip Sass variables ug usa ka Sass nga mapa sa Bootstraps's scss/_variables.scssfile.

Mga gray

Usa ka lapad nga hugpong sa mga gray nga mga variable ug usa ka mapa sa Sass scss/_variables.scssalang sa makanunayon nga mga kolor sa gray sa imong proyekto. Timan-i nga kini mao ang "cool grays", nga hilig ngadto sa usa ka maliputon nga asul nga tono, kay sa neyutral grays.

Sa sulod scss/_variables.scss, makit-an nimo ang mga variable sa kolor sa Bootstrap ug mapa sa Sass. Ania ang usa ka pananglitan sa $colorsmapa sa Sass:

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

Pagdugang, pagtangtang, o pag-usab sa mga kantidad sa sulod sa mapa aron ma-update kung giunsa kini gigamit sa daghang uban pang mga sangkap. Ikasubo nga niining panahona, dili tanan nga sangkap naggamit niining mapa sa Sass. Ang umaabot nga mga update maningkamot sa pagpauswag niini. Hangtud niana, planoha ang paggamit sa mga ${color}variable ug kini nga mapa sa Sass.

Mga sangkap

Daghan sa mga sangkap ug kagamitan sa Bootstrap ang gihimo gamit ang mga @eachloop nga nag-uli sa usa ka mapa sa Sass. Labi na nga makatabang kini sa paghimo og mga variant sa usa ka component pinaagi sa among $theme-colorsug paghimo og mga responsive nga variant para sa matag breakpoint. Samtang imong i-customize kini nga mga mapa sa Sass ug i-compile, awtomatiko nimo nga makita ang imong mga pagbag-o nga makita sa kini nga mga loop.

Mga modifier

Daghan sa mga sangkap sa Bootstrap ang gitukod gamit ang base-modifier nga pamaagi sa klase. Kini nagpasabot nga ang kinabag-an sa estilo kay anaa sa base nga klase (eg, .btn) samtang ang mga kausaban sa estilo kay limitado lang sa modifier classes (eg, .btn-danger). Kini nga mga klase sa modifier gihimo gikan sa $theme-colorsmapa aron mahimo ang pag-customize sa numero ug ngalan sa among mga klase sa modifier.

Ania ang duha ka mga pananglitan kung giunsa nato pag-loop ang $theme-colorsmapa aron makamugna og mga modifier sa .alertcomponent ug sa tanan natong .bg-*mga gamit sa background.

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

Makatubag

Kini nga mga Sass loops dili limitado sa kolor nga mga mapa, bisan. Mahimo ka usab nga makamugna mga responsive nga mga kalainan sa imong mga sangkap o mga gamit. Tagda pananglitan ang among responsive text alignment utilities diin among gisagol ang @eachloop para sa $grid-breakpointsSass map nga adunay gilakip nga media query.

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

Kung kinahanglan nimo nga usbon ang imong $grid-breakpoints, ang imong mga pagbag-o magamit sa tanan nga mga loop nga nagbalikbalik sa kana nga mapa.

CSS variables

Ang Bootstrap 4 naglakip sa duolan sa duha ka dosena nga CSS custom properties (variables) sa iyang compiled CSS. Naghatag kini og dali nga pag-access sa kasagarang gigamit nga mga kantidad sama sa among mga kolor sa tema, mga breakpoint, ug panguna nga stack sa font kung nagtrabaho sa Inspector sa imong browser, usa ka code sandbox, o kinatibuk-ang prototyping.

Anaa nga mga variable

Ania ang mga variable nga among gilakip (timan-i nga ang :rootgikinahanglan). Naa sila sa among _root.scssfile.

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

Mga pananglitan

Ang mga variable sa CSS nagtanyag parehas nga kadali sa mga variable ni Sass, apan wala kinahanglana ang pagtipon sa wala pa i-serve sa browser. Pananglitan, dinhi among gi-reset ang font sa among panid ug mga istilo sa link nga adunay mga variable nga CSS.

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

Mga baryable sa breakpoint

Samtang sa sinugdan gilakip namo ang mga breakpoint sa among CSS variables (pananglitan, --breakpoint-md), wala kini gisuportahan sa mga pangutana sa media , apan magamit gihapon kini sulod sa mga lagda sa mga pangutana sa media. Kining mga breakpoint variables nagpabilin sa compiled CSS para sa backward compatibility nga gihatag kay magamit kini sa JavaScript. Pagkat-on og dugang sa spec .

Ania ang usa ka pananglitan kung unsa ang wala gisuportahan:

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

Ug ania ang usa ka pananglitan kung unsa ang gisuportahan:

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