in English

v5 သို့ ပြောင်းရွှေ့နေသည်

သင့်အား v4 မှ v5 သို့ပြောင်းရွှေ့ရာတွင်ကူညီရန် Bootstrap အရင်းအမြစ်ဖိုင်များ၊ စာရွက်စာတမ်းများနှင့် အစိတ်အပိုင်းများကို ခြေရာခံပြီး ပြန်လည်သုံးသပ်ပါ။

ဤစာမျက်နှာတွင်

မှီခိုမှု

jQuery ကို ချထားသည်။
Popper v1.x မှ Popper v2.x သို့ အဆင့်မြှင့်ထားသည်။
Libsass ပေးထားသည့် ကျွန်ုပ်တို့၏ Sass compiler အဖြစ် Dart Sass ဖြင့် Libsass ကို အစားထိုးထားသည်။
ကျွန်ုပ်တို့၏စာရွက်စာတမ်းများကိုတည်ဆောက်ရန်အတွက် Jekyll မှ Hugo သို့ပြောင်းရွှေ့ခဲ့သည်။

Browser ပံ့ပိုးမှု

Internet Explorer 10 နှင့် 11 တို့ကို ချပေးခဲ့သည်။
ချထားသော Microsoft Edge < 16 (Legacy Edge)
Firefox < 60 ကို ချထားသည်။
Safari < 12
iOS Safari < 12 ကို ချထားသည်။
Chrome < 60 ကို ချထားသည်။

စာရွက်စာတမ်းပြောင်းလဲမှု

ပင်မစာမျက်နှာ၊ စာရွက်စာတမ်းအပြင်အဆင်နှင့် အောက်ခြေမှတ်စုကို ပြန်လည်ဒီဇိုင်းထုတ်ထားသည်။
ပါဆယ်ထုပ်လမ်းညွှန်အသစ်ကို ထည့် ပေးခဲ့သည် ။
စိတ်ကြိုက်ပြင်ဆင်ခြင်းကဏ္ဍအသစ် ၊ v4 ၏ Theming စာမျက်နှာ ကို အစားထိုးခြင်း ၊ Sass၊ ကမ္ဘာလုံးဆိုင်ရာဖွဲ့စည်းပုံရွေးချယ်မှုများ၊ အရောင်အစီအစဥ်များ၊ CSS variable များနှင့် အခြားအရာများအကြောင်း အသေးစိတ်အသစ်များဖြင့် အစားထိုး ထားပါသည်။
ဖောင်စာရွက်စာတမ်းအားလုံးကို Forms ကဏ္ဍအသစ် အဖြစ် ပြန်လည်ဖွဲ့စည်း ပြီး အကြောင်းအရာကို ပိုမိုအာရုံစိုက်သည့် စာမျက်နှာများအဖြစ် ပိုင်းခြားထားသည်။
အလားတူ၊ အပြင်အဆင်ကဏ္ဍ ကို ဇယားကွက်ပါရှိသော အကြောင်းအရာကို ပိုမိုရှင်းလင်းစွာ ပုံဖော်ရန် အဆင်သင့်ကို အပ်ဒိတ်လုပ်ပါ။
"Navs" အစိတ်အပိုင်းစာမျက်နှာကို "Navs & Tabs" သို့ အမည်ပြောင်းခဲ့သည်။
“စစ်ဆေးမှုများ” စာမျက်နှာကို “စစ်ဆေးမှုများနှင့် ရေဒီယိုများ” ဟု အမည်ပြောင်းခဲ့သည်။
ကျွန်ုပ်တို့၏ဆိုက်များနှင့် docs ဗားရှင်းများကို အလွယ်တကူရနိုင်စေရန်အတွက် navbar ကို ပြန်လည်ဒီဇိုင်းရေးဆွဲပြီး subnav အသစ်တစ်ခု ထပ်ထည့်ထားသည်။
ရှာဖွေမှုအကွက်အတွက် ကီးဘုတ်ဖြတ်လမ်းအသစ်ကို ထည့်ထားသည်- Ctrl + /။

ဆူး

