in English

Тема башлау

Easyиңел тема һәм компонент үзгәрүләре өчен глобаль стиль өстенлекләре өчен Bootstrap 4-ны безнең яңа урнаштырылган Sass үзгәрүләре белән көйләгез.

Кереш сүз

distBootstrap 3-та, тема күбесенчә LESS-ның үзгәрүчән өстәмәләре, махсус CSS һәм без үз файлларыбызга кертелгән аерым тема стиле таблицасы белән идарә ителде . Берникадәр тырышлык белән, төп файлларга кагылмыйча, Bootstrap 3 күренешен тулысынча яңадан ясарга була. Bootstrap 4 таныш, ләкин бераз башка караш бирә.

Хәзер, тема Sass үзгәрүчәннәре, Sass карталары һәм махсус CSS белән башкарыла. Бүтән тема стиле таблицасы юк; киресенчә, сез урнаштырылган теманы градиентлар, күләгәләр һәм башкалар өстәргә мөмкинлек бирә аласыз.

Сасс

Assзегезнең актив торбагыз ярдәмендә Sassны төзегәндә үзгәрүчәнлек, карталар, миксиннар һәм башкалардан файдалану өчен безнең чыганак Sass файлларын кулланыгыз .

Файл структурасы

Мөмкин булганда, Bootstrap-ның төп файлларын үзгәртүдән сакланыгыз. Sass өчен, бу Bootstrap импортлаган үз стиль таблицасын булдыру дигән сүз, сез аны үзгәртә һәм киңәйтә аласыз. Npm кебек пакет менеджерын кулланасыз дип уйласагыз, сезнең файл структурасы шундый булыр:

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

Әгәр дә сез безнең чыганак файлларны йөкләгән булсагыз һәм пакет менеджерын кулланмыйсыз икән, сез Bootstrap чыганак файлларын үзегезнекеннән саклап, бу структурага охшаган нәрсәне кул белән урнаштырырга теләрсез.

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

Импорт

Сездә custom.scssBootstrap чыганагы Sass файлларын импортлыйсыз. Сездә ике вариант бар: бөтен Bootstrapны кертегез, яки кирәкле өлешләрне сайлагыз. Соңгысын дәртләндерәбез, гәрчә безнең компонентлар арасында кайбер таләпләр һәм бәйләнешләр бар. Сезгә шулай ук ​​безнең плагиннар өчен JavaScript кертергә кирәк булачак.

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

Бу көйләү урынында сез Sass үзгәрүчәннәрен һәм карталарны үзгәртә аласыз custom.scss. // OptionalСез шулай ук ​​кирәк булганда бүлек астына Bootstrap өлешләрен өсти башлый аласыз . Файлдан тулы импорт стакасын bootstrap.scssсезнең башлангыч нокта итеп кулланырга тәкъдим итәбез.

Variзгәрешле дефолтлар

Bootstrap-ның һәр Sass үзгәрүчесе !defaultфлагны үз эченә ала, Bootstrap-ның чыганак кодын үзгәртмичә, үз Sass-та үзгәрүченең килешенгән кыйммәтен кире кагарга мөмкинлек бирә. Кирәк булганда үзгәрүчәннәрне күчереп языгыз, аларның кыйммәтләрен үзгәртегез һәм !defaultфлагны алыгыз. Әгәр дә үзгәрүчән билгеләнгән булса, ул Bootstrap'тагы килешү кыйммәтләре белән яңадан билгеләнмәячәк.

Сез Bootstrap үзгәрүчәннәренең тулы исемлеген таба аласыз scss/_variables.scss. Кайбер үзгәрүчәннәр куелган null, бу үзгәрүчәннәр сезнең конфигурациягездә артык язылмасалар, мөлкәтне чыгармыйлар.

Variзгәрешле өстәмәләр безнең функцияләр, үзгәрүләр, миксиннар кертелгәннән соң булырга тиеш, ләкин калган импорт алдыннан.

Менә npm аша Bootstrap- ны импортлаганда background-colorһәм төзегәндә үзгәртә торган мисал:color<body>

@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

Түбәндәге глобаль вариантларны да кертеп, Bootstrap-ның теләсә нинди үзгәрүчесе өчен кирәк булганда кабатлагыз.

Bootstrap белән npm аша безнең стартер проект белән башлап җибәрегез! Bootstrap-ны үзегезнең npm проектында ничек төзергә һәм көйләргә икәнлеген карау өчен twbs / bootstrap-npm-стартер шаблон репозитариясенә керегез. Sass компиляциясе, Autoprefixer, Stylelint, PurgeCSS һәм Bootstrap иконалары керә.

Карталар һәм цикллар

