Bootstrap téamaí

Saincheap Bootstrap 4 lenár n-athróga nua ionsuite Sass le haghaidh roghanna stíle domhanda le haghaidh téamaí éasca agus athruithe comhpháirteanna.

Réamhrá

I Bootstrap 3, bhí an téama á thiomáint den chuid is mó ag sáruithe athraitheacha i LESS, CSS saincheaptha, agus stílbhileog téama ar leith a chuireamar san áireamh inár distgcomhaid. Le roinnt iarracht, d'fhéadfaí cuma Bootstrap 3 a athdhearadh go hiomlán gan teagmháil a dhéanamh leis na croíchomhaid. Soláthraíonn Bootstrap 4 cur chuige eolach ach beagán difriúil.

Anois, tá na téamaí curtha i gcrích ag athróga Sass, léarscáileanna Sass, agus CSS saincheaptha. Níl aon stílbhileog téama níos tiomnaithe; ina ionad sin, is féidir leat an téama ionsuite a chumasú chun grádáin, scáthanna agus níos mó a chur leis.

Sass

Bain úsáid as ár gcomhaid fhoinse Sass chun leas a bhaint as athróga, léarscáileanna, meascáin, agus níos mó agus Sass á thiomsú ag baint úsáide as do phíblíne sócmhainní féin.

Struchtúr comhaid

Nuair is féidir, seachain comhaid lárnacha Bootstrap a mhodhnú. Do Sass, ciallaíonn sé sin do stílbhileog féin a chruthú a allmhairíonn Bootstrap ionas gur féidir leat é a mhodhnú agus a shíneadh. Ag glacadh leis go bhfuil tú ag baint úsáide as bainisteoir pacáiste cosúil le npm, beidh struchtúr comhaid agat a bhfuil cuma mar seo air:

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

Má tá ár gcomhaid foinse íoslódáilte agat agus mura bhfuil bainisteoir pacáiste in úsáid agat, beidh tú ag iarraidh rud éigin cosúil leis an struchtúr sin a shocrú de láimh, ag coinneáil comhaid foinse Bootstrap ar leithligh ó do chuid féin.

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

Iompórtáil

I do custom.scss, iompórtálfaidh tú comhaid Sass foinse Bootstrap. Tá dhá rogha agat: cuir Bootstrap san áireamh, nó roghnaigh na codanna atá uait. Spreagaimid an dara ceann, ach a bheith ar an eolas go bhfuil roinnt riachtanas agus spleáchais ar fud ár gcomhpháirteanna. Beidh ort roinnt JavaScript a chur san áireamh freisin dár bhforlíontáin.

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

Agus an socrú sin i bhfeidhm, is féidir leat tosú ar aon cheann de na hathróga agus na léarscáileanna Sass i do custom.scss. Is féidir leat tosú freisin le codanna de Bootstrap a chur leis faoin // Optionalalt mar is gá. Molaimid úsáid a bhaint as an stack iomlán iompórtála ónár bootstrap.scssgcomhad mar phointe tosaigh duit.

Mainneachtainí athraitheacha

Cuimsíonn gach athróg Sass i Bootstrap an !defaultbhratach a ligeann duit luach réamhshocraithe an athróg a shárú i do Sass féin gan cód foinse Bootstrap a mhodhnú. Cóipeáil agus greamaigh athróga de réir mar is gá, modhnaigh a luachanna, agus bain an !defaultbhratach. Má tá athróg sannta cheana féin, ní dhéanfar í a athshannadh de réir na luachanna réamhshocraithe i Bootstrap.

Gheobhaidh tú an liosta iomlán d'athróga Bootstrap i scss/_variables.scss. Tá roinnt athróg socraithe go null, ní dhéanann na hathróga seo an t-airí a aschur ach amháin má sháraítear iad i do chumraíocht.

Ní mór sáruithe athraitheacha teacht tar éis ár bhfeidhmeanna, ár n-athróga, agus meascáin a allmhairiú, ach roimh an gcuid eile de na hallmhairí.

