အဓိကအကြောင်းအရာသို့ ကျော်သွားပါ။ စာရွက်စာတမ်းလမ်းညွှန်မှုသို့ ကျော်သွားပါ။
in English

အစိတ်အပိုင်းများ

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

အခြေခံသင်တန်းများ

Bootstrap ၏ အစိတ်အပိုင်းများကို base-modifier nomenclature ဖြင့် တည်ဆောက်ထားသည်။ ကျွန်ုပ်တို့သည် မျှဝေထားသော ဂုဏ်သတ္တိများကို တတ်နိုင်သမျှ အရင်းအတန်းတစ်ခုအဖြစ် .btnအုပ်စုဖွဲ့လိုက်ပြီး မူကွဲတစ်ခုစီအတွက် တစ်ဦးချင်းစတိုင်များကို ပြုပြင်မွမ်းမံထားသော အတန်းများကဲ့သို့ .btn-primaryသို့မဟုတ် .btn-success.

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

ဤကွင်းများကို စိတ်ကြိုက်ပြုပြင်နည်းနှင့် Bootstrap ၏ အခြေခံ-မွမ်းမံမှုနည်းလမ်းကို သင့်ကိုယ်ပိုင်ကုဒ်သို့ တိုးချဲ့နည်းအတွက် ကျွန်ုပ်တို့၏ Sass မြေပုံများနှင့် ကွင်းပတ်စာရွက်စာတမ်းများ ကို ကြည့်ရှုပါ ။

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

Bootstrap ၏ အစိတ်အပိုင်းများစွာကို base-modifier class ချဉ်းကပ်မှုဖြင့် တည်ဆောက်ထားသည်။ ဆိုလိုသည်မှာ စတိုင်လ်ပုံစံ၏အစုအဝေးကို အခြေခံလူတန်းစား (ဥပမာ၊ ) တွင် စတိုင်ပုံစံကွဲလွဲမှုများကို မွမ်းမံမှုအတန်းများ (ဥပမာ၊ ) .btnတွင်သာ ကန့်သတ်ထားစဉ် ဆိုလိုသည်။ .btn-dangerကျွန်ုပ်တို့၏မွမ်းမံမှုအတန်း $theme-colorsများ၏ နံပါတ်နှင့် အမည်ကို စိတ်ကြိုက်ပြုလုပ်ရန် ဤမွမ်းမံမှုအတန်းများကို မြေပုံမှတည်ဆောက်ထားသည်။

ဤသည်မှာ မြေပုံပေါ်တွင် ပြုပြင်မွမ်းမံမှုများ နှင့် အစိတ်အပိုင်းများ $theme-colorsကို ထုတ်လုပ်ရန် ကျွန်ုပ်တို့သည် မြေပုံပေါ်တွင် လှည့်ပတ်ပုံ၏ ဥပမာနှစ်ခု ဖြစ်သည်။.alert.list-group

// Generate contextual modifier classes for colorizing the alert.

@each $state, $value in $theme-colors {
  $alert-background: shift-color($value, $alert-bg-scale);
  $alert-border: shift-color($value, $alert-border-scale);
  $alert-color: shift-color($value, $alert-color-scale);
  @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
    $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
  }
  .alert-#{$state} {
    @include alert-variant($alert-background, $alert-border, $alert-color);
  }
}
// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.

@each $state, $value in $theme-colors {
  $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
  $list-group-variant-color: shift-color($value, $list-group-item-color-scale);
  @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
    $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
  }

  @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
}

တုံ့ပြန်မှု

ဤ Sass ကွင်းများသည် အရောင်မြေပုံများအတွက်လည်း အကန့်အသတ်မရှိပါ။ သင့်အစိတ်အပိုင်းများ၏ တုံ့ပြန်မှုပုံစံများကိုလည်း ဖန်တီးနိုင်သည်။ ဥပမာအားဖြင့် မီဒီယာမေးမြန်းချက်တစ်ခုနှင့် Sass မြေပုံ @eachအတွက် ကွင်းဆက်တစ်ခုကို ရောနှောထားသည့် dropdowns များ၏ တုံ့ပြန်မှု ချိန်ညှိမှုကို ကြည့်ပါ။$grid-breakpoints

