v3.x သို့ ပြောင်းရွှေ့နေသည်
Bootstrap v2.x မှ v3.x သို့ အဆင့်မြှင့်တင်နည်း လမ်းညွှန်ချက်တွင် အဓိကပြောင်းလဲမှုများ၊ အသစ်များနှင့် ဖယ်ရှားထားသည်များကို အလေးပေးထားသည်။
Bootstrap v2.x မှ v3.x သို့ အဆင့်မြှင့်တင်နည်း လမ်းညွှန်ချက်တွင် အဓိကပြောင်းလဲမှုများ၊ အသစ်များနှင့် ဖယ်ရှားထားသည်များကို အလေးပေးထားသည်။
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-group s သည် ဆင်တူသည်။ |
ဖောင်ထိန်းချုပ်မှုအတွက် လိုင်းအကူအညီ | .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
) လိုအပ်သည်။.modal-header
၊ .modal-body
နှင့် .modal-footer
အပိုင်းများကို ယခု ထုပ်ပိုးထားပြီး ပိုမိုကောင်းမွန်သော .modal-content
မိုဘိုင်း .modal-dialog
ပုံစံနှင့် အပြုအမူများအတွက် ထို့အပြင်၊ သင်၏ markup တွင် သင် .hide
မ သုံးသင့်တော့ပါ ။.modal
remote
ကို ယခု .modal-content
(v3.0.0 မှ v3.0.3၊ သို့ .modal
) သို့အစား .modal-body
. ၎င်းသည် သင့်အား modal ကိုယ်ထည်သာမကဘဲ modal ၏ header နှင့် footer ကိုလည်း အလွယ်တကူ ကွဲပြားစေနိုင်သည်။data-toggle="buttons"
အစား data-toggle="buttons-checkbox"
သို့မဟုတ် data-toggle="buttons-radio"
၎င်းတို့၏ အမှတ်အသားတွင် အသုံးပြုပါ။'show.bs.modal'
ပါ။ "ပြသထားသည်" တဘ်များအတွက် အသုံးပြုရန် 'shown.bs.tab'
၊ စသည်တို့။v3.0 သို့ အဆင့်မြှင့်တင်ခြင်းနှင့် အသိုင်းအဝိုင်းမှ ကုဒ်အတိုအထွာများအတွက် နောက်ထပ်အချက်အလက်များအတွက် Bootply ကို ကြည့်ပါ ။