2.x မှ 3.0 သို့ ပြောင်းရွှေ့ခြင်း။

Bootstrap 3 သည် v2.x နှင့် လိုက်ဖက်မှုမရှိပါ။ v2.x မှ v3.0 သို့ အဆင့်မြှင့်တင်ရန် ဤကဏ္ဍကို ယေဘုယျလမ်းညွှန်အဖြစ် အသုံးပြုပါ။ ပိုမိုကျယ်ပြန့်သော ခြုံငုံသုံးသပ်ချက်အတွက်၊ v3.0 ထုတ်ဝေမှု ကြေညာချက်တွင် အသစ်အဆန်း များကို ကြည့်ပါ။

အဓိက အတန်းအပြောင်းအလဲ

ဤဇယားသည် v2.x နှင့် v3.0 အကြား စတိုင်ပြောင်းလဲမှုများကို ပြသသည်။

Bootstrap 2.x Bootstrap 3.0
.row-fluid .row
.span* .col-md-*
.offset* .col-md-offset-*
.brand .navbar-brand
.navbar .nav .navbar-nav
.nav-collapse .navbar-collapse
.nav-toggle .navbar-toggle
.btn-navbar .navbar-btn
.hero-unit .jumbotron
.icon-* .glyphicon .glyphicon-*
.btn .btn .btn-default
.btn-mini .btn-xs
.btn-small .btn-sm
.btn-large .btn-lg
.alert .alert .alert-warning
.alert-error .alert-danger
.visible-phone .visible-xs
.visible-tablet .visible-sm
.visible-desktop ခွဲလိုက်ပါ။.visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop ခွဲလိုက်ပါ။.hidden-md .hidden-lg
.input-block-level .form-control
.control-group .form-group
.control-group.warning .control-group.error .control-group.success .form-group.has-*
.checkbox.inline .radio.inline .checkbox-inline .radio-inline
.input-prepend .input-append .input-group
.add-on .input-group-addon
.img-polaroid .img-thumbnail
ul.unstyled .list-unstyled
ul.inline .list-inline
.muted .text-muted
.label .label .label-default
.label-important .label-danger
.text-error .text-danger
.table .error .table .danger
.bar .progress-bar
.bar-* .progress-bar-*
.accordion .panel-group
.accordion-group .panel .panel-default
.accordion-heading .panel-heading
.accordion-body .panel-collapse
.accordion-inner .panel-body

ဘာထူးသလဲ

ကျွန်ုပ်တို့သည် ဒြပ်စင်အသစ်များကို ထည့်သွင်းပြီး ရှိပြီးသားအရာအချို့ကို ပြောင်းလဲထားပါသည်။ ဤသည်မှာ အသစ် သို့မဟုတ် မွမ်းမံထားသော ပုံစံများဖြစ်သည်။

ဒြပ် ဖော်ပြချက်
ပြားများ .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
အဖွဲ့များစာရင်း .list-group .list-group-item .list-group-item-text .list-group-item-heading
ဂလက်ဖကွန်များ .glyphicon
Jumbotron .jumbotron
အသေးစားဇယားကွက် (<768px) .col-xs-*
ဇယားကွက်ငယ် (≥768px) .col-sm-*
အလယ်အလတ်ဇယား (≥992px) .col-md-*
ဇယားကွက်ကြီး (≥1200px) .col-lg-*
တုံ့ပြန်နိုင်သော အသုံးဝင်မှုအတန်းများ (≥1200px) .visible-lg .hidden-lg
အော့ .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
တွန်းထိုး .col-sm-push-* .col-md-push-* .col-lg-push-*
ဆွဲပါ .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
အမြင့်အရွယ်အစားများကို ထည့်သွင်းပါ။ .input-sm .input-lg
ထည့်သွင်းရေးအဖွဲ့များ .input-group .input-group-addon .input-group-btn
ပုံစံထိန်းချုပ်မှုများ .form-control .form-group
ခလုတ်အုပ်စု အရွယ်အစားများ .btn-group-xs .btn-group-sm .btn-group-lg
Navbar စာသား .navbar-text
Navbar ခေါင်းစီး .navbar-header
ဆေးပြား/ဆေးပြား ကုသိုလ် .nav-justified
တုံ့ပြန်ပုံများ .img-responsive
ဆက်စပ်ဇယား အတန်းများ .success .danger .warning .active .info
ဆက်စပ်အကွက်များ .panel-success .panel-danger .panel-warning .panel-info
မော်ဒယ် .modal-dialog .modal-content
ပုံသေး .img-thumbnail
ကောင်းပြီအရွယ်အစားများ .well-sm .well-lg
သတိပေးချက်လင့်ခ်များ .alert-link

