Source

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 loharano ananantsika mba hanararaotra ireo fari-pahalalana, sarintany, mixins, sy ny maro hafa.

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, ianao dia hanafatra ny rakitra Sass loharanon'ny Bootstrap. Manana safidy roa ianao: ampidiro ny Bootstrap rehetra, na safidio ny ampahany ilainao. Mamporisika ity farany izahay, na dia tandremo aza fa misy fepetra sy fiankinan-doha amin'ny singanay. Mila mampiditra JavaScript ho an'ny plugins ihany koa ianao.

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

Miaraka amin'io fananganana io dia azonao atao ny manomboka manova ny fari-piadidiana Sass sy ny sarintany 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 4 dia ahitana ny !defaultsaina mamela anao hanilika ny sandan'ny default ao 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 mahazatra ao amin'ny Bootstrap izany.

Ho hitanao ny lisitry ny faribolan'ny Bootstrap ao amin'ny scss/_variables.scss.

Ny fanodinkodinana miovaova ao anatin'ny rakitra Sass mitovy dia mety ho tonga alohan'ny na aorian'ny fari-piadidiana. Na izany aza, rehefa manafoana ny rakitra Sass, dia tsy maintsy tonga ny overrideo alohan'ny hanafatrao ny rakitra Sass an'ny Bootstrap.

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

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

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

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, mpivady 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 ampanjifainao ireo sari-tany tafiditra dia mety hisy 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 iray 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`
}

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.

Miovaova	soatoavina	Description
`$spacer`	`1rem`(default), na sanda rehetra > 0	Manondro ny sandan'ny spacer default mba hamoronana ny fitaovana spacer anay .
`$enable-rounded`	`true`(default) na`false`	Mamela fomba efa voafaritra mialoha `border-radius`amin'ny singa samihafa.
`$enable-shadows`	`true`na `false`(default)	Mamela fomba efa voafaritra mialoha `box-shadow`amin'ny singa samihafa.
`$enable-gradients`	`true`na `false`(default)	Mamela ny gradient efa voafaritra mialoha amin'ny alàlan'ny `background-image`fomba amin'ny singa samihafa.
`$enable-transitions`	`true`(default) na`false`	Mamela `transition`s efa voafaritra mialoha amin'ny singa samihafa.
`$enable-hover-media-query`	`true`na `false`(default)	Tsy ampiasaina intsony
`$enable-grid-classes`	`true`(default) na`false`	Mamela ny famoronana kilasy CSS ho an'ny rafitra grid (oh, `.container`, `.row`, `.col-md-1`, sns.).
`$enable-caret`	`true`(default) na`false`	Mamela pseudo element caret on `.dropdown-toggle`.
`$enable-print-styles`	`true`(default) na`false`	Mamela fomba hanamafisana ny fanontana.

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.

Manga

Indigo

LAMBA VOLOMPARASY

Pink

MENA

voasary

MAVO

Maitso

Teal

Cyan

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.

Amin'ny ho avy dia mikendry ny hanome sarintany sy fari-piadidiana Sass izahay ho an'ny aloky ny loko tsirairay tahaka ny nataonay tamin'ireo loko miloko volondavenona etsy ambany.

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-varimbazaha Sass sy sarintany Sass ao amin'ny scss/_variables.scssrakitra Bootstraps.

Kilonga

faharoa

FETY

Loza

FAMPITANDREMANA

Info

fahazavana

Maizina

Greys

Andian-tarana volondavenona midadasika sy sarintany Sass scss/_variables.scssho an'ny aloky ny volondavenona tsy tapaka manerana ny tetikasanao.

100

200

300

400

500

600

700

800

900

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 an'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 amin'ny singa na 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 toa ianao ka mila manova 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, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

OHATRA

Ny fari-piadidiana 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);
  }
}