angle-uparrow-clockwisearrow-counterclockwisearrow-down-uparrow-leftatcalendarcard-listchatcheckenvelopefolderhouseinfo-circlepencilpeoplepersonperson-fillperson-plusphoneplusquestion-circlesearchtagtrashx

Migrando de Bootstrap 4 a Bootstrap 5

En diciembre de 2020, Bootstrap 5 Beta 1 fue lanzado. Después de leer todos los cambios y adiciones, sólo se puede concluir que este es otro gran paso adelante.

17 enero 2021
post main image
https://unsplash.com/@davidboca

Hoy en día, los sitios web usan mucho CSS y Javascript. Cuando construyes sitios web, no puedes probarlos todo el tiempo con los principales navegadores. En su lugar, necesitas un framework que soporte los principales navegadores. Este framework necesita estar bien soportado y eso significa que sólo quedan unos pocos.

Para este sitio, elegí Bootstrap 4. Esto no es una coincidencia. Hace unos años estaba buscando el mejor framework para un gran número de sitios web para un cliente. Después de una extensa selección, Bootstrap salió como número uno.

Me gusta mucho Bootstrap. No soy un experto, sino un desarrollador de backend que lo usa para el frontend. Esto significa que miro a Bootstrap mayormente desde una perspectiva técnica. Tampoco soy un diseñador gráfico, pero conozco diseñadores gráficos a los que también les gusta.

¿Por qué actualizar a Bootstrap 5?

En diciembre de 2020, Bootstrap 5 Beta 1 fue lanzado. Después de leer todos los cambios y adiciones, uno sólo puede concluir que este es otro gran paso adelante. Bootstrap 5 Beta reemplazó a Bootstrap 4 en la página principal del sitio web de Bootstrap , lo que significa que al menos lo consideran adecuado para los nuevos diseños.

¿Por qué quise actualizar Bootstrap 4 a Bootstrap 5? El fin de semana pasado actualicé mi PC y portátil de desarrollo de Ubuntu 18.04 a Ubuntu 20.04. Así que pensé, mientras aún estoy en modo de actualización, por qué no actualizar Bootstrap también, probablemente quiero hacerlo en algún momento de este año de todos modos.

RTL, lenguajes de derecha a izquierda

Muchos no necesitarán esto, pero es una gran cosa si quieres apoyar los idiomas de derecha a izquierda. Hay alrededor de 300 millones de hablantes nativos de estos idiomas. Para activar esto, todo lo que necesitas hacer es añadir dir="rtl" al elemento <html>. Puedes intentarlo tú mismo.

To enable  RTL  add '?rtl=on' to the url

To disable  RTL  add '?rtl=off' to the url

¿Necesitas actualizar?

Como mucha gente, uso Bootstrap tal cual, así que a partir de un CDN, sólo lo alojo en mi propio servidor web. Si usas mucha personalización, SCSS, puede ser difícil. En este post comparto mis notas sobre la actualización de este sitio web.

Algunas preguntas y respuestas:

  • ¿Fue la migración exitosa?
    Sí. Este sitio web funciona ahora con Bootstrap 5.
  • ¿Fue difícil la actualización?
    No.
  • ¿Cuánto tiempo llevó?
    Cinco días. La mayor parte del tiempo se dedicó a convertir los campos de los formularios. También tuve que modificar las funciones de generación de formularios.
  • ¿Hubo algún problema?
    Sí, hubo algunos problemas. Al menos uno sigue sin resolverse en este momento. En Bootstrap 4, el toggler (icono de la hamburguesa) cambia a una 'X' y viceversa. No tengo ni idea de cómo hacerlo en Bootstrap 5.
  • ¿Deberías actualizar?
    Depende de ti. Te sugiero que primero mires las partes difíciles como el menú desplegable. Lee el resto de este post y mira los problemas de Github.
  • ¿Qué fue lo que más tiempo llevó?
    Reorganizar los campos del formulario.

