ခြုံငုံသုံးသပ်ချက်
ထုပ်ပိုးထားသော ကွန်တိန်နာများ၊ အားကောင်းသော ဇယားကွက်စနစ်၊ ပြောင်းလွယ်ပြင်လွယ် မီဒီယာအရာဝတ္ထုနှင့် တုံ့ပြန်နိုင်သော အသုံးဝင်မှုအတန်းများ အပါအဝင် သင်၏ Bootstrap ပရောဂျက်ကို ခင်းကျင်းရန် အစိတ်အပိုင်းများနှင့် ရွေးချယ်စရာများ။
ကွန်တိန်နာများ
ကွန်တိန်နာများသည် Bootstrap ရှိ အခြေခံအကျဆုံး အပြင်အဆင်ဒြပ်စင်ဖြစ်ပြီး ကျွန်ုပ်တို့၏ မူရင်းဇယားကွက်စနစ်ကို အသုံးပြုသည့်အခါ လိုအပ်ပါသည် ။ ကွန်တိန်နာများကို ပါ၀င်ရန်၊ pad နှင့် (တစ်ခါတစ်ရံ) ၎င်းတို့အတွင်းမှ အကြောင်းအရာကို ဗဟိုပြုရန် အသုံးပြုသည်။ ကွန်တိန်နာ များကို nested လုပ်ထားနိုင်သော်လည်း အပြင်အဆင်အများစုသည် nested container မလိုအပ်ပါ။
Bootstrap သည် မတူညီသော ကွန်တိန်နာ ၃ ခုပါရှိသည်။
.container
max-width
တုံ့ပြန်မှု ဖြတ်မှတ်တစ်ခုစီတွင် သတ်မှတ်ပေးသည်။.container-fluid
width: 100%
အားလုံးကို ဖြတ်တောက် ပေးသော အချက်ဖြစ်သည်။.container-{breakpoint}
width: 100%
သတ်မှတ်ထားသော ဖြတ်မှတ်အထိ ဖြစ်သည် ။
အောက်ဖော်ပြပါဇယားသည် ကွန်တိန်နာတစ်ခုစီ max-width
၏မူရင်း .container
နှင့် .container-fluid
ဖောက်ပြန်မှတ်တိုင်တစ်ခုစီကို မည်သို့နှိုင်းယှဉ်ဖော်ပြသည် ။
၎င်းတို့ကို လုပ်ဆောင်ချက်တွင် ကြည့်ရှုပြီး ကျွန်ုပ်တို့၏ Grid ဥပမာ တွင် ၎င်းတို့ကို နှိုင်းယှဉ်ပါ ။
အပိုသေးငယ်သော <576px |
အသေးစား ≥576px |
အလယ်အလတ် ≥768px |
ကြီးမားသော ≥992px |
ပိုကြီးသော ≥1200px |
|
---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px |
.container-sm |
100% | 540px | 720px | 960px | 1140px |
.container-md |
100% | 100% | 720px | 960px | 1140px |
.container-lg |
100% | 100% | 100% | 960px | 1140px |
.container-xl |
100% | 100% | 100% | 100% | 1140px |
.container-fluid |
100% | 100% | 100% | 100% | 100% |
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% ကျယ်ပြန့် သည်၊ ၎င်းသည် , , နှင့် .sm
md
lg
xl
<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
min-
နှင့် max-
ရှေ့ဆက် မှုများနှင့် viewports များကို ဝိုင်းဝန်းလုပ်ဆောင်နေကြောင်း သတိပြုပါ။ .
တစ်ဖန်၊ ဤမီဒီယာမေးမြန်းချက်များကို 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 တွင်၊ ကျွန်ုပ်တို့သည် ပေါက်ဖော်ဒြပ်စင်များပေါ်တွင် ၎င်းတို့၏ နယ်နိမိတ်ကိုပြသရန် ပိုမိုမြင့်မားသောတန်ဖိုးဖြင့် ရှေ့ဆုံးသို့ ယူဆောင်လာပါသည်။1
2
3
z-index