ထပ်နေသောတန်ဖိုးများကို ဖယ်ရှားရန် ပိုမိုလွယ်ကူစေရန် ကျွန်ုပ်တို့သည် မူရင်း Sass မြေပုံ ပေါင်းစပ်မှုများကို ဖယ်ရှားလိုက်ပါသည်။ ယခုသင်သည် Sass မြေပုံကဲ့သို့သောတန်ဖိုးများအားလုံးကိုသတ်မှတ်ရန်လိုအပ်သည်ကိုသတိရပါ $theme-colors။ Sass မြေပုံများ ကို မည်သို့ကိုင်တွယ်ရမည်ကို စစ်ဆေးကြည့်ပါ ။
နင်နဲ့၎င်းသည် YIQ colorspace နှင့် မသက်ဆိုင်တော့သောကြောင့် color-yiq()လုပ်ဆောင်ချက်နှင့် ဆက်စပ်ကိန်းရှင်များကို အမည်ပြောင်း ထားသည်။ #30168 ကိုကြည့်ပါ။color-contrast()
- $yiq-contrasted-thresholdအမည်ပြောင်းသည် $min-contrast-ratio။
- $yiq-text-darkနှင့် $yiq-text-lightအသီးသီး အမည်ပြောင်း $color-contrast-darkကြသည် $color-contrast-light။
နင်နဲ့Media query mixins ကန့်သတ်ချက်များသည် ပိုမိုယုတ္တိနည်းသောချဉ်းကပ်မှုအတွက် ပြောင်းလဲသွားပါသည်။
- media-breakpoint-down()နောက်ထွက်မှတ်အစား breakpoint ကို သူ့ဘာသာသူအသုံးပြုသည် (ဥပမာ၊ ပစ်မှတ်ထက်သေးငယ်သော viewports များ media-breakpoint-down(lg)အစား )။media-breakpoint-down(md)lg
- အလားတူ၊ ပါရာမီတာတွင်ရှိသော ဒုတိယ media-breakpoint-between()ဘောင်သည် နောက်ထွက်မှတ်များအစား breakpoint ကိုယ်တိုင်ကိုလည်း အသုံးပြုသည် (ဥပမာ၊ ပစ်မှတ်များ နှင့် ကြားရှိ viewports များ media-between(sm, lg)အစား အစား )။media-breakpoint-between(sm, md)smlg
နင်နဲ့$enable-print-stylesပရင့်စတိုင်များနှင့် ပြောင်းလဲနိုင်သော ပုံစံများကို ဖယ်ရှား ခဲ့သည်။ ပုံနှိပ်ပြသမှုအတန်းများ ပတ်လည်တွင် ရှိနေဆဲဖြစ်သည်။ #28339 ကိုကြည့်ပါ ။
နင်နဲ့ချပေးထားသော color(), theme-color(), နှင့် gray()လုပ်ဆောင်ချက်များသည် ကိန်းရှင်များကို မျက်နှာသာပေးသည်။ #29083 ကိုကြည့်ပါ ။
နင်နဲ့အမည်ပြောင်းထားသော theme-color-level()လုပ်ဆောင်ချက်သည် color-level()ယခုအခါ အရောင်များအစား သင်အလိုရှိသော မည်သည့်အရောင်ကိုမဆို လက်ခံ $theme-colorပါသည်။ #29083 ကိုကြည့်ပါ - သတိထားပါ- color-level() နောက်ပိုင်းတွင် ပြုတ်ကျခဲ့သည် v5.0.0-alpha3။
နင်နဲ့အမည် ပြောင်းပြီး $enable-prefers-reduced-motion-media-queryနှင့် တိုတိုတုတ်တုတ် $enable-pointer-cursor-for-buttons။$enable-reduced-motion$enable-button-pointers
နင်နဲ့ရောနှောကိုဖယ်ရှားခဲ့သည် bg-gradient-variant()။ ထုတ်လုပ်ထားသော အတန်း .bg-gradientအစား အစိတ်အပိုင်းများသို့ gradient များထည့်ရန် class ကို သုံး ပါ။.bg-gradient-*
နင်နဲ့ ယခင်ကန့်ကွက်ထားသော ရောနှောများကို ဖယ်ရှားထားသည်-
- hover, hover-focus, plain-hover-focus, နှင့်hover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(ဆက်စပ် utility class ကိုလည်း ဖြုတ်ထားတယ်၊ .text-hide)
- visibility()
- form-control-focus()
နင်နဲ့Sass ၏ကိုယ်ပိုင်ရောင်စုံစကေးလုပ်ဆောင်ချက်နှင့်မတိုက်မိ စေရန်အတွက် အမည်ပြောင်း scale-color()သည့်လုပ်ဆောင်ချက် ။shift-color()
box-shadowယခု mixins သည် nullတန်ဖိုးများကို ခွင့်ပြုပြီး noneအငြင်းအခုံများစွာမှ ချလိုက်ပါ။ #30394 ကိုကြည့်ပါ ။
ယခု border-radius()mixin တွင် မူရင်းတန်ဖိုးတစ်ခုရှိသည်။

အရောင်စနစ်

အရောင်စနစ် အသစ်ကို မျက်နှာသာပေးကာ ဖယ်ရှားခဲ့သည့် အရောင်စနစ် color-level()။ $theme-color-intervalကျွန်ုပ်တို့၏ codebase ရှိ လုပ်ဆောင်ချက်များ အားလုံးကို lighten()နှင့် darken()အစားထိုး tint-color()ထားပါသည် shade-color()။ ဤလုပ်ဆောင်ချက်များသည် ပုံသေပမာဏဖြင့် ၎င်း၏အလင်းရောင်ကို ပြောင်းလဲမည့်အစား အဖြူရောင် သို့မဟုတ် အနက်ရောင်နှင့် အရောင်ကို ရောနှောသွားမည်ဖြစ်သည်။ ၎င်း၏ shift-color()အလေးချိန်ကန့်သတ်ချက်သည် အပေါင်း သို့မဟုတ် အနုတ်ရှိမရှိပေါ်မူတည်၍ အရောင်တရောင် သို့မဟုတ် အရိပ်ပေးမည်ဖြစ်သည်။ အသေးစိတ်အချက်အလက်များအတွက် #30622 ကိုကြည့်ပါ ။
Sass variable အသစ်များအဖြစ် အခြေခံအရောင်တစ်ခုစီအတွက် သီးခြားအရောင်ကိုးရောင်ကို အရောင်တိုင်းအတွက် အရောင်များနှင့် အရိပ်အသစ်များကို ပေါင်းထည့်ထားသည်။
အရောင်ခြားနားမှုကို ပိုမိုကောင်းမွန်စေသည်။ WCAG 2.1 AA ခြားနားမှုကို သေချာစေရန် အရောင်အဆင်းအချိုးအစား 3:1 မှ 4.5:1 နှင့် အပြာ၊ အစိမ်း၊ အစိမ်း၊ စိမ်းပြာနှင့် ပန်းရောင်အရောင်များကို အပ်ဒိတ်လုပ်ထားသည်။ ကျွန်ုပ်တို့၏အရောင် ဆန့်ကျင်ဘက်အရောင်ကိုလည်း ပြောင်းလဲ $gray-900ခဲ့သည် $black။
ကျွန်ုပ်တို့၏အရောင်စနစ်အား ပံ့ပိုးရန်၊ ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏အရောင်များကို သင့်လျော်စွာ ရောစပ်ရန်အတွက် စိတ်ကြိုက်အသစ်များ tint-color()နှင့် shade-color()လုပ်ဆောင်ချက်များကို ထည့်သွင်းထားပါသည်။

ဂရစ်မွမ်းမံမှုများ