Bootstrap 4 эчендә Sass карталары, төп кыйммәтле парлар бар, алар CSS гаиләләрен булдыруны җиңеләйтәләр. Без төсләр, челтәр нокталары һәм башкалар өчен Sass карталарын кулланабыз. Sass үзгәрүчәннәре кебек, барлык Sass карталары да !defaultфлагны үз эченә ала һәм өстәмә рәвештә киңәйтелергә мөмкин.

Кайбер Sass карталарыбыз буш урыннарда берләштерелгән. Бу бирелгән Sass картасын җиңел киңәйтү өчен эшләнә, ләкин картадан әйберләрне чыгару бераз кыенрак.

Картаны үзгәртү

Безнең $theme-colorsкартада булган төсне үзгәртү өчен, Sass файлына түбәндәгеләрне өстәгез:

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

Картага өстәргә

Яңа төс $theme-colorsөстәр өчен, яңа ачкыч һәм кыйммәт өстәгез:

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

Картадан алыгыз

Төсләрне $theme-colorsяки бүтән картадан чыгару өчен кулланыгыз map-remove. Шуны онытмагыз: сез аны безнең таләпләр һәм вариантлар арасына кертергә тиеш:

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

Кирәкле ачкычлар

Bootstrap без кулланган һәм киңәйткәндә Sass карталарында кайбер махсус ачкычлар булуын фаразлый. Керелгән карталарны көйләгәндә, сез Sass картасының ачкычы кулланылган хаталар белән очрашырга мөмкин.

Мисал өчен, без primary, successһәм dangerачкычларны $theme-colorsсылтамалар, төймәләр, форма өчен кулланабыз. Бу ачкычларның кыйммәтләрен алыштыру бернинди проблема тудырырга тиеш түгел, ләкин аларны бетерү Sass компиляциясенә китерергә мөмкин. Бу очракларда сезгә бу кыйммәтләрне кулланган Sass кодын үзгәртергә кирәк.

Функцияләр

Bootstrap берничә Sass функциясен куллана, ләкин гомуми темага бер өлеш кенә кулланыла. Без төс карталарыннан кыйммәтләр алу өчен өч функция керттек:

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

Бу сезгә Sass картасыннан бер төс сайларга мөмкинлек бирә, сез v3 төс үзгәрүен ничек кулланасыз.

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

Бездә шулай ук ​​картадан билгеле бер төс алу өчен тагын бер функция бар. $theme-colorsТискәре дәрәҗә кыйммәтләре төсне җиңеләйтәчәк, ә югары дәрәҗәләр караңгыланыр.

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

Гамәлдә, сез функциягә шалтыратырсыз һәм ике параметрда үтәр идегез: төснең исеме $theme-colors(мәсәлән, төп яки куркыныч) һәм сан дәрәҗәсеннән.

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

Өстәмә функцияләр киләчәктә яки үзегезнең махсус Sass өстәмә Sass карталары өчен дәрәҗә функцияләрен булдыру өчен, яисә сез гомуми сүзле булырга теләсәгез, гомуми функцияләр өстәргә мөмкин.

Төс контрасты

