Theming Bootstrap

လွယ်ကူသော အပြင်အဆင်နှင့် အစိတ်အပိုင်းပြောင်းလဲမှုများအတွက် ကမ္ဘာလုံးဆိုင်ရာစတိုင် စိတ်ကြိုက်ရွေးချယ်မှုများအတွက် ကျွန်ုပ်တို့၏ built-in Sass variable အသစ်များဖြင့် Bootstrap 4 ကို စိတ်ကြိုက်ပြင်ဆင်ပါ။

နိဒါန်း

Bootstrap 3 တွင်၊ အပြင်အဆင်ကို LESS၊ စိတ်ကြိုက် CSS နှင့် ကျွန်ုပ်တို့၏ distဖိုင်များတွင် ကျွန်ုပ်တို့ထည့်သွင်းထားသည့် သီးခြားပုံစံစာရွက်တစ်ခုတွင် ပြောင်းလဲနိုင်သော ပြောင်းလဲနိုင်သော overrides များက အဓိကအားဖြင့် မောင်းနှင်ပေးပါသည်။ ကြိုးစားအားထုတ်မှု အနည်းငယ်ဖြင့်၊ တစ်ဦးသည် core ဖိုင်များကိုမထိဘဲ Bootstrap 3 ၏အသွင်အပြင်ကို လုံး၀ ပြန်လည်ဒီဇိုင်းထုတ်နိုင်သည်။ Bootstrap 4 သည် အကျွမ်းတဝင်ရှိသော်လည်း အနည်းငယ်ကွဲပြားသောချဉ်းကပ်မှုကို ပေးသည်။

ယခုအခါ Sass variables၊ Sass မြေပုံများနှင့် စိတ်ကြိုက် CSS တို့ဖြင့် အပြင်အဆင်ကို ပြီးမြောက်ပါပြီ။ အထူးသီးသန့် အပြင်အဆင် ပုံစံစာရွက် မရှိတော့ပါ။ ယင်းအစား၊ သင်သည် gradients၊ shadows နှင့် အခြားအရာများထည့်ရန် built-in theme ကိုဖွင့်နိုင်သည်။

ဆူး

သင်၏ကိုယ်ပိုင်ပိုင်ဆိုင်မှုပိုက်လိုင်းကိုအသုံးပြု၍ Sass ကိုစုစည်း သောအခါ variable များ၊ မြေပုံများ၊ mixins နှင့်အခြားအရာများကိုအသုံးချရန်ကျွန်ုပ်တို့၏အရင်းအမြစ် 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 variable များနှင့် မြေပုံများကို စတင်ပြင်ဆင် custom.scssနိုင်ပါသည်။ // Optionalလိုအပ်သလို ကဏ္ဍ အောက်တွင် Bootstrap ၏ အစိတ်အပိုင်းများကို စတင်ထည့်သွင်းနိုင်သည် ။ bootstrap.scssသင်၏အစမှတ်အဖြစ် ကျွန်ုပ်တို့၏ဖိုင် မှ တင်သွင်းသည့်အစုအစည်းအပြည့်အစုံကို အသုံးပြုရန် ကျွန်ုပ်တို့အကြံပြုအပ်ပါသည် ။

ပြောင်းလဲနိုင်သော ပုံသေများ

Bootstrap ရှိ Sass variable တိုင်းတွင် !defaultBootstrap ၏အရင်းအမြစ်ကုဒ်ကိုမွမ်းမံခြင်းမပြုဘဲ သင့်ကိုယ်ပိုင် Sass တွင် variable ၏မူလတန်ဖိုးကို အစားထိုးနိုင်စေမည့် အလံပါရှိသည်။ ကိန်းရှင်များကို လိုအပ်သလို ကူးယူပြီး ကူးထည့်ပါ၊ ၎င်းတို့၏ တန်ဖိုးများကို ပြင်ဆင်ပါ၊ !defaultအလံကို ဖယ်ရှားပါ။ ကိန်းရှင်တစ်ခုကို သတ်မှတ်ပေးထားပြီးဖြစ်ပါက၊ ၎င်းကို Bootstrap ရှိ မူရင်းတန်ဖိုးများဖြင့် ပြန်လည်သတ်မှတ်ပေးမည်မဟုတ်ပါ။