ခွဲမှတ်အသစ်။ xxlနှင့် အထက် အတွက် ခွဲမှတ် အသစ်ကို ပေါင်းထည့် 1400pxထားသည်။ အခြား ဖြတ်မှတ်များ အားလုံးကို ပြောင်းလဲခြင်းမရှိပါ။
ပိုမိုကောင်းမွန်သော ရေမြောင်းများ။ ရေတံလျှောက်များကို ယခု rems တွင်သတ်မှတ်ထားပြီး v4 ( 1.5rem၊ သို့မဟုတ် 24px၊ အောက် 30px) ထက် ကျဉ်းပါသည်။ ၎င်းသည် ကျွန်ုပ်တို့၏ grid စနစ်၏ ရေမြောင်းများကို ကျွန်ုပ်တို့၏ အကွာအဝေး utilities များနှင့် ချိန်ညှိပေးပါသည်။
- အလျားလိုက်/ဒေါင်လိုက်ရေမြောင်းများ၊ အလျားလိုက်ရေမြောင်းများနှင့် ဒေါင်လိုက်ရေမြောင်းများကို ထိန်းချုပ်ရန် ရေ မြောင်းအတန်းအစား အသစ် ( .g-*, .gx-*, နှင့် ) ကို ထပ်ထည့်ထားသည်။.gy-*
- နင်နဲ့ရေ မြောင်းအသုံးအဆောင်အသစ်များနှင့် ကိုက်ညီ .no-guttersစေရန် အမည်ပြောင်း ထားသည်။.g-0
ကော်လံများကို မသုံးတော့ပါ ၊ ထို့ကြောင့် ၎င်းအပြုအမူကို ပြန်လည်ရယူရန် အချို့သောဒြပ်စင်များသို့ position: relativeသင်ထည့်ရပေမည် ။.position-relative
နင်နဲ့.order-*အသုံးမဝင်တတ်တဲ့ အတန်း ပေါင်းများစွာ ကို ချပေးခဲ့ပါတယ်။ ယခု ကျွန်ုပ်တို့သည် ကွက်လပ်မှသာလျှင် .order-1ဆောင်ရွက်ပေး ပါသည် .order-5။
နင်နဲ့.mediaအသုံးအဆောင်များဖြင့် အလွယ်တကူ ပုံတူပွားနိုင်သောကြောင့် အစိတ်အပိုင်းကို စွန့်ပစ်လိုက်ပါ ။ ဥပမာတစ်ခုအတွက် #28265 နှင့် flex utilities စာမျက်နှာကို ကြည့်ပါ ။
နင်နဲ့ bootstrap-grid.cssbox-sizing: border-boxယခုအခါ ကမ္ဘာလုံးဆိုင်ရာ အကွက်အရွယ်အစားကို ပြန်လည်သတ်မှတ်မည့်အစား ကော်လံနှင့် သာ သက်ဆိုင်ပါသည် ။ ဤနည်းဖြင့် ကျွန်ုပ်တို့၏ ဂရစ်စတိုင်များကို အနှောင့်အယှက်မရှိဘဲ နောက်ထပ်နေရာများတွင် အသုံးပြုနိုင်ပါသည်။
$enable-grid-classesကွန်တိန်နာအတန်းများ၏ မျိုးဆက်များကို မပိတ်တော့ပါ။ #29146 ကိုကြည့်ပါ။
make-colMixin ကို သတ်မှတ်ထားသော အရွယ်အစားမပါဘဲ ပုံမှန် ကော်လံများ ညီတူညီမျှဖြစ်အောင် အပ် ဒိတ် လုပ်ခဲ့သည်။

အကြောင်းအရာ၊ ပြန်လည်စတင်ခြင်း စသည်

RFS ကို မူရင်းအတိုင်း ဖွင့်ထားသည်။ mixin ကိုအသုံးပြုထားသောအတိုင်းအတာကို viewport နှင့်font-size()အလိုအလျောက်ချိန်ညှိပေးမည်ဤအင်္ဂါရပ်ကို ယခင်က v4 ဖြင့် ရွေးချယ်ခဲ့သည်။font-size
နင်နဲ့ကျွန်ုပ်တို့၏ $display-*variable များနှင့် $display-font-sizesSass မြေပုံဖြင့် အစားထိုးရန်အတွက် ကျွန်ုပ်တို့၏ display typography ကို ပြန်လည်ပြင်ဆင်ထားပါသည်။ တစ်ခုတည်းအတွက် တစ်ဦးချင်းစီ $display-*-weightvariable များကို ဖယ်ရှားပြီး $display-font-weightချိန်ညှိထားသော font-sizes ကိုလည်း ဖယ်ရှားခဲ့သည်။
.display-*ခေါင်းစီးအရွယ်အစား အသစ် နှစ်ခု .display-5နှင့် ပေါင်းထည့် .display-6ထားသည်။
လင့်ခ်များကို သတ်မှတ်ထားသော အစိတ်အပိုင်းများ၏ တစ်စိတ်တစ်ပိုင်းမှ မပါဝင်ပါက (မိုးပျံပေါ်တွင်တင်မဟုတ်ဘဲ) ပုံသေဖြင့် မျဉ်းသားထားသည်။
၎င်းတို့၏စတိုင်များကို ပြန်လည်ဆန်းသစ်ရန်နှင့် စတိုင်ပုံစံကို ပိုမိုထိန်းချုပ်ရန်အတွက် CSS variable များဖြင့် ၎င်းတို့ကို ပြန်လည်တည်ဆောက်ရန် ဇယားများကို ဒီဇိုင်း ရေးဆွဲထားသည်။
နင်နဲ့Nested tables များသည် စတိုင်များကို အမွေဆက်ခံခြင်းမရှိတော့ပါ။
နင်နဲ့ .thead-lightဇယားဒြပ်စင် များ ( , , , , နှင့် ) အားလုံးအတွက် အသုံးပြုနိုင်သည့် မူကွဲအတန်းများကို .thead-darkမျက်နှာသာ ပေးထားသည်။.table-*theadtbodytfoottrthtd
နင်နဲ့table-row-variant()Mixin ကို အမည်ပြောင်းပြီး ကန့်သတ် ချက် table-variant()2 ခုသာ လက်ခံသည်- $color(အရောင်အမည်) နှင့် $value(အရောင်ကုဒ်)။ ဘောင်အရောင်နှင့် လေယူလေသိမ်းအရောင်များကို ဇယားကိန်းပြောင်းကိန်းများအလိုက် အလိုအလျောက်တွက်ချက်ပါသည်။
ဇယားဆဲလ် padding variable များကို -yနှင့် -x.
နင်နဲ့.pre-scrollableအတန်း ချလိုက်တယ် ။ #29135 ကိုကြည့်ပါ။
နင်နဲ့ .text-*utilities များသည် လင့်ခ်များဆီသို့ hover နှင့် focus state များကို မထည့်တော့ပါ။ .link-*helper classes အစား အသုံးပြုနိုင်သည် ။ #29267 ကိုကြည့်ပါ။
နင်နဲ့.text-justifyအတန်း ချလိုက်တယ် ။ #29793 ကိုကြည့်ပါ။
မူရင်းအလျားလိုက် padding-leftပေါ်ရှိ <ul>နှင့် <ol>ဒြပ်စင်များကို ဘရောက်ဆာ မူရင်း 40pxမှ ပြန်လည်သတ်မှတ်ပါ 2rem။
မီဒီယာမေးမြန်းမှု မှတစ်ဆင့် ရွှေ့လျားမှုလျှော့ချရန် တောင်းဆိုသည့်အသုံးပြုသူများမှလွဲ၍ တစ်ကမ္ဘာလုံး $enable-smooth-scrollအကျုံးဝင်သည့် ပေါင်းထည့် ထားသည်။ #31877 ကိုကြည့်ပါ။scroll-behavior: smoothprefers-reduced-motion