Bootstrap-ка кертелгән өстәмә функция - төс контраст функциясе , color-yiq. YIQ төс мәйданын куллана , күрсәтелгән төп төс нигезендә яктылык ( #fff) яки кара ( ) контраст төсне автоматик рәвештә кайтару өчен . #111Бу функция миксиннар яки цикллар өчен аеруча файдалы.

$theme-colorsМәсәлән, безнең картадан төсле светлар ясау өчен :

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

Аны шулай ук ​​контраст ихтыяҗлары өчен кулланырга мөмкин:

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

Сез шулай ук ​​төп төсне безнең төс картасы функцияләре белән күрсәтә аласыз:

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

SVG кача

Без escape-svgфункцияне кулланабыз <, >һәм #SVG фон рәсемнәре өчен символлар. IE-ның фон рәсемнәрен дөрес күрсәтү өчен бу персонажлардан качарга кирәк. Функцияне кулланганда, escape-svgURI мәгълүматлары китерелергә тиеш.

Функцияләрне өстәү һәм алу

CSS функциясен төрү өчен без addһәм функцияләрне кулланабыз . Бу функцияләрнең төп максаты - "берәмлексез" кыйммәт экспрессиягә күчкәндә хаталардан саклану. Мондый сүзләр математик яктан дөрес булуына карамастан, барлык браузерларда хата җибәрәчәк.subtractcalc0calccalc(10px - 0)

Хисап дөрес булган мисал:

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

Хисап дөрес булмаган мисал:

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

Сасс вариантлары

Bootstrap 4-ны безнең урнаштырылган үзгәрешләр файллары белән көйләгез һәм глобаль CSS өстенлекләрен яңа $enable-*Sass үзгәрүчәннәре белән җиңел алыштырыгыз. Aзгәрүченең кыйммәтен кире кагарга һәм npm run testкирәк булганда компиляцияләргә.

Сез Bootstrap scss/_variables.scssфайлында төп глобаль вариантлар өчен бу үзгәрүчәннәрне таба һәм көйли аласыз.

Үзгәрүчән Кыйммәтләр Тасвирлау
$spacer 1rem(килешү буенча), яки теләсә нинди кыйммәт> 0 Программалы рәвештә безнең спасер программаларын булдыру өчен демократик спасер кыйммәтен күрсәтә .
$enable-rounded true(килешү буенча) якиfalse Төрле компонентларда алдан билгеләнгән border-radiusстильләрне эшли.
$enable-shadows trueяки false(килешү буенча) box-shadowТөрле компонентларда алдан билгеләнгән декоратив стильләрне рөхсәт итә. box-shadowФокус халәтләре өчен кулланылганнарга тәэсир итми .
$enable-gradients trueяки false(килешү буенча) background-imageТөрле компонентлардагы стильләр аша алдан билгеләнгән градиентларны рөхсәт итә.
$enable-transitions true(килешү буенча) якиfalse transitionТөрле компонентларда алдан билгеләнгән s мөмкинлеген бирә.
$enable-prefers-reduced-motion-media-query true(килешү буенча) якиfalse Кулланучыларның браузеры / операцион система өстенлекләренә нигезләнеп, кайбер анимацияләрне / күчүне бастыручы медиа prefers-reduced-motionсоравын рөхсәт итә.
$enable-hover-media-query trueяки false(килешү буенча) Искергән
$enable-grid-classes true(килешү буенча) якиfalse Челтәр системасы өчен CSS класслар булдырырга мөмкинлек бирә (мәсәлән ,,, .containerһ.б. .row) .col-md-1.
$enable-caret true(килешү буенча) якиfalse Псевдо элементын карарга мөмкинлек бирә .dropdown-toggle.
$enable-pointer-cursor-for-buttons true(килешү буенча) якиfalse Инвалид булмаган төймә элементларына "кул" курсорын өстәгез.
$enable-print-styles true(килешү буенча) якиfalse Басуны оптимальләштерү өчен стильләр эшли.
$enable-responsive-font-sizes trueяки false(килешү буенча) Шрифт зурлыгына җавап бирә .
$enable-validation-icons true(килешү буенча) якиfalse Текст background-imageкеремнәре эчендә иконаларны һәм тикшерү шартлары өчен кайбер махсус формаларны рөхсәт итә.
$enable-deprecation-messages true(килешү буенча) якиfalse Чыгарылырга falseпланлаштырылган искергән катнашмаларны һәм функцияләрне кулланганда кисәтүне яшерергә v5.

Төс

Bootstrap-ның төрле компонентлары һәм коммуналь хезмәтләре Sass картасында билгеләнгән төсләр сериясе аша төзелгән. Бу картаны Сасста әйләндереп алып була, кагыйдәләр сериясен тиз ясарга.

Барлык төсләр

Bootstrap 4-та булган барлык төсләр дә Sass үзгәрүчесе һәм scss/_variables.scssфайлда Sass картасы. Бу өстәмә күләгәләр өстәү өчен, киләсе кечкенә чыгарылышларда киңәйтеләчәк, без керткән соры палитра кебек .

$ зәңгәр # 007bff
$ индиго # 6610f2
$ кызгылт # 6f42c1
$ алсу # e83e8c
$ кызыл # dc3545
$ апельсин # fd7e14
$ сары # ffc107
$ яшел # 28а745
$ чәй # 20c997
$ циан # 17а2б8

Менә сез аларны Сасста ничек куллана аласыз:

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

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

Төсләр өчен файдалы класслар көйләү өчен дә colorбар background-color.

Киләчәктә без астагы соры төсләр белән эшләгән кебек, Sass карталарын һәм һәр төснең күләгәсе өчен үзгәрүчәннәрне тәкъдим итәрбез.

Тема төсләре

Без төс схемаларын ясау өчен кечерәк төс палитра ясау өчен барлык төсләрнең бер өлешен кулланабыз, шулай ук ​​Sass үзгәрүчәннәре һәм Bootstrap scss/_variables.scssфайлында Sass картасы.

$ башлангыч # 007bff
$ икенчел # 6c757d
$ уңыш # 28а745
$ куркыныч # dc3545
$ кисәтү # ffc107
$ мәгълүмат # 17а2б8
$ яктылык # f8f9fa
$ караңгы # 343a40

Соры

scss/_variables.scssСезнең проект буенча соры төсләр өчен киң соры үзгәрүләр җыелмасы һәм Sass картасы . Игътибар итегез, бу "салкын соры", алар нейтраль соры түгел, нечкә зәңгәр тонга омтыла.

$ соры-100 # f8f9fa
$ соры-200 # e9ecef
$ соры-300 # dee2e6
$ соры-400 # ced4da
$ соры-500 # adb5bd
$ соры-600 # 6c757d
$ соры-700 # 495057
$ соры-800 # 343a40
$ соры-900 # 212529

Эчтә scss/_variables.scss, Bootstrap төс үзгәрүләрен һәм Sass картасын табарсыз. $colorsМенә Сасс картасының мисалы :

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

Карталар эчендә кыйммәтләрне өстәгез, бетерегез яки үзгәртегез, алар башка компонентларда ничек кулланылганнарын яңарту өчен. Кызганычка каршы, бу вакытта һәрбер компонент бу Sass картасын кулланмый. Киләчәк яңартулар моны яхшыртырга тырышачак. Шул вакытка кадәр ${color}үзгәрүчәннәрне һәм бу Сасс картасын кулланырга планлаштырыгыз.

Компонентлар

Bootstrap-ның күпчелек компонентлары һәм коммуналь хезмәтләре @eachSass картасында кабатланган цикллар белән төзелгән. Бу аеруча компонентның $theme-colorsвариантларын булдыру һәм һәр өзек өчен җаваплы вариантлар булдыру өчен бик файдалы. Бу Sass карталарын көйләгәндә һәм компиляцияләгәндә, сез бу үзгәрешләрдә чагылган үзгәрешләрне автоматик рәвештә күрерсез.

Modзгәртүчеләр

Bootstrap компонентларының күбесе база-модификатор класс алымы белән төзелгән. Димәк, стилизациянең төп өлеше төп класска (мәсәлән, .btn) керә, стиль вариацияләре модификатор класслары белән чикләнә (мәсәлән, .btn-danger). $theme-colorsБу модификатор класслары безнең модификатор классларның санын һәм исемен көйләү өчен картадан төзелгән .

Менә ике мисал, без компонентка $theme-colorsмодификаторлар ясау өчен, картаны ничек әйләндереп алуыбызның һәм безнең барлык функцияләр өчен..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);
}

