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

Bootstrap 4 သည် ပရောဂျက်တစ်ခုလုံး၏ အဓိကကျသော ပြန်လည်ရေးသားမှုတစ်ခုဖြစ်သည်။ အထင်ရှားဆုံးသော အပြောင်းအလဲများကို အောက်တွင် အကျဉ်းချုံးပြီး နောက်တွင် သက်ဆိုင်ရာ အစိတ်အပိုင်းများအတွက် ပိုမိုတိကျသော အပြောင်းအလဲများ ပါဝင်သည်။

တည်ငြိမ်သောအပြောင်းအလဲများ

Beta 3 မှ ကျွန်ုပ်တို့၏တည်ငြိမ်သော v4.0 ထုတ်ဝေမှုသို့ ပြောင်းရွှေ့နေသည်၊ ဖောက်ပြန်ပြောင်းလဲမှုများမရှိသော်လည်း ထင်ရှားသောပြောင်းလဲမှုအချို့ရှိပါသည်။

ပုံနှိပ်ခြင်း။

• ပျက်စီးနေသော ပရင့်ထုတ်ကိရိယာများကို ပြင်ဆင်ပါ။ ယခင်က class တစ်ခုကို အသုံးပြုခြင်းသည် .d-print-*အခြား class များကို မထင်မှတ်ဘဲ လွှမ်းမိုးသွားလိမ့်မည် .d-*။ @media printယခု၊ ၎င်းတို့သည် ကျွန်ုပ်တို့၏ အခြားပြသမှုအသုံးအဆောင်များနှင့် ကိုက်ညီပြီး ထိုမီဒီယာ ( ) နှင့်သာ သက်ဆိုင် ပါသည်။

• အခြားအသုံးအဆောင်များနှင့် ကိုက်ညီစေရန် ရရှိနိုင်သော ပရင့်ထုတ်ခြင်း ကိရိယာများကို ချဲ့ထားသည်။ Beta 3 နှင့်အထက်တွင်သာ block, inline-block, inline, နှင့် none. Stable v4 flex၊ inline-flex, table, table-row, နှင့် table-cell.

• သတ်မှတ်ထားသော ပရင့်စတိုင်အသစ်များဖြင့် ဘရောက်ဆာများတစ်လျှောက် ပရင့်အစမ်းကြည့်ရှုခြင်းကို ပြင်ဆင်ထားသည် @page size။

Beta 3 အပြောင်းအလဲများ

Beta 2 သည် ဘီတာအဆင့်အတွင်း ကျွန်ုပ်တို့၏ချိုးဖောက်ပြောင်းလဲမှုအမြောက်အများကိုတွေ့မြင်သော်လည်း Beta 3 ထုတ်ဝေမှုတွင် ကိုင်တွယ်ဖြေရှင်းရန် လိုအပ်သည့်အရာအနည်းငယ်ရှိနေသေးသည်။ Beta 2 မှ Beta 3 သို့မဟုတ် Bootstrap ဗားရှင်းအဟောင်းတစ်ခုခုသို့ အပ်ဒိတ်လုပ်နေပါက ဤအပြောင်းအလဲများ အကျုံးဝင်ပါသည်။

အဖြာဖြာ

• $thumbnail-transitionအသုံးမပြုသော ကိန်းရှင် ကို ဖယ်ရှား ခဲ့သည်။ ကျွန်ုပ်တို့သည် မည်သည့်အရာကိုမျှ ကူးပြောင်းခြင်းမပြုသောကြောင့် ၎င်းသည် အပိုကုဒ်မျှသာဖြစ်သည်။
• npm အထုပ်တွင် ကျွန်ုပ်တို့၏အရင်းအမြစ်နှင့် dist ဖိုင်များမှလွဲ၍ အခြားဖိုင်များမပါဝင်တော့ပါ။ ၎င်းတို့ကို မှီခိုပြီး ဖိုင်တွဲမှတစ်ဆင့် ကျွန်ုပ်တို့၏ script များကို အသုံးပြုနေ node_modulesပါက၊ သင်သည် သင်၏လုပ်ငန်းအသွားအလာကို လိုက်လျောညီထွေဖြစ်အောင် လုပ်ဆောင်သင့်သည်။

ပုံစံများ

• စိတ်ကြိုက် နှင့် ပုံသေ အမှတ်ခြစ်ပုံးများနှင့် ရေဒီယို နှစ်ခုလုံးကို ပြန်ရေးပါ။ ယခု၊ နှစ်ခုလုံးတွင် ကိုက်ညီသော HTML ဖွဲ့စည်းပုံ (ပေါက်ဖော် <div>နှင့် အပြင်ဘက်) <input>နှင့် <label>တူညီသော အပြင်အဆင်ပုံစံများ (ပုံသေပုံသေ၊ ပြုပြင်မွမ်းမံမှု အတန်းအစား) ရှိသည်။ ၎င်းသည် ကျွန်ုပ်တို့အား ထည့်သွင်းမှု၏အခြေအနေအပေါ်အခြေခံ၍ အညွှန်းကို ပုံစံထုတ်နိုင်စေကာ၊ ရည်ညွှန်းချက်အတွက် ပံ့ပိုးမှု disabled(ယခင်မိဘအတန်းအစား လိုအပ်သည်) ကို ရိုးရှင်းစေပြီး ကျွန်ုပ်တို့၏ပုံစံအတည်ပြုချက်ကို ပိုမိုကောင်းမွန်စွာပံ့ပိုးပေးနိုင်သည်။

  ဤအရာ၏တစ်စိတ်တစ်ပိုင်းအနေဖြင့်၊ background-imageကျွန်ုပ်တို့သည် စိတ်ကြိုက်ပုံစံ အမှန်ခြစ်ပုံးများနှင့် ရေဒီယိုများပေါ်တွင် s များစွာကို စီမံခန့်ခွဲရန်အတွက် CSS ကို ပြောင်းလဲထားပါသည်။ ယခင်က၊ ယခုဖယ်ရှားလိုက်သော .custom-control-indicatorအစိတ်အပိုင်းတွင် နောက်ခံအရောင်၊ gradient နှင့် SVG အိုင်ကွန်တို့ ပါရှိသည်။ နောက်ခံအရောင်ဖျော့ဖျော့ကို စိတ်ကြိုက်ပြင်ဆင်ခြင်းသည် တစ်ခုတည်းကိုပြောင်းလဲရန် လိုအပ်သည့်အခါတိုင်း ၎င်းအားလုံးကို အစားထိုးခြင်းဖြစ်သည်။ ယခု .custom-control-label::beforeကျွန်ုပ်တို့သည် ဖြည့်စွက်ခြင်းနှင့် gradient နှင့် .custom-control-label::aftericon ကို ကိုင်တွယ်သည်။

  စိတ်ကြိုက်စစ်ဆေးမှုတစ်ခုပြုလုပ်ရန်၊ ပေါင်းထည့်ပါ .custom-control-inline။

• ထည့်သွင်းမှုအခြေခံခလုတ်အုပ်စုများအတွက် အပ်ဒိတ်ရွေးချယ်ရေးကိရိယာကို အပ်ဒိတ်လုပ်ထားသည်။ [data-toggle="buttons"] { }စတိုင်လ်နှင့် အပြုအမူအတွက် အစား ၊ ကျွန်ုပ်တို့သည် JS အပြုအမူများအတွက်သာ ရည်ညွှန်းချက်ကို အသုံးပြုပြီး စတိုင်ပုံစံအတွက် အတန်း dataသစ်ကို အားကိုး ပါသည်။.btn-group-toggle

• ဖယ်ရှားရင်းနဲ့ .col-form-legendအနည်းငယ် တိုးတက်လာပါတယ် .col-form-label။ ဤနည်းဖြင့် .col-form-label-smဒြပ် စင်များ .col-form-label-lgပေါ်တွင် <legend>လွယ်ကူစွာ အသုံးပြုနိုင်ပါသည်။

