Mowzuk

Bootstrap 4-i aňsat mowzuk we komponent üýtgeşmeleri üçin global stil saýlawlary üçin täze gurlan Sass üýtgeýjilerimiz bilen özleşdiriň.

Giriş

“Bootstrap 3” -de mowzuk, esasan, LESS-de üýtgeýän goşmaçalar, adaty CSS we distfaýllarymyza goşan aýratyn mowzuk stil sahypasy bilen dolandyryldy. Käbir tagallalar bilen, esasy faýllara degmezden Bootstrap 3-iň görnüşini düýbünden täzeden düzüp bolýardy. “Bootstrap 4” tanyş, ýöne birneme üýtgeşik çemeleşmäni üpjün edýär.

Indi tema Sass üýtgeýjileri, Sass kartalary we adaty CSS tarapyndan ýerine ýetirilýär. Mundan başga-da bagyşlanan mowzuk stil sahypasy ýok; ýerine, gurlan mowzugy gradiýentleri, kölegeleri we başgalary goşup bilersiňiz.

Sass

Üýtgeýjilerden, kartalardan, garyndylardan we başga zatlardan peýdalanmak üçin çeşmämiz Sass faýllaryny ulanyň.

Faýl gurluşy

Mümkin boldugyça Bootstrap-yň esasy faýllaryny üýtgetmekden gaça duruň. Sass üçin, “Bootstrap” -y import edip, üýtgedip we giňeldip boljak öz stil tablisasyny döretmegi aňladýar. Npm ýaly paket dolandyryjysyny ulanýarsyňyz öýdýän, size meňzeş faýl gurluşy bolar:

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

Çeşme faýllarymyzy göçürip alan bolsaňyz we paket dolandyryjysyny ulanmaýan bolsaňyz, “Bootstrap” -yň deslapky faýllaryny özüňizden aýry saklap, şol gurluşa meňzeş bir zady el bilen gurnamak islärsiňiz.

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

Import

Özüňizde custom.scss, Bootstrap-yň çeşmesi Sass faýllaryny import edersiňiz. Sizde iki wariant bar: “Bootstrap” -yň hemmesini goşuň ýa-da zerur bölekleri saýlaň. Komponentlerimizde käbir talaplaryň we garaşlylygyň bardygyny bilseňizem, ikinjisini höweslendirýäris. Şeýle hem, pluginlerimiz üçin käbir JavaScript-i goşmaly bolarsyňyz.

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

Şol gurnama ýerinde, Sass üýtgeýjileriniň we kartalaryňyzyň islendik birini üýtgedip bilersiňiz custom.scss. Şeýle hem, “Bootstrap” -yň böleklerini zerur bolanda bölümiň aşagyna goşup bilersiňiz // Optional. Faýlymyzdan doly import bootstrap.scssnokadyny başlangyç nokat hökmünde ulanmagy maslahat berýäris.

Üýtgeýän defoltlar

Bootstrap 4-de her Sass üýtgeýjisi, Bootstrap- !defaultyň deslapky kody üýtgetmän üýtgeýjiniň deslapky bahasyny öz Sass-da üýtgetmäge mümkinçilik berýän baýdagy öz içine alýar. Zerur bolanda üýtgeýjileri göçüriň we goýuň, bahalaryny üýtgediň we !defaultbaýdagy aýyryň. Bir üýtgeýji eýýäm bellenen bolsa, Bootstrap-daky deslapky bahalar bilen täzeden bellenmez.

“Bootstrap” üýtgeýjileriniň doly sanawyny tapyp bilersiňiz scss/_variables.scss.

Şol bir Sass faýlyndaky üýtgeýän goşmaçalar, üýtgeýänlerden öň ýa-da soň gelip biler. Şeýle-de bolsa, “Sass” faýllarynyň üstünden ýazylanda, “Bootstrap” -yň “Sass” faýllaryny import etmezden öňürti ýazgylaryňyz hökman bolmaly.

Ine, “Bootstrap” -y npm arkaly import edende we düzeninde üýtgedýän bir mysal background-color:color<body>

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

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