ဘာတွေ ဖယ်ထားလဲ။

v3.0 တွင် အောက်ပါဒြပ်စင်များကို ဖယ်ရှားထားသည် သို့မဟုတ် ပြောင်းလဲထားသည်။

ဒြပ် 2.x မှ ဖယ်ရှားထားသည်။ 3.0 နှင့်ညီမျှသည်။
လုပ်ဆောင်ချက်တွေကို ဖွဲ့ပါ။ .form-actions မရှိ
ရှာဖွေမှုပုံစံ .form-search မရှိ
အချက်အလက်များဖြင့် အဖွဲ့ဖွဲ့ပါ။ .control-group.info မရှိ
ပုံသေ အကျယ် ထည့်သွင်းမှု အရွယ်အစားများ .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge ၎င်းအစား ဇယားကွက်စနစ်ကို အသုံးပြု .form-controlပါ ။
အဆင့်ပုံစံထည့်သွင်းမှုကို ပိတ်ပါ။ .input-block-level တိုက်ရိုက်ညီမျှခြင်းမရှိသော်လည်း ပုံစံများထိန်းချုပ်မှု များသည် ဆင်တူသည်။
ပြောင်းပြန်ခလုတ်များ .btn-inverse မရှိ
အရည်တန်း .row-fluid .row(ပုံသေဇယားမရှိတော့ပါ)
ထုပ်ပိုးမှုကို ထိန်းချုပ်သည်။ .controls မရှိ
အတန်းကို ထိန်းချုပ်သည်။ .controls-row .rowသို့မဟုတ်.form-group
Navbar အတွင်းပိုင်း .navbar-inner မရှိ
Navbar ဒေါင်လိုက်ပိုင်းခြားချက်များ .navbar .divider-vertical မရှိ
ဆွဲချ မီနူး .dropdown-submenu မရှိ
တဘ် ချိန်ညှိမှုများ .tabs-left .tabs-right .tabs-below မရှိ
ဆေးပြားအခြေခံ စားပွဲတင်နိုင်သော ဧရိယာ .pill-content .tab-content
ဆေးပြားအခြေခံ စားပွဲတင်နိုင်သော ဧရိယာအကန့် .pill-pane .tab-pane
ရေကြောင်းစာရင်းများ .nav-list .nav-header တိုက်ရိုက်ညီမျှခြင်းမရှိသော်လည်း စာရင်းအုပ်စုများ နှင့် .panel-groups သည် ဆင်တူသည်။
ဖောင်ထိန်းချုပ်မှုအတွက် လိုင်းအကူအညီ .help-inline အတိအကျ တူညီမှုမရှိသော်လည်း .help-blockတူညီသည်။
ဘားတန်းအဆင့်မဟုတ်သော တိုးတက်မှုအရောင်များ .progress-info .progress-success .progress-warning .progress-danger အစား .progress-bar-*ပေါ်တွင် သုံး ပါ။.progress-bar

ထပ်လောင်းမှတ်စုများ