• စိတ်ကြိုက်ဖိုင်ထည့်သွင်းမှုများသည် ၎င်းတို့၏ $custom-file-textSass ကိန်းရှင်သို့ အပြောင်းအလဲတစ်ခု ရရှိခဲ့သည်။ ၎င်းသည် Sass မြေပုံတစ်ခုမဟုတ်တော့ဘဲ ယခုအခါ Browseကျွန်ုပ်တို့၏ Sass မှထုတ်ပေးသည့် တစ်ခုတည်းသော pseudo-ဒြပ်စင်ဖြစ်သောကြောင့် ခလုတ်တစ်ခုသာ ပါဝါပေးပါသည်။ စာသား Choose fileက အခုမှ လာတာပါ .custom-file-label။

ထည့်သွင်းသည့်အဖွဲ့များ

• Input group addons များသည် input တစ်ခုနှင့် ဆက်စပ်၍ ၎င်းတို့၏ နေရာချထားမှုနှင့် သက်ဆိုင်ပါသည်။ အတန်းသစ်နှစ်တန်း အတွက် .input-group-addonပျက်သွား ပါသည် ။ ကျွန်ုပ်တို့၏ CSS အများစုကို ရိုးရှင်းစေမည့် နောက်ဆက်တွဲတစ်ခု သို့မဟုတ် နောက်ဆက်တွဲကို ယခု သင် အထူးတလည် အသုံးပြုရပါမည်။ နောက်ဆက်တွဲ သို့မဟုတ် ကြိုတင်ပြင်ဆင်မှုအတွင်း၊ သင့်ခလုတ်များကို အခြားနေရာများတွင် တည်ရှိနေသကဲ့သို့ နေရာချပါ၊ သို့သော် စာသားကို ထုပ်ပိုးပါ ။.input-group-btn.input-group-prepend.input-group-append.input-group-text

• ထည့်သွင်းမှုများ အများအပြားပါရှိသည့်အတိုင်း မှန်ကန်ကြောင်း အတည်ပြုခြင်းစတိုင်များကို ယခု ပံ့ပိုးလိုက်ပါပြီ (အုပ်စုတစ်ခုလျှင် ထည့်သွင်းမှုတစ်ခုသာ အတည်ပြုနိုင်သော်လည်း)။

• အရွယ်အစား အတန်းအစား အတန်းများသည် မိဘပေါ်တွင် ရှိရမည် .input-groupဖြစ်ပြီး တစ်ဦးချင်း ဖောင်ဒြပ်စင်များ မဟုတ်ပါ။

Beta 2 အပြောင်းအလဲများ

ဘီတာတွင် ရှိနေစဉ်၊ ကျွန်ုပ်တို့သည် ဖောက်ပြန်ပြောင်းလဲမှုများ မရှိစေရန် ရည်ရွယ်ပါသည်။ သို့သော်၊ အရာအားလုံးသည် စီစဉ်ထားသည့်အတိုင်း ဖြစ်မလာပါ။ Beta 1 မှ Beta 2 သို့ပြောင်းသောအခါတွင် သတိပြုရမည့်အချက်များမှာ အောက်ပါအတိုင်းဖြစ်သည်။

နင်နဲ့

