Theming Bootstrap

Amboary ny Bootstrap 4 miaraka amin'ireo variana Sass naorina vaovao ho an'ny safidin'ny fomba manerantany ho an'ny fanovana lohahevitra sy singa mora.

Sava lalana

Ao amin'ny Bootstrap 3, ny lohahevitra dia notarihin'ny fanovana miovaova ao amin'ny LESS, CSS mahazatra, ary stylesheet lohahevitra misaraka izay nampidirinay tao amin'ny distrakitray. Miaraka amin'ny ezaka kely dia afaka mamolavola tanteraka ny endriky ny Bootstrap 3 tsy misy fikasihana ireo rakitra fototra. Ny Bootstrap 4 dia manome fomba mahazatra, saingy hafa kely.

Ankehitriny, ny lohahevitra dia vita amin'ny fari-piadidiana Sass, sarintany Sass, ary CSS mahazatra. Tsy misy stylesheet foto-kevitra natokana intsony; kosa, azonao atao ny mamela ny lohahevitra naorina mba hanampiana gradients, aloka, sy ny maro hafa.

Sass

Ampiasao ny rakitra Sass loharanontsika mba hanararaotra ireo fari-pahalalana, sari-tany, mixins, sy ny maro hafa rehefa manangona Sass amin'ny alàlan'ny fantsom-panananao manokana.

Rafitra fichier

Raha azo atao dia aza manova ny rakitra fototra an'ny Bootstrap. Ho an'i Sass, midika izany fa mamorona ny stylesheet anao manokana izay manafatra Bootstrap mba hahafahanao manova sy manitatra azy. Raha heverinao fa mampiasa mpitantana fonosana toa ny npm ianao dia hanana firafitry ny rakitra toa izao:

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

Raha naka ny rakitra loharanonay ianao ary tsy mampiasa mpitantana fonosana, dia te-hanamboatra zavatra mitovy amin'io rafitra io ianao, ka mitazona ny rakitra loharanon'i Bootstrap misaraka amin'ny anao.

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

fanafarana

Ao amin'ny custom.scss, hampidirinao ny rakitra Sass loharanon'i Bootstrap. Manana safidy roa ianao: ampidiro ny Bootstrap rehetra, na safidio ny ampahany ilainao. Mamporisika ity farany izahay, na dia tadidio aza fa misy fepetra sy fiankinan-doha amin'ny singa rehetra. Mila mampiditra JavaScript ho an'ny plugins ihany koa ianao.

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

Miaraka amin'io fananganana io dia azonao atao ny manomboka manova ny fari-piadidiana sy sarintany Sass ao amin'ny custom.scss. Azonao atao koa ny manomboka manampy ampahany amin'ny Bootstrap eo ambanin'ny // Optionalfizarana raha ilaina. Manoro hevitra izahay ny hampiasa ny stack fanafarana feno avy amin'ny bootstrap.scssrakitray ho toy ny fanombohana anao.

Variable defaults

Ny fari-piadidiana Sass rehetra ao amin'ny Bootstrap dia ahitana ny !defaultsaina mamela anao hanilika ny sandan'ny default amin'ny Sass anao manokana nefa tsy manova ny kaody loharanon'ny Bootstrap. Adikao sy apetaho ny variables raha ilaina, ovao ny sandany ary esory ny !defaultsaina. Raha efa voatendry ny variable iray, dia tsy haverina amin'ny alàlan'ny sanda default ao amin'ny Bootstrap izany.

Ho hitanao ny lisitry ny faribolan'ny Bootstrap ao amin'ny scss/_variables.scss. Ny variables sasany dia apetraka amin'ny null, tsy mamoaka ny fananana ireo fari-piainana ireo raha tsy voafafa ao amin'ny configuration-nao.

Ny fanodinkodinana miovaova dia tsy maintsy tonga aorian'ny fanafarana ny fiasantsika, ny fari-piainanay ary ny mixins, fa alohan'ny fanafarana hafa.