Aşakdaky global opsiýalary goşmak bilen Bootstrap-daky islendik üýtgeýji üçin zerur bolanda gaýtalaň.

Kartalar we aýlawlar

“Bootstrap 4”, degişli CSS maşgalalaryny döretmegi aňsatlaşdyrýan Sass kartalaryny, esasy baha jübütlerini öz içine alýar. Sass kartalaryny reňklerimiz, gözenek nokatlarymyz we başgalar üçin ulanýarys. Sass üýtgeýjileri ýaly, Sass kartalarynyň hemmesinde !defaultbaýdak bar we ýokaşdyrylyp we uzaldylyp bilner.

Sass kartalarymyzyň käbiri adaty ýagdaýda boş kartalara birleşdirilýär. Bu berlen Sass kartasyny aňsat giňeltmek üçin edilýär, ýöne kartadan zatlary aýyrmagy birneme kynlaşdyrýar.

Kartany üýtgediň

Kartamyzda bar bolan reňki üýtgetmek üçin $theme-colors, Sass faýlyňyza aşakdakylary goşuň:

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

Karta goşuň

Täze reňk $theme-colorsgoşmak üçin täze açary we baha goşuň:

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

Kartadan aýyryň

$theme-colorsReňkleri ýa-da başga kartadan aýyrmak üçin ulanyň map-remove. Ony talaplarymyzyň we wariantlarymyzyň arasynda goýmalydygyňyzy biliň:

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

Gerekli düwmeler

“Bootstrap”, Sass kartalarynda käbir aýratyn düwmeleriň bardygyny göz öňünde tutýarys we ulanýarys. Goşulan kartalary özleşdireniňizde, Sass kartasynyň belli bir açary ulanylýan ýalňyşlyklara duş gelip bilersiňiz.

Mysal üçin, baglanyşyklardan, düwmelerden we forma ýagdaýlaryndan, primarywe successdüwmelerini dangerulanýarys . $theme-colorsBu düwmeleriň bahalaryny çalyşmak hiç hili mesele döretmeli däldir, ýöne olary aýyrmak Sass düzmek meselesine sebäp bolup biler. Bu ýagdaýlarda, şol bahalardan peýdalanýan Sass koduny üýtgetmeli bolarsyňyz.

Funksiýalar

“Bootstrap” birnäçe Sass funksiýasyny ulanýar, ýöne umumy mowzuklara diňe bir bölek ulanylýar. Reňk kartalaryndan baha almak üçin üç funksiýany goşduk:

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

Bular, Sass kartasyndan v3-den reňk üýtgeýjisini nähili ulanjakdygyňyz ýaly bir reňk saýlamaga mümkinçilik berýär.

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

Şeýle hem , kartadan belli bir reňk almak üçin başga bir wezipämiz bar. $theme-colorsAtivearamaz derejeli bahalar reňkini ýeňilleşdirer, has ýokary derejeler bolsa garalar.

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

Iş ýüzünde, funksiýa jaň edip, iki parametrden geçersiňiz: reňkiň ady $theme-colors(mysal üçin, başlangyç ýa-da howp) we san derejesinden.

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

Geljekde goşmaça funksiýalar ýa-da goşmaça Sass kartalary üçin derejeli funksiýalary döretmek üçin öz aýratyn Sassyňyzy goşup bilersiňiz, ýa-da has sözli bolmak isleseňiz, umumy funksiýalary.

Reňk tapawudy

“Bootstrap” -a goşýan goşmaça funksiýalarymyzyň biri, reňk kontrast funksiýasy , color-yiq. Görkezilen esasy reňk esasynda açyk ( ) ýa-da gara ( ) kontrast reňkini awtomatiki gaýtarmak üçin YIQ reňk giňişligini ulanýar. Bu funksiýa, köp synp döredýän ýeriňizde garyndylar ýa-da aýlawlar üçin aýratyn peýdalydyr.#fff#111

Mysal üçin, $theme-colorskartamyzdan reňk çalyşmalary döretmek üçin:

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

Şeýle hem bir gezeklik kontrast zerurlyklary üçin ulanylyp bilner:

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

