Migrando de 2.x a 3.0

Bootstrap 3 non é compatible con versións anteriores con v2.x. Use esta sección como guía xeral para actualizar de v2.x a v3.0. Para obter unha visión máis ampla, consulta as novidades do anuncio da versión 3.0.

Principais cambios de clase

Esta táboa mostra os cambios de estilo entre v2.x e 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 Dividir en.visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop Dividir en.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

Que hai de novo

Engadimos novos elementos e modificamos algúns existentes. Aquí están os estilos novos ou actualizados.

Elemento Descrición
Paneis .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
Lista de grupos .list-group .list-group-item .list-group-item-text .list-group-item-heading
Glifos .glyphicon
Jumbotron .jumbotron
Reixa extra pequena (<768 px) .col-xs-*
Reixa pequena (≥768 px) .col-sm-*
Reixa media (≥992 px) .col-md-*
Reixa grande (≥1200px) .col-lg-*
Clases de utilidade receptivas (≥1200px) .visible-lg .hidden-lg
Compensacións .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
Empurrón .col-sm-push-* .col-md-push-* .col-lg-push-*
Tirar .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Tamaños de altura de entrada .input-sm .input-lg
Grupos de entrada .input-group .input-group-addon .input-group-btn
Controis de formularios .form-control .form-group
Tamaños dos grupos de botóns .btn-group-xs .btn-group-sm .btn-group-lg
Texto da barra de navegación .navbar-text
Cabeceira da barra de navegación .navbar-header
Pastillas/pílulas xustificadas .nav-justified
Imaxes sensibles .img-responsive
Filas da táboa contextual .success .danger .warning .active .info
Paneis contextuais .panel-success .panel-danger .panel-warning .panel-info
Modal .modal-dialog .modal-content
Imaxe en miniatura .img-thumbnail
Tallas de pozo .well-sm .well-lg
Ligazóns de alerta .alert-link

O que se elimina

Os seguintes elementos foron eliminados ou modificados na versión 3.0.

Elemento Eliminado de 2.x 3.0 Equivalente
Forma accións .form-actions N / A
Formulario de busca .form-search N / A
Formar grupo con información .control-group.info N / A
Tamaños de entrada de ancho fixo .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Use .form-controle o sistema de reixa no seu lugar.
Entrada de formulario a nivel de bloque .input-block-level Non hai equivalente directo, pero os controis de formularios son similares.
Botóns inversos .btn-inverse N / A
Fila fluída .row-fluid .row(non máis reixa fixa)
Envoltorio de controis .controls N / A
Fila de controis .controls-row .rowou.form-group
Navbar interior .navbar-inner N / A
Navbar divisores verticais .navbar .divider-vertical N / A
Submenú despregable .dropdown-submenu N / A
Aliñacións de pestanas .tabs-left .tabs-right .tabs-below N / A
Área de tabulación baseada en pílulas .pill-content .tab-content
Panel de área de táboas baseado en pílulas .pill-pane .tab-pane
Listas de navegación .nav-list .nav-header Non hai equivalente directo, pero os grupos de listas e .panel-groups son similares.
Axuda en liña para controis de formulario .help-inline Non é equivalente exacto, pero .help-blocké semellante.
Cores de progreso que non sexan de nivel de barra .progress-info .progress-success .progress-warning .progress-danger Use .progress-bar-*no seu .progress-barlugar.

Notas adicionais

Outros cambios na versión 3.0 non son inmediatamente evidentes. As clases básicas, os estilos clave e os comportamentos axustáronse para a flexibilidade e o noso primeiro enfoque móbil . Aquí tes unha lista parcial:

  • Por defecto, os controis de formulario baseados en texto agora só reciben un estilo mínimo. Para as cores de foco e as esquinas redondeadas, aplique a .form-controlclase ao elemento ao estilo.
  • Os controis de formulario baseados en texto coa .form-controlclase aplicada agora teñen un ancho 100 % por defecto. Envolve as entradas <div class="col-*"></div>para controlar o ancho de entrada.
  • .badgexa non ten clases contextuais (-éxito,-primaria, etc.).
  • .btntamén debe usar .btn-defaultpara obter o botón "predeterminado".
  • .rowagora é fluído.
  • As imaxes xa non responden por defecto. Use para tamaño .img-responsivede fluído .<img>
  • Agora as iconas .glyphiconestán baseadas en fontes. As iconas tamén requiren unha clase base e de iconas (por exemplo .glyphicon .glyphicon-asterisk, ).
  • Descartouse Typeahead, a favor do uso de Twitter Typeahead .
  • O marcado modal cambiou significativamente. As seccións .modal-header, .modal-body, e .modal-footeragora están integradas .modal-contente .modal-dialogpara mellorar o estilo e o comportamento dos móbiles. Ademais, xa non deberías aplicar .hideno .modalteu marcado.
  • A partir da v3.1.0, o HTML cargado pola remoteopción modal agora inxéctase no .modal-contentficheiro (desde v3.0.0 ata v3.0.3, no .modal) en lugar de no .modal-body. Isto permítelle tamén variar facilmente o encabezado e o pé de páxina do modal, non só o corpo modal.
  • A caixa de verificación e as funcións de radio do complemento button.js úsanse agora data-toggle="buttons"en lugar de data-toggle="buttons-checkbox"ou data-toggle="buttons-radio"no seu marcado.
  • Os eventos de JavaScript teñen espazo de nomes. Por exemplo, para xestionar o evento modal "mostrar", use 'show.bs.modal'. Para as pestanas "mostradas" use 'shown.bs.tab', etc.

Para obter máis información sobre a actualización á versión 3.0 e fragmentos de código da comunidade, consulte Bootply .