v3.0 တွင် အခြားပြောင်းလဲမှုများသည် ချက်ခြင်းပေါ်လွင်ခြင်းမရှိပါ။ အခြေခံအတန်းများ၊ သော့ပုံစံများနှင့် အပြုအမူများကို ပြောင်းလွယ်ပြင်လွယ်နှင့် ကျွန်ုပ်တို့၏ မိုဘိုင်းလ်ပထမ ချဉ်းကပ်မှုအတွက် ချိန်ညှိထားပါသည်။ ဤသည်မှာ တစ်စိတ်တစ်ပိုင်းစာရင်းဖြစ်သည်-

  • မူရင်းအားဖြင့်၊ စာသားအခြေခံပုံစံထိန်းချုပ်မှုများသည် အနည်းငယ်မျှသာသောပုံစံကို ယခုရရှိမည်ဖြစ်သည်။ အာရုံစိုက်အရောင်များနှင့် လုံးဝန်းသောထောင့်များအတွက်၊ .form-controlစတိုင်လ်အတွက် element ပေါ်ရှိ အတန်းကို အသုံးပြုပါ။
  • အသုံးပြု သည့်အတန်းနှင့်အတူ စာသားအခြေခံပုံစံထိန်းချုပ်မှု .form-controlများသည် ယခုအခါ ပုံမှန်အားဖြင့် 100% ကျယ်ပြန့်လာပါသည်။ <div class="col-*"></div>ထည့်သွင်းမှုအကျယ်များကို ထိန်းချုပ်ရန် အတွင်းတွင် ထည့်သွင်းမှုများကို ခြုံပါ။
  • .badgeအကြောင်းအရာဆိုင်ရာ (-အောင်မြင်မှု၊-မူလတန်း၊ စသည်) အတန်းများ မရှိတော့ပါ။
  • .btn.btn-default"default" ခလုတ်ကို ရယူရန် လည်း အသုံးပြုရပါမည် ။
  • .rowအရည်ဖြစ်နေပါပြီ။
  • ပုံများသည် ပုံမှန်အားဖြင့် တုံ့ပြန်မှုမရှိတော့ပါ။ .img-responsiveအရည် <img>အရွယ်အစား အတွက် အသုံးပြု ပါ။
  • အိုင်ကွန် .glyphiconများသည် ယခုအခါ ဖောင့်ကို အခြေခံထားသည်။ အိုင်ကွန်များသည် အခြေခံနှင့် အိုင်ကွန်အတန်းအစား (ဥပမာ .glyphicon .glyphicon-asterisk) လိုအပ်သည်။
  • Twitter Typeahead ကို အသုံးပြုခြင်းဖြင့် Typeahead ကို ဖြုတ်ချ ခဲ့သည်။
  • Modal markup သည် သိသိသာသာ ပြောင်းလဲသွားသည်။ .modal-header၊ .modal-bodyနှင့် .modal-footerအပိုင်းများကို ယခု ထုပ်ပိုးထားပြီး ပိုမိုကောင်းမွန်သော .modal-contentမိုဘိုင်း .modal-dialogပုံစံနှင့် အပြုအမူများအတွက် ထို့အပြင်၊ သင်၏ markup တွင် သင် .hideမ သုံးသင့်တော့ပါ ။.modal
  • v3.1.0 အရ၊ modal ရွေးချယ်မှုဖြင့် တင်ထားသော HTML remoteကို ယခု .modal-content(v3.0.0 မှ v3.0.3၊ သို့ .modal) သို့အစား .modal-body. ၎င်းသည် သင့်အား modal ကိုယ်ထည်သာမကဘဲ modal ၏ header နှင့် footer ကိုလည်း အလွယ်တကူ ကွဲပြားစေနိုင်သည်။
  • button.js ပလပ်အင်၏ အမှတ်ခြစ်ဘောက်စ်နှင့် ရေဒီယိုအင်္ဂါရပ်များကို ယခု နှစ်မျိုးလုံး data-toggle="buttons"အစား data-toggle="buttons-checkbox"သို့မဟုတ် data-toggle="buttons-radio"၎င်းတို့၏ အမှတ်အသားတွင် အသုံးပြုပါ။
  • JavaScript ဖြစ်ရပ်များကို အမည်သတ်မှတ်ထားသည်။ ဥပမာအားဖြင့်၊ modal "show" event ကို ကိုင်တွယ်ရန်၊ သုံး 'show.bs.modal'ပါ။ "ပြသထားသည်" တဘ်များအတွက် အသုံးပြုရန် 'shown.bs.tab'၊ စသည်တို့။

v3.0 သို့ အဆင့်မြှင့်တင်ခြင်းနှင့် အသိုင်းအဝိုင်းမှ ကုဒ်အတိုအထွာများအတွက် နောက်ထပ်အချက်အလက်များအတွက် Bootply ကို ကြည့်ပါ ။