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

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

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

ကွန်တိန်နာများသည် Bootstrap ရှိ အခြေခံအကျဆုံး အပြင်အဆင်ဒြပ်စင်ဖြစ်ပြီး ကျွန်ုပ်တို့၏ မူရင်းဇယားကွက်စနစ်ကို အသုံးပြုသည့်အခါ လိုအပ်ပါသည် ။ ကွန်တိန်နာများကို ပါ၀င်ရန်၊ pad နှင့် (တစ်ခါတစ်ရံ) ၎င်းတို့အတွင်းမှ အကြောင်းအရာကို ဗဟိုပြုရန် အသုံးပြုသည်။ ကွန်တိန်နာ များကို nested လုပ်ထားနိုင်သော်လည်း အပြင်အဆင်အများစုသည် nested container မလိုအပ်ပါ။

Bootstrap သည် မတူညီသော ကွန်တိန်နာ ၃ ခုပါရှိသည်။

• .containermax-widthတုံ့ပြန်မှု ဖြတ်မှတ်တစ်ခုစီတွင် သတ်မှတ်ပေးသည်။
• .container-fluidwidth: 100%အားလုံးကို ဖြတ်တောက် ပေးသော အချက်ဖြစ်သည်။
• .container-{breakpoint}width: 100%သတ်မှတ်ထားသော ဖြတ်မှတ်အထိ ဖြစ်သည် ။

အောက်ဖော်ပြပါဇယားသည် ကွန်တိန်နာတစ်ခုစီ max-width၏မူရင်း .containerနှင့် .container-fluidဖောက်ပြန်မှတ်တိုင်တစ်ခုစီကို မည်သို့နှိုင်းယှဉ်ဖော်ပြသည် ။

၎င်းတို့ကို လုပ်ဆောင်ချက်တွင် ကြည့်ရှုပြီး ကျွန်ုပ်တို့၏ Grid ဥပမာ တွင် ၎င်းတို့ကို နှိုင်းယှဉ်ပါ ။

All-in-one

ကျွန်ုပ်တို့၏မူလ .containerအတန်းသည် တုံ့ပြန်မှုရှိသော၊ ပုံသေ-အကျယ်ကွန်တိန်နာဖြစ်ပြီး၊ max-widthအဓိပ္ပါယ်မှာ ဖောက်ပြန်မှတ်တိုင်တစ်ခုစီတွင် ၎င်း၏ပြောင်းလဲမှုများဖြစ်သည်။

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

အရည်

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

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

တုံ့ပြန်မှု

တုံ့ပြန်မှုကွန်တိန်နာများသည် Bootstrap v4.4 တွင်အသစ်ဖြစ်သည်။ ၎င်းတို့သည် သင့်အား သတ်မှတ်ထားသော ဖြတ်မှတ်မရောက်ရှိမချင်း 100% ကျယ်ဝန်းသော အတန်းတစ်ခုကို သတ်မှတ်ခွင့်ပြုသည်၊ ထို့နောက် max-widthပိုမိုမြင့်မားသော ခွဲထွက်မှတ်တစ်ခုစီအတွက် s ကို အသုံးပြုသည်။ ဥပမာအားဖြင့်၊ breakpoint .container-smမရောက်မချင်း စတင်ရန် 100% ကျယ်ပြန့် သည်၊ ၎င်းသည် , , နှင့် .smmdlgxl

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>

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

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

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

// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` 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 မှတဆင့်ရရှိနိုင်ပါသည်-

// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-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) { ... }
// No media query necessary for xl breakpoint as it has no upper bound on its width

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

အနိမ့်ဆုံးနှင့် အမြင့်ဆုံး 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