Theming Bootstrap

Addaswch Bootstrap 4 gyda'n newidynnau Sass newydd ar gyfer dewisiadau arddull byd-eang ar gyfer themâu hawdd a newidiadau i gydrannau.

Rhagymadrodd

Yn Bootstrap 3, roedd y themâu'n cael eu gyrru'n bennaf gan ddiystyru amrywiol yn LLAI, CSS arferol, a thaflen arddull thema ar wahân y gwnaethom ei chynnwys yn ein distffeiliau. Gyda pheth ymdrech, gallai un ailgynllunio edrychiad Bootstrap 3 yn llwyr heb gyffwrdd â'r ffeiliau craidd. Mae Bootstrap 4 yn darparu dull cyfarwydd, ond ychydig yn wahanol.

Nawr, cyflawnir y thema gan newidynnau Sass, mapiau Sass, a CSS arferol. Nid oes taflen arddull thema fwy penodol; yn lle hynny, gallwch chi alluogi'r thema adeiledig i ychwanegu graddiannau, cysgodion, a mwy.

Sass

Defnyddiwch ein ffeiliau ffynhonnell Sass i fanteisio ar newidynnau, mapiau, cymysgeddau, a mwy wrth lunio Sass gan ddefnyddio'ch piblinell asedau eich hun.

Strwythur ffeil

Lle bynnag y bo modd, ceisiwch osgoi addasu ffeiliau craidd Bootstrap. Ar gyfer Sass, mae hynny'n golygu creu eich taflen arddull eich hun sy'n mewnforio Bootstrap fel y gallwch ei addasu a'i ymestyn. Gan dybio eich bod yn defnyddio rheolwr pecyn fel npm, bydd gennych strwythur ffeil sy'n edrych fel hyn:

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

Os ydych chi wedi lawrlwytho ein ffeiliau ffynhonnell ac nad ydych chi'n defnyddio rheolwr pecyn, byddwch chi eisiau gosod rhywbeth tebyg i'r strwythur hwnnw â llaw, gan gadw ffeiliau ffynhonnell Bootstrap ar wahân i'ch rhai chi.

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

Mewnforio

Yn eich custom.scss, byddwch yn mewnforio ffeiliau Sass ffynhonnell Bootstrap. Mae gennych ddau opsiwn: cynhwyswch yr holl Bootstrap, neu dewiswch y rhannau sydd eu hangen arnoch chi. Rydym yn annog yr olaf, ond byddwch yn ymwybodol bod rhai gofynion a dibyniaethau ar draws ein cydrannau. Bydd angen i chi hefyd gynnwys rhai JavaScript ar gyfer ein ategion.

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

Gyda'r gosodiad hwnnw yn ei le, gallwch chi ddechrau addasu unrhyw un o'r newidynnau a mapiau Sass yn eich ffeil custom.scss. Gallwch hefyd ddechrau ychwanegu rhannau o Bootstrap o dan yr // Optionaladran yn ôl yr angen. Rydym yn awgrymu defnyddio'r pentwr mewnforio llawn o'n bootstrap.scssffeil fel eich man cychwyn.

Rhagosodiadau newidiol

Mae pob newidyn Sass yn Bootstrap yn cynnwys y !defaultfaner sy'n eich galluogi i ddiystyru gwerth rhagosodedig y newidyn yn eich Sass eich hun heb addasu cod ffynhonnell Bootstrap. Copïwch a gludwch newidynnau yn ôl yr angen, addaswch eu gwerthoedd, a thynnu'r !defaultfaner. Os oes newidyn wedi'i neilltuo eisoes, ni fydd yn cael ei ail-neilltuo gan y gwerthoedd rhagosodedig yn Bootstrap.

Fe welwch restr gyflawn o newidynnau Bootstrap yn scss/_variables.scss. Mae rhai newidynnau wedi'u gosod i null, nid yw'r newidynnau hyn yn allbynnu'r priodwedd oni bai eu bod yn cael eu diystyru yn eich ffurfweddiad.

Rhaid i wrthwneud newidiol ddod ar ôl i'n swyddogaethau, newidynnau, a chymysgeddau gael eu mewnforio, ond cyn gweddill y mewnforion.

