ခြုံငုံသုံးသပ်ချက်

ထုပ်ပိုးထားသော ကွန်တိန်နာများ၊ အားကောင်းသည့် ဇယားကွက်စနစ်၊ ပြောင်းလွယ်ပြင်လွယ် မီဒီယာအရာဝတ္ထုနှင့် တုံ့ပြန်နိုင်သော အသုံးဝင်မှုအတန်းများ အပါအဝင် သင်၏ Bootstrap ပရောဂျက်ကို ခင်းကျင်းရန် အစိတ်အပိုင်းများနှင့် ရွေးချယ်စရာများ။

ကွန်တိန်နာများ

ကွန်တိန်နာများသည် Bootstrap ရှိ အခြေခံအကျဆုံး အပြင်အဆင်ဒြပ်စင်ဖြစ်ပြီး ကျွန်ုပ်တို့၏ မူရင်းဇယားကွက်စနစ်ကို အသုံးပြုသည့်အခါ လိုအပ်ပါသည် ။ တုံ့ပြန်မှုရှိသော၊ ပုံသေအနံပုံသေကွန်တိန်နာ ( max-widthbreakpoint တစ်ခုစီတွင်၎င်း၏ပြောင်းလဲမှုများကိုဆိုလိုသည်) သို့မဟုတ် fluid-width ( 100%အချိန်တိုင်းကျယ်သည်ဟုဆိုလိုသည်) ကိုရွေးချယ်ပါ။

ကွန်တိန်နာ များကို nested လုပ်ထားနိုင်သော်လည်း အပြင်အဆင်အများစုသည် nested container မလိုအပ်ပါ။

<div class="container">
  <!-- Content here -->
</div>

.container-fluidမြင်ကွင်းပို့တ်၏ အကျယ်အဝန်းတစ်ခုလုံးကို အကျယ်ချဲ့သည့် ကွန်တိန်နာတစ်ခုအတွက် အသုံးပြု ပါ။

<div class="container-fluid">
  ...
</div>

တုံ့ပြန်မှု ခွဲမှတ်များ

Bootstrap ကို မိုဘိုင်းလ်အဖြစ် ဦးစွာတီထွင်ထားသောကြောင့်၊ ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ အပြင်အဆင်များနှင့် အင်တာဖေ့စ်များအတွက် ဆင်ခြင်တုံတရားရှိသော breakpoints များဖန်တီးရန် လက်တစ်ဆုပ်စာ မီဒီယာမေးမြန်းချက်များကို အသုံးပြုပါသည်။ ဤ breakpoints များသည် အများအားဖြင့် အနိမ့်ဆုံး viewport widths များကို အခြေခံထားပြီး viewport အပြောင်းအလဲများအဖြစ် အစိတ်အပိုင်းများကို အတိုင်းအတာအထိ ချဲ့ထွင်ရန် ခွင့်ပြုပါသည်။

Bootstrap သည် ကျွန်ုပ်တို့၏ အပြင်အဆင်၊ ဇယားကွက်စနစ်နှင့် အစိတ်အပိုင်းများအတွက် ကျွန်ုပ်တို့၏အရင်းအမြစ် Sass ဖိုင်များတွင် အောက်ပါမီဒီယာမေးမြန်းမှုအပိုင်းအခြားများ—သို့မဟုတ် ခွဲထွက်မှတ်များကို အဓိကအသုံးပြုသည်။

// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

ကျွန်ုပ်တို့၏အရင်းအမြစ် CSS ကို Sass တွင်ရေးသောကြောင့်၊ ကျွန်ုပ်တို့၏မီဒီယာမေးမြန်းချက်အားလုံးကို Sass mixins မှတဆင့်ရရှိနိုင်ပါသည်-

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example usage:
@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

ကျွန်ုပ်တို့သည် ရံဖန်ရံခါတွင် အခြားဦးတည်ချက်သို့သွားသော မီဒီယာမေးခွန်းများကို အသုံးပြုသည် (ပေးထားသော မျက်နှာပြင်အရွယ်အစား သို့မဟုတ် ပိုသေးသည် ):

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

