Тема башлау
Easyиңел тема һәм компонент үзгәрүләре өчен глобаль стиль өстенлекләре өчен Bootstrap 4-ны безнең яңа урнаштырылган Sass үзгәрүләре белән көйләгез.
Кереш сүз
dist
Bootstrap 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.scss
Bootstrap чыганагы 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 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-svg
URI мәгълүматлары китерелергә тиеш.
Функцияләрне өстәү һәм алу
CSS функциясен төрү өчен без add
һәм функцияләрне кулланабыз . Бу функцияләрнең төп максаты - "берәмлексез" кыйммәт экспрессиягә күчкәндә хаталардан саклану. Мондый сүзләр математик яктан дөрес булуына карамастан, барлык браузерларда хата җибәрәчәк.subtract
calc
0
calc
calc(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 картасы. Бу өстәмә күләгәләр өстәү өчен, киләсе кечкенә чыгарылышларда киңәйтеләчәк, без керткән соры палитра кебек .
Менә сез аларны Сасста ничек куллана аласыз:
// With variable
.alpha { color: $purple; }
// From the Sass map with our `color()` function
.beta { color: color("purple"); }
Төсләр өчен файдалы класслар көйләү өчен дә color
бар background-color
.
Тема төсләре
Без төс схемаларын ясау өчен кечерәк төс палитра ясау өчен барлык төсләрнең бер өлешен кулланабыз, шулай ук Sass үзгәрүчәннәре һәм Bootstrap scss/_variables.scss
файлында Sass картасы.
Соры
scss/_variables.scss
Сезнең проект буенча соры төсләр өчен киң соры үзгәрүләр җыелмасы һәм Sass картасы . Игътибар итегез, бу "салкын соры", алар нейтраль соры түгел, нечкә зәңгәр тонга омтыла.
Эчтә 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-ның күпчелек компонентлары һәм коммуналь хезмәтләре @each
Sass картасында кабатланган цикллар белән төзелгән. Бу аеруча компонентның $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);
}
}