Dyma enghraifft sy'n newid yr background-colorac colorar gyfer y <body>wrth fewnforio a llunio Bootstrap trwy 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

Ailadroddwch yn ôl yr angen ar gyfer unrhyw newidyn yn Bootstrap, gan gynnwys yr opsiynau cyffredinol isod.

Mapiau a dolenni

Mae Bootstrap 4 yn cynnwys llond llaw o fapiau Sass, parau gwerth allweddol sy'n ei gwneud hi'n haws cynhyrchu teuluoedd o CSS cysylltiedig. Rydym yn defnyddio mapiau Sass ar gyfer ein lliwiau, torbwyntiau grid, a mwy. Yn union fel newidynnau Sass, mae holl fapiau Sass yn cynnwys y !defaultfaner a gellir eu diystyru a'u hymestyn.

Mae rhai o'n mapiau Sass yn cael eu huno i rai gwag yn ddiofyn. Gwneir hyn er mwyn caniatáu ehangu hawdd ar fap Sass penodol, ond daw ar y gost o wneud tynnu eitemau o fap ychydig yn anoddach.

Addasu map

I addasu lliw presennol yn ein $theme-colorsmap, ychwanegwch y canlynol at eich ffeil Sass arferol:

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

Ychwanegu at y map

I ychwanegu lliw newydd at $theme-colors, ychwanegwch yr allwedd a'r gwerth newydd:

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

Tynnu oddi ar y map

I dynnu lliwiau o $theme-colors, neu unrhyw fap arall, defnyddiwch map-remove. Byddwch yn ymwybodol bod yn rhaid i chi ei fewnosod rhwng ein gofynion a'n hopsiynau:

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

Allweddi gofynnol

Mae Bootstrap yn rhagdybio presenoldeb rhai allweddi penodol o fewn mapiau Sass wrth i ni ddefnyddio ac ymestyn y rhain ein hunain. Wrth i chi addasu'r mapiau sydd wedi'u cynnwys, efallai y byddwch chi'n dod ar draws gwallau lle mae allwedd map Sass penodol yn cael ei ddefnyddio.

Er enghraifft, rydym yn defnyddio'r primary, success, ac dangerallweddi o $theme-colorsar gyfer dolenni, botymau, a chyflyrau ffurf. Ni ddylai newid gwerthoedd yr allweddi hyn achosi unrhyw broblemau, ond gall eu dileu achosi problemau o ran llunio Sass. Yn yr achosion hyn, bydd angen i chi addasu'r cod Sass sy'n defnyddio'r gwerthoedd hynny.

Swyddogaethau

Mae Bootstrap yn defnyddio sawl swyddogaeth Sass, ond dim ond is-set sy'n berthnasol i themâu cyffredinol. Rydym wedi cynnwys tair swyddogaeth ar gyfer cael gwerthoedd o'r mapiau lliw:

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

Mae'r rhain yn caniatáu ichi ddewis un lliw o fap Sass yn debyg iawn i sut y byddech chi'n defnyddio newidyn lliw o v3.

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

Mae gennym hefyd swyddogaeth arall ar gyfer cael lefel benodol o liw o'r $theme-colorsmap. Bydd gwerthoedd lefel negyddol yn ysgafnhau'r lliw, tra bydd lefelau uwch yn tywyllu.

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

Yn ymarferol, byddech yn galw'r swyddogaeth ac yn pasio mewn dau baramedr: enw'r lliw o $theme-colors(ee, cynradd neu berygl) a lefel rhifol.

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

Gellid ychwanegu swyddogaethau ychwanegol yn y dyfodol neu eich Sass personol eich hun i greu swyddogaethau lefel ar gyfer mapiau Sass ychwanegol, neu hyd yn oed un generig os ydych chi am fod yn fwy llafar.

Cyferbyniad lliw