Ity misy ohatra iray izay manova ny background-colorsy colorny <body>rehefa manafatra sy manangona Bootstrap amin'ny npm:

@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

Avereno araka izay ilaina amin'ny variable rehetra ao amin'ny Bootstrap, ao anatin'izany ireo safidy manerantany eto ambany.

Sarintany sy tadivavarana

Ny Bootstrap 4 dia ahitana sarintany Sass vitsivitsy, tsiroaroa manan-danja izay manamora ny famokarana fianakaviana CSS mifandraika. Mampiasa sari-tany Sass izahay ho an'ny lokonay, ny teboka tapaka, ary ny maro hafa. Tahaka ny fari-pahaizan'i Sass, ny sarintany Sass rehetra dia misy ny !defaultsaina ary azo ovaina sy itarina.

Ny sasany amin'ireo sari-tany Sass dia natambatra ho tsy misy na inona na inona. Izany dia natao mba hamelana mora ny fanitarana ny sari-tany Sass nomena, fa tonga amin'ny sandan'ny fanalana zavatra amin'ny sari-tany ho sarotra kokoa.

Ovao sari-tany

Raha hanova loko efa misy ao amin'ny $theme-colorssari-tany, ampio ity manaraka ity amin'ny rakitra Sass mahazatra anao:

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

Ampio amin'ny sari-tany

Hanampy loko vaovao amin'ny $theme-colors, ampio ny fanalahidy sy sanda vaovao:

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

Esory amin'ny sari-tany

Ampiasao $theme-colorsny map-remove. Tandremo fa tsy maintsy ampidirinao eo anelanelan'ny fepetra takinay sy ny safidy:

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

Fanalahidy ilaina

Bootstrap dia mihevitra ny fisian'ny fanalahidy manokana ao anatin'ny sarintany Sass rehefa nampiasa sy nanitatra azy ireo izahay. Rehefa manamboatra ny sari-tany tafiditra ianao dia mety hahita lesoka izay ampiasaina ny fanalahidin'ny sarintany Sass manokana.

Ohatra, mampiasa ny primary, success, ary ny dangerlakile avy $theme-colorsamin'ny rohy, bokotra ary endrika. Ny fanoloana ny soatoavin'ireo fanalahidy ireo dia tsy tokony hiteraka olana, fa ny fanesorana azy ireo dia mety hiteraka olana amin'ny fanangonana Sass. Amin'ireo tranga ireo dia mila manova ny kaody Sass izay mampiasa ireo soatoavina ireo ianao.

asa

Bootstrap dia mampiasa fiasa Sass maromaro, saingy ampahany kely ihany no azo ampiharina amin'ny lohahevitra ankapobeny. Nampidirinay ny fiasa telo hahazoana sanda avy amin'ny sarintany miloko:

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

Ireo dia mamela anao hisafidy loko iray avy amin'ny sarintany Sass mitovy amin'ny fomba fampiasanao ny lokon'ny v3.

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

Manana fiasa hafa ihany koa isika amin'ny fahazoana loko iray manokana avy amin'ny $theme-colorssarintany. Ny sanda ambaratonga ratsy dia hanamaivana ny loko, fa ny ambaratonga ambony kosa dia ho maizina.

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

Amin'ny fampiharana, miantso ny fiasa ianao ary mandalo amin'ny mason-tsivana roa: ny anaran'ny loko avy amin'ny $theme-colors(ohatra, voalohany na loza) ary ambaratonga isa.

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

Ny fiasa fanampiny dia azo ampiana amin'ny ho avy na ny Sass mahazatra anao mba hamoronana fiasa ambaratonga ho an'ny sari-tany Sass fanampiny, na sari-tany mahazatra mihitsy aza raha te ho be vava kokoa ianao.

Mifanohitra amin'ny loko

