Переход на v3.x
Руководство по обновлению Bootstrap с v2.x на v3.x с акцентом на основные изменения, что нового, и то, что было удалено.
Переход с версии 2.x на 3.0
Bootstrap 3 нет обратной совместимости с версии v2.x. Используйте данное описание как основной путеводитель миграции с v2.x к v3.0. Для более детального ознакомления просмотрите объявления релиза что нового в v3.0.
Основные изменения классов
В этой таблице показаны различия стилей между v2.x и v3.0.
| Bootstrap 2.х | 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 | Split into .visible-md .visible-lg |
.hidden-phone | .hidden-xs |
.hidden-tablet | .hidden-sm |
.hidden-desktop | Split into .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 |
Что нового
Мы добавили новые элементы и изменили существующие. Здесь продемонстрированы новые или обновленные стили.
| Элемент | Описание |
|---|---|
| Panels | .panel .panel-default.panel-body.panel-title.panel-heading.panel-footer.panel-collapse |
| List groups | .list-group.list-group-item.list-group-item-text.list-group-item-heading |
| Glyphicons | .glyphicon |
| Jumbotron | .jumbotron |
| Extra small grid (<768px) | .col-xs-* |
| Small grid (≥768px) | .col-sm-* |
| Medium grid (≥992px) | .col-md-* |
| Large grid (≥1200px) | .col-lg-* |
| Responsive utility classes (≥1200px) | .visible-lg.hidden-lg |
| Offsets | .col-sm-offset-*.col-md-offset-*.col-lg-offset-* |
| Push | .col-sm-push-*.col-md-push-*.col-lg-push-* |
| Pull | .col-sm-pull-*.col-md-pull-*.col-lg-pull-* |
| Input height sizes | .input-sm.input-lg |
| Input groups | .input-group.input-group-addon.input-group-btn |
| Form controls | .form-control.form-group |
| Button group sizes | .btn-group-xs.btn-group-sm.btn-group-lg |
| Navbar text | .navbar-text |
| Navbar header | .navbar-header |
| Justified tabs / pills | .nav-justified |
| Responsive images | .img-responsive |
| Contextual table rows | .success.danger.warning.active.info |
| Contextual panels | .panel-success.panel-danger.panel-warning.panel-info |
| Modal | .modal-dialog.modal-content |
| Thumbnail image | .img-thumbnail |
| Well sizes | .well-sm.well-lg |
| Alert links | .alert-link |
Что удалено
Следующие элементы были удалены или изменены в v3.0.
| Элемент | Удалено из 2.x | 3.0 Эквивалент |
|---|---|---|
| Form actions | .form-actions | N/A |
| Search form | .form-search | N/A |
| Form group with info | .control-group.info | N/A |
| Fixed-width input sizes | .input-mini.input-small.input-medium.input-large.input-xlarge.input-xxlarge | Use .form-control and the grid system instead. |
| Block level form input | .input-block-level | No direct equivalent, but forms controls are similar. |
| Inverse buttons | .btn-inverse | N/A |
| Fluid row | .row-fluid | .row (no more fixed grid) |
| Controls wrapper | .controls | N/A |
| Controls row | .controls-row | .row or .form-group |
| Navbar inner | .navbar-inner | N/A |
| Navbar vertical dividers | .navbar .divider-vertical | N/A |
| Dropdown submenu | .dropdown-submenu | N/A |
| Tab alignments | .tabs-left.tabs-right.tabs-below | N/A |
| Pill-based tabbable area | .pill-content | .tab-content |
| Pill-based tabbable area pane | .pill-pane | .tab-pane |
| Nav lists | .nav-list.nav-header | No direct equivalent, but list groups and .panel-groups are similar. |
| Inline help for form controls | .help-inline | No exact equivalent, but .help-block is similar. |
| Non-bar-level progress colors | .progress-info.progress-success.progress-warning.progress-danger | Use .progress-bar-* on the .progress-bar instead. |
Дополнительные примечания
Другие изменения в v3.0 не столь очевидны. Базовые классы, основные стили поведения были скорректированы для гибкости и нашего подхода mobile first. Вот неполный список:
- По умолчанию текстовые элементы управления формы теперь получают минимальный стиль. Для управления цветом фокуса и закругленными углами применяйте класс
.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 Машинописный.
- Модальные разметки существенно изменились. Это
.modal-header,.modal-body, и.modal-footerразделы теперь завернутые в.modal-contentи.modal-dialogдля лучшего мобильного стиля и поведения. Кроме того, вы не должны больше применяться.hideto.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 события имеют пространства имен (namespaced). Например, чтобы обработать событие "show" в модалі, используйте
'show.bs.modal'. Для закладок "shown" используйте'shown.bs.tab', и т.д.