Source

Тема башлау

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

Кереш сүз

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

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

Сасс

Variзгәрешләрдән, карталардан, миксиннардан һәм башкалардан файдалану өчен безнең чыганак Sass файлларын кулланыгыз. Без төзегәндә, браузерны әйләндерү белән бәйле проблемаларны булдырмас өчен, Sass түгәрәк төгәллеген 6га арттырдык (килешү буенча ул 5).

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

Мөмкин булганда, 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

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

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

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

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

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

Шул ук Sass файлындагы үзгәрүчән өстәмәләр алдан үзгәртелгәнче яки аннан соң килергә мөмкин. Шулай да, Sass файлларын өстәрәк язганда, Bootstrap'ның Sass файлларын импортлаганчы, сезнең өстәмәләр килеп чыгарга тиеш.

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

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

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

Түбәндәге глобаль вариантларны да кертеп, 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-ның фон рәсемнәрен дөрес күрсәтү өчен бу персонажлардан качарга кирәк.

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

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`стильләрне эшли.
`$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`(килешү буенча)	Чыгарылырга планлаштырылган искергән миксиннарны `true`һәм функцияләрне кулланганда кисәтүне күрсәтергә `v5`.

Төс

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

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

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

Зәңгәр

Индиго

Алсу

Кызыл

кызгылт сары

Сары

Яшел

Чәй

Cyanиан

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

// 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 картасы.

Башлангыч

Икенче

Уңыш

хәвеф-хәтәр

Кисәтү

Мәгълүмат

Яктылык

Караңгы

Соры

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

100

200

300

400

500

600

700

800

900

Эчтә 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", 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);
  }
}