Ny fiasa fanampiny ampidirintsika ao amin'ny Bootstrap dia ny fiasa mifanohitra amin'ny loko, color-yiq. Mampiasa ny habaka loko YIQ izy io mba hamerina ho azy ny loko mifanohitra mazava ( #fff) na maizina ( #111) mifototra amin'ny loko fototra voatondro. Ity fiasa ity dia ilaina indrindra ho an'ny mixins na loop izay mamorona kilasy maromaro.

Ohatra, mba hamorona sarintany miloko avy amin'ny $theme-colorssari-tany:

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

Azo ampiasaina amin'ny filàna fifanoherana tokana ihany koa izy io:

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

Azonao atao ihany koa ny mamaritra loko fototra amin'ny fiasan'ny sarintany miloko:

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

Mandosira SVG

Ampiasainay ny fampiasa escape-svgmba handosirana ny <, >sy #ny tarehin-tsoratra ho an'ny sary lafika SVG. Mila afa-mandositra ireo endri-tsoratra ireo mba hamerenana araka ny tokony ho izy ny sary ambadika ao amin'ny IE. Rehefa mampiasa ny escape-svgasa, dia tsy maintsy tononina ny data URI.

Ampio sy fanalana asa

Mampiasa ny addand subtractfunctions izahay mba hametahana ny calcasa CSS. 0Ny tanjona voalohany amin'ireo asa ireo dia ny hisorohana ny hadisoana rehefa ampidirina amin'ny fiteny iray ny sanda "tsy tokana" calc. Ny teny toy ny calc(10px - 0)dia hamerina hadisoana amin'ny navigateur rehetra, na dia marina ara-matematika aza.

Ohatra izay manankery ny kalk:

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

Ohatra tsy mety ny calc:

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

Amboary ny Bootstrap 4 miaraka amin'ny rakitra varimbazaha namboarinay ary ampifamadiho mora foana ny safidin'ny CSS manerantany miaraka amin'ny $enable-*fari-piadidiana Sass vaovao. Atsipazo ny sandan'ny variable ary avereno amboarina npm run testaraka izay ilaina.

Azonao atao ny mahita sy manamboatra ireo fari-pahalalana ireo ho an'ny safidy manerantany lehibe ao amin'ny scss/_variables.scssrakitra Bootstrap.

loko

Maro amin'ireo singa sy kojakoja isan-karazany an'ny Bootstrap no natsangana tamin'ny alàlan'ny andian-loko voafaritra ao amin'ny sarintany Sass. Ity sari-tany ity dia azo atambatra ao amin'ny Sass mba hamoronana andianà fitsipika.

Ny loko rehetra

Ny loko rehetra misy ao amin'ny Bootstrap 4, dia azo alaina amin'ny maha-Sass variables sy sarintany Sass amin'ny scss/_variables.scssrakitra. Hiitatra amin'ny famoahana madinidinika manaraka izany mba hanampiana alokaloka fanampiny, toy ny palette grayscale efa nampidirintsika.

Ity ny fomba ahafahanao mampiasa ireto amin'ny Sass anao:

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

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

Misy ihany koa ny kilasy fampiasa amin'ny loko ho an'ny fametrahana colorsy background-color.

Loko lohahevitra

Mampiasa ampahany amin'ny loko rehetra izahay mba hamoronana palette miloko kely kokoa amin'ny famokarana loko, azo alaina ihany koa amin'ny maha-samihafa Sass sy sarintany Sass ao amin'ny scss/_variables.scssrakitra Bootstrap.

Greys

Andian-tarana volondavenona midadasika sy sarintany Sass scss/_variables.scssho an'ny aloky ny volondavenona tsy tapaka manerana ny tetikasanao. Mariho fa "volomparasy mangatsiatsiaka" ireo, izay mirona mankany amin'ny feo manga malefaka, fa tsy volondavenona tsy miandany.

Ao anatin'ny scss/_variables.scss, dia ho hitanao ny fiovan'ny loko Bootstrap sy ny sarintany Sass. Ity misy ohatra iray amin'ny $colorssarintany 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;

Ampio, esory, na ovao ny soatoavina ao anatin'ny sari-tany mba hanavaozana ny fomba ampiasana azy amin'ny singa maro hafa. Indrisy anefa fa tsy ny singa rehetra no mampiasa ity sari-tany Sass ity. Ny fanavaozana ho avy dia hiezaka hanatsara izany. Mandra-pahatongan'izany, mikasa ny hampiasa ireo ${color}fari-piainana sy ity sarintany Sass ity.

singa

Maro amin'ireo singa sy kojakoja ao amin'ny Bootstrap no namboarina miaraka amin'ny @eachtadivavarana izay miverimberina amin'ny sarintany Sass. Izany dia manampy indrindra amin'ny famoronana variana amin'ny singa iray amin'ny alàlan'ny anay $theme-colorsary mamorona variana mamaly ho an'ny teboka tsirairay. Rehefa manamboatra ireo sari-tany Sass ireo ianao ary manangona indray, dia ho hitanao fa hita taratra ao anatin'ireo tadivavarana ireo fiovanao.

Modifiers

Maro amin'ireo singa ao amin'ny Bootstrap no naorina miaraka amin'ny fomba fiasa fototra-modifier. Midika izany fa ny ankabeazan'ny fanaingoana dia voarakitra ao amin'ny kilasy fototra (oh, .btn) fa ny fiovaovan'ny fomba dia voafetra amin'ny kilasy modifier (oh, .btn-danger). Ireo kilasy modifier ireo dia natsangana avy amin'ny $theme-colorssari-tany mba hanamarihana ny isa sy ny anaran'ny kilasy modifier.

Ireto misy ohatra roa amin'ny fomba amboarantsika ny $theme-colorssari-tany mba hamoronana mpanova ny .alertsinga sy ny .bg-*kojakoja fototra rehetra.

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

manaiky

Ireo tadivavarana Sass ireo dia tsy voafetra amin'ny sarintany miloko ihany koa. Azonao atao ihany koa ny mamorona fiovaovana mamaly ny singa na ny fitaovanao. Raiso, ohatra, ny fitaovana fampifanarahana lahatsoratra mamaly izay mampifangaro ny @eachloop ho an'ny $grid-breakpointssarintany Sass miaraka amin'ny fangatahana media.

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

Raha mila ovainao ny $grid-breakpoints, ny fanovanao dia mihatra amin'ny tadivavarana rehetra miverimberina eo amin'io sari-tany io.

CSS variables

Ny Bootstrap 4 dia ahitana karazana CSS roa ampolony eo ho eo (variables) ao amin'ny CSS natambatra. Ireo dia manome fahafahana miditra mora amin'ny soatoavina fampiasa mahazatra toy ny loko loha-hevitray, ny teboka tapaka, ary ny antonta endri-tsoratra voalohany rehefa miasa ao amin'ny Inspector an'ny navigateur, boaty fasika kaody, na prototyping ankapobeny.

Variable misy

Ireto ny variables ampidirintsika (mariho fa :rootilaina ny). Hita ao amin'ny _root.scssrakitray izy ireo.

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

OHATRA

Ny fari-piainan'ny CSS dia manome flexibility mitovy amin'ny fari-piainan'i Sass, saingy tsy mila fanangonam-bokatra alohan'ny hanolorana azy amin'ny navigateur. Ohatra, averinay eto ny endri-tsoratra sy ny fomba fampifandraisana amin'ny CSS.

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

Variable breakpoint

Na dia nampiditra teboka fiatoana tao amin'ny fari-piainan'ny CSS (oh: --breakpoint-md), ireo dia tsy tohanana amin'ny fangatahana media , fa mbola azo ampiasaina ao anatin'ny fehezan-dalàna amin'ny fangatahana media. Mijanona ao amin'ny CSS voaangona ireo fari-pandrefesana ireo ho an'ny fifanarahana mihemotra satria azo ampiasaina amin'ny JavaScript. Mianara bebe kokoa amin'ny spec .

Ity misy ohatra iray amin'ny zavatra tsy tohana:

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

Ary ity misy ohatra iray amin'ny tohana:

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