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

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

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

v5.2.0

ပြန်လည်ဆန်းသစ်ထားသော ဒီဇိုင်း

Bootstrap v5.2.0 သည် ပရောဂျက်တစ်လျှောက် လက်တစ်ဆုပ်စာ အစိတ်အပိုင်းများနှင့် ဂုဏ်သတ္တိများအတွက် သိမ်မွေ့သော ဒီဇိုင်းမွမ်းမံမှုတစ်ခု ပါရှိသည်။ အထူးသဖြင့် border-radiusခလုတ်များနှင့် ဖောင်ပုံစံထိန်းချုပ်မှုများတွင် သန့်စင်ထားသော တန်ဖိုးများ မှတစ်ဆင့် မှတ်သားဖွယ်ရာ ဖြစ်သည်။ ကျွန်ုပ်တို့၏စာရွက်စာတမ်းများကို ပင်မစာမျက်နှာအသစ်၊ ဘေးဘား၏အပိုင်းများကို မပြိုကျတော့ဘဲ ပိုမိုရိုးရှင်းသော docs အပြင်အဆင်၊ နှင့် Bootstrap Icons များ၏ ပိုမိုထင်ရှားသော ဥပမာများဖြင့်လည်း မွမ်းမံ ထားပါသည်။

နောက်ထပ် CSS ကိန်းရှင်များ

CSS variable များကိုအသုံးပြုရန်အတွက် ကျွန်ုပ်တို့၏အစိတ်အပိုင်းအားလုံးကို အပ်ဒိတ်လုပ်ထားပါသည်။ Sass သည် အရာအားလုံးကို ပံ့ပိုးပေးနေဆဲဖြစ်သော်လည်း၊ .btnBootstrap ၏ အချိန်နှင့်တစ်ပြေးညီ စိတ်ကြိုက်ချိန်ညှိနိုင်စေမည့် အစိတ်အပိုင်းတစ်ခုစီတွင် CSS variables များပါဝင်ရန် အစိတ်အပိုင်းတစ်ခုစီကို အဆင့်မြှင့်တင်ထားပါသည်။ နောက်ဆက်တွဲထုတ်ဝေမှုများတွင်၊ ကျွန်ုပ်တို့၏ အသွင်အပြင်၊ ဖောင်များ၊ အထောက်အကူများနှင့် အသုံးအဆောင်များအဖြစ် CSS variable များအသုံးပြုမှုကို ဆက်လက်တိုးချဲ့သွားပါမည်။ ၎င်းတို့၏ သက်ဆိုင်ရာစာရွက်စာတမ်းစာမျက်နှာများရှိ အစိတ်အပိုင်းတစ်ခုစီရှိ CSS ကိန်းရှင်များအကြောင်း ပိုမိုဖတ်ရှုပါ။

Bootstrap 6 အထိ ကျွန်ုပ်တို့၏ CSS variable အသုံးပြုမှုမှာ အနည်းငယ် မပြည့်စုံတော့ပါ။ ကျွန်ုပ်တို့သည် ၎င်းတို့ကို ဘုတ်အဖွဲ့အနှံ့ အပြည့်အဝ အကောင်အထည် ဖော်လိုသော်လည်း ၎င်းတို့သည် ပျက်စီးနေသော အပြောင်းအလဲများကို ဖြစ်ပေါ်စေမည့် အန္တရာယ်ကို လုပ်ဆောင်ပါသည်။ ဥပမာအားဖြင့်၊ သင်သည် အကြောင်းတစ်ခုခုကြောင့် $alert-border-width: var(--bs-border-width)လုပ်ဆောင်နေပါက ကျွန်ုပ်တို့၏ အရင်းအမြစ်ကုဒ်တွင် ဆက်တင်သည် သင့်ကိုယ်ပိုင်ကုဒ်တွင် ဖြစ်နိုင်ချေရှိသော Sass ကို ချိုးဖျက် ပါသည်။$alert-border-width * 2