တစ်ဖန်၊ ဤမီဒီယာမေးမြန်းချက်များကို Sass mixins မှတစ်ဆင့်လည်း ရရှိနိုင်ပါသည်။

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }

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

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

ဤမီဒီယာမေးမြန်းချက်များကို Sass mixins မှတစ်ဆင့်လည်း ရရှိနိုင်ပါသည်။

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }

အလားတူ၊ မီဒီယာမေးမြန်းချက်များသည် ဖြတ်တောက်ထားသော အကျယ်အဝန်းများစွာကို ချဲ့ထွင်နိုင်သည်-

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }

တူညီသောမျက်နှာပြင်အရွယ်အစားအကွာအဝေးကိုပစ်မှတ်ထားရန်အတွက် Sass mixin သည်-

@include media-breakpoint-between(md, xl) { ... }

Z အညွှန်း

Bootstrap အစိတ်အပိုင်းများစွာ z-indexသည် အကြောင်းအရာကို စီစဉ်ရန် တတိယဝင်ရိုးကို ပံ့ပိုးပေးခြင်းဖြင့် အပြင်အဆင်ကို ထိန်းချုပ်ရန် ကူညီပေးသည့် CSS ပိုင်ဆိုင်မှုကို အသုံးပြုသည်။ ကျွန်ုပ်တို့သည် အလွှာလမ်းညွှန်ခြင်း၊ ကိရိယာအကြံပြုချက်များနှင့် popovers၊ modals နှင့် အခြားအရာများကို မှန်ကန်စွာလုပ်ဆောင်ရန် ဒီဇိုင်းထုတ်ထားသည့် Bootstrap တွင် မူရင်း z-အညွှန်းစကေးကို အသုံးပြုပါသည်။

ဤမြင့်မားသောတန်ဖိုးများသည် ပဋိပက္ခများကို ရှောင်ရှားနိုင်လောက်အောင် မြင့်မားပြီး သီးခြားသတ်မှတ်ထားသော ကိန်းဂဏန်းတစ်ခုမှ စတင်သည်။ ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ အလွှာလိုက်အစိတ်အပိုင်းများ—တူးလ်အကြံပြုချက်များ၊ popovers၊ navbars၊ dropdowns၊ modals—သို့ဖြစ်ရာ ကျွန်ုပ်တို့သည် အပြုအမူများတွင် ကျိုးကြောင်းဆီလျော်စွာ တသမတ်တည်းရှိနေနိုင်သည် ။ 100+ သို့မဟုတ် + မသုံးနိုင်စရာ အကြောင်းမရှိပါ 500။

ဤတစ်ဦးချင်းတန်ဖိုးများကို စိတ်ကြိုက်ပြင်ဆင်ရန် ကျွန်ုပ်တို့ မတိုက်တွန်းပါ။ တစ်ခုပြောင်းသင့်ရင် အဲဒါတွေအားလုံးကို ပြောင်းလဲဖို့ လိုပါတယ်။

$zindex-dropdown:          1000 !default;
$zindex-sticky:            1020 !default;
$zindex-fixed:             1030 !default;
$zindex-modal-backdrop:    1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;

အစိတ်အပိုင်းများအတွင်း ထပ်နေသည့် ဘောင်များကို ကိုင်တွယ်ရန် (ဥပမာ၊ ထည့်သွင်းမှုအုပ်စုများရှိ ခလုတ်များနှင့် အဝင်များ)၊ ကျွန်ုပ်တို့သည် ပုံသေ၊ ရွှေ့ရန်၊ နှင့် အသက်ဝင်သော အခြေအနေများအတွက် အနိမ့်ဂဏန်းတစ်လုံးတည်း တန်ဖိုးများ ကို အသုံးပြုပါသည် z-index။ hover/focus/active တွင်၊ ကျွန်ုပ်တို့သည် ပေါက်ဖော်ဒြပ်စင်များပေါ်တွင် ၎င်းတို့၏ နယ်နိမိတ်ကိုပြသရန် ပိုမိုမြင့်မားသောတန်ဖိုးဖြင့် ရှေ့ဆုံးသို့ ယူဆောင်လာပါသည်။123z-index