Onsаваплы

Бу Sass цикллары төс карталары белән генә чикләнми. Сез шулай ук ​​компонентларның яки ​​коммуналь хезмәтләрнең җаваплы вариацияләрен ясый аласыз. Мисал өчен, безнең текстны тигезләү программаларын алыгыз, анда без Sass картасы өчен @eachциклны $grid-breakpointsмедиа соравы белән кушабыз.

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

Сезгә үзгәртү кирәк булса $grid-breakpoints, сезнең үзгәртүләр шул картада кабатланган барлык циклларга кагылачак.

CSS үзгәрүчәннәре

Bootstrap 4 компиляцияләнгән CSS эчендә ике дистәгә якын CSS үзенчәлеген (үзгәрүчәннәрне) үз эченә ала . Болар безнең браузер инспекторында эшләгәндә, тема төсләре, нокталар, төп шрифт стеклары кебек еш кулланыла торган кыйммәтләргә җиңел керү мөмкинлеген бирә.

Мөмкин булган үзгәрүләр

Менә без кертелгән үзгәрүчәннәр (игътибар итегез, :rootкирәк). Алар безнең _root.scssфайлда урнашкан.

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

Мисаллар

CSS үзгәрүчәннәре Sass үзгәрүчәннәренә охшаш сыгылмалар тәкъдим итә, ләкин браузерга хезмәт күрсәткәнче компиляция кирәк түгел. Мәсәлән, монда без битнең шрифтын үзгәртәбез һәм стильләрне CSS үзгәрүчәннәре белән бәйлибез.

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

Breakpoint үзгәрүчәннәре

Без үзебезнең CSS үзгәрүчәннәргә (мәсәлән, --breakpoint-md) өзекләр кертсәк тә, алар медиа соравында булышмый , ләкин алар барыбер медиа-сорау кагыйдәләре кысаларында кулланылырга мөмкин. Бу өзек үзгәрүчәннәр җыелган CSSда артка яраклашу өчен кала, чөнки алар JavaScript ярдәмендә кулланыла ала. Спекта күбрәк белү .

Менә ярдәм итмәгәннәрнең мисалы :

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

Менә нәрсә ярдәм итә икәнен күрсәтүче мисал:

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