Şeýle hem, reňk karta funksiýalarymyz bilen esasy reňk kesgitläp bilersiňiz:

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

Sass görnüşleri

Içindäki üýtgeýän üýtgeýjiler faýlymyz bilen Bootstrap 4-i özüňiz düzüň we täze $enable-*Sass üýtgeýjileri bilen global CSS saýlawlaryny aňsatlyk bilen üýtgediň. Üýtgeýjiniň bahasyny ýok ediň we npm run testzerur bolanda täzeden düzüň.

scss/_variables.scssBootstrap faýlynda esasy global opsiýalar üçin bu üýtgeýjileri tapyp we sazlap bilersiňiz .

Üýtgeýji	Gymmatlyklar	Düşündiriş
`$spacer`	`1rem`(gaýybana), ýa-da islendik baha> 0	Kosmos enjamlarymyzy programma taýdan döretmek üçin deslapky spacer bahasyny kesgitleýär .
`$enable-rounded`	`true`(default) ýa-da`false`	`border-radius`Dürli komponentlerde öňünden kesgitlenen stilleri üpjün edýär.
`$enable-shadows`	`true`ýa-da `false`(gaýybana)	`box-shadow`Dürli komponentlerde öňünden kesgitlenen stilleri üpjün edýär.
`$enable-gradients`	`true`ýa-da `false`(gaýybana)	`background-image`Dürli komponentlerdäki stiller arkaly öňünden kesgitlenen gradiýentleri üpjün edýär.
`$enable-transitions`	`true`(default) ýa-da`false`	`transition`Dürli komponentlerde öňünden kesgitlenenleri işledýär .
`$enable-hover-media-query`	`true`ýa-da `false`(gaýybana)	Könelişen
`$enable-grid-classes`	`true`(default) ýa-da`false`	Tor ulgamy üçin ( meselem `.container`, we ş.m.) CSS synplaryny döretmäge mümkinçilik berýär .`.row.col-md-1`
`$enable-caret`	`true`(default) ýa-da`false`	Pseudo elementini ideg etmäge mümkinçilik berýär `.dropdown-toggle`.
`$enable-print-styles`	`true`(default) ýa-da`false`	Çap etmegi optimizirlemegiň stillerine mümkinçilik berýär.

Reňk

“Bootstrap” -yň dürli komponentleriniň we hyzmatlarynyň köpüsi Sass kartasynda kesgitlenen reňkleriň üsti bilen gurulýar. Bu kartany birneme düzgüni çalt döretmek üçin Sass-da aýlap bolýar.

Colorshli reňkler

Bootstrap 4-de bar bolan reňkler Sass üýtgeýjileri we scss/_variables.scssfaýlda Sass kartasy hökmünde elýeterlidir. Bu, indiki kiçijik goýberişlerde, eýýäm girizen çal reňk palitrasy ýaly goşmaça kölegeleri goşmak üçin giňeldiler .

Gök

Indigo

Gyrmyzy

Gülgüne

Gyzyl

Mämişi

Sary

Greenaşyl

Çaý

Sian

Sass-da bulary nädip ulanyp bilersiňiz:

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

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

Reňk peýdaly sapaklary sazlamak colorwe background-color.

Geljekde aşakdaky çal reňkli reňkler bilen edişimiz ýaly Sass kartalaryny we her reňkdäki kölegeler üçin üýtgeýjileri üpjün etmegi maksat edinýäris.

Mowzuk reňkleri

Reňk shemalaryny döretmek üçin has kiçi reňk palitrasyny döretmek üçin ähli reňkleriň bir bölegini ulanýarys, Sass üýtgeýjileri we Bootstraps scss/_variables.scssfaýlynda Sass kartasy.

Başlangyç

Ikinji

Üstünlik

Howp

Duýduryş

Maglumat

Lightagtylyk

Garaňky

Çal reňk

scss/_variables.scssTaslamaňyzda çal reňkleriň yzygiderli reňkleri üçin çal üýtgeýänleriň giň toplumy we Sass kartasy .

100

200

300

400

500

600

700

800

900

Içinde scss/_variables.scssBootstrap reňk üýtgeýjilerini we Sass kartasyny taparsyňyz. $colorsSass kartasynyň mysaly :

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