Bootstrap 5 abandonó jQuery, pero no puedo vivir sin él....

Bootstrap 5 ya no usa jQuery. Me lo puedo imaginar. Sólo necesitaban un poco y ahora pueden arreglar problemas, incompatibilidades, ellos mismos. Una dependencia menos.

Uso jQuery en todas partes y ciertamente no voy a reemplazar todo mi código por el Javascript regular. La razón principal es que no tengo tiempo para resolver problemas del navegador, problemas de seguridad. ¿Significa esto que tienes que cargar más Javascript? No, en realidad no. Bootstrap también tomó el código necesario de popper.js y lo combinó con su propio código.

La herramienta para convertir las clases Bootstrap

No pude encontrar una herramienta para convertir las clases Bootstrap , así que usé Rexxer, una herramienta de búsqueda y sustitución general para Linux. Esto funcionaba bien, pero a veces era muy lento debido a todos los archivos que tenía que buscar. Pero no me quejo. También podría haber escrito una herramienta en Python, pero eso llevaría otras cuatro horas. Puede que quieras esperar hasta que haya más herramientas de actualización disponibles.

Paso 1: Revise los documentos de migración de Bootstrap

En la página web Bootstrap , hay una página llamada "Migrando a v5". Aunque no todo está listado aquí, a menudo me encontré volviendo a esta página para ver los cambios en ciertas clases, por ejemplo. El sitio web Bootstrap también tiene ahora (finalmente) un fantástico cuadro de búsqueda con autocompletado.

Paso 2: Modificar la plantilla base

Mover su plantilla base a Bootstrap 5 no es nada especial. La parte más interesante es eliminar el popper.js. El código está ahora en bootstrap.bundle.min.js. Después de realizar este paso, podrías estar pensando: ¿qué pasó con mi hermoso sitio web? ¡No te desesperes!

Bootstrap 4 plantilla base:

<!DOCTYPE html>
<html lang="en">
<head>
<meta  charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="/static/vendor/bootstrap/4.5.0-dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" rel="stylesheet">
</head>
<body>
	
<header>
</header>

<main>
</main>

<footer>
</footer>

<script src="/static/vendor/jquery/3.5.1/jquery-3.5.1.min.js"></script>
<script src="/static/vendor/popper/1.16.0/umd/popper.min.js"></script>
<script src="/static/vendor/bootstrap/4.5.0-dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

</body>
</html>

Bootstrap 5 plantilla base:

<!DOCTYPE html>
<html lang="en">
<head>
<meta  charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="/static/vendor/bootstrap/5.0.0-beta1-dist/css/bootstrap.min.css" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous" rel="stylesheet">

<body>

<header>
</header>

<main>
</main>

<footer>
</footer>

<script src="/static/vendor/jquery/3.5.1/jquery-3.5.1.min.js"></script>
<script src="/static/vendor/bootstrap/5.0.0-beta1-dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

</body>
</html>

Paso 2: Renombrar las clases de Bootstrap

Lo siguiente que hay que hacer es renombrar las clases Bootstrap . Después de cambiar la plantilla base verá un sitio con muchos problemas. Si revisaste la página "Migrando a v5" en el sitio web de Bootstrap , notarás que muchas de las clases Bootstrap han sido renombradas. No hay una sola lista agradable en esta página, así que raspé los cambios que eran importantes para mí:

Components
---
Rename .dropleft and .dropright to .dropstart and dropend.
Rename .dropdown-menu-*-left and .dropdown-menu-*-right to .dropdown-menu-*-start and .dropdown-menu-*-end.
Rename .bs-popover-left and .bs-popover-right to .bs-popover-start and .bs-popover-end.
Rename .bs-tooltip-left and .bs-tooltip-right to .bs-tooltip-start and .bs-tooltip-end.
Rename .carousel-item-left and .carousel-item-right to .carousel-item-start and .carousel-item-end.
Rename .close to .btn-close for a less generic name.