// We deliberately hardcode the `bs-` prefix because we check
// this custom property in JS to determine Popper's positioning

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .dropdown-menu#{$infix}-start {
      --bs-position: start;

      &[data-bs-popper] {
        right: auto;
        left: 0;
      }
    }

    .dropdown-menu#{$infix}-end {
      --bs-position: end;

      &[data-bs-popper] {
        right: 0;
        left: auto;
      }
    }
  }
}

သင့်အား ပြုပြင်မွမ်းမံပါ $grid-breakpointsက သင့်ပြောင်းလဲမှုများသည် ထိုမြေပုံပေါ်တွင် ထပ်လောင်းသည့် ကွင်းဆက်များအားလုံးကို သက်ရောက်မည်ဖြစ်သည်။

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

ကျွန်ုပ်တို့၏ Sass မြေပုံများနှင့် ကိန်းရှင်များကို မွမ်းမံပြင်ဆင်နည်းဆိုင်ရာ နောက်ထပ်အချက်အလက်များနှင့် ဥပမာများအတွက်၊ ကျေးဇူးပြု၍ Grid documentation ၏ Sass ကဏ္ဍကို ဖတ်ရှုပါ

သင့်ကိုယ်ပိုင်ဖန်တီးခြင်း။

သင့်ကိုယ်ပိုင် အစိတ်အပိုင်းများကို ဖန်တီးရန်အတွက် Bootstrap ဖြင့် တည်ဆောက်သည့်အခါ ဤလမ်းညွှန်ချက်များကို ချမှတ်ရန် သင့်အား ကျွန်ုပ်တို့ တိုက်တွန်းပါသည်။ ကျွန်ုပ်တို့သည် ဤချဉ်းကပ်မှုကို ကျွန်ုပ်တို့၏စာရွက်စာတမ်းနှင့် နမူနာများရှိ စိတ်ကြိုက်အစိတ်အပိုင်းများသို့ တိုးချဲ့ထားပါသည်။ ကျွန်ုပ်တို့၏ callouts ကဲ့သို့သော အစိတ်အပိုင်းများကို base နှင့် modifier classes ဖြင့် ကျွန်ုပ်တို့ပေးထားသော အစိတ်အပိုင်းများကဲ့သို့ တည်ဆောက်ထားပါသည်။

ဒါက ခေါ်ဆိုမှုတစ်ခုပါ။ ကျွန်ုပ်တို့၏ စာရွက်စာတမ်းများအတွက် ၎င်းကို စိတ်ကြိုက်ဖန်တီးထားသောကြောင့် သင့်ထံသို့ ကျွန်ုပ်တို့၏မက်ဆေ့ချ်များကို ထင်ရှားပေါ်လွင်စေပါသည်။ ၎င်းတွင် modifier အတန်းများမှတစ်ဆင့် မူကွဲသုံးမျိုးရှိသည်။
<div class="callout">...</div>

သင်၏ CSS တွင်၊ သင့်တွင် ပုံစံအမြောက်အများကို လုပ်ဆောင်သည့် အောက်ပါကဲ့သို့ တစ်ခုခုရှိမည် .callout။ ထို့နောက် မူကွဲတစ်ခုစီကြားရှိ ထူးခြားသောပုံစံများကို ပြုပြင်မွမ်းမံမှုအတန်းအစားမှတစ်ဆင့် ထိန်းချုပ်ထားသည်။

// Base class
.callout {}

// Modifier classes
.callout-info {}
.callout-warning {}
.callout-danger {}

callouts များအတွက်၊ ထိုထူးခြားသောပုံစံသည် တစ်ခုသာဖြစ်သည် border-left-color။ ထိုအခြေခံလူတန်းစားကို ထိုမွမ်းမံမှုအတန်းများထဲမှ တစ်ခုနှင့် ပေါင်းစပ်လိုက်သောအခါတွင် သင်၏ အစိတ်အပိုင်း အပြည့်အစုံကို သင်ရရှိသည်-

ဤသည်မှာ အချက်အလက်ခေါ်ဆိုမှုတစ်ခုဖြစ်သည်။ ၎င်းကို လုပ်ဆောင်ချက်တွင် ပြသရန် နမူနာ စာသား။
ဒါက သတိပေးချက်တစ်ခုပါ။ ၎င်းကို လုပ်ဆောင်ချက်တွင် ပြသရန် နမူနာ စာသား။
ဒါက အန္တရာယ်ပြောစကားပါ။ ၎င်းကို လုပ်ဆောင်ချက်တွင် ပြသရန် နမူနာ စာသား။