RTL

flexbox အပြင်အဆင်များတွင်တွေ့ရသော ယုတ္တိဗေဒဂုဏ်သတ္တိများ—ဥပမာ၊ startနှင့် endအစား left. right.

ပုံစံများ

ရေပေါ်ပုံစံအသစ်များ ထပ်ထည့်ထားသည်။ ကျွန်ုပ်တို့သည် Floating တံဆိပ်များနမူနာကို အပြည့်အဝပံ့ပိုးထားသော ဖောင်အစိတ်အပိုင်းများသို့ မြှင့်တင်ထားပါသည်။ Floating labels စာမျက်နှာအသစ်ကို ကြည့်ပါ။
နင်နဲ့ မူရင်းနှင့် စိတ်ကြိုက်ပုံစံ အစိတ်အပိုင်းများကို ပေါင်းစည်းထားသည်။ ဘောက်စ်များ၊ ရေဒီယိုများ၊ ရွေးချယ်မှုများနှင့် v4 တွင် မူရင်းနှင့် စိတ်ကြိုက်အတန်းများပါရှိသော အခြားထည့်သွင်းမှုများကို ပေါင်းစည်းထားသည်။ ယခုအခါ ကျွန်ုပ်တို့၏ ဖောင်ဒြပ်စင်အားလုံးနီးပါးသည် စိတ်ကြိုက် HTML မလိုအပ်ဘဲ အများစုမှာ စိတ်ကြိုက်ဖြစ်နေပါပြီ။
- .custom-checkအခု .form-check.
- .custom-check.custom-switchအခု .form-check.form-switch.
- .custom-selectအခု .form-select.
- .custom-fileအပေါ်မှ စိတ်ကြိုက်စတိုင်များ ဖြင့် .form-fileအစားထိုးထားသည် .form-control။
- .custom-rangeအခု .form-range.
- မွေးရပ်မြေ .form-control-fileနှင့် .form-control-range။
နင်နဲ့ပြုတ်ကျ .input-group-appendပြီး .input-group-prepend။ ယခုသင်သည် ခလုတ်များကိုသာ ထည့်သွင်း .input-group-textနိုင်ပြီး ထည့်သွင်းမှုအုပ်စုများ၏ တိုက်ရိုက်ကလေးများအဖြစ် လုပ်ဆောင်နိုင်ပါပြီ။
တရားဝင်တုံ့ပြန်ချက် တုံ့ပြန်ချက် ချွတ်ယွင်းချက်ပါရှိသော ထည့်သွင်းအုပ်စုရှိ ကာလကြာရှည် ပျောက်ဆုံးနေသော နယ်စပ်အချင်းဝက်ကို နောက်ဆုံးတွင် အတည်ပြုချက်ဖြင့် ထည့်သွင်းသည့်အုပ်စုများသို့ ထပ်လောင်း .has-validationအတန်းတစ်ခုကို ပေါင်းထည့်ခြင်းဖြင့် နောက်ဆုံးတွင် ပြင်ဆင်သည်။
နင်နဲ့ ကျွန်ုပ်တို့၏ ဇယားကွက်စနစ်အတွက် ဖောင်သီးသန့်ပုံစံ အတန်းများကို ချထားသည်။ , .form-group, .form-rowသို့မဟုတ် .form-inline.
နင်နဲ့ဖောင်တံဆိပ်များ ယခု လိုအပ်ပါသည် .form-label။
နင်နဲ့ .form-textမသတ်မှတ်တော့ဘဲ display၊ HTML အစိတ်အပိုင်းကို ပြောင်းလဲခြင်းဖြင့် သင်ဆန္ဒရှိသည့်အတိုင်း အကူအညီစာသားကို လိုင်းအတွင်းဖန်တီးရန် သို့မဟုတ် ပိတ်ဆို့နိုင်စေမည်ဖြစ်သည်။
<select>အတည်ပြုခြင်းအိုင်ကွန်များကို s ဖြင့် အသုံးပြုနိုင်တော့မည် မဟုတ်ပါ multiple။
scss/forms/ထည့်သွင်းသည့်အဖွဲ့စတိုင်များအပါအဝင် အောက်ရှိ အရင်းအမြစ် Sass ဖိုင်များကို ပြန်လည်စီစဉ်ထားသည် ။

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