Kartanyň içindäki bahalary goşuň, aýyryň ýa-da üýtgediň, beýleki köp böleklerde ulanylyşyny täzeläň. Gynansagam, häzirki wagtda her bir komponent bu Sass kartasyny ulanmaýar. Geljekdäki täzelenmeler bu meselede gowulaşmaga çalyşar. Oňa çenli ${color}üýtgeýänleri we bu Sass kartasyny ulanmagy meýilleşdiriň.

Komponentler

“Bootstrap” -yň köp bölekleri we kömekçi enjamlary @eachSass kartasynyň üstünde gaýtalanýan aýlawlar bilen gurlupdyr. Bu, esasanam, bir komponentiň $theme-colorswariantlaryny döretmek we her bölek üçin täsirli wariantlary döretmek üçin peýdalydyr. Bu Sass kartalaryny özleşdirip, täzeden düzeniňizde, üýtgeşmeleriňiziň bu aýlawlarda görkezilýändigini awtomatiki görersiňiz.

Üýtgeýjiler

“Bootstrap” -yň köp bölegi esasy üýtgediji synp çemeleşmesi bilen gurlupdyr. Diýmek, stiliň esasy bölegi esasy synpda (meselem .btn), stil üýtgeýjileri üýtgediji synplar bilen çäklenýär (meselem .btn-danger). $theme-colorsBu üýtgediji synplar, üýtgediji synplarymyzyň sanyny we adyny sazlamak üçin kartadan gurulýar .

Ine, komponente we ähli fon hyzmatlaryna $theme-colorsüýtgeýjiler döretmek üçin kartanyň üstünden nädip aýlanýandygymyzyň iki mysaly ..alert.bg-*

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

Jogapkärçilikli

Bu Sass aýlawlary reňk kartalary bilen çäklenmeýär. Şeýle hem, komponentleriňiziň ýa-da hyzmatlaryňyzyň täsirli üýtgeşmelerini döredip bilersiňiz. Mysal üçin @each, Sass kartasy üçin bir aýlawy $grid-breakpointsmedia talaplary bilen garyşdyrýan täsirli tekst deňleşdiriş hyzmatlarymyzy alyň.

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

Üýtgetmeli bolsaňyz $grid-breakpoints, üýtgetmeleriňiz şol kartanyň üstünde gaýtalanýan ähli aýlawlara degişlidir.

CSS üýtgeýjileri

“Bootstrap 4 ”, düzülen CSS-de takmynan 20 sany CSS aýratyn häsiýetini (üýtgeýänleri) öz içine alýar. Bular, brauzeriňiziň inspektorynda işleýän wagtyňyz, mowzuk reňklerimiz, bölek nokatlarymyz we esasy şrift ýazgylary ýaly giňden ulanylýan bahalara aňsat girişi üpjün edýär.

Elýeterli üýtgeýjiler

Ine, goşýan üýtgeýjilerimiz ( :rootzerurdygyny belläň). Olar biziň _root.scssfaýlymyzda ýerleşýär.

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

Mysallar

CSS üýtgeýjileri Sassyň üýtgeýjilerine meňzeş çeýeligi hödürleýär, ýöne brauzere hyzmat etmezden ozal düzmek zerurlygy ýok. Mysal üçin, bu ýerde sahypamyzyň şriftini we CSS üýtgeýjileri bilen baglanyşyk stillerini täzeden düzýäris.

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

Bölüm nokady üýtgeýjileri

Ilkibaşda CSS üýtgeýjilerimize bölek nokatlaryny goşsak-da --breakpoint-md, bular media talaplarynda goldanylmaýar , ýöne olar media talaplarynda düzgünleriň çäginde ulanylyp bilner. Bu aralyk üýtgeýjiler, JavaScript tarapyndan ulanylyp bilinjekdigini göz öňünde tutup, yza gabat gelmek üçin düzülen CSS-de galýar. Aýratynlykda has giňişleýin öwreniň.

Goldaw berilmeýän zadyň mysaly :

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

Goldaýan zadyň mysaly :

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