Migrar a v4

Bootstrap 4 es una reescritura importante de todo el proyecto. Los cambios más notables se resumen a continuación, seguidos de cambios más específicos en los componentes relevantes.

cambios estables

Pasando de Beta 3 a nuestra versión estable v4.0, no hay cambios importantes, pero hay algunos cambios notables.

Impresión

• Se corrigieron las utilidades de impresión rotas. Anteriormente, el uso de una .d-print-*clase anulaba inesperadamente cualquier otra .d-*clase. Ahora, coinciden con nuestras otras utilidades de visualización y solo se aplican a ese medio ( @media print).

• Se ampliaron las utilidades de visualización de impresión disponibles para que coincidan con otras utilidades. Beta 3 y anteriores solo tenían block, inline-block, inliney none. Se agregó v4 estable flex, inline-flex, table, table-rowy table-cell.

• Se corrigió la representación de la vista previa de impresión en los navegadores con nuevos estilos de impresión que especifican @page size.

Cambios en la beta 3

Si bien Beta 2 vio la mayor parte de nuestros cambios importantes durante la fase beta, todavía tenemos algunos que deben abordarse en la versión Beta 3. Estos cambios se aplican si está actualizando a Beta 3 desde Beta 2 o cualquier versión anterior de Bootstrap.

Misceláneas

• Se eliminó la $thumbnail-transitionvariable no utilizada. No estábamos transicionando nada, por lo que solo era un código adicional.
• El paquete npm ya no incluye ningún archivo que no sean nuestros archivos fuente y dist; si confiaba en ellos y estaba ejecutando nuestros scripts a través de la node_modulescarpeta, debería adaptar su flujo de trabajo.

Formularios

• Se reescribieron las casillas de verificación y radios personalizadas y predeterminadas. Ahora, ambos tienen una estructura HTML coincidente (externa <div>con hermano <input>y <label>) y los mismos estilos de diseño (predeterminado apilado, en línea con la clase modificadora). Esto nos permite diseñar la etiqueta en función del estado de la entrada, lo que simplifica la compatibilidad con el disabledatributo (que antes requería una clase principal) y respalda mejor la validación de nuestro formulario.

  Como parte de esto, hemos cambiado el CSS para administrar múltiples correos electrónicos background-imageen casillas de verificación y radios de formularios personalizados. Anteriormente, el elemento ahora eliminado .custom-control-indicatortenía el color de fondo, el degradado y el ícono SVG. Personalizar el degradado de fondo significaba reemplazarlos todos cada vez que necesitabas cambiar solo uno. Ahora, tenemos .custom-control-label::beforepara el relleno y el degradado y .custom-control-label::aftermaneja el icono.

  Para hacer un cheque personalizado en línea, agregue .custom-control-inline.

• Selector actualizado para grupos de botones basados ​​en entrada. En lugar de [data-toggle="buttons"] { }estilo y comportamiento, usamos el dataatributo solo para los comportamientos de JS y confiamos en una nueva .btn-group-toggleclase para el estilo.

• Eliminado .col-form-legenda favor de un ligeramente mejorado .col-form-label. De esta manera .col-form-label-sm, .col-form-label-lgse puede usar en <legend>elementos con facilidad.

• Las entradas de archivos personalizados recibieron un cambio en su $custom-file-textvariable Sass. Ya no es un mapa Sass anidado y ahora solo activa una cadena: el Browsebotón como ese ahora es el único pseudoelemento generado a partir de nuestro Sass. El Choose filetexto ahora proviene del .custom-file-label.

Grupos de entrada

• Los complementos del grupo de entrada ahora son específicos de su ubicación en relación con una entrada. Hemos eliminado .input-group-addony .input-group-btnpara dos clases nuevas, .input-group-prependy .input-group-append. Debe usar explícitamente un anexo o un antepuesto ahora, lo que simplifica gran parte de nuestro CSS. Dentro de un anexo o antepuesto, coloque sus botones como existirían en cualquier otro lugar, pero envuelva el texto en .input-group-text.

• Los estilos de validación ahora son compatibles, al igual que las entradas múltiples (aunque solo puede validar una entrada por grupo).

• Las clases de tamaño deben estar en el padre .input-groupy no en los elementos de formulario individuales.

Cambios en la beta 2