Bootstrap ၏ variable များစာရင်းအပြည့်အစုံကို 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 ရှိ မည်သည့် variable အတွက်မဆို လိုအပ်သလို ပြန်လုပ်ပါ။

မြေပုံများနှင့် ကွင်းများ

Bootstrap 4 တွင် Sass မြေပုံများ လက်တစ်ဆုပ်စာ၊ ဆက်စပ် CSS ၏ မိသားစုများကို ထုတ်လုပ်ရန် ပိုမိုလွယ်ကူစေသည့် သော့တန်ဖိုးအတွဲများ ပါဝင်သည်။ ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏အရောင်များ၊ ဇယားကွက်ခွဲမှတ်များနှင့် အခြားအရာများအတွက် Sass မြေပုံများကို အသုံးပြုပါသည်။ Sass variable များကဲ့သို့ပင်၊ Sass မြေပုံများအားလုံးတွင် !defaultအလံပါ၀င်ပြီး overridden နှင့် ထပ်တိုးနိုင်သည်။

ကျွန်ုပ်တို့၏ 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);
}

လက်တွေ့တွင်၊ သင်သည် function ကိုခေါ်ဆိုပြီး ကန့်သတ်ချက်နှစ်ခုဖြင့်ဖြတ်သန်းသည် $theme-colors- (ဥပမာ၊ မူလ သို့မဟုတ် အန္တရာယ်) မှ အရောင်အမည်နှင့် ဂဏန်းအဆင့်တစ်ခု။

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

နောက်ထပ် Sass မြေပုံများအတွက် အဆင့်လုပ်ဆောင်ချက်များကို ဖန်တီးရန် သို့မဟုတ် သင်ပို၍ စကားများလိုပါက ယေဘုယျအားဖြင့် အပိုလုပ်ဆောင်ချက်များကို အနာဂတ်တွင် ထည့်သွင်းနိုင်သည် သို့မဟုတ် သင့်စိတ်ကြိုက် Sass ကို ထည့်သွင်းနိုင်သည်။

အရောင်ခြားနားမှု

Bootstrap တွင်ကျွန်ုပ်တို့ပါ ၀ င်သည့်နောက်ထပ်လုပ်ဆောင်ချက်တစ်ခုမှာအရောင်ခြားနားမှုလုပ်ဆောင်ချက် color-yiqဖြစ်သည်။ သတ်မှတ်ထားသော အခြေခံအရောင်ပေါ်အခြေခံ၍ အလင်း ( ) သို့မဟုတ် အမှောင် ( ) ဆန့်ကျင်ဘက်အရောင် ကို အလိုအလျောက်ပြန်ပေးရန် YIQ အရောင်နေရာကို အသုံးချသည် ။ ဤလုပ်ဆောင်ချက်သည် သင်အတန်းများစွာကို ဖန်တီးနေသည့် mixins သို့မဟုတ် loops အတွက် အထူးအသုံးဝင်သည်။#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 ကို ရှောင်ပါ။

ကျွန်ုပ်တို့သည် SVG နောက်ခံပုံများအတွက် နှင့် ဇာတ်ကောင်များကို လွတ်မြောက်ရန် လုပ်ဆောင်ချက်ကို escape-svgအသုံးပြု ပါသည် ။ IE ရှိ နောက်ခံပုံများကို မှန်ကန်စွာပြန်ဆိုရန် ဤဇာတ်ကောင်များသည် လွတ်မြောက်ရန် လိုအပ်သည်။ လုပ်ဆောင်ချက်ကို အသုံးပြုသည့်အခါ ဒေတာ URI များကို ကိုးကားရပါမည်။<>#escape-svg

ပေါင်းထည့်ခြင်းနှင့် နုတ်ခြင်းလုပ်ဆောင်ချက်များ

CSS လုပ်ဆောင်ချက်ကို ခြုံရန် ကျွန်ုပ်တို့သည် addနှင့် လုပ်ဆောင်ချက်များကို အသုံးပြုသည် ။ ဤလုပ်ဆောင်ချက်များ၏ အဓိကရည်ရွယ်ချက်မှာ “unitless” တန်ဖိုးကို ဖော်ပြချက် တစ်ခုသို့ ဖြတ်သန်း သည့်အခါ အမှားများကို ရှောင်ရှားရန်ဖြစ်သည်။ သင်္ချာနည်းအရ မှန်ကန်သော်လည်း ဘရောက်ဆာအားလုံးတွင် အမှားအယွင်း တစ်ခု ပြန်ဖြစ်သွားသည်။subtractcalc0calccalc(10px - 0)