ထို့ကြောင့် ဖြစ်နိုင်သမျှ၊ ကျွန်ုပ်တို့သည် နောက်ထပ် CSS variable များဆီသို့ ဆက်လက်တွန်းအားပေးသွားပါမည်၊ သို့သော် ကျွန်ုပ်တို့၏အကောင်အထည်ဖော်မှုသည် v5 တွင် အနည်းငယ်ကန့်သတ်ထားနိုင်သည်ကို ကျေးဇူးပြု၍ သတိပြုပါ။

အသစ်`_maps.scss`

Bootstrap v5.2.0 သည် Sass ဖိုင်အသစ်ကို မိတ်ဆက်ပေးခဲ့သည် _maps.scss။ _variables.scssမူရင်းမြေပုံအား အပ်ဒိတ်များကို တိုးချဲ့ထားသော ဒုတိယမြေပုံများတွင် အသုံးမပြုသည့် ပြဿနာကို ဖြေရှင်းရန်အတွက် ၎င်းသည် Sass မြေပုံများစွာကို ဖယ်ရှားပေးပါသည်။ ဥပမာအားဖြင့်၊ အပ်ဒိတ်များကို $theme-colorsအားကိုးအားထားပြုသော အခြားအခင်းအကျင်းမြေပုံများတွင် အသုံးချခြင်းမရှိပါ $theme-colors၊ သော့စိတ်ကြိုက်ပြင်ဆင်ခြင်းလုပ်ငန်းအသွားအလာများကို ချိုးဖျက်ခြင်း။ အတိုချုပ်အားဖြင့်၊ Sass တွင် မူရင်းကိန်းရှင် သို့မဟုတ် မြေပုံကို အသုံးပြုပြီးသည် နှင့် ၎င်းကို အပ်ဒိတ်လုပ်၍မရနိုင်သည့် ကန့်သတ်ချက်တစ်ခုရှိသည်။ အခြား CSS variable များကို ရေးဖွဲ့ရာတွင် ၎င်းတို့ကို အသုံးပြုသည့်အခါ CSS variable များနှင့် အလားတူ ချို့ယွင်းချက်တစ်ခုရှိသည်။

ထို့ကြောင့် Bootstrap တွင် ပြောင်းလဲနိုင်သော စိတ်ကြိုက်ပြင်ဆင်မှုများသည် ယခင်နှင့် ကျွန်ုပ်တို့၏ တင်သွင်းမှုအစုစု၏ ကျန်ရှိမှုနောက်သို့ လိုက်လာရ @import "functions"မည်ဖြစ်ပါသည် @import "variables"။ Sass မြေပုံများနှင့် တူညီသည်—၎င်းတို့ကို အသုံးမပြုမီ ပုံသေများကို အစားထိုးရပါမည်။ အောက်ပါမြေပုံများကို အသစ်သို့ ရွှေ့လိုက်သည် _maps.scss။

$theme-colors-rgb
$utilities-colors
$utilities-text
$utilities-text-colors
$utilities-bg
$utilities-bg-colors
$negative-spacers
$gutters

သင်၏ စိတ်ကြိုက် Bootstrap CSS တည်ဆောက်မှုများသည် သီးခြားမြေပုံများ တင်သွင်းခြင်းဖြင့် ယခု ဤကဲ့သို့ အသွင်အပြင် ဖြစ်သင့်သည်။

  // Functions come first
  @import "functions";

  // Optional variable overrides here
+ $custom-color: #df711b;
+ $custom-theme-colors: (
+   "custom": $custom-color
+ );

  // Variables come next
  @import "variables";

+ // Optional Sass map overrides here
+ $theme-colors: map-merge($theme-colors, $custom-theme-colors);
+
+ // Followed by our default maps
+ @import "maps";
+
  // Rest of our imports
  @import "mixins";
  @import "utilities";
  @import "root";
  @import "reboot";
  // etc

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

font-weightsemibold.fw-semibold ဖောင့်များ ပါဝင်ရန် ချဲ့ထွင်ထားသော အသုံးဝင်မှုများ။
အရွယ်အစားအသစ် နှစ်ခုပါဝင်ရန် နှင့် နောက်ထပ်ရွေးချယ်စရာများအတွက် ချဲ့ထွင်ထားသော border-radiusအသုံးဝင် မှုများ။.rounded-4.rounded-5

ထပ်လောင်းပြောင်းလဲမှုများ

