තේමා බූට්ස්ට්‍රැප්

පහසු තේමා සහ සංරචක වෙනස්කම් සඳහා ගෝලීය මෝස්තර මනාපයන් සඳහා අපගේ නව බිල්ට්-ඉන් Sass විචල්‍යයන් සමඟ Bootstrap 4 අභිරුචිකරණය කරන්න.

හැදින්වීම

බූට්ස්ට්‍රැප් 3 හි, තේමා කිරීම බොහෝ දුරට මෙහෙයවනු ලැබුවේ අඩුවෙන්, අභිරුචි CSS, සහ අපි අපගේ distගොනුවලට ඇතුළත් කළ වෙනම තේමා මෝස්තර පත්‍රිකාවකින් විචල්‍ය අභිබවා යාමෙනි. යම් උත්සාහයකින්, කෙනෙකුට මූලික ගොනු ස්පර්ශ නොකර Bootstrap 3 හි පෙනුම සම්පූර්ණයෙන්ම ප්‍රතිනිර්මාණය කළ හැකිය. Bootstrap 4 හුරුපුරුදු නමුත් තරමක් වෙනස් ප්‍රවේශයක් සපයයි.

දැන්, තේමා කිරීම Sass විචල්‍යයන්, Sass සිතියම් සහ අභිරුචි CSS මගින් සිදු කෙරේ. තවත් කැප වූ තේමා මෝස්තර පත්‍රිකාවක් නොමැත; ඒ වෙනුවට, ඔබට අනුක්‍රමික, සෙවනැලි සහ තවත් දේ එක් කිරීමට ගොඩනඟන ලද තේමාව සබල කළ හැක.

සාස්

ඔබේම වත්කම් නල මාර්ගයක් භාවිතයෙන් 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ඔබගේ ආරම්භක ලක්ෂ්‍යය ලෙස අපගේ ගොනුවෙන් සම්පූර්ණ ආයාත තොගය භාවිතා කිරීමට අපි යෝජනා කරමු .

විචල්‍ය පෙරනිමි

Bootstrap හි ඇති සෑම Sass විචල්‍යයක්ම !defaultBootstrap හි මූල කේතය වෙනස් නොකර ඔබේම Sass හි විචල්‍යයේ පෙරනිමි අගය අභිබවා යාමට ඔබට ඉඩ සලසන ධජය ඇතුළත් වේ. අවශ්‍ය පරිදි විචල්‍ය පිටපත් කර අලවන්න, ඒවායේ අගයන් වෙනස් කරන්න, සහ !defaultධජය ඉවත් කරන්න. විචල්‍යයක් දැනටමත් පවරා තිබේ නම්, එය Bootstrap හි පෙරනිමි අගයන් මගින් නැවත පවරා නොදෙනු ඇත.

Bootstrap හි විචල්‍යවල සම්පූර්ණ ලැයිස්තුව ඔබට සොයාගත හැකිය scss/_variables.scss. සමහර විචල්‍යයන් ලෙස සකසා ඇත null, මෙම විචල්‍යයන් ඔබේ වින්‍යාසය තුළ ප්‍රතික්‍ෂේප කරන්නේ නම් මිස දේපල ප්‍රතිදානය නොකරයි.

අපගේ ශ්‍රිත, විචල්‍ය සහ මිශ්‍රණය ආයාත කළ පසු විචල්‍ය අතික්‍රමණයන් පැමිණිය යුතුය, නමුත් ඉතිරි ආයාතවලට පෙර.

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 හි ඕනෑම විචල්‍යයක් සඳහා අවශ්‍ය පරිදි නැවත නැවත කරන්න.

අපගේ ආරම්භක ව්‍යාපෘතිය සමඟ npm හරහා Bootstrap සමඟ ආරම්භ කරන්න! ඔබේම npm ව්‍යාපෘතිය තුළ Bootstrap ගොඩනඟා අභිරුචිකරණය කරන්නේ කෙසේදැයි බැලීමට twbs/bootstrap-npm-starter අච්චු ගබඩාව වෙත යන්න . Sass compiler, Autoprefixer, Stylelint, PurgeCSS, සහ Bootstrap Icons ඇතුළත් වේ.

සිතියම් සහ ලූප

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

ඔබ v3 වෙතින් වර්ණ විචල්‍යයක් භාවිතා කරන ආකාරය වැනි Sass සිතියමකින් එක් වර්ණයක් තෝරා ගැනීමට මේවා ඔබට ඉඩ සලසයි.

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

Escape SVG

SVG පසුබිම් රූප සඳහා , සහ අක්ෂර escape-svgවලින් ගැලවීමට අපි ශ්‍රිතය භාවිතා කරමු . IE හි පසුබිම් රූප නිවැරදිව විදැහුම් කිරීමට මෙම අක්ෂර ගැලවිය යුතුය. කාර්යය භාවිතා කරන විට , දත්ත URIs උපුටා දැක්විය යුතුය.<>#escape-svg

කාර්යයන් එකතු කිරීම සහ අඩු කිරීම

අපි 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);
}

Sass විකල්ප

අපගේ බිල්ට් අභිරුචි විචල්‍ය ගොනුව සමඟ Bootstrap 4 අභිරුචිකරණය කරන්න සහ නව $enable-*Sass විචල්‍යයන් සමඟ ගෝලීය CSS මනාපයන් පහසුවෙන් ටොගල් කරන්න. විචල්‍යයක අගය අභිබවා npm run testඅවශ්‍ය පරිදි නැවත සම්පාදනය කරන්න.