Utilities
---
Rename .left-* and .right-* to .start-* and .end-*.
Rename .float-left and .float-right to .float-start and .float-end.
Rename .border-left and .border-right to .border-start and .border-end.
Rename .rounded-left and .rounded-right to .rounded-start and .rounded-end.
Rename .ml-* and .mr-* to .ms-* and .me-*.
Rename .pl-* and .pr-* to .ps-* and .pe-*.
Rename .text-left and .text-right to .text-start and .text-end.

Text utilities
---
Rename .font-weight-* utilities as .fw-* for brevity and consistency.
Rename .font-style-* utilities as .fst-* for brevity and consistency.

Data utilities
---
Rename data-toggle to data-bs-toggle
Rename data-target to data-bs-target
Rename data-parent to data-bs-parent
Rename data-dismiss to data-bs-dismiss
Rename data-offset to data-bs-offset
Rename data-interval to data-bs-interval
Rename data-ride to data-bs-ride

Helpers
---
Rename .sr-only and .sr-only-focusable to .visually-hidden and .visually-hidden-focusable

Paso 3: Arreglar lo roto

El siguiente paso es arreglar todas las cosas que están rotas. Mantengo dos archivos CSS adicionales:

  • default.css
    Puede ser cambiado por otro tema.
  • custom.css
    Contiene el CSS que siempre debe estar presente.

A continuación están mis notas. No todo lo que hice está listado aquí. Dejé fuera algunas conversiones de campos de formulario.

Todos los enlaces están ahora subrayados por defecto. Horrible!

Corrección: Añadir a default.css:

a, ... {
	color: #000000;
	text-decoration: none;
}

Los encabezados son demasiado atrevidos

No sé si esto realmente fue un cambio.
Arreglar: Añadir a default.css:

h1, h2, h3, h4, h5, h6 {
	font-weight: 400!important;
}

Problemas de Navbar toggler (hamburguesa) (sin resolver)

Esto funciona diferente ahora. En Bootstrap 4 cambio de hamburguesa a X y viceversa. Esto ya no funciona en Bootstrap 5 y no tengo una solución para esto en este momento. Tuve que quitar la 'X'.

El orden de las columnas, la columna izquierda y la derecha fueron intercambiadas en el móvil

Arreglar: Tuve que jugar un poco con las clases de orden para arreglar esto.

Las etiquetas desaparecieron visualmente

Las etiquetas estaban usando la clase de placa. Hubo algunos cambios con la clase de placa.
Arreglos: Reemplacé la clase de placa por la clase de botón. Mejor de todas formas.

Botón de cierre para alertas y modales

Arreglar: Eliminar la línea del símbolo '&tiempo'.

Alertas. En Bootstrap 4 tienes algo como:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

En Bootstrap 5 esto se convierte en:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

El mismo arreglo para los modales.

La marca colapsada navbar y la hamburguesa se desplazaron a los límites izquierdo y derecho de la página

Con Bootstrap 4 tuve que ajustar esto.

Arreglar: Quitar px-0 en la clase de contenedor.

De:

<div class="sticky-top z-index-30">
  <nav class="navbar   navbar-expand-md {{  navbar_main_extra_class }} sticky-top z-index-30">
    <div class="container  px-0  mx-auto max-width-site">

Hasta:

<div class="sticky-top z-index-30">
  <nav class="navbar   navbar-expand-md {{  navbar_main_extra_class }} sticky-top z-index-30">
    <div class="container mx-auto max-width-site">

Incremento del margen izquierdo y derecho en XS y SM

Arreglar: Reducir el margen añadiendo px-0 y px-md-2.

De:

<main role="main" class="container-fluid  px-0  px-sm-3 pb-3 pt-5">
  <div class="row no-gutters mx-auto max-width-site">
    <div class="col">

Hasta:

<main role="main" class="container-fluid  px-0  px-sm-3 pb-3 pt-5">
  <div class="row no-gutters mx-auto max-width-site">
    <div class="col  px-0  px-md-2">