$enable-container-classesရွေးချယ်မှု အသစ်ကို မိတ်ဆက်ပေးခဲ့သည် ။ — ယခု စမ်းသပ်ဆဲ CSS Grid အပြင်အဆင်ကို ရွေးချယ်လိုက်သောအခါ .container-*၊ ဤရွေးချယ်မှုကို false. ယခုအခါ ကွန်တိန်နာများသည် ၎င်းတို့၏ ရေမြောင်းတန်ဖိုးများကို သိမ်းဆည်းထားသည်။
Offcanvas အစိတ်အပိုင်းသည် ယခုအခါ တုံ့ပြန်မှုပုံစံများ ရှိသည်။ မူရင်း .offcanvasအတန်းသည် မပြောင်းလဲပါ - ၎င်းသည် viewports အားလုံးတွင် အကြောင်းအရာကို ဝှက်ထားသည်။ တုံ့ပြန်မှုရှိစေရန်၊ ထို .offcanvasအတန်းကို မည်သည့် .offcanvas-{sm|md|lg|xl|xxl}အတန်းသို့ ပြောင်းပါ။
ပိုထူသော ဇယားကွက်များကို ယခုရွေးချယ်ဝင်ရောက်ပါပြီ။ — ကျွန်ုပ်တို့သည် ဇယားအုပ်စုများကြားတွင် ဘောင်ကိုကျော်ရန် ပိုထူထပ်၍ ခက်ခဲမှုကို ဖယ်ရှားပြီး ၎င်းကို သင်လျှောက်ထားနိုင်သော ရွေးချယ်နိုင်သော အတန်းသို့ ရွှေ့ .table-group-dividerထားပါသည်။ ဥပမာတစ်ခုအတွက် table docs ကိုကြည့်ပါ။
Scrollspy သည် Intersection Observer API ကို အသုံးပြုရန်အတွက် ပြန်လည်ရေးသားထားသည် ၊ ဆိုလိုသည်မှာ သင့်တွင် ဆွေမျိုးမိဘအထုပ်အပိုးများကို မလိုအပ်တော့ဘဲ၊offsetconfig ကို ရပ်ဆိုင်းထားခြင်းနှင့် အခြားအရာများကို မလိုအပ်တော့ပါ။ သင်၏ Scrollspy အကောင်အထည်ဖော်မှုများကို ၎င်းတို့၏ navlighting တွင် ပိုမိုတိကျပြီး တသမတ်တည်းဖြစ်စေရန် ရှာဖွေပါ။
Popovers နှင့် tooltips များသည် CSS variables များကို ယခုသုံးပါသည်။ ကိန်းရှင်အရေအတွက်ကို လျှော့ချရန်အတွက် အချို့သော CSS variable များကို ၎င်းတို့၏ Sass အတွဲများမှ အပ်ဒိတ်လုပ်ထားပါသည်။ ရလဒ်အနေဖြင့်၊ ဤထုတ်ဝေမှုတွင် ကိန်းရှင်သုံးခုကို ငြင်းပယ်ခဲ့သည်- $popover-arrow-color, $popover-arrow-outer-color, နှင့် $tooltip-arrow-color.
.text-bg-{color}အထောက်အကူ အသစ်များ ထည့်ပေးခဲ့သည် ။ .text-*တစ်သီးပုဂ္ဂလ နှင့် အသုံးအဆောင်များ ကို သတ်မှတ်မည့်အစား ၊ ဆန့်ကျင်ဘက်ရှေ့မျက်နှာစာနှင့် သတ်မှတ်ရန် အထောက်အကူ များကို .bg-*ယခု သင်အသုံးပြုနိုင်ပါပြီ ။.text-bg-*background-colorcolor
.form-check-reverseအညွှန်းများနှင့် ဆက်စပ်နေသည့် အမှန်ခြစ်ပုံးများ/ရေဒီယိုများ ၏အစီအမံကိုလှန်ရန် ပြုပြင်မွမ်းမံမှုကို ထည့်သွင်း ထားသည်။
အတန်း သစ်မှတစ်ဆင့် ဇယားများသို့ အစင်းလိုက်ကော်လံများ ထည့်သွင်း ထားသည်။.table-striped-columns

