Пераход з 2.x на 3.0

Bootstrap 3 не сумяшчальны з версіяй 2.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
Вельмі маленькая сетка (<768 пікселяў) .col-xs-*
Маленькая сетка (≥768 пікселяў) .col-sm-*
Сярэдняя сетка (≥992 пікселяў) .col-md-*
Вялікая сетка (≥1200 пікселяў) .col-lg-*
Спагадныя класы ўтыліт (≥1200 пікселяў) .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-text
Загаловак панэлі навігацыі .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 Н/Д
Таблеткі на аснове tabbable вобласці .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гэтага.

Дадатковыя заўвагі

Іншыя змены ў версіі 3.0 відавочныя не адразу. Базавыя класы, ключавыя стылі і паводзіны былі скарэкціраваны для гнуткасці і нашага мабільнага першапачатковага падыходу. Вось няпоўны спіс:

  • Па змаўчанні тэкставыя элементы кіравання формамі цяпер атрымліваюць толькі мінімальны стыль. Для факусіроўкі колераў і закругленых вуглоў прымяніце .form-controlклас элемента да стылю.
  • Элементы кіравання тэкставай формай з .form-controlпрымененым класам цяпер па змаўчанні 100% шырокія. Загарніце ўводы ўнутр <div class="col-*"></div>, каб кантраляваць шырыню ўводу.
  • .badgeбольш не мае кантэкстных (-success,-primary і г.д..) класаў.
  • .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(ад v3.0.0 да v3.0.3, у .modal), а не ў .modal-body. Гэта дазваляе таксама лёгка змяняць верхні і ніжні калонтытул мадальнага элемента, а не толькі мадальнае цела.
  • Функцыі сцяжка і перамыкача плагіна button.js цяпер выкарыстоўваюцца data-toggle="buttons"замест data-toggle="buttons-checkbox"або data-toggle="buttons-radio"ў іх разметцы.
  • Падзеі JavaScript маюць прастору імёнаў. Напрыклад, для апрацоўкі мадальнай падзеі "паказаць" выкарыстоўвайце 'show.bs.modal'. Для «паказаных» укладак выкарыстоўвайце 'shown.bs.tab'і г.д.

Для атрымання дадатковай інфармацыі аб абнаўленні да версіі 3.0 і фрагментаў кода ад супольнасці глядзіце Bootply .