calc မှန်ကန်သည့်နေရာတွင် ဥပမာ-

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

calc မမှန်ကန်သော ဥပမာ-

$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 ကို ကျွန်ုပ်တို့၏ built-in စိတ်ကြိုက် variables ဖိုင်ဖြင့် စိတ်ကြိုက်ပြင်ဆင်ပြီး $enable-*Sass variables အသစ်များဖြင့် ကမ္ဘာလုံးဆိုင်ရာ CSS စိတ်ကြိုက်များကို အလွယ်တကူ ပြောင်းနိုင်သည်။ ကိန်းရှင်၏တန်ဖိုးကို အစားထိုးပြီး npm run testလိုအပ်သလို ပြန်လည်ပေါင်းစည်းပါ။

scss/_variables.scssBootstrap ၏ ဖိုင် တွင် အဓိက ကမ္ဘာလုံးဆိုင်ရာ ရွေးချယ်စရာများအတွက် ဤကိန်းရှင်များကို သင်ရှာဖွေပြီး စိတ်ကြိုက်ပြင်ဆင် နိုင်ပါသည်။

အရောင်

Bootstrap ၏ အမျိုးမျိုးသော အစိတ်အပိုင်းများနှင့် အသုံးအဆောင်များစွာကို Sass မြေပုံတွင် သတ်မှတ်ထားသော အရောင်အစီအရီများဖြင့် တည်ဆောက်ထားသည်။ စည်းမျဥ်းများ အမြန်ထုတ်ပေးရန် ဤမြေပုံကို Sass တွင် လှည့်ပတ်နိုင်သည်။

အရောင်အားလုံး

Bootstrap 4 တွင်ရရှိနိုင်သောအရောင်အားလုံးကို Sass variables နှင့် Sass map scss/_variables.scssဖိုင်အဖြစ်ရရှိနိုင်သည်။ ကျွန်ုပ်တို့ပါဝင်ပြီးသား မီးခိုးရောင်စကေး palette ကဲ့သို့ အပိုဆောင်းအရိပ်များထည့်ရန်အတွက် ၎င်းကို နောက်ဆက်တွဲထုတ်ဝေမှုများတွင် တိုးချဲ့ပါမည် ။

ဤသည်မှာ သင်၏ Sass တွင် ၎င်းတို့ကို မည်သို့အသုံးပြုနိုင်သည်နည်း။

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

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

ရောင်စုံ အသုံးဝင်မှု အတန်းcolor များကို ဆက်တင် နှင့် သတ်မှတ်ရန်လည်း ရနိုင်သည် background-color။

အပြင်အဆင် အရောင်များ

scss/_variables.scssSass variable များနှင့် Bootstrap ဖိုင် ရှိ Sass မြေပုံအဖြစ်လည်း ရရှိနိုင်သော အရောင်အစီအစဥ်များဖန်တီးရန်အတွက် သေးငယ်သောအရောင်အကွက်တစ်ခုကို ဖန်တီးရန်အတွက် အရောင်အားလုံး၏ အပိုင်းခွဲတစ်ခုကို ကျွန်ုပ်တို့ အသုံးပြုပါသည်။

မီးခိုးရောင်

scss/_variables.scssသင့်ပရောဂျက်တခွင်လုံး မီးခိုးရောင်အရိပ်များအတွက် ကျယ်ပြန့်သော မီးခိုးရောင်ပြောင်းလွဲချက်များနှင့် Sass မြေပုံတစ်ခု ။ ၎င်းတို့သည် ကြားနေမီးခိုးရောင်များထက် သိမ်မွေ့သောအပြာရောင်ဆီသို့ ဦးတည်လေ့ရှိသည့် “အေးမြသောမီးခိုးရောင်” များကို သတိပြုပါ။

