အဓိကအကြောင်းအရာသို့ ကျော်သွားပါ။ စာရွက်စာတမ်းလမ်းညွှန်မှုသို့ ကျော်သွားပါ။
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 ကိုကြည့်ပါ။

  • နင်နဲ့ <hr>အရည်အချင်းကို ပိုမိုကောင်းမွန်စွာ ပံ့ပိုးရန် heightအစား ယခုအခါ အစိတ်အပိုင်းများကို အသုံးပြု ပါ။ ၎င်းသည် ပိုမိုထူထပ်သော ပိုင်းခြားမှုများကို ဖန်တီးရန် padding utilities များကို အသုံးပြုခြင်းကိုလည်း လုပ်ဆောင်နိုင်သည် (ဥပမာ၊ )။bordersize<hr class="py-1">

  • မူရင်းအလျားလိုက် 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ထားသည်။

  • 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) ကို အသုံးပြု၍ &times;သင်၏ 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

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

  • , , , နှင့် class အတွက် nullvariable အသစ်များကို ထည့် ထားသည်။font-sizefont-weightcolor:hover color.nav-link
  • နင်နဲ့Navbars များသည် ယခုအချိန်တွင် အတွင်း၌ ကွန်တိန်နာတစ်ခု လိုအပ်သည် (အကွာအဝေးလိုအပ်ချက်များနှင့် CSS လိုအပ်သည်)။

ကင်းဗတ်

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 can be passed as a function that accepts the Bootstrap’s default Popper config as an argument, so that you can merge this default configuration in your way. Applies to dropdowns, popovers, and tooltips.

  • The default value for the fallbackPlacements is changed to ['top', 'right', 'bottom', 'left'] for better placement of Popper elements. Applies to dropdowns, popovers, and tooltips.

  • Removed underscore from public static methods like _getInstance() → getInstance().