ပြောင်းလဲမှုစာရင်းအပြည့်အစုံအတွက် GitHub ရှိ v5.2.0 ပရောဂျက်ကို ကြည့်ပါ ။

v5.1.0

CSS Grid အပြင်အဆင် အတွက် စမ်းသပ်မှု ပံ့ပိုးမှု ပေါင်းထည့် ထားသည်။ — ၎င်းသည် လုပ်ဆောင်ဆဲဖြစ်ပြီး၊ ထုတ်လုပ်အသုံးပြုရန်အတွက် အဆင်သင့်မဖြစ်သေးသော်လည်း Sass မှတစ်ဆင့် အင်္ဂါရပ်အသစ်သို့ သင်ရွေးချယ်နိုင်ပါသည်။ ၎င်းကိုဖွင့်ရန်၊ ဆက်တင် $enable-grid-classes: falseဖြင့် CSS Grid ကို သတ်မှတ်ပြီး ဖွင့်ခြင်း ဖြင့် မူလဇယားကွက်ကို ပိတ်ပါ $enable-cssgrid: true။
offcanvas ကိုပံ့ပိုးရန် navbar များကို အပ်ဒိတ်လုပ်ထားသည်။ — တုံ့ပြန်မှုရှိသော အတန်းများနှင့် offcanvas markup အချို့ နှင့်အတူ မည်သည့် navbar တွင်မဆို offcanvas အံဆွဲများကို ထည့်ပါ ။.navbar-expand-*
နေရာယူထားသည့် အစိတ်အပိုင်း အသစ်ကို ထပ်ထည့် ထားသည်။ — သင့်ဆိုက် သို့မဟုတ် အက်ပ်တွင် တစ်ခုခုတင်နေသေးကြောင်း ညွှန်ပြရန် ကျွန်ုပ်တို့၏နောက်ဆုံးပေါ်အစိတ်အပိုင်း၊ စစ်မှန်သောအကြောင်းအရာအစား ယာယီပိတ်ဆို့မှုများကို ပံ့ပိုးပေးသည့်နည်းလမ်း။
ယခု ခေါက်သိမ်းခြင်း ပလပ်အင်သည် အလျားလိုက် ပြိုကျ ခြင်းကို ပံ့ပိုး ပေးပါသည်။ - အစားကို ပြိုကျ .collapse-horizontalရန် သင့် ထဲသို့ ထည့်ပါ ။ သို့မဟုတ် . _.collapsewidthheightmin-heightheight
stack အသစ်နှင့် ဒေါင်လိုက် စည်းမျဉ်း အထောက်အကူများကို ထပ်ထည့်ထားသည်။ — stacks များဖြင့် စိတ်ကြိုက်လက်ကွက်များကို အမြန်ဖန်တီးရန် flexbox ဂုဏ်သတ္တိများစွာကို အမြန်အသုံးပြုပါ ။ .hstackအလျားလိုက် ( ) နှင့် ဒေါင်လိုက် ( ) အတွဲများမှ ရွေး .vstackပါ။ အကူအညီ အသစ်များ<hr> ဖြင့် ဒေါင်လိုက် ပိုင်းခြားမှုများကို ထည့်ပါ ။.vr
:rootကမ္ဘာလုံးဆိုင်ရာ CSS variable အသစ်များကို ပေါင်းထည့် ထားသည်။ — စတိုင်များ :rootကို ထိန်းချုပ်ရန်အတွက် အဆင့် သို့ CSS variable အသစ်များစွာကို ပေါင်းထည့်ခဲ့သည် ။ <body>ကျွန်ုပ်တို့၏ utilities များနှင့် အစိတ်အပိုင်းများအပါအဝင် အခြားအလုပ်များတွင် ပါဝင်နေသော်လည်း ယခု Customize section ရှိ CSS variable များကို ဖတ်ပါ ။
CSS variables များကိုအသုံးပြုရန် အရောင်နှင့် နောက်ခံအပလီကေးရှင်းများကို ပြုပြင်မွမ်းမံပြီး စာသားအလင်းပိတ်ခြင်း နှင့် နောက်ခံအလင်း ပွင့်ခြင်းဆိုင်ရာ အသုံးဝင်မှုများအသစ်များကို ထပ်လောင်းထည့် ထားပါသည်။ — .text-* နှင့် .bg-*ယခုအခါ အသုံးဝင်မှုများကို CSS variable များနှင့် rgba()အရောင်တန်ဖိုးများဖြင့် တည်ဆောက်ထားပြီး၊ သင်သည် မည်သည့် utility ကိုမဆို opacity utilities အသစ်များဖြင့် အလွယ်တကူ စိတ်ကြိုက်ပြင်ဆင်နိုင်စေမည်ဖြစ်သည်။
ကျွန်ုပ်တို့၏အစိတ်အပိုင်းများကို စိတ်ကြိုက်ချိန်ညှိနည်းကိုပြသရန် အခြေခံထားသော အတိုအထွာနမူနာအသစ်များကို ထပ်ထည့်ထားသည်။ — ကျွန်ုပ်တို့၏ Snippets နမူနာ အသစ်များဖြင့် စိတ်ကြိုက်အစိတ်အပိုင်းများနှင့် အခြားသော ဘုံဒီဇိုင်းပုံစံများကို အသုံးပြုရန် အဆင်သင့်ဆွဲပါ ။ အောက်ခြေမှတ်စုများ ၊ dropdowns ၊ list group နှင့် modals များ ပါဝင်သည် ။
Popper ကသာ ကိုင်တွယ်ထားသောကြောင့် အသုံးမပြုသော နေရာချထားခြင်းစတိုင်များကို popovers နှင့် tooltips များမှ ဖယ်ရှားလိုက်ပါ ။ $tooltip-marginကန့်ကွက်ထားပြီး nullလုပ်ငန်းစဉ်တွင် သတ်မှတ်ထားသည်။

