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 |
Нэмэлт жижиг сүлжээ (<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 жагсаалт | .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
элемент дээрх ангийг загварчлахдаа хэрэглэнэ..form-control
анхдагчаар 100% өргөн болсон. <div class="col-*"></div>
Оролтын өргөнийг хянахын тулд оролтыг дотор нь боож өгнө..badge
контекст (-амжилт,-үндсэн, гэх мэт) ангиуд байхгүй болсон..btn
.btn-default
мөн "өгөгдмөл" товчийг авахын тулд ашиглах ёстой ..row
одоо шингэн болсон..img-responsive
хэмжээгээр <img>
хэрэглэнэ..glyphicon
нь фонт дээр суурилсан болсон. Дүрсүүд нь мөн үндсэн болон дүрсний ангилал шаарддаг (жишээ нь .glyphicon .glyphicon-asterisk
)..modal-header
, .modal-body
болон .modal-footer
хэсгүүдийг одоо илүү сайн гар утасны загвар .modal-content
болон .modal-dialog
зан төлөвт зориулж ороосон. Мөн та цаашид тэмдэглэгээнд хэрэглэх .hide
шаардлагагүй .modal
.remote
одоо . Энэ нь танд зөвхөн модалын биеийг бус, толгой ба хөлийг хялбархан өөрчлөх боломжийг олгоно..modal-content
.modal
.modal-body
data-toggle="buttons"
оронд data-toggle="buttons-checkbox"
эсвэл ашиглаж data-toggle="buttons-radio"
байна.'show.bs.modal'
. "Харуулсан" табын 'shown.bs.tab'
хувьд гэх мэтийг ашиглана уу.V3.0 руу шинэчлэх, олон нийтийн кодын хэсгүүдийн талаар нэмэлт мэдээлэл авахыг хүсвэл Bootply -г үзнэ үү .