1. Inicio
  2. Consejos
  3. Migrar de Bootstrap 4 a Bootstrap 5
  1. Inicio
  2. Solucionando Problemas
  3. Migrar de Bootstrap 4 a Bootstrap 5

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.

lienzo de diseño

Cambios importantes

Los programas Blocs función de migración automatizada solo migrará código que 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 con una 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.

curso en línea

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.

Importante:

Tenga en cuenta que cualquier código de Jquery agregado a un proyecto a través del editor de código no activará la inclusión automática de Jquery.

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 > data-bs-parent
  • descartar datos > data-bs-despedir
  • paseo de datos > data-bs-ride
  • diapositiva de datos > data-bs-slide
  • deslizar-datos-a > data-bs-slide-to

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
  • mr-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
Misceláneo
  • solo sr > oculto visualmente
  • sin canalones > G-0
  • btn-block > w-100
Actualizado el 23 de noviembre de 2022

¿Le resultó útil este artículo?

Artículos Relacionados