Source

Theming Bootstrap

Անհատականացրեք Bootstrap 4-ը մեր նոր ներկառուցված Sass փոփոխականներով՝ գլոբալ ոճի նախապատվությունների համար՝ հեշտ թեմաների և բաղադրիչների փոփոխությունների համար:

Ներածություն

Bootstrap 3-ում թեմատավորումը հիմնականում պայմանավորված էր LESS-ի փոփոխական վերափոխումներով, հատուկ CSS-ով և առանձին թեմայի ոճաթերթով, որը մենք ներառել ենք մեր distֆայլերում: Որոշակի ջանքեր գործադրելով՝ կարելի էր ամբողջությամբ վերափոխել Bootstrap 3-ի տեսքը՝ առանց դիպչելու հիմնական ֆայլերին: Bootstrap 4-ն ապահովում է ծանոթ, բայց մի փոքր այլ մոտեցում:

Այժմ թեմատիկավորումն իրականացվում է Sass փոփոխականների, Sass քարտեզների և հատուկ CSS-ի միջոցով: Այլևս չկա հատուկ թեմայի ոճաթերթ; փոխարենը կարող եք միացնել ներկառուցված թեման՝ գրադիենտներ, ստվերներ և այլն ավելացնելու համար:

Սաս

Օգտագործեք մեր աղբյուր 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

@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որպես ելակետ:

Փոփոխական լռելյայն

Bootstrap 4-ում Sass-ի յուրաքանչյուր փոփոխական ներառում է !defaultդրոշակ, որը թույլ է տալիս փոխել փոփոխականի լռելյայն արժեքը ձեր սեփական Sass-ում՝ առանց Bootstrap-ի սկզբնական կոդը փոփոխելու: Անհրաժեշտության դեպքում պատճենեք և տեղադրեք փոփոխականները, փոփոխեք դրանց արժեքները և հեռացրեք !defaultդրոշակը: Եթե ​​փոփոխականն արդեն նշանակված է, ապա այն նորից չի վերագրվի Bootstrap-ի լռելյայն արժեքներով:

Դուք կգտնեք Bootstrap-ի փոփոխականների ամբողջական ցանկը scss/_variables.scss:

Միևնույն Sass ֆայլի մեջ փոփոխականների անտեսումը կարող է առաջանալ կամ հետո լռելյայն փոփոխականներից: Այնուամենայնիվ, Sass ֆայլերը գերագնահատելիս, ձեր անտեսումները պետք է լինեն նախքան Bootstrap-ի Sass ֆայլերը ներմուծելը:

Ահա մի օրինակ, որը փոխում է background-colorև color-ը <body>npm-ի միջոցով Bootstrap-ը ներմուծելիս և կազմելիս.

// 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`
}

Sass տարբերակներ

Անհատականացրեք Bootstrap 4-ը մեր ներկառուցված փոփոխականների ֆայլով և հեշտությամբ փոխեք գլոբալ CSS-ի նախապատվությունները նոր $enable-*Sass փոփոխականներով: Անտեսեք փոփոխականի արժեքը և npm run testանհրաժեշտության դեպքում նորից կազմեք:

Դուք կարող եք գտնել և հարմարեցնել այս փոփոխականները Bootstrap-ի scss/_variables.scssֆայլի հիմնական գլոբալ տարբերակների համար:

Փոփոխական Արժեքներ Նկարագրություն
$spacer 1rem(կանխադրված) կամ ցանկացած արժեք > 0 Հատկորոշում է լռելյայն spacer արժեքը մեր spacer-ի օգտակար ծառայությունները ծրագրավորելու համար :
$enable-rounded true(կանխադրված) կամfalse Միացնում է նախապես սահմանված border-radiusոճերը տարբեր բաղադրիչների վրա:
$enable-shadows trueկամ false(կանխադրված) Միացնում է նախապես սահմանված box-shadowոճերը տարբեր բաղադրիչների վրա:
$enable-gradients trueկամ false(կանխադրված) Միացնում է նախապես սահմանված գրադիենտները background-imageտարբեր բաղադրիչների ոճերի միջոցով:
$enable-transitions true(կանխադրված) կամfalse Միացնում է նախապես սահմանված transitions-երը տարբեր բաղադրիչների վրա:
$enable-hover-media-query trueկամ false(կանխադրված) Հնացած
$enable-grid-classes true(կանխադրված) կամfalse Թույլ է տալիս CSS դասերի ստեղծումը ցանցային համակարգի համար (օրինակ, .container, .row, .col-md-1, և այլն):
$enable-caret true(կանխադրված) կամfalse Միացնում է կեղծ տարրը միացնել .dropdown-toggle.
$enable-print-styles true(կանխադրված) կամfalse Միացնում է տպագրության օպտիմալացման ոճերը:

Գույն

Bootstrap-ի տարբեր բաղադրիչներից և կոմունալ ծառայություններից շատերը կառուցված են Sass քարտեզում սահմանված մի շարք գույների միջոցով: Այս քարտեզը կարող է շրջվել Sass-ում՝ մի շարք կանոնակարգերի արագ առաջացման համար:

Բոլոր գույները

Bootstrap 4-ում առկա բոլոր գույները հասանելի են որպես Sass փոփոխականներ և Sass քարտեզ scss/_variables.scssֆայլում: Սա կընդլայնվի հետագա փոքր թողարկումներում՝ լրացուցիչ երանգներ ավելացնելու համար, ինչպես մոխրագույն գույնի ներկապնակը , որը մենք արդեն ներառել ենք:

Կապույտ
Ինդիգո
Մանուշակագույն
Վարդագույն
Կարմիր
Նարնջագույն
Դեղին
Կանաչ
Շագանակագույն
Cyan

Ահա, թե ինչպես կարող եք դրանք օգտագործել ձեր Sass-ում.

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

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

Գույնի օգտակար դասերը հասանելի են նաև կարգավորելու colorև background-color.

Ապագայում մենք նպատակ կունենանք տրամադրել Sass քարտեզներ և փոփոխականներ յուրաքանչյուր գույնի երանգների համար, ինչպես դա արել ենք ստորև ներկայացված մոխրագույն գույների հետ:

Թեմայի գույները

Մենք օգտագործում ենք բոլոր գույների ենթաբազմությունը՝ գունային սխեմաներ ստեղծելու համար ավելի փոքր գունապնակ ստեղծելու համար, որը հասանելի է նաև որպես Sass փոփոխականներ և Sass քարտեզ Bootstraps-ի scss/_variables.scssֆայլում:

Առաջնային
Երկրորդական
Հաջողություն
Վտանգ
Զգուշացում
Ինֆո
Լույս
Մութ

Մոխրագույններ

Մոխրագույն փոփոխականների ընդարձակ հավաքածու և Sass քարտեզ՝ scss/_variables.scssձեր նախագծում մոխրագույնի հետևողական երանգների համար:

100
200 թ
300
400
500
600 թ
700 թ
800 թ
900 թ

Շրջանակներում scss/_variables.scssդուք կգտնեք Bootstrap-ի գունային փոփոխականները և Sass քարտեզը: Ահա $colorsSass քարտեզի օրինակ.

$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}փոփոխականները և այս Sass քարտեզը:

Բաղադրիչներ

Bootstrap-ի շատ բաղադրիչներ և կոմունալ ծառայություններ կառուցված են @eachօղակներով, որոնք կրկնվում են Sass քարտեզի վրա: Սա հատկապես օգտակար է մեր կողմից բաղադրիչի $theme-colorsտարբերակներ ստեղծելու և յուրաքանչյուր ընդմիջման կետի համար պատասխանատու տարբերակներ ստեղծելու համար: Երբ դուք հարմարեցնում եք այս Sass քարտեզները և վերակոմպիլյացիա անում, դուք ավտոմատ կերպով կտեսնեք ձեր փոփոխություններն արտացոլված այս օղակներում:

Փոփոխիչներ

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

Պատասխանատու

Այս 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-ում: Դրանք ապահովում են հեշտ մուտք դեպի սովորաբար օգտագործվող արժեքներ, ինչպիսիք են մեր թեմայի գույները, ընդմիջման կետերը և հիմնական տառատեսակների կույտերը, երբ աշխատում եք ձեր զննարկչի Inspector-ում, կոդի ավազատուփում կամ ընդհանուր նախատիպերում:

Հասանելի փոփոխականներ

Ահա այն փոփոխականները, որոնք մենք ներառում ենք (նկատի ունեցեք, որ :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, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --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);
}

Ընդմիջման կետի փոփոխականներ

Թեև մենք ի սկզբանե ներառել ենք ընդմիջման կետեր մեր CSS փոփոխականներում (օրինակ՝ --breakpoint-md), դրանք չեն աջակցվում մեդիա հարցումներում , սակայն դրանք դեռ կարող են օգտագործվել մեդիա հարցումների կանոնակարգերում: Այս բեկման կետի փոփոխականները մնում են կազմված CSS-ում՝ հետընթաց համատեղելիության համար, հաշվի առնելով, որ դրանք կարող են օգտագործվել JavaScript-ի կողմից: Իմացեք ավելին սպեկտրում:

Ահա մի օրինակ, որը չի աջակցվում.

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

Եվ ահա մի օրինակ, թե ինչն է աջակցվում.

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