Forma - no hay margen debajo de los campos de la forma

La clase de grupo de forma fue eliminada.

Corregir: añadir a custom.css:

.form-group {
	margin-bottom: 1rem;
}

Formas - Grupo de entrada

La barra de búsqueda en navbar se volvió fea. Este es un grupo de entrada. Bootstrap 5 dejó de lado el .input-group-append y el .input-group-prepend.

Arreglar: Usar la documentación de Bootstrap para el grupo de Entrada.

En Bootstrap 4 tienes:

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's  username" aria-label="Recipient's  username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <span class="input-group-text" id="basic-addon2">@example.com</span>
  </div>
</div>

En Bootstrap 5 esto se convierte en:

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's  username" aria-label="Recipient's  username" aria-describedby="basic-addon2">
  <span class="input-group-text" id="basic-addon2">@example.com</span>
</div>

Formularios - Las etiquetas de campo de formulario ahora requieren la clase .form-label

Arreglar: Añadir una clase de etiqueta de forma.

En Bootstrap 4 tienes:

  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
  </div>

En Bootstrap 5 esto se convierte en:

<div class="mb-3">
  <label for="exampleFormControlInput1" class="form-label">Email address</label>
  <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>

Formularios - Se eliminó la selección personalizada

Arreglar: cambiar de clase.

En Bootstrap 4 tienes:

<select class="custom-select">
...

En Bootstrap 5 esto se convierte en:

<select class="form-select" aria-label="Default select example">

Formas - Se eliminó la casilla de verificación personalizada

Ahora es idéntica a la casilla de verificación Bootstrap 4 .

En Bootstrap 4 tienes:

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">
    Check this custom checkbox
  </label>
</div>

En Bootstrap 5 esto se convierte:

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Default checkbox
  </label>
</div>

Algunas cosas que me gustan y otras que todavía deseo

Como:

  • Más control sobre el diseño
  • Se han eliminado algunas inconsistencias
  • Nueva fuente por defecto
  • Fuentes sensibles
  • Bordes con anchos
  • Control del canalón
    Ahora es posible cambiar el espacio del canalón muy fácilmente. Apliqué la clase gx-3 inmediatamente!

Ojalá:

  • Más clases de ancho, como w-10, w-40
  • Clases de ancho de respuesta, como w-md-25
  • Las fronteras de respuesta, por ejemplo, los límites de las zanjas en los móviles

Resumen

La migración de Bootstrap 4 a Bootstrap 5 tomó mucho tiempo. Se hace por cerca del 90%. Y sólo uso un conjunto limitado. La mayor parte del tiempo se dedicó a convertir los campos de formulario. Genero formularios con campos con un script Jinja y tuve que hacer muchos cambios. Pero lo bueno es que Bootstrap 5 eliminó los campos personalizados.
Si tienes un sitio web funcionando por unos años más, entonces migrar a Bootstrap 5 definitivamente vale la pena. También puedes esperar unos pocos meses, para entonces la mayoría de tus problemas probablemente hayan sido resueltos por otros.

Enlaces / créditos

Bootstrap 5 Beta 1
https://blog.getbootstrap.com/2020/12/07/bootstrap-5-beta-1/

Build fast, responsive sites with Bootstrap
https://getbootstrap.com/

Migrating to v5
https://getbootstrap.com/docs/5.0/migration/

Reboot
https://getbootstrap.com/docs/5.0/content/reboot/

twbs / bootstrap
https://github.com/twbs/bootstrap

Leer más

Bootstrap

Deje un comentario

Comente de forma anónima o inicie sesión para comentar.

Comentarios (1)

Deje una respuesta.

Responda de forma anónima o inicie sesión para responder.

avatar

I created a really cool tool to help on this. What do you think?
It works pretty good, and can help. I put a live version of my script, which is available on the webpage downloadable or usable. It is licensed under the GNU, so please feel free to modify it.
https://properprogramming.com/tools/converters/bootstrap-4-to-bootstrap-5-converter/