သတိပေးချက်များ၊ breadcrumbs၊ ကတ်များ၊ dropdowns၊ စာရင်းအုပ်စုများ၊ modals၊ popovers နှင့် tooltips များအတွက် ပေါင်းစည်းထားသော တန်ဖိုးများသည် ကျွန်ုပ်တို့၏ variable paddingကိုအခြေခံ၍ #30564 ကိုကြည့်ပါ ။$spacer

ဘာဂျာ

အကော်ဒီယံ အစိတ်အပိုင်းအသစ် ထပ်ထည့် ထားသည်။

သတိပေးချက်များ

ယခုအခါ သတိပေးချက်များတွင် အိုင်ကွန်များပါသော နမူနာ များ ရှိသည် ။
<hr>အသုံးပြုပြီးသားဖြစ်သောကြောင့် သတိပေးချက်တစ်ခုစီတွင် s အတွက် စိတ်ကြိုက်စတိုင်များကို ဖယ်ရှားထားသည် currentColor။

တံဆိပ်များ

နင်နဲ့.badge-*နောက်ခံအသုံးအဆောင်များအတွက် အရောင်အတန်း အားလုံးကို ချပေးသည် (ဥပမာ၊ .bg-primaryအစား .badge-primary) ကိုအသုံးပြုပါ။
နင်နဲ့စွန့ ် .badge-pillပစ် ထားသည်— .rounded-pillအစား အသုံးဝင်မှုကို အသုံးပြုပါ။
နင်နဲ့ဟိုးမားနှင့် အာရုံခံပုံစံများ <a>နှင့် <button>အစိတ်အပိုင်းများကို ဖယ်ရှားထားသည်။
.25em/ .5emto .35em/ မှ တံဆိပ်များအတွက် ပုံသေအကွက်များကို တိုးမြှင့် .65emထားသည်။

Breadcrumbs

padding, background-color, နှင့် ဖယ်ရှားခြင်းဖြင့် breadcrumbs ၏ ပုံသေအသွင်အပြင်ကို ရိုးရှင်း border-radiusစေသည်။
--bs-breadcrumb-dividerCSS ကို ပြန်လည်ပေါင်းစည်းရန် မလိုအပ်ဘဲ လွယ်ကူစွာ စိတ်ကြိုက်ပြင်ဆင်နိုင်စေရန် CSS စိတ်ကြိုက်ပိုင်ဆိုင်မှုအသစ်ကို ပေါင်းထည့် ထားသည်။

ခလုတ်များ

နင်နဲ့ အမှန်ခြစ်ဘောက်စ်များ သို့မဟုတ် ရေဒီယိုများဖြင့် ခလုတ်များပြောင်းရန် ၊ JavaScript မလိုအပ်တော့ဘဲ အမှတ်အသားအသစ်ပါရှိသည်။ ကျွန်ုပ်တို့သည် ထုပ်ပိုးခြင်းဒြပ်စင်ကို မလိုအပ်တော့ဘဲ၊ ၎င်းသို့ ပေါင်းထည့်.btn-checkကာအတန်းများ<input>နှင့် တွဲချိတ်ပါမည်နည်း။ #30650 ကိုကြည့်ပါ ။ ဤအတွက် စာရွက်စာတမ်းများသည် ကျွန်ုပ်တို့၏ ခလုတ်များ စာမျက်နှာမှ ဖောင်ပုံစံများ ကဏ္ဍအသစ်သို့ ပြောင်းရွှေ့သွားပါပြီ။.btn<label>
နင်နဲ့ အသုံးအဆောင် .btn-blockတွေအတွက် ချပေးတယ်။ .btn-blockခလုတ်များကို အသုံးပြု မည့် အစား လိုအပ်သလို နေရာလွတ်ထားရန် .btnသင့်ခလုတ်များကို ဖုံးအုပ် .d-gridထားပြီး အသုံးဝင်မှုတစ်ခု။ .gap-*၎င်းတို့ကို ပိုမိုထိန်းချုပ်နိုင်စေရန် တုံ့ပြန်မှုရှိသောအတန်းများသို့ ပြောင်းပါ။ ဥပမာအချို့အတွက် Docs ကိုဖတ်ပါ။
button-variant()နောက်ထပ် ကန့်သတ်ဘောင်များကို ပံ့ပိုးရန်အတွက် ကျွန်ုပ်တို့ နှင့် button-outline-variant()mixins ကို အပ် ဒိတ် လုပ်ခဲ့သည်။
ဟိုးမားနှင့် လှုပ်ရှားနေသော အခြေအနေများတွင် ခြားနားမှု တိုးလာကြောင်း သေချာစေရန် ခလုတ်များကို အပ်ဒိတ်လုပ်ထားသည်။
Disabled ခလုတ်များ ရှိလာပါပြီ pointer-events: none;။

ကတ်

နင်နဲ့ငါတို့ဂ ရစ် .card-deckကို မျက်နှာသာပေးလိုက်တယ်။ သင့်ကတ်များကို ကော်လံအတန်း .row-cols-*များတွင် ထုပ်ပိုးပြီး ကတ်ပြားများကို ပြန်လည်ဖန်တီးရန် (သို့သော် တုံ့ပြန်မှု ချိန်ညှိမှုအပေါ် ပိုမိုထိန်းချုပ်မှုဖြင့်)
နင်နဲ့.card-columnsပန်းရံမျက်နှာသာနဲ့ ရေစက် ။ #28922 ကိုကြည့်ပါ ။
နင်နဲ့.cardအခြေခံ ကော်ဒီယံကို အ ကော်ဒီယံ အစိတ်အပိုင်းအသစ် ဖြင့် အစားထိုး ခဲ့သည်။

ဝိုင်းလေး

မှောင်မိုက်သောစာသား၊ ထိန်းချုပ်မှုများနှင့် ညွှန်ကိန်းများအတွက် .carousel-darkမူကွဲ အသစ် (ပိုမိုပေါ့ပါးသောနောက်ခံများအတွက် ကောင်းမွန်သည်)။
Bootstrap Icons မှ SVG အသစ်များဖြင့် အဝိုင်းလေးထိန်းချုပ်မှုများအတွက် chevron အိုင်ကွန်များကို အစားထိုးထားသည် ။