• $badge-colorကိန်းရှင်ကို ဖယ်ရှားပြီး ၎င်း၏အသုံးပြုမှုကို ဖွင့်ထားသည် .badge။ ကျွန်ုပ်တို့သည် ရောင်စုံဆန့်ကျင်ဘက်လုပ်ဆောင်ချက်ကို အသုံးပြု colorသည် background-color၊ ထို့ကြောင့် ကိန်းရှင်သည် မလိုအပ်ပါ။
• CSS ဇာတိ filter နှင့် ကွဲလွဲမှုကို ရှောင်ရှားရန် grayscale()လုပ်ဆောင်ချက်ကို အမည်ပြောင်း ပါ။gray()grayscale
• အခြားနေရာများတွင် အသုံးပြုထားသော ကျွန်ုပ်တို့၏ အရောင်အသွေးအစီအစဥ်များ နှင့် ကိုက်ညီ သော အမည်ပြောင်းခြင်း .table-inverse၊.thead-inverse.thead-default.*-dark.*-light
• ယခုအခါ တုံ့ပြန်မှုဇယားများသည် ဇယားကွက်ခွဲမှတ်တစ်ခုစီအတွက် အတန်းများကို ထုတ်ပေးပါသည်။ .table-responsiveသင်အသုံးပြုနေသည့်အရာသည် ပို၍တူသောကြောင့် ၎င်းသည် Beta 1 မှ ကွဲ ထွက်သွား .table-responsive-mdပါသည်။ သင်ယခု .table-responsiveသို့မဟုတ် .table-responsive-{sm,md,lg,xl}လိုအပ်သလို အသုံးပြုနိုင်ပါသည်။
• ပက်ကေ့ဂျ်မန်နေဂျာအဖြစ် စွန့်ပစ်ထားသော Bower ပံ့ပိုးမှုအား အခြားရွေးချယ်စရာများ (ဥပမာ၊ ချည်ထည် သို့မဟုတ် npm) အတွက် ငြင်းပယ်ထားသည်။ အသေးစိတ်အတွက် bower/bower#2298 ကိုကြည့်ပါ။
• Bootstrap သည် jQuery 1.9.1 နှင့်အထက် လိုအပ်နေသေးသော်လည်း၊ v3.x ၏ ပံ့ပိုးပေးထားသောဘရောက်ဆာများသည် Bootstrap ပံ့ပိုးမှုများအပြင် v3.x တွင် လုံခြုံရေးပြင်ဆင်မှုများအချို့ရှိသောကြောင့် ဗားရှင်း 3.x ကို အသုံးပြုရန် အကြံပြုထားသည်။
• .form-control-labelအသုံးမပြုသော အတန်း ကိုဖယ်ရှား ခဲ့သည်။ အကယ်၍ သင်သည် ဤအတန်းကို အသုံးပြုခဲ့ပါက၊ ၎င်းသည် အလျားလိုက် ဖောင်အပြင်အဆင်များတွင် ၎င်းနှင့်ဆက်စပ်သော ထည့်သွင်းမှုဖြင့် .col-form-labelဒေါင်လိုက်ဗဟိုပြုထားသည့် အတန်း ၏ ပွားနေပါသည်။<label>
• color-yiqပိုင်ဆိုင်မှုကို ပါဝင်သော mixin မှ colorတန်ဖိုးတစ်ခုသို့ ပြန်ပေးသည့် လုပ်ဆောင်ချက်တစ်ခုသို့ ပြောင်းလဲပြီး မည်သည့် CSS ပိုင်ဆိုင်မှုအတွက်မဆို အသုံးပြုခွင့်ပေးသည် ။ ဥပမာအားဖြင့်၊ အစား color-yiq(#000)သင်ရေးပါ color: color-yiq(#000);။

ပေါ်လွင်သည်။

• pointer-eventsModals များတွင် အသုံးပြုမှု အသစ်ကို မိတ်ဆက်ပေးခဲ့သည် ။ အပြင်ဘက် သည် စိတ်ကြိုက်ကလစ်ကိုင်တွယ်ခြင်းအတွက် .modal-dialogအဖြစ်အပျက်များကိုဖြတ်သန်းသွားသည် pointer-events: none(မည်သည့်ကလစ်ကိုမဆို နားဆင်နိုင်စေရန် .modal-backdrop) နှင့် အမှန်တကယ် .modal-contentအားဖြင့် တန်ပြန်တုံ့ပြန်သည် pointer-events: auto။

အကျဉ်းချုပ်

ဤသည်မှာ v3 မှ v4 သို့ပြောင်းသည့်အခါ သင်သတိပြုမိစေမည့် လက်မှတ်အကြီးကြီးဖြစ်သည်။

Browser ပံ့ပိုးမှု

• IE8၊ IE9 နှင့် iOS 6 ပံ့ပိုးမှု ကျဆင်းသွားသည်။ v4 သည် ယခုအခါ IE10+ နှင့် iOS 7+ သာဖြစ်သည်။ နှစ်ခုစလုံးလိုအပ်သောဆိုဒ်များအတွက် v3 ကိုသုံးပါ။
• Android v5.0 Lollipop ၏ဘရောက်ဆာနှင့် WebView အတွက်တရားဝင်ပံ့ပိုးမှုထည့်သွင်းထားသည်။ Android Browser နှင့် WebView ၏ အစောပိုင်းဗားရှင်းများကို တရားဝင်မဟုတ်ပဲ ပံ့ပိုးပေးထားပါသည်။

ကမ္ဘာလုံးဆိုင်ရာပြောင်းလဲမှုများ

• Flexbox ကို မူရင်းအတိုင်း ဖွင့်ထားသည်။ ယေဘူယျအားဖြင့် ၎င်းသည် float များနှင့် ကျွန်ုပ်တို့၏ အစိတ်အပိုင်းများတစ်လျှောက် အခြားအရာများကို ဖယ်ထုတ်ခြင်းကို ဆိုလိုသည်။
• ကျွန်ုပ်တို့၏ အရင်းအမြစ် CSS ဖိုင်များအတွက် Less မှ Sass သို့ ပြောင်းခဲ့သည်။
• ကျွန်ုပ်တို့၏ ပင်မ CSS ယူနစ်အဖြစ်မှ pixels များကို မီဒီယာမေးမြန်းချက်များနှင့် ဇယားကွက်အပြုအမူအတွက် အသုံးပြုနေဆဲဖြစ်သော်လည်း စက်ပစ္စည်းမြင်ကွင်းပို့တ်များကို အမျိုးအစားအရွယ်အစားအလိုက် သက်ရောက်မှုမရှိပါ px။rem
• ကမ္ဘာလုံးဆိုင်ရာ ဖောင့်အရွယ်အစားမှ တိုးလာ 14pxသည် 16px။
• ပဉ္စမရွေးချယ်မှုတစ်ခု (အောက်နှင့်အောက်ရှိ သေးငယ်သောစက်ပစ္စည်းများကို လိပ်စာထည့်သွင်းရန် ) နှင့် အချက်အလက်များကို ထိုအတန်းများမှ 576pxဖယ်ရှားရန် ဂရစ်အဆင့်များကို ပြန်လည်မွမ်းမံထားသည်။ -xsဥပမာ- .col-6.col-sm-4.col-md-3။
• သီးခြားရွေးချယ်နိုင်သော အပြင်အဆင်ကို SCSS ကိန်းရှင်များမှတစ်ဆင့် ပြင်ဆင်သတ်မှတ်နိုင်သော ရွေးချယ်မှုများဖြင့် အစားထိုးခဲ့သည် (ဥပမာ၊ $enable-gradients: true)။
• Grunt အစား npm scripts စီးရီးများကိုသုံးရန် Build system ကို ပြန်လည်ပြင်ဆင်ထားသည်။ package.jsonဇာတ်ညွှန်းများအားလုံးအတွက် သို့မဟုတ် ဒေသဖွံ့ဖြိုးရေးလိုအပ်ချက်များအတွက် ကျွန်ုပ်တို့၏ပရောဂျက် readme ကို ကြည့်ပါ ။
• Bootstrap ၏တုံ့ပြန်မှုမဟုတ်သောအသုံးပြုမှုကို ပံ့ပိုးပေးတော့မည်မဟုတ်ပါ။
• ပိုမိုကျယ်ပြန့်သော စနစ်ထည့်သွင်းမှု စာရွက်စာတမ်းများနှင့် စိတ်ကြိုက်တည်ဆောက်မှုများကို ဦးစားပေး၍ အွန်လိုင်း Customizer ကို ချန်ထားခဲ့သည်။
• အများသုံး CSS ပိုင်ဆိုင်မှု-တန်ဖိုးအတွဲများနှင့် အနားသတ်/အကွက်အကွာအဝေးဖြတ်လမ်းများအတွက် အသုံးဝင်သောအတန်း အသစ် ဒါဇင်များစွာကို ပေါင်းထည့် ထားသည်။

ဂရစ်စနစ်

• flexbox သို့ ရွှေ့ထားသည်။
  • grid mixins နှင့် ကြိုတင်သတ်မှတ်ထားသော အတန်းများတွင် flexbox အတွက် ပံ့ပိုးမှု ပေါင်းထည့်ထားသည်။
  • flexbox ၏ တစ်စိတ်တစ်ပိုင်းအနေဖြင့်၊ ဒေါင်လိုက်နှင့် အလျားလိုက် ချိန်ညှိမှု အတန်းများအတွက် ပံ့ပိုးမှု ပါဝင်သည်။
• ဂရစ်အမျိုးအစားအမည်များနှင့် ဂရစ်အဆင့်အသစ်ကို အပ်ဒိတ်လုပ်ထားသည်။
  • ပိုမိုအသေးစိတ်ထိန်းချုပ်ရန်အတွက် smအောက်တွင် ဂရစ်အဆင့် အသစ်တစ်ခုကို ပေါင်းထည့် ခဲ့သည်။ 768pxယခု ကျွန်ုပ်တို့ xsတွင် , sm, md, lg, နှင့် xl. ၎င်းသည် အဆင့်တိုင်းကို အဆင့်တစ်ခုအထိ မြှင့်တင်ထားသည် (ထို့ကြောင့် .col-md-6v3 တွင် ယခု .col-lg-6v4 ဖြစ်သည်)။
  • xsmin-width: 0ဂရစ်အမျိုးအစားအတန်းများကို ၎င်းတို့သည် သတ်မှတ် pixel တန်ဖိုး တွင် စတင်အသုံးပြုကြောင်းကို ပိုမိုတိကျစွာဖော်ပြရန် infix မလိုအပ်စေရန် ပြုပြင်မွမ်းမံထားပါသည် ။ အစား . .col-xs-6_ .col-6အခြားဂရစ်အဆင့်များအားလုံးသည် infix (ဥပမာ၊ sm) လိုအပ်သည်။
• ဇယားကွက်အရွယ်အစားများ၊ ရောနှောမှုများနှင့် ကိန်းရှင်များကို အပ်ဒိတ်လုပ်ထားသည်။
  • Grid Gutter များတွင် ယခု Sass မြေပုံတစ်ခုရှိနေပြီဖြစ်သောကြောင့် breakpoint တစ်ခုစီတွင် သတ်မှတ်ထားသော Gutter width ကို သင်သတ်မှတ်နိုင်ပါသည်။
  • ကော်လံတစ်ခုချင်းစီ၏အရွယ်အစား ကို သတ်မှတ်ရန် make-col-readyပြင်ဆင်ထားသော ရောစပ်ချက်နှင့် a ကို အသုံးပြုရန်အတွက် ဂရစ်ရောစပ်မင်များကို အပ်ဒိတ် လုပ်ထားသည်။make-colflexmax-width
  • ဇယားကွက်စနစ် မီဒီယာမေးမြန်းမှု ခွဲမှတ်များနှင့် ကွန်တိန်နာအကျယ်များကို ဂရစ်အဆင့်အသစ်အတွက် ထည့်သွင်းပြီး ကော်လံများကို 12၎င်းတို့၏ အမြင့်ဆုံးအကျယ်ဖြင့် အညီအမျှခွဲနိုင်စေရန် သေချာစေပါသည်။
  • သီးခြားကိန်းရှင်လက်တစ်ဆုပ်စာအစား Sass မြေပုံများ ( $grid-breakpointsနှင့် ) မှတစ်ဆင့် Grid breakpoints နှင့် container width များကို ကိုင်တွယ် ဆောင်ရွက်နေပြီဖြစ်သည်။ ၎င်းတို့သည် ကိန်းရှင်များကို လုံးလုံးလျားလျား $container-max-widthsအစားထိုးပြီး ဇယားကွက်အဆင့်များကို အပြည့်အဝ စိတ်ကြိုက်ပြင်ဆင်နိုင်စေပါသည်။@screen-*
  • မီဒီယာတွေရဲ့ မေးမြန်းချက်တွေကလည်း ပြောင်းလဲသွားပါပြီ။ ကျွန်ုပ်တို့၏မီဒီယာမေးမြန်းမှုကြေငြာချက်များကို အကြိမ်တိုင်းတူညီသောတန်ဖိုးဖြင့် ထပ်တလဲလဲပြုလုပ်မည့်အစား ယခု ကျွန်ုပ်တို့တွင်ရှိသည် @include media-breakpoint-up/down/only။ အခုရေးမယ့်အစား @media (min-width: @screen-sm-min) { ... }ရေးလို့ရတယ် @include media-breakpoint-up(sm) { ... }။

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

• အားလုံးအကျုံးဝင်သည့် အစိတ်အပိုင်းအသစ်၊ ကတ်များ အတွက် ချထားသော အကန့်များ၊ ပုံသေးများနှင့် ရေတွင်းများ ။
• Glyphicons အိုင်ကွန်ဖောင့်ကို ချပေးလိုက်ပါ။ အိုင်ကွန်များ လိုအပ်ပါက၊ အချို့သော ရွေးချယ်မှုများမှာ-
  • Glyphicons ၏ အထက်ပိုင်းဗားရှင်း
  • Octicons
  • Font Awesome ပါ။
  • အခြားရွေးချယ်စရာများစာရင်းအတွက် တိုးချဲ့စာမျက်နှာ ကို ကြည့်ပါ ။ နောက်ထပ်အကြံပြုချက်များ ရှိပါသလား။ ပြဿနာတစ်ခု သို့မဟုတ် PR ကိုဖွင့်ပါ။
• Affix jQuery ပလပ်အင်ကို ချလိုက်ပါ။
  • position: stickyအစား သုံးဖို့ အကြံပြုထားပါတယ် ။ HTML5 ကိုကြည့်ပါ အသေးစိတ်အချက်အလက်များနှင့် တိကျသော polyfill အကြံပြုချက်များကို ကျေးဇူးပြု၍ ထည့်သွင်းပါ။ အကြံပြုချက်တစ်ခုမှာ @supports၎င်းကိုအကောင်အထည်ဖော်ရန်အတွက် စည်းမျဉ်းတစ်ခုကို အသုံးပြုရန်ဖြစ်သည် (ဥပမာ၊ @supports (position: sticky) { ... })/
  • အပိုဆောင်း၊ စတိုင်များမဟုတ်သောပုံစံများကိုအသုံးပြုရန် Affix ကိုအသုံးပြုနေပါက၊ positionpolyfills များသည် သင့်အသုံးပြုမှုကိစ္စအား ပံ့ပိုးပေးနိုင်မည်မဟုတ်ပေ။ ထိုသို့သောအသုံးပြုမှုအတွက် ရွေးချယ်စရာတစ်ခုမှာ ပြင်ပ အဖွဲ့အစည်း ScrollPos-Styler စာကြည့်တိုက်ဖြစ်သည်။
• ၎င်းသည် အခြေခံအားဖြင့် အနည်းငယ် စိတ်ကြိုက်ခလုတ်များဖြစ်သောကြောင့် ပေဂျာအစိတ်အပိုင်းကို ချန်လှပ် ထားသည်။
• အတိအကျလွန်ကဲသော ကလေးရွေးချယ်မှုများအစား အပိုမထည့်ထားသော အတန်းရွေးချယ်မှုများအား အသုံးပြုရန်အတွက် အစိတ်အပိုင်းအားလုံးနီးပါးကို ပြန်လည်ပြုပြင် ထားသည်။

အစိတ်အပိုင်းအားဖြင့်

ဤစာရင်းသည် v3.xx နှင့် v4.0.0 အကြား အစိတ်အပိုင်းအလိုက် အဓိကပြောင်းလဲမှုများကို မီးမောင်းထိုးပြသည်။

ပြန်ဖွင့်ပါ။

Bootstrap 4 ၏အ သစ်သည် ကျွန်ုပ်တို့၏ကိုယ်ပိုင်အတန်ငယ်ထင်မြင်ယူဆထားသောပြန်လည်သတ်မှတ်စတိုင်များဖြင့် Normalize တွင်တည်ဆောက်ထားသည့်ပုံစံစာရွက်အသစ်တစ်ခု Reboot ဖြစ်သည်။ ဤဖိုင်တွင် ပေါ်လာသည့် ရွေးချယ်သူများသည် အစိတ်အပိုင်းများကိုသာ အသုံးပြုသည်—ဤနေရာတွင် အတန်းများ မရှိပါ။ ၎င်းသည် ကျွန်ုပ်တို့၏ ပြန်လည်သတ်မှတ်မှုပုံစံများကို ကျွန်ုပ်တို့၏ အစိတ်အပိုင်းစတိုင်များထံ ခွဲထုတ်ထားသည်။ ၎င်းတွင် အရေးကြီးဆုံး ပြန်လည်သတ်မှတ်မှုအချို့မှာ အစိတ်အပိုင်းများစွာ ရှိ ယူနစ် box-sizing: border-boxတစ်ခုမှ ပြောင်းလဲမှု ၊ လင့်ခ်ပုံစံများနှင့် ဖောင်ဒြပ်စင်များစွာကို ပြန်လည်သတ်မှတ်ခြင်းများ ပါဝင်ပါသည်။emrem

စာစီစာရိုက်

• .text-အသုံးဝင်မှု အားလုံးကို _utilities.scssဖိုင်သို့ ရွှေ့ထားသည်။
• နယ်စပ် မှလွဲ၍ .page-header၎င်း၏ပုံစံအားလုံးကို utilities မှတဆင့်အသုံးချနိုင်သည်။
• .dl-horizontalပြုတ်ကျသွားပြီ။ ယင်းအစား၊ ၎င်း နှင့် ကလေးများတွင် ဂရစ်ကော်လံအတန်းများ (သို့မဟုတ် mixins) ကိုဖွ .rowင့ ်ပြီး အသုံးပြုပါ။<dl><dt><dd>
• စိတ်ကြိုက် ပုံစံပုံစံသည် အတန်း များ—နှင့် ပြုပြင်မွမ်းမံမှု <blockquote>သို့ ရွှေ့ ထားသည်။.blockquote.blockquote-reverse
• .list-inlineယခုအခါ ၎င်း၏ကလေးများစာရင်းတွင် ပါဝင်သည့် .list-inline-itemအတန်းသစ်ကို ၎င်းတို့ထံ လျှောက်ထားရန် လိုအပ်ပါသည်။

ပုံများ

• ဟု အမည်ပြောင်း .img-responsiveခဲ့သည် .img-fluid။
• အမည်ပြောင်း .img-roundedခဲ့သည်။.rounded
• အမည်ပြောင်း .img-circleခဲ့သည်။.rounded-circle

စားပွဲများ

• ရွေးချယ် ပေးသူ၏ ဖြစ်ရပ်အားလုံးနီးပါးကို >ဖယ်ရှားလိုက်သည်၊ ဆိုလိုသည်မှာ အစုအဝေးဇယားများသည် ယခုအခါ ၎င်းတို့၏မိဘများထံမှ ပုံစံများကို အလိုအလျောက် အမွေဆက်ခံသွားမည်ဖြစ်သည်။ ၎င်းသည် ကျွန်ုပ်တို့၏ရွေးချယ်မှုများနှင့် ဖြစ်နိုင်ချေရှိသော စိတ်ကြိုက်ပြင်ဆင်မှုများကို များစွာရိုးရှင်းစေသည်။
• တုံ့ပြန်မှုဇယားများသည် ထုပ်ပိုးသည့်ဒြပ်စင်မလိုအပ်တော့ပါ။ အဲဒီအစား၊ .table-responsiveညာဘက်အပေါ်ကို ထားလိုက်ပါ <table>။
• ညီညွတ်မှုအတွက် အမည်ပြောင်း .table-condensedထားသည် ။.table-sm
• .table-inverseရွေးချယ်မှု အသစ်တစ်ခု ထပ်ထည့် ထားသည်။
• ဇယားခေါင်းစီးမွမ်းမံမှုများ ထည့်သွင်းထားသည်- .thead-defaultနှင့် .thead-inverse.
• .table--prefix တစ်ခုရှိရန် ဆက်စပ်အတန်းများကို အမည်ပြောင်း ပါ။ ထို့ကြောင့် .active, .success, .warning, .dangerနှင့် , , , နှင့် . .info_.table-active.table-success.table-warning.table-danger.table-info

ပုံစံများ

• ရွှေ့ထားသော အစိတ်အပိုင်းကို _reboot.scssဖိုင်သို့ ပြန်လည်သတ်မှတ်သည်။
• ဟု အမည်ပြောင်း .control-labelခဲ့သည် .col-form-label။
• အမည်ပြောင်း ၍ .input-lgလည်းကောင်း ၊ _.input-sm.form-control-lg.form-control-sm
• ရိုးရိုး .form-group-*ရှင်းရှင်းလေးအတွက် အတန်းတွေချပေးတယ်။ .form-control-*ယခုအစား အတန်းများကို သုံးပါ ။
• ပိတ်ပင်တားဆီးမှု အဆင့် အကူအညီစာသား .help-blockဖြင့် အစားထိုးလိုက်ပါ ။ .form-textအတွင်းလိုင်းအကူအညီစာသားနှင့် အခြားပြောင်းလွယ်ပြင်လွယ်ရွေးချယ်စရာများအတွက်၊ ကဲ့သို့သော အသုံးဝင်သောအတန်းများကို အသုံးပြုပါ .text-muted။
• ပြုတ်ကျ .radio-inlineပြီး .checkbox-inline။
• ပေါင်းစည်း .checkboxပြီး လူတန်းစား မျိုးစုံကို .radioပေါင်းစည်း သည်။.form-check.form-check-*
• အလျားလိုက်ပုံစံများကို ပြန်လည်ပြင်ဆင်ထားသည်-
  • .form-horizontalအတန်းလိုအပ်ချက်ကို ပယ်ချခဲ့သည် ။
  • .form-group.rowmixin မှတစ်ဆင့် စတိုင်များကို မသုံးတော့ဘဲ ၊ ထို့ကြောင့် .rowအလျားလိုက် ဂရစ်ကွက် အပြင်အဆင်များအတွက် ယခု လိုအပ်သည် (ဥပမာ၊ <div class="form-group row">)။
  • အတန်း သစ် ကို s .col-form-labelဖြင့် ဒေါင်လိုက်ဗဟိုအညွှန်းများသို့ ပေါင်းထည့် .form-controlထားသည်။
  • .form-rowဇယားကွက်အတန်းများနှင့်အတူ ကျစ်လစ်သောပုံစံ အပြင်အဆင်များအတွက် အသစ်ထပ်ထည့် သည် (သင့် .rowကို တစ်ခု .form-rowနှင့်တစ်ခု လဲလှယ်ပါ)။
• ထည့်သွင်းထားသော စိတ်ကြိုက်ပုံစံများကို ပံ့ပိုးပေးသည် (အမှန်ခြစ်ကွက်များ၊ ရေဒီယိုများ၊ ရွေးချယ်မှုများနှင့် ဖိုင်ထည့်သွင်းမှုများအတွက်)။
• CSS နှင့် pseudo-class များ မှတစ်ဆင့် HTML5 ဖောင်အတည်ပြုချက်ဖြင့် အတန်းများကို အစားထိုး သည် .has-error။.has-warning.has-success:invalid:valid
• ဟု အမည်ပြောင်း .form-control-staticခဲ့သည် .form-control-plaintext။

ခလုတ်များ

• ဟု အမည်ပြောင်း .btn-defaultခဲ့သည် .btn-secondary။
• v3 ထက် များစွာသေးငယ်သော အချိုးအစားအတိုင်း .btn-xsအတန်းကို လုံးလုံးလျားလျား ချထားသည် ။.btn-sm
• jQuery plugin ၏ stateful ခလုတ် အင်္ဂါရပ်ကို ဖယ်ရှားလိုက်ပါပြီ။ button.js၎င်းတွင် $().button(string)နည်းလမ်းများ $().button('reset')ပါဝင်သည်။ ကျွန်ုပ်တို့သည် သင်အလိုရှိသည့်အတိုင်း အတိအကျ ပြုမူနေထိုင်ခြင်း၏ အကျိုးကျေးဇူးကို ရရှိစေမည့်အစား စိတ်ကြိုက် JavaScript အနည်းငယ်ကို အသုံးပြုရန် အကြံပြုအပ်ပါသည်။
  • ပလပ်အင်၏ အခြားအင်္ဂါရပ်များ (ခလုတ်စစ��ဆေးပုံးများ၊ ခလုတ်ရေဒီယိုများ၊ ခလုတ်ဖွင့်ခလုတ်များ) ကို v4 တွင် ထိန်းသိမ်းထားကြောင်း သတိပြုပါ။
• ခလုတ်များကို [disabled]IE9 :disabled+ ပံ့ပိုး မှုအဖြစ်သို့ ပြောင်းပါ :disabled။ သို့သော်လည်း IE11 တွင် မူလမသန်စွမ်းသော ကွက်လပ်များ buggy ဖြစ်နေဆဲဖြစ်သောfieldset[disabled] ကြောင့် လိုအပ်နေဆဲ ဖြစ်သည်။

ခလုတ်အုပ်စု

• အစိတ်အပိုင်းကို flexbox ဖြင့် ပြန်ရေးပါ။
• ဖယ်ရှား .btn-group-justifiedခဲ့သည်။ အစားထိုးအဖြစ် သင်သည် <div class="btn-group d-flex" role="group"></div>ဒြပ်စင်များပတ်ထားသော ထုပ်ပိုးမှုအဖြစ် အသုံးပြုနိုင်သည် .w-100။
• .btn-group-xsလုံးဝဖယ်ရှားပေးထားသည့် အတန်း ကို ဖြုတ်ချလိုက်သည် .btn-xs။
• ခလုတ်တူးလ်ဘားများရှိ ခလုတ်အုပ်စုများကြားတွင် ပြတ်သားစွာအကွာအဝေးကို ဖယ်ရှားထားသည်။ margin utilities ကိုယခုအသုံးပြုပါ။
• အခြားအစိတ်အပိုင်းများနှင့် အသုံးပြုရန်အတွက် ပိုမိုကောင်းမွန်သော စာရွက်စာတမ်းများ။

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

• အစိတ်အပိုင်းများ၊ ပြုပြင်မွမ်းမံမှုများ စသည်တို့အတွက် ပင်မရွေးချယ်မှုစနစ်မှ အနည်းကိန်းအတန်းများသို့ ပြောင်းခဲ့သည်။
• အထက်အောက် သို့မဟုတ် အောက်ဘက်သို့ မျက်နှာမူသော မြှားများဖြင့် ပေးပို့ခြင်းမပြုတော့ရန် ရိုးရှင်းသော dropdown ပုံစံများ။
• Dropdowns များကို ယခု <div>s သို့မဟုတ် s ဖြင့် တည်ဆောက် နိုင်ပါသည်။<ul>
• လွယ်လွယ်ကူကူ၊ built-in ပံ့ပိုးမှုပေးနိုင်ရန် <a>နှင့် <button>အခြေခံ dropdown items များအတွက် dropdown styles နှင့် markup ကို ပြန်လည်တည်ဆောက်ထားပါသည်။
• ဟု အမည်ပြောင်း .dividerခဲ့သည် .dropdown-divider။
• ယခု dropdown ပစ္စည်းများ လိုအပ်ပါသည် .dropdown-item။
• Dropdown toggles များသည် ရှင်းလင်းပြတ်သားစွာ မလိုအပ်တော့ပါ <span class="caret"></span>။ ::after၎င်းကို CSS's on မှတစ်ဆင့် အလိုအလျောက် ပေးဆောင်နေပြီ .dropdown-toggleဖြစ်သည်။

ဂရစ်စနစ်

• 576pxgrid breakpoint အသစ်တစ်ခု ထပ်ထည့်လိုက်သည် sm၊ ဆိုလိုသည်မှာ ယခု စုစုပေါင်း အဆင့်ငါးခု ( xs, sm, md, , lg, နှင့် xl) ရှိသည်။
• ပိုမိုရိုးရှင်းသော ဂရစ်အတန်းများအတွက် .col-{breakpoint}-{modifier}-{size}တုံ့ပြန်မှု ရှိသော ဂရစ်မွမ်းမံမှုအတန်းများကို အမည်ပြောင်းပါ ။.{modifier}-{breakpoint}-{size}
• flexbox-powered orderအတန်းသစ်များအတွက် တွန်းအားနှင့် ဆွဲထုတ်သည့် မွမ်းမံမှုအတန်းများ။ ဥပမာအားဖြင့်၊ နှင့် အစား .col-8.push-4၊ .col-4.pull-8သင်သည် .col-8.order-2နှင့် .col-4.order-1.
• ဇယားကွက်စနစ်နှင့် အစိတ်အပိုင်းများအတွက် flexbox အသုံးဝင်မှုအတန်းများကို ထည့်သွင်းထားသည်။

အဖွဲ့များစာရင်း

• အစိတ်အပိုင်းကို flexbox ဖြင့် ပြန်ရေးပါ။
• တိကျ ပြတ်သား a.list-group-itemသော အတန်းအစား၊ .list-group-item-actionလင့်ခ်ပုံစံပုံစံနှင့် ခလုတ်ဗားရှင်းများအတွက်၊
• .list-group-flushကတ်များဖြင့် အသုံးပြုရန် အတန်းကို ထပ်ထည့် ထားသည်။

မော်ဒယ်

• အစိတ်အပိုင်းကို flexbox ဖြင့် ပြန်ရေးပါ။
• Flexbox သို့ ရွှေ့ခြင်းဖြင့် ကျွန်ုပ်တို့ floats များကို အသုံးမပြုတော့သောကြောင့် ခေါင်းစီးရှိ အိုင်ကွန်များကို ထုတ်ပယ်ရန် ချိန်ညှိမှု ပျက်သွားနိုင်သည်။ Floated Content သည် ပထမဦးစွာ ထွက်ပေါ်လာသော်လည်း flexbox ဖြင့် ၎င်းသည် ကိစ္စမဟုတ်တော့ပါ။ ပြုပြင်ရန် modal ခေါင်းစဉ်များပြီးနောက်တွင် သင့်ထုတ်ပယ်ထားသော အိုင်ကွန်များကို အပ်ဒိတ်လုပ်ပါ။
• remoteရွေးချယ်ခွင့် (ပြင်ပအကြောင်းအရာကို မော်ဒယ်တစ်ခုသို့ အလိုအလျောက် တင်ရန်နှင့် ထည့်သွင်းရန် အသုံးပြုနိုင်သည့်) နှင့် သက်ဆိုင်ရာ အစီအစဉ် loaded.bs.modalကို ဖယ်ရှားခဲ့သည်။ client-side templateing သို့မဟုတ် data binding framework သို့မဟုတ် jQuery.load ကို သင့်ကိုယ်သင် ခေါ်ဆိုခြင်းအစား ကျွန်ုပ်တို့ အကြံပြုပါသည်။

ရေတပ်

• အစိတ်အပိုင်းကို flexbox ဖြင့် ပြန်ရေးပါ။
• >မထည့်ထားသော အတန်းများမှတစ်ဆင့် ပိုမိုရိုးရှင်းသော ပုံစံပြုလုပ်ရန်အတွက် ရွေးချယ်သူ အားလုံးနီးပါးကို ချထားသည် ။
• HTML-specific selectors များအစား s၊ s နှင့် s .nav > li > aအတွက် သီးခြားအတန်းများကို အသုံးပြု ပါသည်။ ၎င်းသည် သင်၏ HTML ကို တိုးချဲ့နိုင်မှု တိုးမြင့်လာချိန်တွင် ပိုမိုပြောင်းလွယ်ပြင်လွယ် ဖြစ်စေသည်။.nav.nav-item.nav-link

Navbar

ချိန်ညှိမှု၊ တုံ့ပြန်မှုနှင့် စိတ်ကြိုက်ပြင်ဆင်မှုအတွက် ပိုမိုကောင်းမွန်သောပံ့ပိုးမှုဖြင့် navbar ကို flexbox တွင် လုံးလုံးပြန်လည်ရေးသားထားသည်။

• တုံ့ပြန်မှုရှိသော navbar အပြုအမူများကို သင် navbar ပြိုကျမည့်နေရာကို ရွေးချယ်သည့် လိုအပ်သော.navbar မှတစ်ဆင့် အတန်းသို့ သက်ရောက်နေပြီဖြစ်သည်။ ယခင်က ၎င်းသည် ပြောင်းလဲနိုင်သော မွမ်းမံမှု နည်းပါးပြီး ပြန်လည်ပေါင်းစည်းရန် လိုအပ်ပါသည်။ .navbar-expand-{breakpoint}
• .navbar-defaultအခုလည်း ဒီအတိုင်းပဲ ကျန်တော့တယ် .navbar-light။ ၎င်းတို့ထဲမှ တစ်ခုကို navbar တစ်ခုစီတွင် လိုအပ်ပါသည်။ သို့သော်၊ ဤအတန်းများသည် s ကို မသတ်မှတ်တော့ပါ။ အဲဒီအစား သူတို့သာ အဓိကအားဖြင့် သက်ရောက်မှု ရှိတယ်။.navbar-darkbackground-colorcolor
• ယခုအခါ Navbar များသည် တစ်မျိုးမျိုး၏ နောက်ခံကြေငြာချက် လိုအပ်ပါသည်။ ကျွန်ုပ်တို့၏ နောက်ခံအသုံးအဆောင်များ ( ) မှ ရွေးချယ် ပါ သို့မဟုတ် ရူးသွပ်သော စိတ်ကြိုက်ပြင်ဆင်မှုအတွက်.bg-* အထက်ဖော်ပြပါ အလင်း/ပြောင်းပြန် အတန်းများဖြင့် သင့်ကိုယ်ပိုင် သတ်မှတ်ပါ ။
• flexbox စတိုင်များကိုပေးထားသော၊ navbars များသည် လွယ်ကူသော ချိန်ညှိမှုရွေးချယ်မှုများအတွက် flexbox utilities များကို ယခုအသုံးပြုနိုင်ပါပြီ။
• .navbar-toggleယခုအခါတွင် .navbar-togglerမတူညီသော ပုံစံများနှင့် အတွင်းပိုင်း အမှတ်အသားများ ရှိသည် (၃ <span>စက္ကန့်မျှ) မရှိတော့ပါ။
• .navbar-formအတန်း လုံးလုံး ပျက်သွားသည် ။ မလိုအပ်တော့ပါ။ ၎င်းအစား၊ .form-inlineလိုအပ်သလို margin utilities များကိုသာအသုံးပြုပါ။
• margin-bottomNavbars များတွင် သို့မဟုတ် မူရင်းအတိုင်း မပါဝင်တော့ပါ border-radius။ အသုံးအဆောင်ပစ္စည်းများကို လိုအပ်သလိုအသုံးပြုပါ။
• navbar များပါ၀င်သော နမူနာအားလုံးကို မှတ်သားမှုအသစ်များပါ၀င်စေရန် အပ်ဒိတ်လုပ်ထားပါသည်။

Pagination

• အစိတ်အပိုင်းကို flexbox ဖြင့် ပြန်ရေးပါ။
• s ၏သားစဉ်မြေးဆက်များအတွက်ယခုအချိန်တွင် ရှင်းလင်းပြတ်သားသောအတန်းများ ( .page-item, ) လိုအပ်သည်။.page-link.pagination
• စိတ်ကြိုက်ကောက်ကြောင်းခလုတ်များထက် အနည်းငယ်ပိုသော ကြောင့် .pagerအစိတ်အပိုင်းကို လုံးလုံးချပစ်လိုက်သည်။

Breadcrumbs

• s .breadcrumb-item၏သားစဉ်မြေးဆက်များအတွက်ယခုအချိန်တွင် ရှင်းလင်းပြတ်သားသောလူတန်းစားတစ်ခု လိုအပ်သည်။.breadcrumb

တံဆိပ်များနှင့် တံဆိပ်များ

• ဒြပ်စင် မှ ကွဲလွဲ .labelစေရန် အမည်ပြောင်း ထားသည်။.badge<label>
• .badgeအညွှန်းများနှင့် နီးပါးတူညီသောကြောင့် အစိတ်အပိုင်းကို ချန်ထားခဲ့ပါ ။ .badge-pillအဆိုပါ လုံးဝန်းသောအသွင်အပြင်အတွက် အစား အညွှန်းအစိတ်အပိုင်းနှင့် ပြုပြင်မွမ်းမံမှု ကို အသုံးပြု ပါ။
• တံဆိပ်များသည် စာရင်းအုပ်စုများနှင့် အခြားအစိတ်အပိုင်းများတွင် အလိုအလျောက် မျှောနေတော့မည် မဟုတ်ပါ။ အဲဒါအတွက် Utility Class တွေ လိုအပ်နေပါပြီ။
• .badge-defaultဖြုတ်ချပြီး .badge-secondaryအခြားနေရာများတွင် အသုံးပြုသည့် အစိတ်အပိုင်း မွမ်းမံမှု အတန်းများနှင့် ကိုက်ညီမှုရှိအောင် ပေါင်းထည့်ထားသည်။

အကန့်များ၊ ပုံသေးများနှင့် ရေတွင်းများ

ကတ်အသစ်အတွက် လုံးလုံးလျားလျား ချထားသည်။

ပြားများ

• .panel.cardယခု flexbox ဖြင့်တည်ဆောက်ထားသည် ။
• .panel-defaultဖယ်ရှားပြီး အစားထိုးခြင်းမရှိပါ။
• .panel-groupဖယ်ရှားပြီး အစားထိုးခြင်းမရှိပါ။ .card-groupအစားထိုးတာမဟုတ်ပါဘူး၊ မတူပါဘူး။
• .panel-headingသို့.card-header
• .panel-titleသို့ .card-title. လိုချင်သောပုံစံပေါ် မူတည်၍ ခေါင်းစီးဒြပ်စင်များ သို့မဟုတ် အတန်းများ (ဥပမာ <h3>, .h3) သို့မဟုတ် ရဲရင့်သောဒြပ်စင်များ သို့မဟုတ် အတန်းများ (ဥပမာ <strong>, <b>, .font-weight-bold) တို့ကိုလည်း အသုံးပြုနိုင်ပါသည်။ .card-titleအလားတူ အမည်ပေးထားသော်လည်း၊ အသွင်အပြင်နှင့် ကွဲပြားသည်ကို သတိပြုပါ .panel-title။
• .panel-bodyသို့.card-body
• .panel-footerသို့.card-footer
• .panel-primary, .panel-success, .panel-info, , .panel-warningနှင့် ကျွန်ုပ်တို့၏ Sass မြေပုံ မှ ထုတ်ပေးသော အသုံးအဆောင်များ အတွက် .panel-dangerပြုတ်ကျခဲ့သည် ။.bg-.text-.border$theme-colors

တိုးတက်မှု

• .progress-bar-*ဆက်စပ် အတန်းများကို အသုံးဝင်မှုများဖြင့် အစားထိုးထားသည် .bg-*။ ဥပမာ class="progress-bar progress-bar-danger"ဖြစ်လာသည် class="progress-bar bg-danger"။
• .activeကာတွန်း တိုးတက်မှုဘားများကို ဖြင့် အစားထိုးထားသည် .progress-bar-animated။

ဝိုင်းလေး

• ဒီဇိုင်းနှင့် ပုံစံကို ရိုးရှင်းစေရန်အတွက် အစိတ်အပိုင်းတစ်ခုလုံးကို ပြန်လည်ပြင်ဆင်ခဲ့သည်။ ကျွန်ုပ်တို့တွင် သင့်အတွက် ထပ်လောင်းရန်၊ အညွှန်းအသစ်များနှင့် အိုင်ကွန်အသစ်များ နည်းပါးသွားပါသည်။
• CSS အားလုံးကို အစုအဝေးမှ ဖြုတ်ပြီး အမည်ပြောင်းထားပြီး၊ အတန်းတစ်ခုစီတိုင်းကို ရှေ့တွင်ထည့်ထားကြောင်း သေချာစေ .carousel-ပါသည်။
  • အဝိုင်းလေးအတွက်၊ .next, .prev, .left, နှင့် .rightယခု .carousel-item-next, .carousel-item-prev, .carousel-item-left, နှင့် .carousel-item-right.
  • .itemအခုလည်း ဖြစ်နေပါပြီ .carousel-item။
  • prev/next controls အတွက်၊ .carousel-control.rightနှင့် .carousel-control.leftယခု .carousel-control-nextဖြစ်ပြီး .carousel-control-prev၊ ဆိုလိုသည်မှာ ၎င်းတို့သည် သီးခြား base class မလိုအပ်တော့ပါ။
• တုံ့ပြန်မှုပုံစံအားလုံးကို ဖယ်ရှားလိုက်သည်၊ အသုံးဝင်မှုများ (ဥပမာ- အချို့သော viewports များတွင် စာတန်းများပြသခြင်း) နှင့် လိုအပ်သလို စိတ်ကြိုက်ပုံစံများကို ရွှေ့ဆိုင်းထားသည်။
• အဝိုင်းလေးရှိ အရာများအတွင်းရှိ ပုံများအတွက် ပုံများကို ဖယ်ရှားပြီး အသုံးဝင်မှုများကို ရွှေ့ဆိုင်းထားသည်။
• Markup နှင့် Styles အသစ်များပါ၀င်ရန် ချားရဟတ်နမူနာကို ပြုပြင်ပြောင်းလဲခဲ့သည်။

စားပွဲများ

• ပုံစံပြုလုပ်ထားသော nested tables အတွက် ပံ့ပိုးမှုကို ဖယ်ရှားထားသည်။ ရိုးရှင်းသောရွေးချယ်သူများအတွက် ဇယားပုံစံအားလုံးကို ယခု v4 တွင် အမွေဆက်ခံထားပါသည်။
• ဇယားပြောင်းပြန်ပုံစံကို ထည့်ထားသည်။

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

• ပြသမှု၊ ဝှက်ထားမှုနှင့် အခြားအရာများ-
  • ပြသမှု utilities များကို တုံ့ပြန်မှု ပြုလုပ်ထားသည် (ဥပမာ၊ .d-noneနှင့် d-{sm,md,lg,xl}-none)။
  • ပြသမှု.hidden-* အသစ်အတွက် အသုံးအဆောင် များစွာကို စွန့်ပစ် ခဲ့သည်။ ဥပမာအားဖြင့်၊ အစား ၊ သုံး ပါ။ display utility naming scheme ကိုအသုံးပြုရန်အတွက် utilities များကို အမည်ပြောင်း ခဲ့သည်။ ဤစာမျက်နှာ၏ Responsive utilities ကဏ္ဍအောက်တွင် နောက်ထပ်အချက်အလက်များ။.hidden-sm-up.d-sm-none.hidden-print
  • တုံ့ပြန်မှုရှိသော floats များအတွက် အတန်းများကို ပေါင်းထည့် .float-{sm,md,lg,xl}-{left,right,none}ပြီး ဖယ်ရှားပြီး .pull-leftနှင့် .pull-right၎င်းတို့နှင့် ထပ်ပြီးထပ်နေသောကြောင့် .float-leftဖြစ်သည် .float-right။
• အမျိုးအစား-
  • ကျွန်ုပ်တို့၏ စာသား ချိန်ညှိမှု အတန်းများသို့ တုံ့ပြန်မှု ကွဲပြားမှုများကို ပေါင်းထည့် .text-{sm,md,lg,xl}-{left,center,right}ထားသည်။
• ချိန်ညှိခြင်းနှင့် အကွာအဝေး-
  • အဘက်ဘက်အားလုံးအတွက် တုံ့ပြန်မှုရှိသောအနားသတ်နှင့် အကွက် အသစ်များ အပြင် ဒေါင်လိုက်နှင့် အလျားလိုက်အတိုကောက်များပါ ထပ်ထည့်ထားသည်။
  • Flexbox utilities ၏ သင်္ဘောတင်ဆောင်မှုကို ပေါင်းထည့် ခဲ့သည်။
  • တန်းခွဲ .center-blockသစ်အတွက် ချ .mx-autoပေးခဲ့ပါတယ်။
• ဘရောက်ဆာဗားရှင်းအဟောင်းများအတွက် ပံ့ပိုးမှုချရန် Clearfix ကို အဆင့်မြှင့်ထားသည်။

ရောင်းသူ၏ရှေ့ဆက် mixins

v3.2.0 တွင်ကန့်ကွက်ထားသော Bootstrap 3 ၏ ရောင်းချသူရှေ့ဆက် mixins ကို Bootstrap 4 တွင်ဖယ်ရှား လိုက်ပါသည်။ ကျွန်ုပ်တို့သည် Autoprefixer ကိုအသုံးပြုသော ကြောင့် ၎င်းတို့သည်မလိုအပ်တော့ပါ။

အောက်ပါ mixins များကို ဖယ်ရှားလိုက်သည်- animation, animation-delay, animation-direction, , animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-timing-function, backface-visibility, box-sizing, content-columns, hyphens, opacity, , perspective, , perspective-origin, rotate, , rotateX, , rotateY, scale, scaleX, scaleY, skew, transform-origin, transition-delay, transition-duration, transition-property, transition-timing-function, transition-transform, translate,translate3duser-select

စာတမ်းပြုစုခြင်း။

ကျွန်ုပ်တို့၏စာရွက်စာတမ်းများသည် ဘုတ်အဖွဲ့တစ်လျှောက် အဆင့်မြှင့်တင်မှုတစ်ခုလည်း ရရှိခဲ့ပါသည်။ ဤသည်မှာ အနိမ့်ပိုင်းဖြစ်သည်-

• ကျွန်ုပ်တို့သည် Jekyll ကိုအသုံးပြုနေဆဲဖြစ်သော်လည်း ရောနှ���ာမှုတွင် ပလပ်အင်များရှိသည်။
  • bugify.rbကျွန်ုပ်တို့၏ဘရောက်ဆာ bugs စာမျက်နှာ ရှိ entries များကိုထိရောက်စွာစာရင်းပြုစုရန်အသုံးပြုသည် ။
  • example.rbhighlight.rbပိုမိုလွယ်ကူသော ဥပမာ-ကုဒ် ကိုင်တွယ်မှုကို ခွင့်ပြု သည့် မူရင်းပလပ်အင်၏ စိတ်ကြိုက်လမ်းဆုံတစ်ခုဖြစ်သည် ။
  • callout.rb၎င်းနှင့်ဆင်တူသော စိတ်ကြိုက်လမ်းဆုံတစ်ခုဖြစ်သည်၊ သို့သော် ကျွန်ုပ်တို့၏ အထူး docs ခေါ်ဆိုမှုများအတွက် ဒီဇိုင်းထုတ်ထားပါသည်။
  • markdown-block.rbဇယားများကဲ့သို့ HTML ဒြပ်စင်များအတွင်း Markdown အတိုအထွာများကို တင်ဆက်ရန် အသုံးပြုသည်။
  • jekyll-toc ကို ကျွန်ုပ်တို့၏ အကြောင်းအရာဇယားကို ဖန်တီးရန် အသုံးပြုပါသည်။
• Docs အကြောင်းအရာအားလုံးကို ပိုမိုလွယ်ကူစွာတည်းဖြတ်ရန်အတွက် Markdown (HTML အစား) တွင် ပြန်လည်ရေးသားထားပါသည်။
• စာမျက်နှာများကို ပိုမိုရိုးရှင်းသောအကြောင်းအရာနှင့် ပိုမိုချဉ်းကပ်ရလွယ်ကူသော အထက်တန်းအဆင့်အတွက် ပြန်လည်ဖွဲ့စည်းထားပါသည်။
• Bootstrap ၏ variables များ၊ mixins များနှင့် အခြားအရာများကို အပြည့်အဝအသုံးချရန် ပုံမှန် CSS မှ SCSS သို့ ပြောင်းရွှေ့ခဲ့သည်။

တုံ့ပြန်မှုအသုံးအဆောင်များ

v4.0.0 တွင် ကိန်းရှင် အားလုံးကို @screen-ဖယ်ရှားလိုက်ပါပြီ။ ၎င်း အစား media-breakpoint-up(), media-breakpoint-down(), သို့မဟုတ် media-breakpoint-only()Sass mixins သို့မဟုတ် $grid-breakpointsSass မြေပုံကို အသုံးပြုပါ။

ကျွန်ုပ်တို့၏ တုံ့ပြန်မှုရှိသော အသုံးဝင်မှုအတန်းများကို ရှင်းလင်းပြတ်သားစွာ အသုံးပြုနိုင်စေရန်အတွက် အများစုကို ဖယ်ရှား displayလိုက်ပါသည်။

• jQuery နှင့် နည်းလမ်းများ နှင့် ကွဲလွဲ နေသော ကြောင့် အတန်းများ .hiddenနှင့် .showအတန်းများကို ဖယ်ရှားလိုက်ပါသည် ။ ယင်းအစား၊ ရည်ညွှန်းချက်အား ပြောင်းကြည့် ပါ သို့မဟုတ် ကဲ့သို့သော inline ပုံစံများကို အသုံးပြု ပါ ။$(...).hide()$(...).show()[hidden]style="display: none;"style="display: block;"
• အတန်း အားလုံးကို .hidden-ဖယ်ရှားခဲ့ပြီး၊ အမည်ပြောင်းထားသော ပရင့်ထုတ်ကိရိယာများအတွက် သိမ်းဆည်းပါ။
  • v3 မှ ဖယ်ရှားထားသည်-.hidden-xs .hidden-sm .hidden-md .hidden-lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm-inline .visible-sm-inline-block .visible-md-block .visible-md-inline .visible-md-inline-block .visible-lg-block .visible-lg-inline .visible-lg-inline-block
  • v4 alphas မှ ဖယ်ရှားထားသည်-.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
• ပရင့် utilities များသည် ဖြင့် .hidden-သို့မဟုတ် .visible-၊ သို့သော် ဖြင့် မစတင်တော့ပါ .d-print-။
  • နာမည်ဟောင်းများ : .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
  • အတန်းသစ်များ .d-print-block၊ .d-print-inline၊ .d-print-inline-block၊.d-print-none

တိကျပြတ်သားသော အတန်းများကို အသုံးပြုခြင်းထက် .visible-*၊ ၎င်းကို မျက်နှာပြင်အရွယ်အစားတွင် ဖုံးကွယ်ထားရုံဖြင့် ဒြပ်စင်တစ်ခုကို မြင်နိုင်စေသည်။ ပေးထားသော မျက်နှာပြင်အရွယ်အစားများကြားကာလတွင်သာ ဒြပ်စင်တစ်ခုကို ပြသရန် အတန်း .d-*-noneတစ်ခုနှင့် အတန်း တစ်ခု ပေါင်းစပ်နိုင်သည် (ဥပမာ- အလတ်စားနှင့် ကြီးမားသော စက်များတွင်သာ အစိတ်အပိုင်းကို ပြသည်)။.d-*-block.d-none.d-md-block.d-xl-none

v4 ရှိ grid breakpoints များသို့ ပြောင်းလဲမှုများသည် တူညီသောရလဒ်များရရှိရန် ပိုမိုကြီးမားသော breakpoint တစ်ခုသို့သွားရန်လိုအပ်ကြောင်း သတိပြုပါ။ တုံ့ပြန်မှုရှိသော အသုံးဝင်မှုအတန်းသစ်များသည် အစိတ်အပိုင်းတစ်ခု၏ မြင်နိုင်စွမ်းကို ဆက်တိုက်ရှုမြင်နိုင်သော အကွာအဝေးတစ်ခုအဖြစ် မဖော်ပြနိုင်သည့် နည်းပါးသောဖြစ်ရပ်များကို လိုက်လျောညီထွေဖြစ်အောင် မကြိုးစားပါ။ ထိုသို့သောကိစ္စများတွင် သင်သည် စိတ်ကြိုက် CSS ကို အသုံးပြုရန် လိုအပ်မည်ဖြစ်သည်။