Swyddogaeth ychwanegol rydyn ni'n ei chynnwys yn Bootstrap yw'r swyddogaeth cyferbyniad lliw, color-yiq. Mae'n defnyddio'r gofod lliw YIQ i ddychwelyd lliw cyferbyniad golau ( #fff) neu dywyll ( #111) yn awtomatig yn seiliedig ar y lliw sylfaen penodedig. Mae'r swyddogaeth hon yn arbennig o ddefnyddiol ar gyfer cymysgeddau neu ddolenni lle rydych chi'n cynhyrchu dosbarthiadau lluosog.

Er enghraifft, i gynhyrchu swatches lliw o'n $theme-colorsmap:

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

Gellir ei ddefnyddio hefyd ar gyfer anghenion cyferbyniad untro:

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

Gallwch hefyd nodi lliw sylfaenol gyda'n swyddogaethau map lliw:

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

Dianc SVG

Rydym yn defnyddio'r escape-svgswyddogaeth i ddianc rhag y <, >a'r #cymeriadau ar gyfer delweddau cefndir SVG. Mae angen dianc rhag y cymeriadau hyn i wneud y delweddau cefndir yn IE yn gywir. Wrth ddefnyddio'r escape-svgswyddogaeth, rhaid dyfynnu URI data.

Swyddogaethau Adio a Thynnu

Rydym yn defnyddio'r adda subtractswyddogaethau i lapio'r calcswyddogaeth CSS. Prif bwrpas y swyddogaethau hyn yw osgoi gwallau pan fo gwerth “unigol” 0yn cael ei drosglwyddo i calcfynegiad. Bydd mynegiadau fel calc(10px - 0)yn dychwelyd gwall ym mhob porwr, er eu bod yn fathemategol gywir.

Enghraifft lle mae'r calc yn ddilys:

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

Enghraifft lle mae'r calc yn annilys:

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

Opsiynau Sass

Addaswch Bootstrap 4 gyda'n ffeil newidynnau arferiad adeiledig a newidiwch ddewisiadau CSS byd-eang yn hawdd gyda $enable-*newidynnau Sass newydd. Diystyru gwerth newidyn a'i ail-grynhoi npm run testyn ôl yr angen.

Gallwch ddod o hyd i'r newidynnau hyn a'u haddasu ar gyfer opsiynau byd-eang allweddol yn scss/_variables.scssffeil Bootstrap.

Lliw

Mae llawer o gydrannau a chyfleustodau amrywiol Bootstrap wedi'u hadeiladu trwy gyfres o liwiau a ddiffinnir mewn map Sass. Gellir dolennu'r map hwn yn Sass i gynhyrchu cyfres o setiau rheolau yn gyflym.

Pob lliw

Mae'r holl liwiau sydd ar gael yn Bootstrap 4, ar gael fel newidynnau Sass a map Sass mewn scss/_variables.scssffeil. Ymhelaethir ar hyn mewn mân ddatganiadau dilynol i ychwanegu arlliwiau ychwanegol, yn debyg iawn i'r palet graddlwyd rydym eisoes wedi'i gynnwys.

Dyma sut y gallwch chi ddefnyddio'r rhain yn eich Sass:

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

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

Mae dosbarthiadau cyfleustodau lliw hefyd ar gael ar gyfer gosod colora background-color.

Lliwiau thema

Rydym yn defnyddio is-set o bob lliw i greu palet lliw llai ar gyfer cynhyrchu cynlluniau lliw, sydd hefyd ar gael fel newidynnau Sass a map Sass yn scss/_variables.scssffeil Bootstrap.

Llwyd

Set eang o newidynnau llwyd a map Sass scss/_variables.scssar gyfer arlliwiau llwyd cyson ar draws eich prosiect. Sylwch mai “llwydion cŵl” yw'r rhain, sy'n tueddu at naws las cynnil, yn hytrach na llwydion niwtral.

O fewn scss/_variables.scss, fe welwch newidynnau lliw Bootstrap a map Sass. Dyma enghraifft o $colorsfap 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;

Ychwanegu, dileu, neu addasu gwerthoedd o fewn y map i ddiweddaru sut maen nhw'n cael eu defnyddio mewn llawer o gydrannau eraill. Yn anffodus, ar hyn o bryd, nid yw pob cydran yn defnyddio'r map Sass hwn. Bydd diweddariadau yn y dyfodol yn ymdrechu i wella hyn. Tan hynny, cynlluniwch ddefnyddio'r ${color}newidynnau a'r map Sass hwn.

Cydrannau

Mae llawer o gydrannau a chyfleustodau Bootstrap wedi'u hadeiladu gyda @eachdolenni sy'n ailadrodd dros fap Sass. Mae hyn yn arbennig o ddefnyddiol ar gyfer cynhyrchu amrywiadau o gydran gan ein $theme-colorsa chreu amrywiadau ymatebol ar gyfer pob torbwynt. Wrth i chi addasu'r mapiau Sass hyn ac ail-grynhoi, byddwch yn gweld eich newidiadau yn cael eu hadlewyrchu yn y dolenni hyn yn awtomatig.

Addaswyr

Mae llawer o gydrannau Bootstrap wedi'u hadeiladu gyda dull dosbarth addasydd sylfaen. Mae hyn yn golygu bod y rhan fwyaf o'r arddull wedi'i gynnwys mewn dosbarth sylfaen (ee, .btn) tra bod amrywiadau arddull wedi'u cyfyngu i ddosbarthiadau addaswyr (ee, .btn-danger). Mae'r dosbarthiadau addaswyr hyn yn cael eu hadeiladu o'r $theme-colorsmap i wneud addasu rhif ac enw ein dosbarthiadau addasu.

Dyma ddwy enghraifft o sut rydym yn dolennu dros y $theme-colorsmap i gynhyrchu addaswyr i'r .alertgydran a'n holl .bg-*gyfleustodau cefndir.

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

Ymatebol

Nid yw'r dolenni Sass hyn yn gyfyngedig i fapiau lliw, chwaith. Gallwch hefyd gynhyrchu amrywiadau ymatebol o'ch cydrannau neu gyfleustodau. Er enghraifft, cymerwch ein cyfleustodau aliniad testun ymatebol lle rydym yn cymysgu @eachdolen ar gyfer y $grid-breakpointsmap Sass gydag ymholiad cyfryngau yn cynnwys.

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

Os bydd angen i chi addasu eich $grid-breakpoints, bydd eich newidiadau yn berthnasol i'r holl ddolenni sy'n ailadrodd dros y map hwnnw.

Newidynnau CSS

Mae Bootstrap 4 yn cynnwys tua dau ddwsin o briodweddau arfer CSS (newidynnau) yn ei CSS a luniwyd. Mae'r rhain yn darparu mynediad hawdd i werthoedd a ddefnyddir yn gyffredin fel ein lliwiau thema, torbwyntiau, a phentyrrau ffontiau cynradd wrth weithio yn Arolygydd eich porwr, blwch tywod cod, neu brototeipio cyffredinol.

Newidynnau sydd ar gael

Dyma'r newidynnau rydyn ni'n eu cynnwys (sylwch fod :rootangen y rhain). Maent wedi'u lleoli yn ein _root.scssffeil.

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

Enghreifftiau

Mae newidynnau CSS yn cynnig hyblygrwydd tebyg i newidynnau Sass, ond heb fod angen eu crynhoi cyn eu cyflwyno i'r porwr. Er enghraifft, dyma ni'n ailosod ffont ein tudalen ac arddulliau cyswllt gyda newidynnau CSS.

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

Newidynnau torbwynt

Er i ni gynnwys torbwyntiau yn ein newidynnau CSS yn wreiddiol (ee, --breakpoint-md), nid yw'r rhain yn cael eu cefnogi mewn ymholiadau cyfryngau , ond gellir eu defnyddio o hyd o fewn setiau rheolau mewn ymholiadau cyfryngau. Mae'r newidynnau torbwynt hyn yn aros yn y CSS a luniwyd ar gyfer cydnawsedd yn ôl o ystyried y gellir eu defnyddio gan JavaScript. Dysgwch fwy yn y fanyleb .

Dyma enghraifft o'r hyn nad yw'n cael ei gefnogi:

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

A dyma enghraifft o'r hyn a gefnogir:

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