ခလုတ်ကို ပိတ်ပါ။

နင်နဲ့နည်းပါးသော ယေဘူယျအမည်အဖြစ် အမည်ပြောင်း .closeထားသည် ။.btn-close
ယခု ခလုတ်များကို ပိတ်ရန် HTML တွင် background-imageထည့်သွင်းထားသည့် SVG အစား (embedded SVG) ကို အသုံးပြု၍ ×သင်၏ markup ကို ထိစရာမလိုဘဲ ပိုမိုလွယ်ကူစွာ စိတ်ကြိုက်ပြုလုပ်နိုင်စေပါသည်။
ပိုမှောင်သော နောက်ခံများနှင့် ဆန့်ကျင်ဘက် ပိုမိုမြင့်မားသော ခြားနားမှု အိုင်ကွန်များကို ဖွင့်ရန် .btn-close-whiteအသုံးပြုသည့် မူကွဲ အသစ်ကို ထပ်ထည့် ထားသည်။filter: invert(1)

ပြိုကျသည်။

အကော်ဒီယံများအတွက် လိပ်ကျောက်ချခြင်းကို ဖယ်ရှားထားသည်။

ဆွဲချမှုများ

.dropdown-menu-darkလိုအပ်သလောက် မှောင်သော dropdowns အတွက် မူကွဲ အသစ်နှင့် ဆက်စပ်ကိန်းရှင်များကို ပေါင်းထည့် ထားသည်။
$dropdown-padding-x. _
ပိုမိုကောင်းမွန်သော ခြားနားမှုကို ရရှိရန်အတွက် dropdown ပိုင်းခြားမှုကို မှောင်စေသည်။
နင်နဲ့dropdown အတွက် အဖြစ်အပျက်အားလုံးကို ယခု dropdown toggle ခလုတ်တွင် အစပျိုးပြီး ပင်မဒြပ်စင်အထိ ပေါင်းထည့်သည်။
ယခု dropdown menus data-bs-popper="static"တွင် dropdown ၏နေရာချထားမှုသည်တည်ငြိမ်နေပြီး data-bs-popper="none"navbar တွင် dropdown ရှိနေသောအခါတွင် attribute တစ်ခုသတ်မှတ်ထားသည်။ ၎င်းကို ကျွန်ုပ်တို့၏ JavaScript မှ ထည့်သွင်းထားပြီး Popper ၏ နေရာချထားမှုကို မနှောင့်ယှက်ဘဲ စိတ်ကြိုက်အနေအထားစတိုင်များကို အသုံးပြုရန် ကူညီပေးသည်။
နင်နဲ့မူရင်း Popper flipဖွဲ့စည်းမှုပုံစံ၏မျက်နှာသာအတွက် dropdown plugin အတွက်ရွေးချယ်မှု။ လှန်fallbackPlacements မွမ်းမံ မှုတွင် ရွေးစရာ အတွက် ဗလာအခင်းတစ်ခုကို ဖြတ်သန်းခြင်းဖြင့် လှန်လိုက်သောအပြုအမူကို ယခု သင်ပိတ်ထားနိုင်ပါပြီ ။
အလိုအလျောက်ပိတ်သည့် အပြုအမူautoClose ကို ကိုင်တွယ်ရန် ရွေးချယ်မှု အသစ်တစ်ခုဖြင့် ယခု Dropdown Menu များကို နှိပ်နိုင်ပါပြီ ။ ၎င်းကိုအပြန်အလှန်အကျိုးသက်ရောက်စေရန်အတွက် dropdown menu အတွင်းရှိ သို့မဟုတ် အပြင်ဘက်တွင် ကလစ်ကိုလက်ခံရန် ဤရွေးချယ်မှုကို သင်အသုံးပြုနိုင်ပါသည်။
ယခု dropdowns .dropdown-itemသည် s wrapped s ကို ထောက်ပံ့ပေးသည် <li>။

Jumbotron

နင်နဲ့utilities များဖြင့် ပုံတူပွားနိုင်သောကြောင့် jumbotron အစိတ်အပိုင်းကို စွန့်ပစ်လိုက်ပါ။ ဒီမိုအတွက် ကျွန်ုပ်တို့၏ Jumbotron နမူနာအသစ်ကို ကြည့်ပါ။

အုပ်စုစာရင်း

အဖွဲ့များစာရင်းတွင် .list-group-numberedပြုပြင်မွမ်းမံမှု အသစ်ကို ထည့်သွင်း ခဲ့သည်။

ရေတပ်နှင့် တက်ဘ်များ

, , , နှင့် class အတွက် nullvariable အသစ်များကို ထည့် ထားသည်။font-sizefont-weightcolor:hover color.nav-link

Navbar များ

နင်နဲ့Navbars များသည် ယခုအချိန်တွင် အတွင်း၌ ကွန်တိန်နာတစ်ခု လိုအပ်သည် (အကွာအဝေးလိုအပ်ချက်များနှင့် CSS လိုအပ်သည်)။

ကင်းဗတ်

offcanvas အစိတ်အပိုင်း အသစ်ကို ပေါင်းထည့် ခဲ့သည်။

Pagination

ယခု Pagination လင့်ခ် margin-leftများသည် တစ်ခုနှင့်တစ်ခု ကွဲကွာသွားသောအခါ ထောင့်အားလုံးတွင် ဒိုင်းနမစ်ဝိုင်းစက်ဖြင့် စိတ်ကြိုက်ပြင်ဆင်နိုင်ပါပြီ။
transitionpagination links များသို့ s ကို ပေါင်းထည့် ခဲ့သည်။

Popovers

နင်နဲ့ကျွန်ုပ်တို့၏ မူရင်း popover နမူနာပုံစံ .arrowသို့ အမည်ပြောင်း ထားသည်။.popover-arrow
whiteListရွေးချယ်မှုကို အမည်ပြောင်း allowListထားသည်။

လှည့်စားသူများ