Mientras esté en versión beta, nuestro objetivo es no tener cambios importantes. Sin embargo, las cosas no siempre salen según lo planeado. A continuación se muestran los cambios importantes que se deben tener en cuenta al pasar de Beta 1 a Beta 2.

Rotura

• $badge-colorVariable eliminada y su uso en .badge. Usamos una función de contraste de color para elegir una colorbasada en background-color, por lo que la variable no es necesaria.
• grayscale()Función renombrada gray()para evitar romper el conflicto con el grayscalefiltro nativo de CSS.
• Se cambió el nombre .table-inversede .thead-inverse, y .thead-defaulta .*-darky .*-light, haciendo coincidir nuestros esquemas de color utilizados en otros lugares.
• Las tablas receptivas ahora generan clases para cada punto de interrupción de la cuadrícula. Esto se diferencia de Beta 1 en que el .table-responsiveque has estado usando es más como .table-responsive-md. Ahora puede usar .table-responsiveo .table-responsive-{sm,md,lg,xl}según sea necesario.
• Se eliminó el soporte de Bower ya que el administrador de paquetes ha quedado obsoleto para las alternativas (por ejemplo, Yarn o npm). Ver glorieta/glorieta n.º 2298 para obtener más detalles.
• Bootstrap todavía requiere jQuery 1.9.1 o superior, pero se recomienda utilizar la versión 3.x, ya que los navegadores compatibles con v3.x son los que admite Bootstrap, además de que v3.x tiene algunas correcciones de seguridad.
• Se eliminó la .form-control-labelclase no utilizada. Si hizo uso de esta clase, era un duplicado de la .col-form-labelclase que se centró verticalmente <label>con su entrada asociada en diseños de formularios horizontales.
• Cambió color-yiqde un mixin que incluía la colorpropiedad a una función que devuelve un valor, lo que le permite usarlo para cualquier propiedad CSS. Por ejemplo, en lugar de color-yiq(#000), escribirías color: color-yiq(#000);.

Reflejos

• Introdujo un nuevo pointer-eventsuso en modales. El externo .modal-dialogpasa a través de eventos con pointer-events: nonepara el manejo personalizado de clics (lo que hace posible escuchar .modal-backdropcualquier clic) y luego lo contrarresta para el real .modal-contentcon pointer-events: auto.

Resumen

Estos son los elementos importantes que querrá tener en cuenta al pasar de v3 a v4.

Compatibilidad con navegador

• Se eliminó la compatibilidad con IE8, IE9 e iOS 6. v4 ahora es solo IE10+ e iOS 7+. Para los sitios que necesitan cualquiera de esos, use v3.
• Se agregó soporte oficial para el navegador y WebView de Android v5.0 Lollipop. Las versiones anteriores del navegador de Android y WebView siguen siendo compatibles solo de manera extraoficial.

cambios globales

• Flexbox está habilitado de forma predeterminada. En general, esto significa alejarse de los flotadores y más en todos nuestros componentes.
• Cambiamos de Less a Sass para nuestros archivos CSS de origen.
• Cambiamos de pxa remcomo nuestra unidad principal de CSS, aunque los píxeles todavía se usan para consultas de medios y el comportamiento de la cuadrícula, ya que las ventanas gráficas del dispositivo no se ven afectadas por el tamaño del tipo.
• El tamaño de fuente global aumentó de 14pxa 16px.
• Niveles de cuadrícula renovados para agregar una quinta opción (abordar dispositivos más pequeños en 576pxy por debajo) y eliminó el -xsinfijo de esas clases. Ejemplo: .col-6.col-sm-4.col-md-3.
• Se reemplazó el tema opcional separado con opciones configurables a través de variables SCSS (p. ej., $enable-gradients: true).
• Sistema de compilación revisado para usar una serie de scripts npm en lugar de Grunt. Consulte package.jsontodos los scripts o nuestro archivo Léame del proyecto para conocer las necesidades de desarrollo local.
• Ya no se admite el uso no receptivo de Bootstrap.
• Se eliminó el personalizador en línea a favor de una documentación de configuración más extensa y compilaciones personalizadas.
• Se agregaron docenas de nuevas clases de utilidad para pares de propiedad-valor de CSS comunes y accesos directos de espaciado de margen/relleno.

Sistema de red

• Movido a flexbox.
  • Se agregó soporte para flexbox en los mixins de cuadrícula y clases predefinidas.
  • Como parte de flexbox, se incluye soporte para clases de alineación vertical y horizontal.
• Nombres de clase de cuadrícula actualizados y un nuevo nivel de cuadrícula.
  • Se agregó un nuevo smnivel de cuadrícula a continuación 768pxpara un control más granular. Ahora tenemos xs, sm, md, lgy xl. Esto también significa que cada nivel ha subido un nivel (por lo que .col-md-6en v3 ahora está .col-lg-6en v4).
  • xsLas clases de cuadrícula se han modificado para no requerir el infijo para representar con mayor precisión que comienzan a aplicar estilos en min-width: 0y no en un valor de píxel establecido. En lugar de .col-xs-6, es ahora .col-6. Todos los demás niveles de cuadrícula requieren el infijo (p. ej., sm).
• Tamaños de cuadrícula actualizados, mixins y variables.
  • Los canalones de cuadrícula ahora tienen un mapa Sass para que pueda especificar anchos de canalones específicos en cada punto de interrupción.
  • Mezclas de cuadrícula actualizadas para utilizar una mezcla de make-col-readypreparación y una make-colpara establecer el flexy max-widthpara el tamaño de columna individual.
  • Se cambiaron los puntos de interrupción de consulta de medios del sistema de cuadrícula y los anchos de los contenedores para tener en cuenta el nuevo nivel de cuadrícula y garantizar que las columnas se dividan uniformemente 12en su ancho máximo.
  • Los puntos de interrupción de la cuadrícula y los anchos de los contenedores ahora se manejan a través de mapas Sass ( $grid-breakpointsy $container-max-widths) en lugar de un puñado de variables separadas. Estos reemplazan las @screen-*variables por completo y le permiten personalizar completamente los niveles de la cuadrícula.
  • Las consultas de los medios también han cambiado. En lugar de repetir nuestras declaraciones de consulta de medios con el mismo valor cada vez, ahora tenemos @include media-breakpoint-up/down/only. Ahora, en lugar de escribir @media (min-width: @screen-sm-min) { ... }, puedes escribir @include media-breakpoint-up(sm) { ... }.

Componentes

• Se eliminaron paneles, miniaturas y pozos para un nuevo componente que lo abarca todo, las tarjetas .
• Se eliminó la fuente del icono Glyphicons. Si necesitas iconos, algunas opciones son:
  • la versión anterior de Glyphicons
  • octicones
  • fuente impresionante
  • Consulte la página Extender para obtener una lista de alternativas. ¿Tiene sugerencias adicionales? Por favor abra un problema o PR.
• Se eliminó el complemento Affix jQuery.
  • Recomendamos usar position: stickyen su lugar. Consulte la entrada de HTML5 para obtener detalles y recomendaciones específicas de polirrelleno. Una sugerencia es usar una @supportsregla para implementarlo (por ejemplo, @supports (position: sticky) { ... })/
  • Si estaba usando Affix para aplicar positionestilos adicionales, los polyfills podrían no ser compatibles con su caso de uso. Una opción para tales usos es la biblioteca ScrollPos-Styler de terceros .
• Se eliminó el componente del buscapersonas, ya que esencialmente se trataba de botones ligeramente personalizados.
• Se refactorizaron casi todos los componentes para usar más selectores de clase no anidados en lugar de selectores de niños demasiado específicos.

Por componente

Esta lista destaca los cambios clave por componente entre v3.xx y v4.0.0.

Reiniciar

Lo nuevo en Bootstrap 4 es Reboot , una nueva hoja de estilo que se basa en Normalize con nuestros propios estilos de reinicio algo obstinados. Los selectores que aparecen en este archivo solo usan elementos; aquí no hay clases. Esto aísla nuestros estilos de reinicio de nuestros estilos de componentes para un enfoque más modular. Algunos de los restablecimientos más importantes que incluye son el box-sizing: border-boxcambio, el movimiento de emunidades remen muchos elementos, los estilos de enlace y muchos restablecimientos de elementos de formulario.

Tipografía

• Se movieron todas las .text-utilidades al _utilities.scssarchivo.
• Se eliminó .page-headerporque, aparte del borde, todos sus estilos se pueden aplicar a través de utilidades.
• .dl-horizontalha sido rechazado. En su lugar, use .rowon <dl>y use clases de columna de cuadrícula (o mixins) en sus <dt>hijos <dd>.
• El estilo personalizado <blockquote>se ha trasladado a las clases .blockquotey al .blockquote-reversemodificador.
• .list-inlineahora requiere que sus elementos de la lista de elementos secundarios tengan .list-inline-itemaplicada la nueva clase.

Imágenes

• Renombrado .img-responsivea .img-fluid.
• Renombrado .img-roundeda.rounded
• Renombrado .img-circlea.rounded-circle

Mesas

• Se han eliminado casi todas las instancias del >selector, lo que significa que las tablas anidadas ahora heredarán automáticamente los estilos de sus padres. Esto simplifica enormemente nuestros selectores y posibles personalizaciones.
• Las tablas receptivas ya no requieren un elemento envolvente. En su lugar, simplemente coloque la .table-responsivederecha en el <table>.
• Renombrado .table-condenseda .table-smpor consistencia.
• Se agregó una nueva .table-inverseopción.
• Se agregaron modificadores de encabezado de tabla: .thead-defaulty .thead-inverse.
• Clases contextuales renombradas para tener un .table-prefijo -. Por lo tanto .active, .success, .warning, .dangerya , , y ..info.table-active.table-success.table-warning.table-danger.table-info

Formularios

• El elemento movido se restablece al _reboot.scssarchivo.
• Renombrado .control-labela .col-form-label.
• Renombrado .input-lgy .input-sma .form-control-lgy .form-control-sm, respectivamente.
• Abandoné .form-group-*las clases en aras de la simplicidad. Usa .form-control-*clases en su lugar ahora.
• Se eliminó .help-blocky se reemplazó con .form-texttexto de ayuda a nivel de bloque. Para obtener texto de ayuda en línea y otras opciones flexibles, use clases de utilidad como .text-muted.
• caído .radio-inliney .checkbox-inline.
• Consolidado .checkboxy .radioen .form-checky las distintas .form-check-*clases.
• Formas horizontales revisadas:
  • Se eliminó el .form-horizontalrequisito de clase.
  • .form-groupya no aplica estilos de .rowvia mixin, por .rowlo que ahora se requiere para diseños de cuadrícula horizontal (p. ej., <div class="form-group row">).
  • Se agregó una nueva .col-form-labelclase para centrar verticalmente las etiquetas con .form-controls.
  • Se agregaron nuevos .form-rowdiseños de formularios compactos con las clases de cuadrícula (cambie su .rowpor a .form-rowy listo).
• Se agregó compatibilidad con formularios personalizados (para casillas de verificación, radios, selecciones y entradas de archivos).
• Se reemplazaron las clases .has-error, .has-warningy .has-successcon la validación de formularios HTML5 a través de CSS :invalidy :validpseudoclases.
• Renombrado .form-control-statica .form-control-plaintext.

Botones

• Renombrado .btn-defaulta .btn-secondary.
• Descartó la .btn-xsclase por completo ya que .btn-smes proporcionalmente mucho más pequeña que la de v3.
• Se eliminó la función de botónbutton.js con estado del complemento jQuery. Esto incluye los métodos $().button(string)y . $().button('reset')Recomendamos usar un poco de JavaScript personalizado en su lugar, que tendrá la ventaja de comportarse exactamente como usted desea.
  • Tenga en cuenta que las otras características del complemento (casillas de verificación de botones, radios de botones, botones de alternancia única) se han conservado en v4.
• Cambie los botones [disabled]a los :disabledcompatibles con IE9+ :disabled. Sin embargo fieldset[disabled], todavía es necesario porque los conjuntos de campos deshabilitados nativos todavía tienen errores en IE11 .

Grupo de botones

• Componente reescrito con flexbox.
• Eliminado .btn-group-justified_ Como reemplazo, puede usarlo <div class="btn-group d-flex" role="group"></div>como un envoltorio alrededor de elementos con .w-100.
• Abandonó la .btn-group-xsclase por completo debido a la eliminación de .btn-xs.
• Se eliminó el espacio explícito entre los grupos de botones en las barras de herramientas de botones; use las utilidades de margen ahora.
• Documentación mejorada para su uso con otros componentes.

Listas deplegables

• Se cambió de selectores principales a clases singulares para todos los componentes, modificadores, etc.
• Estilos desplegables simplificados para que ya no se envíen con flechas hacia arriba o hacia abajo adjuntas al menú desplegable.
• Los menús desplegables se pueden construir con <div>s o <ul>s ahora.
• Marcas y estilos desplegables reconstruidos para brindar compatibilidad fácil e integrada con <a>elementos <button>desplegables basados ​​en ellos.
• Renombrado .dividera .dropdown-divider.
• Los elementos desplegables ahora requieren .dropdown-item.
• Los menús desplegables ya no requieren un explícito <span class="caret"></span>; esto ahora se proporciona automáticamente a través de CSS ::afteren .dropdown-toggle.

Sistema de red

• Se agregó un nuevo 576pxpunto de interrupción de cuadrícula como sm, lo que significa que ahora hay cinco niveles en total ( xs, sm, md, lgy xl).
• Se cambió el nombre de las clases de modificador de cuadrícula sensibles de .col-{breakpoint}-{modifier}-{size}a .{modifier}-{breakpoint}-{size}para clases de cuadrícula más simples.
• Se eliminaron las clases de modificadores push y pull para las nuevas clases impulsadas por flexbox order. Por ejemplo, en lugar de .col-8.push-4y .col-4.pull-8, usaría .col-8.order-2y .col-4.order-1.
• Se agregaron clases de utilidad de flexbox para el sistema de cuadrícula y los componentes.

Grupos de listas

• Componente reescrito con flexbox.
• Reemplazado a.list-group-itemcon una clase explícita, .list-group-item-action, para diseñar versiones de enlaces y botones de elementos de grupos de listas.
• Clase añadida .list-group-flushpara usar con tarjetas.

Modal

• Componente reescrito con flexbox.
• Dado el movimiento a flexbox, es probable que la alineación de los íconos de descarte en el encabezado esté rota ya que ya no estamos usando flotadores. El contenido flotante es lo primero, pero con flexbox ese ya no es el caso. Actualice sus íconos de descarte para que vengan después de los títulos modales para corregir.
• Se eliminaron la remoteopción (que podría usarse para cargar e inyectar automáticamente contenido externo en un modal) y el loaded.bs.modalevento correspondiente. En su lugar, recomendamos usar plantillas del lado del cliente o un marco de enlace de datos, o llamar a jQuery.load usted mismo.

Navegadores

• Componente reescrito con flexbox.
• Se eliminaron casi todos los >selectores para un estilo más simple a través de clases no anidadas.
• En lugar de selectores específicos de HTML como .nav > li > a, usamos clases separadas para .navs, .nav-items y .nav-links. Esto hace que su HTML sea más flexible al mismo tiempo que aumenta la extensibilidad.

barra de navegación

La barra de navegación se ha reescrito por completo en flexbox con soporte mejorado para alineación, capacidad de respuesta y personalización.

• Los comportamientos de la barra de navegación receptiva ahora se aplican a la .navbarclase a través de la opción requerida .navbar-expand-{breakpoint} donde elige dónde colapsar la barra de navegación. Anteriormente, esta era una modificación menos variable y requería una recompilación.
• .navbar-defaultes ahora .navbar-light, aunque .navbar-darksigue siendo el mismo. Se requiere uno de estos en cada barra de navegación. Sin embargo, estas clases ya no establecen background-colors; en cambio, esencialmente solo afectan a color.
• Las barras de navegación ahora requieren una declaración de fondo de algún tipo. Elija entre nuestras utilidades de fondo ( .bg-*) o configure las suyas propias con las clases ligeras/inversas anteriores para una personalización loca .
• Dados los estilos de flexbox, las barras de navegación ahora pueden usar las utilidades de flexbox para facilitar las opciones de alineación.
• .navbar-togglees ahora .navbar-togglery tiene diferentes estilos y marcas internas (no más tres <span>s).
• Abandonó la .navbar-formclase por completo. Ya no es necesario; en su lugar, simplemente use .form-inliney aplique las utilidades de margen según sea necesario.
• Las barras de navegación ya no incluyen margin-bottomo border-radiuspor defecto. Utilice los servicios públicos según sea necesario.
• Todos los ejemplos con barras de navegación se han actualizado para incluir nuevas marcas.

Paginación

• Componente reescrito con flexbox.
• Ahora se requieren clases explícitas ( .page-item, .page-link) en los descendientes de .paginations
• Eliminó el .pagercomponente por completo, ya que era poco más que botones de contorno personalizados.

Migas de pan

• Ahora se requiere una clase explícita, .breadcrumb-item, en los descendientes de .breadcrumbs

Etiquetas y distintivos

• Renombrado .labela .badgepara eliminar la ambigüedad del <label>elemento.
• Descartó el .badgecomponente porque era casi idéntico a las etiquetas. Utilice el .badge-pillmodificador junto con el componente de la etiqueta en su lugar para lograr ese aspecto redondeado.
• Las insignias ya no flotan automáticamente en grupos de listas y otros componentes. Las clases de utilidad ahora son requeridas para eso.
• .badge-defaultse ha eliminado y .badge-secondaryagregado para que coincida con las clases de modificadores de componentes que se usan en otros lugares.

Paneles, miniaturas y pozos

Eliminado por completo para el nuevo componente de la tarjeta.

Paneles

• .panela .card, ahora construido con flexbox.
• .panel-defaulteliminado y sin reemplazo.
• .panel-groupeliminado y sin reemplazo. .card-groupno es un reemplazo, es diferente.
• .panel-headinga.card-header
• .panel-titlea .card-title. Según el aspecto que desee, también puede utilizar elementos o clases de encabezado (p. ej <h3>., , .h3) o elementos o clases en negrita (p. ej . <strong>, <b>, .font-weight-bold). Tenga en cuenta que .card-title, si bien tiene un nombre similar, produce un aspecto diferente al de .panel-title.
• .panel-bodya.card-body
• .panel-footera.card-footer
• .panel-primary, .panel-success, .panel-info, .panel-warningy .panel-dangerse han descartado para .bg-, .text-y .borderlas utilidades generadas a partir de nuestro $theme-colorsmapa Sass.

Progreso

• .progress-bar-*Clases contextuales reemplazadas con .bg-*utilidades. Por ejemplo, class="progress-bar progress-bar-danger"se convierte en class="progress-bar bg-danger".
• Reemplazado .activepor barras de progreso animadas con .progress-bar-animated.

Carrusel

• Se revisó todo el componente para simplificar el diseño y el estilo. Tenemos menos estilos para anular, nuevos indicadores e íconos nuevos.
• Todo el CSS ha sido anidado y renombrado, asegurando que cada clase tenga el prefijo .carousel-.
  • Para los elementos del carrusel, .next, .prev, .lefty .rightahora son .carousel-item-next, .carousel-item-prev, .carousel-item-lefty .carousel-item-right.
  • .itemtambién es ahora .carousel-item.
  • Para los controles anterior/siguiente, .carousel-control.righty .carousel-control.leftson ahora .carousel-control-nexty .carousel-control-prev, lo que significa que ya no requieren una clase base específica.
• Se eliminó todo el estilo receptivo, aplazando las utilidades (por ejemplo, mostrar subtítulos en ciertas ventanas gráficas) y estilos personalizados según sea necesario.
• Se eliminaron las anulaciones de imágenes para imágenes en elementos de carrusel, aplazando a las utilidades.
• Se modificó el ejemplo de Carrusel para incluir el nuevo marcado y estilos.

Mesas

• Se eliminó el soporte para tablas anidadas con estilo. Todos los estilos de tabla ahora se heredan en v4 para selectores más simples.
• Añadida variante de tabla inversa.

Utilidades

• Mostrar, ocultar y más:
  • Hizo que las utilidades de visualización respondieran (por ejemplo, .d-noney d-{sm,md,lg,xl}-none).
  • Se eliminó la mayor parte de las .hidden-*utilidades por nuevas utilidades de visualización . Por ejemplo, en lugar de .hidden-sm-up, use .d-sm-none. Se cambiaron los nombres de las .hidden-printutilidades para usar el esquema de nomenclatura de la utilidad de visualización. Más información en la sección Utilidades receptivas de esta página.
  • Se agregaron .float-{sm,md,lg,xl}-{left,right,none}clases para flotantes receptivos y se eliminaron .pull-lefty .pull-rightdado que son redundantes para .float-lefty .float-right.
• Escribe:
  • Se agregaron variaciones receptivas a nuestras clases de alineación de texto .text-{sm,md,lg,xl}-{left,center,right}.
• Alineación y espaciado:
  • Se agregaron nuevas utilidades de margen y relleno de respuesta para todos los lados, además de abreviaturas verticales y horizontales.
  • Añadido cargamento de utilidades flexbox .
  • Abandonado .center-blockpara la nueva .mx-autoclase.
• Clearfix actualizado para eliminar el soporte para versiones anteriores del navegador.

Mezclas de prefijos de proveedores

Los mixins de prefijo de proveedor de Bootstrap 3 , que estaban en desuso en v3.2.0, se eliminaron en Bootstrap 4. Dado que usamos Autoprefixer , ya no son necesarios.

Se eliminaron los siguientes mixins: animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-timing-function, backface-visibility, box-sizing, content-columns, hyphens, opacity, perspective, perspective-origin, rotate, rotateX, rotateY, scale, scaleX, scaleY, skew, transform-origin, transition-delay, transition-duration, transition-property, transition-timing-function, transition-transform, translate, translate3d,user-select

Documentación

Nuestra documentación también recibió una actualización general. Aquí está el resumen:

• Todavía estamos usando Jekyll, pero tenemos complementos en la mezcla:
  • bugify.rbse utiliza para enumerar eficientemente las entradas en nuestra página de errores del navegador .
  • example.rbes una bifurcación personalizada del highlight.rbcomplemento predeterminado, lo que permite un manejo más sencillo del código de ejemplo.
  • callout.rbes una bifurcación personalizada similar a esa, pero diseñada para nuestras llamadas especiales de documentos.
  • markdown-block.rbse utiliza para representar fragmentos de Markdown dentro de elementos HTML como tablas.
  • jekyll-toc se utiliza para generar nuestra tabla de contenidos.
• Todo el contenido de los documentos se ha reescrito en Markdown (en lugar de HTML) para facilitar la edición.
• Las páginas se han reorganizado para un contenido más simple y una jerarquía más accesible.
• Pasamos de CSS regular a SCSS para aprovechar al máximo las variables, los mixins y más de Bootstrap.

Utilidades receptivas

Todas @screen-las variables se han eliminado en v4.0.0. Utilice los mixins , o Sass o el media-breakpoint-up()mapa media-breakpoint-down()Sass en su lugar.media-breakpoint-only()$grid-breakpoints

Nuestras clases de servicios públicos sensibles se han eliminado en gran medida a favor de los displayservicios públicos explícitos.

• Las clases .hiddeny .showse han eliminado porque entraban en conflicto con los métodos $(...).hide()y de jQuery. $(...).show()En su lugar, intente alternar el [hidden]atributo o use estilos en línea como style="display: none;"y style="display: block;".
• .hidden-Se han eliminado todas las clases, salvo las utilidades de impresión, a las que se les ha cambiado el nombre.
  • Eliminado de v3:.hidden-xs .hidden-sm .hidden-md .hidden-lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm-inline .visible-sm-inline-block .visible-md-block .visible-md-inline .visible-md-inline-block .visible-lg-block .visible-lg-inline .visible-lg-inline-block
  • Eliminado de alfas v4:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
• Las utilidades de impresión ya no comienzan con .hidden-o .visible-, sino con .d-print-.
  • Nombres antiguos: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
  • Nuevas clases: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

En lugar de usar clases explícitas .visible-*, hace que un elemento sea visible simplemente no ocultándolo en ese tamaño de pantalla. Puede combinar una .d-*-noneclase con una .d-*-blockclase para mostrar un elemento solo en un intervalo determinado de tamaños de pantalla (por ejemplo .d-none.d-md-block.d-xl-none, muestra el elemento solo en dispositivos medianos y grandes).

Tenga en cuenta que los cambios en los puntos de interrupción de la cuadrícula en v4 significan que deberá aumentar un punto de interrupción para lograr los mismos resultados. Las nuevas clases de utilidad receptivas no intentan adaptarse a casos menos comunes en los que la visibilidad de un elemento no se puede expresar como un único rango contiguo de tamaños de ventana gráfica; en su lugar, deberá usar CSS personalizado en tales casos.