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

Эмне жанылык

Биз жаңы элементтерди кошуп, айрымдарын өзгөрттүк. Бул жерде жаңы же жаңыртылган стилдер.

Элемент Description
Панелдер .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-*
Push .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 .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лар окшош.
Формаларды башкаруу үчүн саптык жардам .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 Twitter 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 .