ယခုအခါ prefers-reduced-motion: reduceအန်နီမေးရှင်းများကို အရှိန်လျှော့ခြင်းဖြင့် ဂုဏ်ပြုကြသည်။ #31882 ကိုကြည့်ပါ ။
လှည့်ပတ်ကို ဒေါင်လိုက်ချိန်ညှိမှုကို ပိုမိုကောင်းမွန်စေသည်။

ဆန္ဒပြုခြင်း။

နေရာချထားခြင်းဆိုင်ရာ အသုံးအဆောင်များ အကူအညီဖြင့် Toasts များကို တစ်နေရာတွင် နေရာချထား နိုင်ပါပြီ ။.toast-container
မူရင်းဆန္ဒပြုသည့်ကြာချိန်ကို 5 စက္ကန့်သို့ ပြောင်းထားသည်။
ပေါင်မုန့်များမှ ဖယ်ရှားပြီး overflow: hiddenသင့်လျော်သော လုပ်ဆောင်ချက်များဖြင့် အစားထိုး border-radiusပါ calc()။

Tooltips

နင်နဲ့ကျွန်ုပ်တို့၏ မူရင်းကိရိယာအကြံပြုချက် နမူနာပုံစံ .arrowသို့ အမည်ပြောင်းထားသည်။.tooltip-arrow
နင်နဲ့ပေါ့ပ်ပါဒြပ်စင်များ၏ ပိုမိုကောင်းမွန်သောနေရာချထား မှုအတွက် မူရင်းတန်ဖိုးကို fallbackPlacementsပြောင်းလဲ ထားသည်။['top', 'right', 'bottom', 'left']
နင်နဲ့whiteListရွေးချယ်မှုကို အမည်ပြောင်း allowListထားသည်။

အသုံးအဆောင်များ

နင်နဲ့RTL ပံ့ပိုးမှု ဖြည့်စွက်ခြင်းဖြင့် လမ်းညွှန်မှုဆိုင်ရာ အမည်များအစား ယုတ္တိဗေဒဆိုင်ရာ ပိုင်ဆိုင်မှုအမည်များကို အသုံးပြုရန် အသုံးဝင်မှုများစွာကို အမည်ပြောင်းခဲ့သည်-
- အမည် ပြောင်းပြီး .left-*၊ .right-*_ _.start-*.end-*
- အမည် ပြောင်းပြီး .float-left၊ .float-right_ _.float-start.float-end
- အမည် ပြောင်းပြီး .border-left၊ .border-right_ _.border-start.border-end
- အမည် ပြောင်းပြီး .rounded-left၊ .rounded-right_ _.rounded-start.rounded-end
- အမည် ပြောင်းပြီး .ml-*၊ .mr-*_ _.ms-*.me-*
- အမည် ပြောင်းပြီး .pl-*၊ .pr-*_ _.ps-*.pe-*
- အမည် ပြောင်းပြီး .text-left၊ .text-right_ _.text-start.text-end
နင်နဲ့မူရင်းအားဖြင့် အနုတ်လက္ခဏာအနားသတ်များကို ပိတ်ထားသည်။
နောက်ခံဒြပ်စင်များသို့ .bg-bodyလျင်မြန်စွာ သတ်မှတ်ခြင်းအတွက် အတန်း အသစ်ကို ထပ်ထည့်ထားသည်။<body>
, ,top , နှင့် . _ right_ တန်ဖိုးများသည် , , နှင့် ပစ္စည်းတစ်ခုစီအတွက် ပါဝင်သည်။bottomleft050%100%
အသစ်များ .translate-middle-xနှင့် .translate-middle-yအသုံးဝင်မှုများကို အလျားလိုက် သို့မဟုတ် ဒေါင်လိုက် အလယ်ဗဟိုတွင် ပေါင်းထည့်ထားသည်။
border-widthအသုံးအဆောင် အသစ်များ ထပ်ထည့် ထားသည်။
နင်နဲ့ဟု အမည်ပြောင်း .text-monospaceခဲ့သည် .font-monospace။
နင်နဲ့.text-hideအသုံးမပြုသင့်တော့သော စာသားကို ဝှက်ထားရန် ခေတ်နောက်ကျသော နည်းလမ်းဖြစ်သောကြောင့် ဖယ်ရှားလိုက်ပါသည် ။
အသုံးဝင် မှုများ (RFS ဖွင့်ထားသည့်) .fs-*အတွက် အသုံးဝင် မှုများ ပေါင်းထည့် ထားသည်။ font-size၎င်းတို့သည် HTML ၏ ပုံသေခေါင်းစီးများ (1-6၊ အကြီးမှ သေး) ကဲ့သို့ စကေးကို အသုံးပြုပြီး Sass မြေပုံမှတစ်ဆင့် ပြင်ဆင်နိုင်သည်။
နင်နဲ့အတိုချုံးနှင့် ညီညွတ်မှုအတွက် .font-weight-*အသုံးအဆောင်များကို အမည်ပြောင်း ထားသည်။.fw-*
နင်နဲ့အတိုချုံးနှင့် ညီညွတ်မှုအတွက် .font-style-*အသုံးအဆောင်များကို အမည်ပြောင်း ထားသည်။.fst-*
CSS Grid နှင့် flexbox အပြင်အဆင်များအတွက် အသုံးဝင် .d-gridမှုများနှင့် အသစ်သော gaputilities ( ) ကို ပေါင်းထည့် ထားသည်။.gap
နင်နဲ့ဖယ်ရှားပြီး .rounded-smအတန်း rounded-lg၏စကေးအသစ်တစ်ခုကို မိတ်ဆက် .rounded-0ပေးခဲ့သည် .rounded-3။ #31687 ကိုကြည့်ပါ ။
အသုံးဝင်မှုအသစ်များ ထည့်သွင်း ထားသည် line-height- .lh-1, .lh-sm, .lh-baseနှင့် .lh-lg. ဒီမှာ ကြည့် ပါ ။
.d-noneအခြား display utilities များထက် ၎င်းကို ပိုမိုအလေးချိန်ပေးနိုင်ရန် ကျွန်ုပ်တို့၏ CSS ရှိ အသုံးဝင်မှုကို ရွှေ့ ထားသည်။
.visually-hidden-focusableအသုံးပြု၍ ကွန်တိန်နာများပေါ်တွင်လည်း လုပ်ဆောင်ရန် အထောက်အကူအား တိုးချဲ့ :focus-withinခဲ့သည်။

