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
Нэмэлт жижиг сүлжээ (<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-groups нь төстэй байна.
Маягтын удирдлагын шугамын тусламж .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).
  • Твиттер Typeahead -ийг ашиглахын тулд Typeahead-ийг хассан .
  • Модалийн тэмдэглэгээ ихээхэн өөрчлөгдсөн. , .modal-header, .modal-bodyболон .modal-footerхэсгүүд нь илүү сайн гар утасны загвар .modal-contentболон .modal-dialogзан төлөвт зориулж ороосон. Мөн та тэмдэглэгээндээ цаашид хэрэглэх .hideёсгүй .modal.
  • v3.1.0-с эхлэн модаль сонголтоор ачаалагдсан HTML- г remoteодоо . Энэ нь танд зөвхөн модалын биеийг бус, толгой ба хөлийг хялбархан өөрчлөх боломжийг олгоно..modal-content.modal.modal-body
  • button.js залгаасын тэмдэглэгээ болон радио функцууд одоо хоёулаа тэмдэглэгээнийхээ data-toggle="buttons"оронд data-toggle="buttons-checkbox"эсвэл ашиглаж data-toggle="buttons-radio"байна.
  • JavaScript-н үйл явдлууд нэрийн зайтай байна. Жишээ нь, модаль "шоу" үйл явдлыг зохицуулахын тулд ашиглана уу 'show.bs.modal'. "Харуулсан" табын 'shown.bs.tab'хувьд гэх мэтийг ашиглана уу.

V3.0 руу шинэчлэх, олон нийтийн кодын хэсгүүдийн талаар нэмэлт мэдээлэл авахыг хүсвэл Bootply -г үзнэ үү .