Bootstrap 3 is not backwards compatible with v2.x. Use this section as a general guide to upgrading from v2.x to v3.0. For a broader overview, see what's new in the v3.0 release announcement.
Основные изменения классов
This table shows the style changes between v2.x and 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-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 |
Что нового
We've added new elements and changed some existing ones. Here are the new or updated styles.
| Элемент |
Описание |
| Панели |
.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 |
| 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 |
| Отступ |
.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 height sizes |
.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 |
| Выровненные таблицы / pill-элементы |
.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 |
Что убрано
The following elements have been dropped or changed in v3.0.
| Элемент |
Удалено из 2.х |
Эквивалент в 3.0 |
| Действия форм |
.form-actions |
- |
| Поисковая форма |
.form-search |
- |
| Form group with info |
.control-group.info |
- |
| 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 |
- |
| Подвижный ряд |
.row-fluid |
.row (no more fixed grid) |
| Controls wrapper |
.controls |
- |
| Controls row |
.controls-row |
.row or .form-group |
| Внутренняя панель навигации |
.navbar-inner |
- |
| Navbar vertical dividers |
.navbar .divider-vertical |
- |
| Выпадающее подменю |
.dropdown-submenu |
- |
| Выравнивание вкладок |
.tabs-left .tabs-right .tabs-below |
- |
| 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. |
Дополнительные примечания
Other changes in v3.0 are not immediately apparent. Base classes, key styles, and behaviors have been adjusted for flexibility and our mobile first approach. Here's a partial list:
- By default, text-based form controls now receive only minimal styling. For focus colors and rounded corners, apply the
.form-control class on the element to style.
- Text-based form controls with the
.form-control class applied are now 100% wide by default. Wrap inputs inside <div class="col-*"></div> to control input widths.
.badge no longer has contextual (-success,-primary,etc..) classes..btn must also use .btn-default to get the "default" button..row is now fluid.- Images are no longer responsive by default. Use
.img-responsive for fluid <img> size.
- The icons, now
.glyphicon, are now font based. Icons also require a base and icon class (e.g. .glyphicon .glyphicon-asterisk).
- Typeahead has been dropped, in favor of using Twitter Typeahead.
- Modal markup has changed significantly. The
.modal-header, .modal-body, and .modal-footer sections are now wrapped in .modal-content and .modal-dialog for better mobile styling and behavior. Also, you should no longer apply .hide to .modal in your markup.
- As of v3.1.0, the HTML loaded by the
remote modal option is now injected into the .modal-content (from v3.0.0 to v3.0.3, into the .modal) instead of into the .modal-body. This allows you to also easily vary the header and footer of the modal, not just the modal body.
- The checkbox and radio features of the button.js plugin now both use
data-toggle="buttons" instead of data-toggle="buttons-checkbox" or data-toggle="buttons-radio" in their markup.
- JavaScript events are namespaced. For example, to handle the modal "show" event, use
'show.bs.modal'. For tabs "shown" use 'shown.bs.tab', etc.
For more information on upgrading to v3.0, and code snippets from the community, see Bootply.