Переход на v3.x
Guidance on how to upgrade from Bootstrap v2.x to v3.x with emphasis on major changes, what's new, and what's been removed.
Guidance on how to upgrade from Bootstrap v2.x to v3.x with emphasis on major changes, what's new, and what's been removed.
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 |
.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 |
Разделен на .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 | .jumbotron |
Очень маленькая сетка (<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-* |
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-group - .input-group-addon - .input-group-btn |
Управление формой | .form-control - .form-group |
Группа размеров кнопки | .btn-group-xs - .btn-group-sm - .btn-group-lg |
Текст нав. меню | .navbar-text |
Заголовок нав. меню | .navbar-header |
Выравнивание вкладки / кнопки (pills) | .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 |
N/A |
Форма поиска | .form-search |
N/A |
Группа информационных форм | .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 |
Тягучая строка | .row-fluid |
.row (больше нет фиксированной сетки) |
Обертка управления | .controls |
N/A |
Панель управления | .controls-row |
.row или .form-group |
Родное нав.меню | .navbar-inner |
N/A |
Драйвер вертикального нав.меню | .navbar .divider-vertical |
N/A |
Ниспадающее меню | .dropdown-submenu |
N/A |
Выравнивание вкладки | .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-list - .nav-header |
Нет точного эквивалента, но список групп и .panel-group являются схожими.
|
Inline help for form controls | .help-inline |
No exact equivalent, but .help-block is similar. |
Другие изменения в v3.0 не столь очевидны. Базовые классы, основные стили поведения были скорректированы для гибкости и нашего подхода в первую очередь для мобильных устройств. Вот неполный список:
.form-control
..form-control
теперь по умолчанию имеют ширину со значением 100%. Вкладывайте формы ввода в середину <div class="col-*"></div>
для управления их шириной..badge
больше нет контекстных классов (-success,-primary,и т.д.)..btn
должен также использовать .btn-default
, чтобы создать кнопку по умолчанию..row
is now fluid..img-responsive
, для тягучести <img>
..glyphicon
базируются на шрифтах. Иконкам также необходимые базовые и специальные классы (например, .glyphicon .glyphicon-asterisk
)..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.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.'show.bs.modal'
. Для закладок "shown" используйте 'shown.bs.tab'
, и т.д.Более подробную информацию о апгрейда до v3.0 смотрите на Bootply, где участники обсуждений преподают также и части кода.