အတွင်းတွင် 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 ၏ အစိတ်အပိုင်းများနှင့် အသုံးအဆောင်များစွာကို @eachSass မြေပုံပေါ်တွင် ထပ်တလဲလဲဖြစ်စေသော ကွင်းဆက်များဖြင့် တည်ဆောက်ထားသည်။ ၎င်းသည် ကျွန်ုပ်တို့၏ အစိတ်အပိုင်းတစ်ခု၏ $theme-colorsမူကွဲများကို ဖန်တီးခြင်းနှင့် breakpoint တစ်ခုစီအတွက် တုံ့ပြန်မှုမျိုးကွဲများကို ဖန်တီးခြင်းအတွက် အထူးသဖြင့် အထောက်အကူဖြစ်သည်။ ဤ Sass မြေပုံများကို စိတ်ကြိုက်ပြင်ဆင်ပြီး ပြန်လည်ပေါင်းစည်းလိုက်သည်နှင့်အမျှ၊ ဤကွင်းဆက်များတွင် သင်၏ပြောင်းလဲမှုများကို အလိုအလျောက်မြင်ရမည်ဖြစ်ပါသည်။

ပြုပြင်မွမ်းမံမှုများ

Bootstrap ၏ အစိတ်အပိုင်းများစွာကို base-modifier class ချဉ်းကပ်မှုဖြင့် တည်ဆောက်ထားသည်။ ဆိုလိုသည်မှာ စတိုင်လ်ပုံစံ၏အစုအဝေးကို အခြေခံလူတန်းစား (ဥပမာ၊ ) တွင် စတိုင်ပုံစံကွဲလွဲမှုများကို မွမ်းမံမှုအတန်းများ (ဥပမာ၊ ) .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 ကွင်းများသည် အရောင်မြေပုံများအတွက်လည်း အကန့်အသတ်မရှိပါ။ သင်၏ အစိတ်အပိုင်းများ သို့မဟုတ် အသုံးအဆောင်ပစ္စည်းများ၏ တုံ့ပြန်မှုဆိုင်ရာ ပြောင်းလဲမှုများကိုလည်း ဖန်တီးနိုင်သည်။ ဥပမာအားဖြင့် ကျွန်ုပ်တို့၏တုံ့ပြန်မှုရှိသော စာသားချိန်ညှိမှု utilities များကို 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 စိတ်ကြိုက်ဂုဏ်သတ္တိများ (variables) နှစ်ဒါဇင်ခန့်ပါဝင်သည်။ ၎င်းတို့သည် သင့်ဘရောက်ဆာ၏ စစ်ဆေးရေးမှူး၊ ကုဒ်သဲပုံး သို့မဟုတ် ယေဘုယျပုံတူပုံတူရိုက်ခြင်းတွင် လုပ်ဆောင်သောအခါတွင် ကျွန်ုပ်တို့၏ ဆောင်ပုဒ်အရောင်များ၊ ခွဲမှတ်များနှင့် ပင်မဖောင့်အတွဲများကဲ့သို့ အသုံးများသော တန်ဖိုးများကို လွယ်ကူစွာ အသုံးပြုခွင့်ပေးပါသည်။

ရနိုင်သော ကိန်းရှင်များ

: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 variable များသည် Sass ၏ variables များနှင့် ဆင်တူသော ပျော့ပြောင်းမှုကို ပေးစွမ်းနိုင်သော်လည်း browser တွင် အသုံးမပြုမီ compilation ပြုလုပ်ရန် မလိုအပ်ပါ။ ဥပမာအားဖြင့်၊ ဤနေရာတွင် ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ စာမျက်နှာ၏ ဖောင့်နှင့် CSS variable များဖြင့် လင့်ခ်ပုံစံများကို ပြန်လည်သတ်မှတ်နေပါသည်။

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

Breakpoint ကိန်းရှင်များ

ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ CSS variables များတွင် မူလ breakpoints များကို ထည့်သွင်း --breakpoint-mdထားသော်လည်း ၎င်းတို့ကို media queries များတွင် မပံ့ပိုး နိုင်သော်လည်း ၎င်းတို့ကို media queries များတွင် စည်းမျဉ်းများ အတွင်းတွင် ဆက်လက်အသုံးပြုနိုင်ပါသည် ။ ၎င်းတို့ကို JavaScript မှအသုံးချနိုင်သော backward compatibility အတွက် ဤ breakpoint variable များသည် compiled CSS တွင်ရှိနေပါသည်။ Spec တွင် ပိုမိုလေ့လာပါ ။

ဤသည်မှာ ပံ့ပိုးမထားသည့်အရာ၏ ဥပမာတစ်ခုဖြစ်သည် ။

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

ဤသည်မှာ ပံ့ပိုးပေးထား သည့် ဥပမာတစ်ခုဖြစ်သည် ။

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