Source

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 go leor eile.

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

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

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 4 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.

Féadfaidh sáruithe athraitheacha laistigh den chomhad Sass céanna teacht roimh na hathróga réamhshocraithe nó ina ndiaidh. Mar sin féin, nuair a sháraítear thar chomhaid Sass, caithfidh do sháruithe teacht sula n-iompórtálann tú comhaid Sass Bootstrap.

Seo sampla a athraíonn an background-coloragus colordon agus <body>nuair a bhíonn Bootstrap á iompórtáil agus á thiomsú trí npm:

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

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

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:

$theme-colors: map-remove($theme-colors, "success", "info", "danger");

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 amháin a chuirimid san áireamh i Bootstrap ná 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`
}

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 inár _variables.scssgcomhad.

Athróg	Luachanna	Cur síos
`$spacer`	`1rem`(réamhshocraithe), nó aon luach > 0	Sonraíonn sé an luach spacer réamhshocraithe chun ár bhfóntais spacer a ghiniúint go clárach .
`$enable-rounded`	`true`(réamhshocraithe) nó`false`	Cumasaíonn `border-radius`sé stíleanna réamhshainithe ar chomhpháirteanna éagsúla.
`$enable-shadows`	`true`nó `false`(réamhshocraithe)	Cumasaíonn `box-shadow`sé stíleanna réamhshainithe ar chomhpháirteanna éagsúla.
`$enable-gradients`	`true`nó `false`(réamhshocraithe)	Cumasaítear grádáin réamhshainithe trí `background-image`stíleanna ar chomhpháirteanna éagsúla.
`$enable-transitions`	`true`(réamhshocraithe) nó`false`	Cumasaítear `transition`s réamhshainithe ar chomhpháirteanna éagsúla.
`$enable-hover-media-query`	`true`nó `false`(réamhshocraithe)	Dímheasta
`$enable-grid-classes`	`true`(réamhshocraithe) nó`false`	Cumasaítear giniúint ranganna CSS don chóras greille (m.sh., `.container`, `.row`, , `.col-md-1`, etc.).
`$enable-caret`	`true`(réamhshocraithe) nó`false`	Cumasaítear airíoch eilimint bhréige ar `.dropdown-toggle`.
`$enable-print-styles`	`true`(réamhshocraithe) nó`false`	Cumasaíonn sé stíleanna chun priontáil a bharrfheabhsú.

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 inár 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.

Gorm

Indigo

Corcra

Bándearg

Dearg

Oráiste

Buí

Glas

Teal

Cian

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.

Sa todhchaí, beidh sé mar aidhm againn léarscáileanna agus athróga Sass a sholáthar do shades de gach dath mar atá déanta againn leis na dathanna liathscála thíos.

Dathanna téama

Bainimid úsáid as fo-thacar 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 inár scss/_variables.scssgcomhad.

Bunscoile

Tánaisteach

Rath

Contúirt

Rabhadh

Eolas

Solas

Dorcha

Liaths

Sraith leathan athróg liath agus léarscáil Sass scss/_variables.scssle haghaidh dathanna comhsheasmhacha liath ar fud do thionscadal.

100

200

300

400

500

600

700

800

900

Laistigh de _variables.scss, gheobhaidh tú ár n-athróga datha agus ár 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 timpeall dhá dhosaen airíonna saincheaptha CSS (athróga) ina CSS tiomsaithe aige. 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, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --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);
}

Is féidir leat freisin ár n-athróga brisphointe a úsáid i do cheisteanna ó na meáin:

.content-secondary {
  display: none;
}

@media (min-width(var(--breakpoint-sm))) {
  .content-secondary {
    display: block;
  }
}