ကူညီသူများ

နင်နဲ့ Responsive Embed Helpers များကို အတန်းအမည်အသစ်များနှင့် မြှင့်တင်ထားသော အပြုအမူများနှင့် အထောက်အကူဖြစ်စေသော အချိုးအစား အထောက်အကူများအဖြစ် အမည်ပြောင်း ထားပြီး အသုံးဝင်သော CSS variable တစ်ခုဖြစ်သည်။
- အချိုးအစား byသို့ ပြောင်းလဲရန် အတန်းများကို အမည်ပြောင်း ထားသည်။ xဥပမာအားဖြင့်၊ .ratio-16by9ယခု .ratio-16x9ဖြစ်သည်။
- .embed-responsive-itemပိုမိုရိုးရှင်းသောရွေးချယ်မှုဖြင့် ကျွန်ုပ်တို့သည် နှင့် element အုပ်စုရွေးချယ်မှုအား ဖယ်ရှား .ratio > *လိုက်ပါသည်။ အတန်းအစား မလိုအပ်တော့ပါ၊ အချိုးအကူသည် ယခု မည်သည့် HTML အစိတ်အပိုင်းနှင့်မဆို အလုပ်လုပ်ပါသည်။
- $embed-responsive-aspect-ratiosSass မြေပုံကို အမည်ပြောင်းပြီး အတန်း $aspect-ratiosအမည်နှင့် ရာခိုင်နှုန်းကို key: valueအတွဲအဖြစ် ထည့်သွင်းရန် ၎င်း၏တန်ဖိုးများကို ရိုးရှင်းအောင်ပြုလုပ်ထားသည်။
- CSS variable များကို ယခုထုတ်လုပ်ပြီး Sass မြေပုံရှိ တန်ဖိုးတစ်ခုစီအတွက် ထည့်သွင်းထားပါသည်။ စိတ်ကြိုက်အချိုးအစား ကို ဖန်တီးရန်အတွက် --bs-aspect-ratioကိန်းရှင်ကို မွမ်းမံပါ ။.ratio
နင်နဲ့ “စခရင်ဖတ်စာ” အတန်းများသည် ယခုအခါ “အမြင်အာရုံဖြင့် ဝှက်ထားသည်” အတန်းများ ဖြစ်သည်။
- Sass ဖိုင်ကို ပြောင်းလိုက်ပါ scss/helpers/_screenreaders.scss။scss/helpers/_visually-hidden.scss
- အမည် .sr-onlyပြောင်းပြီး ၊ .sr-only-focusable_.visually-hidden.visually-hidden-focusable
- အမည် sr-only()ပြောင်းပြီး sr-only-focusable()ရောစပ် visually-hidden()လိုက်ပါ visually-hidden-focusable()။
bootstrap-utilities.cssယခု ကျွန်ုပ်တို့၏ အကူအညီများလည်း ပါဝင်သည်။ အကူအညီပေးသူများကို စိတ်ကြိုက်တည်ဆောက်မှုများတွင် ထည့်သွင်းရန် မလိုအပ်တော့ပါ။

JavaScript

jQuery မှီခို မှုကို ချန်လှပ် ထားပြီး ပုံမှန် JavaScript ရှိစေရန် ပလပ်အင်များကို ပြန်လည်ရေးသားပါ။
နင်နဲ့ယခုအခါတွင် JavaScript ပလပ်အင်အားလုံးအတွက် ဒေတာ attribute များကို ပြင်ပပါတီများနှင့် သင့်ကိုယ်ပိုင်ကုဒ်များထံမှ Bootstrap လုပ်ဆောင်နိုင်စွမ်းကို ခွဲခြားသိမြင်နိုင်စေရန်အတွက် ဒေတာရည်ညွှန်းချက်များ သတ်မှတ်ပေးထားပါသည်။ ဥပမာအားဖြင့်၊ data-bs-toggleကျွန်ုပ်တို့သည် အစားကို အသုံးပြုသည် data-toggle။
ယခုအခါ ပလပ်အင်များအားလုံးသည် CSS ရွေးချယ်မှုအား ပထမအငြင်းအခုံအဖြစ် လက်ခံနိုင်ပါပြီ။ plugin ၏ဥပမာအသစ်တစ်ခုဖန်တီးရန် သင်သည် DOM ဒြပ်စင်တစ်ခု သို့မဟုတ် တရားဝင် CSS ရွေးချယ်သည့်ကိရိယာကို ကျော်ဖြတ်နိုင်သည်-
```
var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigအငြင်းအခုံတစ်ခုအနေဖြင့် Bootstrap ၏မူလ Popper config ကိုလက်ခံသည့်လုပ်ဆောင်ချက်တစ်ခုအနေဖြင့်ဖြတ်သန်းနိုင်သည်၊ သို့မှသာသင်သည်ဤပုံသေပုံစံဖွဲ့စည်းပုံကိုပေါင်းစပ်နိုင်သည်။ dropdowns၊ popovers နှင့် tooltips များတွင် သက်ရောက်မှုရှိသည်။
၎င်းအတွက် မူရင်းတန်ဖိုးကို Popper ဒြပ်စင်များ ပိုမိုကောင်းမွန်စွာ နေရာချထားရန်အတွက် fallbackPlacementsပြောင်းလဲ ထားသည်။ dropdowns၊ popovers နှင့် tooltips များတွင် သက်ရောက်မှုရှိသည်။['top', 'right', 'bottom', 'left']
_getInstance()→ ကဲ့သို့သော အများသူငှာ အငြိမ်နည်းလမ်းများမှ အောက်ခံအမှတ်များကို ဖယ်ရှား getInstance()ခဲ့သည်။