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

Bootstrap 3 не сумісний із v2.x. Використовуйте цей розділ як загальний посібник з оновлення версії 2.x до версії 3.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

Що видалено

У версії 3.0 наведені нижче елементи вилучено або змінено.

елемент Видалено з 2.x 3.0 Еквівалент
Форма дії .form-actions N/A
Форма пошуку .form-search N/A
Сформуйте групу з інформацією .control-group.info N/A
Вхідні розміри фіксованої ширини .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Замість цього використовуйте .form-controlсистему сітки .
Введення форми на рівні блоку .input-block-level Немає прямого еквівалента, але елементи керування формами схожі.
Зворотні кнопки .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-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своїй розмітці.
  • Починаючи з версії 3.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" використовуйте 'show.bs.modal'. Для «показаних» вкладок використовуйте 'shown.bs.tab'тощо.

Щоб отримати додаткові відомості про оновлення до версії 3.0 і фрагменти коду від спільноти, перегляньте Bootply .