scss/_variables.scssBootstrap ගොනුවේ ඇති ප්‍රධාන ගෝලීය විකල්ප සඳහා ඔබට මෙම විචල්‍යයන් සොයා ගැනීමට සහ අභිරුචිකරණය කිරීමට හැකිය .

විචල්ය	වටිනාකම්	විස්තර
`$spacer`	`1rem`(පෙරනිමි), හෝ ඕනෑම අගයක් > 0	අපගේ ස්පේසර් උපයෝගිතා ක්‍රමලේඛනාත්මකව උත්පාදනය කිරීමට පෙරනිමි ස්පේසර් අගය නියම කරයි .
`$enable-rounded`	`true`(පෙරනිමි) හෝ`false`	`border-radius`විවිධ සංරචක මත පූර්ව නිශ්චිත මෝස්තර සබල කරයි .
`$enable-shadows`	`true`හෝ `false`(පෙරනිමි)	`box-shadow`විවිධ සංරචක මත පූර්ව නිශ්චිත සැරසිලි විලාසයන් සක්රීය කරයි . `box-shadow`නාභිගත අවස්ථා සඳහා භාවිතා කරන s වලට බලපාන්නේ නැත .
`$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 සිතියමක අර්ථ දක්වා ඇති වර්ණ මාලාවක් හරහා ගොඩනගා ඇත. නීති මාලාවක් ඉක්මනින් ජනනය කිරීමට මෙම සිතියම Sass හි ලූප් කළ හැක.

සියලු වර්ණ

Bootstrap 4 හි ඇති සියලුම වර්ණ Sass විචල්‍යයන් සහ scss/_variables.scssගොනුවේ Sass සිතියමක් ලෙස ලබා ගත හැක. අප දැනටමත් ඇතුළත් කර ඇති අළුපැහැති තලය මෙන් අමතර සෙවන එක් කිරීමට මෙය පසුකාලීන සුළු නිකුතු වලදී පුළුල් කරනු ඇත .

$නිල් #007bff

$ඉන්ඩිගෝ #6610f2

$දම් පාට #6f42c1

$රෝස #e83e8c

$රතු #dc3545

$තැඹිලි #fd7e14

$කහ #ffc107

$හරිත #28a745

$teal #20c997

$සයන් #17a2b8

මෙන්න ඔබට ඔබේ Sass තුළ මේවා භාවිතා කළ හැකි ආකාරය:

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

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

colorසැකසීම් සහ සඳහා වර්ණ උපයෝගිතා පන්ති ද පවතී background-color.

අනාගතයේදී, අපි පහත අළුපැහැති වර්ණ සමඟ සිදු කර ඇති පරිදි එක් එක් වර්ණවල සෙවන සඳහා Sass සිතියම් සහ විචල්‍යයන් සැපයීමට ඉලක්ක කරමු.

තේමා වර්ණ

scss/_variables.scssබූට්ස්ට්‍රැප් ගොනුවේ Sass විචල්‍යයන් සහ Sass සිතියමක් ලෙස ද ලබා ගත හැකි, වර්ණ පටිපාටි ජනනය කිරීම සඳහා කුඩා වර්ණ මාලාවක් සෑදීමට අපි සියලු වර්ණවල උප කුලකයක් භාවිතා කරමු .

$ප්රාථමික #007bff

$ද්විතියික #6c757d

$සාර්ථකයි #28a745

$අනතුරයි #dc3545

$අවවාදයයි #ffc107

$තොරතුරු #17a2b8

$ආලෝකය #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මෙන්න Sass සිතියමේ උදාහරණයක් :

$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 හි බොහෝ සංරචක සහ උපයෝගිතා @eachSass සිතියමක් හරහා පුනරාවර්තනය වන ලූප සමඟ ගොඩනගා ඇත. මෙය විශේෂයෙන්ම අපගේ සංරචකයේ ප්‍රභේද ජනනය කිරීමට $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 අභිරුචි ගුණාංග (විචල්‍යයන්) දුසිම් දෙකක් පමණ ඇතුළත් වේ. මේවා ඔබගේ බ්‍රවුසරයේ පරීක්ෂක, කේත වැලිපිල්ලක් හෝ සාමාන්‍ය මූලාකෘතියක් තුළ වැඩ කරන විට අපගේ තේමා වර්ණ, බිඳුම් ලක්ෂ්‍ය සහ ප්‍රාථමික අකුරු අට්ටි වැනි බහුලව භාවිතා වන අගයන් වෙත පහසු ප්‍රවේශයක් සපයයි.

පවතින විචල්‍යයන්

මෙන්න අපි ඇතුලත් කරන විචල්‍යයන් ( :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);
}

බිඳුම් ලක්ෂ්‍ය විචල්‍යයන්

අප මුලින් අපගේ CSS විචල්‍යයන් (උදා, --breakpoint-md) තුළ බිඳුම් ලක්ෂ්‍ය ඇතුළත් කළ අතර, මේවා මාධ්‍ය විමසුම්වල සහාය නොදක්වයි , නමුත් ඒවා තවමත් මාධ්‍ය විමසුම්වල නීති රීති තුළ භාවිත කළ හැක. මෙම බ්‍රේක්පොයින්ට් විචල්‍යයන් JavaScript මගින් භාවිතා කළ හැකි බැවින් පසුගාමී ගැළපුම සඳහා සම්පාදනය කරන ලද CSS තුළ පවතී. පිරිවිතරයෙන් තවත් ඉගෙන ගන්න .

සහාය නොදක්වන දේ පිළිබඳ උදාහරණයක් මෙන්න :

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

සහය දක්වන දේ පිළිබඳ උදාහරණයක් මෙන්න :

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