Migrar de Bootstrap 4 a Bootstrap 5

Blocs ahora es compatible con múltiples versiones del marco Bootstrap y también incluye funcionalidad adicional incorporada para migrar fácilmente un proyecto a la última versión.

Cómo migrar

Para migrar un proyecto a Bootstrap 5, abra el menú principal Configuraciones del proyecto y establecer el marco menú desplegable a Bootstrap 5. El proceso de migración comenzará y le notificará cuando se complete.

Cambios importantes

La Blocs función de migración automatizada solo migrará código esa Blocs ha creado, no migrará ningún código personalizado que se haya agregado a un proyecto a través de archivos adjuntos, la Editor de código o un Widget de código. Para ayudar a resolver cualquier problema, le recomendamos que se familiarice con el Documentos de migración de Bootstrap 5.

Estilismo

Hay una serie de pequeñas diferencias de estilo visual en Bootstrap 5, sin embargo, la más notable es el hecho de que todos los enlaces ahora están subrayados de forma predeterminada, para ayudar a mejorar la accesibilidad del sitio.

Estructura

Todas las barras de navegación ahora tienen un contenedor dentro. Esto simplifica drásticamente los requisitos de espacio y elimina la necesidad de anulaciones de CSS extensas.

Javascript

Bootstrap 5 ya no requiere ni usa Jquery. Esto significa que Jquery no está incluido en los sitios de Bootstrap 5, de forma predeterminada. Este cambio tiene el potencial de romper el javascript personalizado que se ha agregado a un proyecto.

Al exportar, Blocs escaneará todos los archivos adjuntos de JavaScript, inspeccionándolos en busca de referencias obvias a Jquery. Si se encuentran referencias, Blocs incluirá Jquery con el sitio automáticamente.

Atributos de datos

Los atributos de datos para todos los JavaScript (modales, carruseles, información sobre herramientas, etc.) ahora tienen un espacio de nombres para ayudar a distinguir la funcionalidad de Bootstrap de la de terceros. Por ejemplo, Bootstrap 5 usa datos-bs-alternar en lugar de alternar datos. A continuación se muestra una lista de los atributos de datos más comunes que han cambiado, consulte la Documentos de migración de Bootstrap 5 para obtener una lista extensa.

• alternar datos > datos-bs-alternar
• colocación de datos > ubicación-bs-datos
• padre de datos > datos-bs-padre
• descartar datos > data-bs-despedir
• paseo de datos > datos-bs-ride
• diapositiva de datos > datos-bs-diapositiva
• deslizar-datos-a > datos-bs-deslizar-hacia

Clases

Hay una serie de cambios en los nombres de las clases en Bootstrap 5, a continuación se muestra una lista de las clases más comunes que han cambiado. por favor refiérase a Documentos de migración de Bootstrap 5 para obtener una lista extensa.

Formularios

• control personalizado > verificación de formulario
• interruptor personalizado > cambio de forma
• entrada de control personalizado > formulario-verificación-entrada
• etiqueta de control personalizado > etiqueta de verificación de formulario

Inserciones receptivas

• incrustado-sensible > proporción
• incrustar-responsive-16by9 > relación-16 × 9
• incrustar-responsive-4by3 > relación-4 × 3
• incrustar-responsive-4by4 > relación-4 × 4
• incrustar-responsive-9by16 > relación-9 × 16

Margen y relleno

• ml-0 > ms-0
• ml-1 > ms-1
• ml-2 > ms-2
• ml-3 > ms-3
• ml-4 > ms-4
• ml-5 > ms-5
• ml-auto > ms-auto
• mr-0 > me-0
• mr-1 > me-1
• mr-2 > me-2
• mr-3 > me-3
• mr-4 > me-4
• mr-5 > me-5
• señor-auto > yo-auto
• PL-0 > ps-0
• PL-1 > ps-1
• PL-2 > ps-2
• PL-3 > ps-3
• PL-4 > ps-4
• PL-5 > ps-5
• pl-auto > ps-auto
• pr-0 > pr-0
• pr-1 > pe-1
• pr-2 > pe-2
• pr-3 > pe-3
• pr-4 > pe-4
• pr-5 > pe-5
• pr-auto > pe-auto

Alineación

• flotador izquierdo > inicio flotante
• flotar derecho > extremo flotante
• texto a la izquierda > inicio de texto
• texto a la derecha > fin de texto

Popovers e información sobre herramientas

• flecha > flecha de información sobre herramientas
• flecha > flecha-popover

Observaciones

• solo sr > oculto visualmente
• sin canalones > G-0
• btn-block > w-100