Seo sampla a athraíonn an background-coloragus colordon agus <body>nuair a bhíonn Bootstrap á iompórtáil agus á thiomsú trí 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

Déan arís mar is gá d'aon athróg i Bootstrap, lena n-áirítear na roghanna domhanda thíos.

Léarscáileanna agus lúba

Cuimsíonn Bootstrap 4 dornán de léarscáileanna Sass, péirí eochairluacha a fhágann go bhfuil sé níos éasca teaghlaigh CSS gaolmhara a ghiniúint. Bainimid úsáid as léarscáileanna Sass le haghaidh ár ndathanna, ár bristephointí greille, agus go leor eile. Díreach cosúil le hathróga Sass, tá an !defaultbhratach ar gach léarscáil Sass agus is féidir iad a shárú agus a leathnú.

Déantar cuid dár léarscáileanna Sass a chumasc le cinn fholmha de réir réamhshocraithe. Déantar é seo chun leathnú éasca a dhéanamh ar léarscáil Sass ar leith, ach tagann sé ar an gcostas a bhaineann le míreanna a bhaint as léarscáil a dhéanamh beagán níos deacra.

Léarscáil a mhodhnú

Chun dath atá ar ár $theme-colorsléarscáil cheana féin a mhodhnú, cuir an méid seo a leanas le do chomhad Sass saincheaptha:

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

Cuir leis an léarscáil

Chun dath nua a chur le $theme-colors, cuir an eochair agus an luach nua leis:

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

Bain den léarscáil

Chun dathanna a bhaint as $theme-colors, nó as léarscáil ar bith eile, úsáid map-remove. Bí ar an eolas go gcaithfidh tú é a chur isteach idir ár riachtanais agus ár roghanna:

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

Eochracha riachtanacha

Glacann Bootstrap leis go bhfuil roinnt eochracha ar leith i láthair laistigh de léarscáileanna Sass de réir mar a d’úsáideamar iad agus mar a leathnaíomar iad féin. De réir mar a shaincheapann tú na léarscáileanna atá san áireamh, seans go dtiocfaidh earráidí ort nuair a bhíonn eochair léarscáile Sass ar leith á húsáid.

Mar shampla, úsáidimid an primary, success, agus dangereochracha ó $theme-colorsle haghaidh naisc, cnaipí, agus stáit fhoirm. Níor cheart go mbeadh fadhb ar bith le hathsholáthar luachanna na n-eochracha seo, ach d’fhéadfadh fadhbanna tiomsú Sass a bheith i gceist má bhaintear iad. Sna cásanna seo, beidh ort an cód Sass a úsáideann na luachanna sin a mhodhnú.

Feidhmeanna

Úsáideann Bootstrap roinnt feidhmeanna Sass, ach ní bhaineann ach fo-thacar maidir le téamaí ginearálta. Tá trí fheidhm curtha san áireamh againn chun luachanna a fháil ó na léarscáileanna datha:

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

Ligeann siad seo duit dath amháin a phiocadh as léarscáil Sass cosúil le conas a d’úsáidfeá athróg datha ó v3.

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

Tá feidhm eile againn freisin chun leibhéal áirithe datha a fháil ón $theme-colorsléarscáil. Éileoidh luachanna leibhéil diúltacha an dath, agus dorchaoidh leibhéil níos airde.

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

Go praiticiúil, ba mhaith leat glaoch ar an fheidhm agus pas a fháil i dhá paraiméadair: an t-ainm an dath ó $theme-colors(m.sh., bunscoile nó contúirte) agus leibhéal uimhriúil.

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

D'fhéadfaí feidhmeanna breise a chur leis sa todhchaí nó do Sass saincheaptha féin chun feidhmeanna leibhéal a chruthú le haghaidh léarscáileanna Sass breise, nó fiú ceann cineálach dá mba mhian leat a bheith níos briathartha.

Codarsnacht dathanna