နောက်ထပ် အချက်အလက် လိုချင်ပါသလား။ v5.1.0 ဘလော့ဂ်ပို့စ်ကို ဖတ်ပါ။

ဟေ့ဒီမှာ! ကျွန်ုပ်တို့၏ ပထမဆုံး Bootstrap 5, v5.0.0 ၏ အဓိကထွက်ရှိမှုဆိုင်ရာ အပြောင်းအလဲများကို အောက်တွင် မှတ်တမ်းတင်ထားပါသည်။ ၎င်းတို့သည် အထက်တွင်ပြသထားသည့် နောက်ထပ်ပြောင်းလဲမှုများကို ရောင်ပြန်ဟပ်ခြင်းမရှိပါ။

မှီခိုမှု

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 အရောင်နေရာနှင့် မသက်ဆိုင်တော့သောကြောင့် 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-control.custom-checkboxအခု .form-check.
- .custom-control.custom-custom-radioအခု .form-check.
- .custom-control.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 အစိတ်အပိုင်းကို ပြောင်းလဲခြင်းဖြင့် သင်ဆန္ဒရှိသည့်အတိုင်း အကူအညီစာသားကို လိုင်းအတွင်းဖန်တီးရန် သို့မဟုတ် ပိတ်ဆို့နိုင်စေမည်ဖြစ်သည်။
heightဖောင်ထိန်းချုပ်မှုများကို ဖြစ်နိုင်သည့်အခါတွင် ပုံသေအသုံးမပြုတော့ဘဲ min-heightအခြားအစိတ်အပိုင်းများနှင့် စိတ်ကြိုက်ပြင်ဆင်ခြင်းနှင့် လိုက်ဖက်ညီမှုကို မြှင့်တင်ရန် ဆိုင်းငံ့ထားသည်။
<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 ၏ positioning ကို static သို့မဟုတ် dropdown သည် navbar တွင်ရှိနေသောအခါတွင် 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 လိုအပ်သည်)။
နင်နဲ့အတန်း ကို s တွင် .activeအသုံးချ၍မရတော့ပါ .nav-item၊ ၎င်းကို s တွင် တိုက်ရိုက်အသုံးချရပါမည် .nav-link။

ကင်းဗတ်

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 ရွေးချယ်သည့်ကိရိယာကို ကျော်ဖြတ်နိုင်သည်-
```
const modal = new bootstrap.Modal('#myModal')
const 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()ခဲ့သည်။