Source

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 variable သို့ ပြောင်းလဲမှုကို လက်ခံရရှိခဲ့သည်။ ၎င်းသည် 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>
  • ပြန်လည်ဒီဇိုင်းထုတ်ထားသော blockquotesများ၊ ၎င်းတို့၏စတိုင်များကို <blockquote>element မှ class တစ်ခုတည်း သို့ ရွှေ့ခြင်း .blockquote၊ .blockquote-reverseစာသားအသုံးအဆောင်များအတွက် ပြုပြင်မွမ်းမံမှုကို လွှတ်ချ ခဲ့သည်။
  • .list-inlineယခုအခါ ၎င်း၏ကလေးများစာရင်းတွင် ပါဝင်သည့် .list-inline-itemအတန်းသစ်ကို ၎င်းတို့ထံ လျှောက်ထားရန် လိုအပ်ပါသည်။

ပုံများ

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

စားပွဲများ

  • ရွေးချယ် ပေးသူ၏ ဖြစ်ရပ်အားလုံးနီးပါးကို >ဖယ်ရှားလိုက်သည်၊ ဆိုလိုသည်မှာ အစုအဝေးဇယားများသည် ယခုအခါ ၎င်းတို့၏မိဘများထံမှ ပုံစံများကို အလိုအလျောက် အမွေဆက်ခံသွားမည်ဖြစ်သည်။ ၎င်းသည် ကျွန်ုပ်တို့၏ရွေးချယ်မှုများနှင့် ဖြစ်နိုင်ချေရှိသော စိတ်ကြိုက်ပြင်ဆင်မှုများကို များစွာရိုးရှင်းစေသည်။
  • ညီညွတ်မှုအတွက် အမည်ပြောင်း .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>။ ၎င်းကို CSS's ::afteron မှတဆင့် အလိုအလျောက် ပေးဆောင်နေပြီ .dropdown-toggleဖြစ်သည်။

ဂရစ်စနစ်

  • 576pxgrid breakpoint အသစ်တစ်ခု ထပ်ထည့်လိုက်သည် sm၊ ဆိုလိုသည်မှာ ယခု စုစုပေါင်း အဆင့်ငါးခု ( xs, sm, md, , lg, နှင့် xl) ရှိသည်။
  • ပိုရိုးရှင်းသော ဂရစ်အတန်းများအတွက် .col-{breakpoint}-{modifier}-{size}တုံ့ပြန်မှု ရှိသော ဂရစ်မွမ်းမံမှုအတန်းများကို အမည်ပြောင်းပါ ။.{modifier}-{breakpoint}-{size}
  • flexbox-powered orderclasses အသစ်များအတွက် တွန်းအားနှင့် ဆွဲထုတ်သည့် မွမ်းမံမှုအတန်းများ။ ဥပမာအားဖြင့်၊ နှင့် အစား .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 ကို 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အစိတ်အပိုင်းကို လုံးလုံးချပစ်လိုက်သည်။
  • s .breadcrumb-item၏သားစဉ်မြေးဆက်များအတွက်ယခုအချိန်တွင် ရှင်းလင်းပြတ်သားသောလူတန်းစားတစ်ခု လိုအပ်သည်။.breadcrumb

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

  • ပေါင်းစပ်ပြီး ဒြပ်စင် မှ ကွဲလွဲ စေရန် .labelနှင့် ဆက်စပ်နေသော အစိတ်အပိုင်းများကို ရိုးရှင်းစေရန်။.badge<label>
  • .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 ခေါ်ဆိုမှုများအတွက် ဒီဇိုင်းထုတ်ထားပါသည်။
    • 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 ကို အသုံးပြုရန် လိုအပ်မည်ဖြစ်သည်။