Feidhm bhreise a chuirimid san áireamh i Bootstrap is ea an fheidhm codarsnachta dathanna, color-yiq. Úsáideann sé spás datha YIQ chun dath codarsnachta éadrom ( #fff) nó dorcha ( #111) a thabhairt ar ais go huathoibríoch bunaithe ar an mbundath sonraithe. Tá an fheidhm seo úsáideach go háirithe le haghaidh meascáin nó lúba ina bhfuil ilranganna á nginiúint agat.

Mar shampla, chun swatches dathanna a ghiniúint ónár $theme-colorsléarscáil:

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

Is féidir é a úsáid freisin le haghaidh riachtanais chodarsnachta aonuaire:

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

Is féidir leat bundath a shonrú freisin lenár bhfeidhmeanna léarscáile datha:

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

Éalú SVG

Bainimid úsáid as an escape-svgbhfeidhm chun éalú ó <, >agus #carachtair le haghaidh íomhánna cúlra SVG. Ní mór éalú ó na carachtair seo chun na híomhánna cúlra in IE a sholáthar i gceart. Agus an escape-svgfheidhm á húsáid, ní mór URIanna sonraí a lua.

Feidhmeanna Suimithe agus Dealaigh

Bainimid úsáid as an addagus subtractfeidhmeanna chun an fheidhm CSS a fhilleadh calc. Is é príomhchuspóir na bhfeidhmeanna seo ná earráidí a sheachaint nuair a chuirtear luach “gan aonad” 0isteach i calcslonn. Tabharfaidh slonn mar calc(10px - 0)seo earráid ar ais i ngach brabhsálaí, in ainneoin go bhfuil siad ceart go matamaiticiúil.

Sampla ina bhfuil an calc bailí:

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

Sampla ina bhfuil an calc neamhbhailí:

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

Roghanna Sass

Saincheap Bootstrap 4 lenár gcomhad athróg saincheaptha ionsuite agus scoránaigh roghanna domhanda CSS go héasca le $enable-*hathróga nua Sass. Sáraigh luach athróige agus déan é a ath-chruinniú de réir npm run testmar is gá.

Is féidir leat na hathróga seo a aimsiú agus a shaincheapadh le haghaidh príomhroghanna domhanda i scss/_variables.scssgcomhad Bootstrap.

Dath

Tógtar go leor de na comhpháirteanna agus de na fóntais éagsúla atá ag Bootstrap trí shraith dathanna a shainítear i léarscáil Sass. Is féidir an léarscáil seo a lúbadh i Sass chun sraith rialacha a ghiniúint go tapa.

Gach dathanna

Tá na dathanna go léir atá ar fáil i Bootstrap 4 ar fáil mar athróga Sass agus mar léarscáil Sass i scss/_variables.scssgcomhad. Leathnófar air seo i mioneisiúintí ina dhiaidh sin chun dathanna breise a chur leis, cosúil leis an bpailéad liathscála atá san áireamh againn cheana féin.

Seo mar is féidir leat iad seo a úsáid i do Sass:

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

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

Tá ranganna áirgiúlachta datha ar fáil freisin le socrú coloragus background-color.

Dathanna téama

Bainimid úsáid as fothacar de na dathanna go léir chun pailéad dathanna níos lú a chruthú chun scéimeanna datha a ghiniúint, atá ar fáil freisin mar athróga Sass agus léarscáil Sass i scss/_variables.scssgcomhad Bootstrap.

Liaths

Sraith leathan athróg liath agus léarscáil Sass scss/_variables.scssle haghaidh dathanna comhsheasmhacha liath ar fud do thionscadal. Tabhair faoi deara gur “greanna fionnuara” iad seo, a mbíonn claonadh acu i dtreo ton caolchúiseach gorm, seachas liatha neodracha.

Laistigh de scss/_variables.scss, gheobhaidh tú athróga datha Bootstrap agus léarscáil Sass. Seo sampla de $colorsléarscáil 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;

Cuir leis, bain nó mionathraigh luachanna laistigh den léarscáil chun an chaoi a n-úsáidtear iad i go leor comhpháirteanna eile a nuashonrú. Ar an drochuair, ní bhaineann gach comhpháirt leas as an léarscáil Sass seo ag an am seo. Déanfaidh nuashonruithe amach anseo iarracht feabhas a chur air seo. Go dtí sin, déan plean maidir le húsáid na n- ${color}athróg agus an léarscáil Sass seo.

Comhpháirteanna

Tógtar go leor comhpháirteanna agus fóntais Bootstrap le @eachlúba a athrá thar léarscáil Sass. Tá sé seo ina chuidiú go háirithe chun leaganacha comhpháirte a ghiniúint dár gcuid $theme-colorsagus chun leaganacha freagrúla a chruthú do gach brisphointe. De réir mar a dhéanann tú na léarscáileanna Sass seo a shaincheapadh agus a ath-thiomsú, feicfidh tú go huathoibríoch do chuid athruithe le feiceáil sna lúba seo.

Mionathraitheoirí

Tógtar go leor de chomhpháirteanna Bootstrap le cur chuige aicme bonn-mhodhnóra. Ciallaíonn sé seo go bhfuil an chuid is mó den stíliú cuimsithe go bunrang (m.sh., .btn) agus go bhfuil éagsúlachtaí stíle teoranta do ranganna mionathraithe (m.sh., .btn-danger). Tógtar na ranganna mionathraithe seo ón $theme-colorsléarscáil chun uimhir agus ainm ár ranganna mionathraithe a shaincheapadh.

Seo dhá shampla den chaoi a lúbaimid an $theme-colorsléarscáil chun mionathruithe a ghiniúint ar an .alertgcomhpháirt agus ar ár .bg-*bhfóntais chúlra go léir.

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

Sofhreagrach

Níl na lúba Sass seo teoranta do léarscáileanna datha, ach an oiread. Is féidir leat éagsúlachtaí sofhreagracha de do chomhpháirteanna nó d'fhóntais a ghiniúint freisin. Tóg mar shampla ár n-áiseanna sofhreagracha ailínithe téacs ina meascaimid @eachlúb don $grid-breakpointsléarscáil Sass le fiosrú meáin.

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

Más gá duit do chuid , a mhodhnú $grid-breakpoints, cuirfear na hathruithe i bhfeidhm ar na lúba go léir a atriallaíonn an léarscáil sin.

Athróga CSS

Cuimsíonn Bootstrap 4 thart ar dhá dhosaen airíonna saincheaptha CSS (athróga) ina CSS tiomsaithe. Soláthraíonn siad seo rochtain éasca ar luachanna a úsáidtear go coitianta ar nós ár ndathanna téama, ár bristephointí, agus stoic chlónna príomhúla agus tú ag obair i gCigire do bhrabhsálaí, i mbosca gainimh cód, nó i bhfréamhshamhlú ginearálta.

Athróga atá ar fáil

Seo iad na hathróga atá san áireamh againn (tabhair faoi deara go bhfuil an :rootgá). Tá siad lonnaithe inár _root.scssgcomhad.

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

Samplaí

Cuireann athróga CSS solúbthacht cosúil le hathróga Sass ar fáil, ach gan gá le tiomsú sula ndéantar iad a sheirbheáil ar an mbrabhsálaí. Mar shampla, anseo táimid ag athshocrú cló ár leathanaigh agus stíleanna naisc le hathróga CSS.

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

Athróga brisphointe

Cé gur chuireamar barrphointí inár n-athróga CSS san áireamh ar dtús (m.sh., --breakpoint-md), ní thacaítear leo seo i bhfiosruithe ó na meáin , ach is féidir iad a úsáid fós laistigh de shraitheanna rialacha i bhfiosruithe ó na meáin. Fanann na hathróga brisphointe seo sa CSS tiomsaithe le haghaidh comhoiriúnacht siar ós rud é gur féidir iad a úsáid le JavaScript. Foghlaim níos mó sa spec .

Seo sampla de na rudaí nach dtacaítear leo:

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

Agus seo sampla den méid a fhaigheann tacaíocht:

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