Diferencia entre Bootstrap 4 y Bootstrap 5

¿Qué es Bootstrap?

Es un marco de código abierto desde finales de 2011 que se utiliza para diseñar sitios web receptivos con un enfoque móvil primero de manera más rápida y sencilla. Bootstrap está disponible para HTML, CSS y JS. Según lenguajes del lado del servidor como PHP, Node, etc. bootstrap ayuda a diseñar el frente. Bootstrap facilitó el trabajo de los desarrolladores al preparar las plantillas que son la parte básica de cada sitio web. Por lo tanto, las personas tienden a desarrollarse más y no pierden el tiempo en plantillas básicas con hermosos diseños junto con la capacidad de respuesta disponible.

¿Por qué Bootstrap?

  • Más rápido y más fácil
  • Estilo móvil primero
  • ¡Es gratis! Disponible en www.getbootstrap.com
  • Compatibilidad con navegador
  • Diseño de respuesta

Bootstrap 5 alpha se lanzó a mediados de junio de 2020. Como está en la versión alpha-1, se pueden agregar algunas características más a bootstrap 5 en el futuro

En la versión alfa-1 de bootstrap 5, algunas clases eliminadas son:

  • forma – serie
  • formulario – en línea
  • lista – en línea
  • Baraja de carta

Algunas de las clases adicionales:

  • gx-* (las clases controlan el canalón horizontal/ancho de columna)
  • soldado americano-* (las clases controlan el ancho de la canaleta vertical/relativa)
  • gramo-* (las clases controlan el ancho de la canaleta horizontal y vertical)
  • filas-cols-auto

Diferencia entre Bootstrap 4 y Bootstrap 5

EL ORIGEN DE LA CORREA DE ARRANQUE 4 CORREA DE ARRANQUE 5
Sistema de red Tiene 5 capas (xs, sm, md, lg, xl). Tiene 6 capas (xs, sm, md, lg, xl, xxl).
Color Tiene colores limitados. Se agregaron colores adicionales a la apariencia, se mejoró una tarjeta de paleta de colores. diferentes colores están disponibles para elegir.
jquery Tiene jquery y todos los complementos relacionados. Elimine Jquery y cambie a Vanilla JS con algunos complementos que funcionan
explorador de Internet Bootstrap 4 es compatible con IE 10 y 11. Bootstrap 5 no es compatible con IE 10 y 11.
Elementos de formulario Los botones de radio, las casillas de verificación se ven diferentes en diferentes sistemas operativos y navegadores. El formulario utiliza lo que proporcionan los navegadores predeterminados. La apariencia de los elementos del formulario no cambiará, en diferentes sistemas operativos o navegadores. Los formularios se pueden personalizar y se pueden agregar controles de formulario, no dependerían del navegador.
API de utilidades No podemos modificar utilidades en bootstrap 4 Bootstrap 5 dio libertad para modificar y crear nuestra propia utilidad.
Canal Usamos .glutter con tamaño de fuente en px Usamos .g* con tamaño de fuente in rem
Clases Verticales Las columnas se pueden colocar en relación Las columnas no se pueden colocar unas con respecto a otras
Iconos de arranque Bootstrap 4 no tiene sus propios íconos SVG, tenemos que usar font-awesome para los íconos. Bootstrap 5 tiene sus propios iconos SVG
jumbotron Es compatible. No es compatible con jumbotron.
Una baraja de cartas La baraja de cartas se utiliza para crear un isset de cartas del mismo ancho y alto. La clase de mazo de cartas se elimina en el arranque
barra de navegación Tenemos una propiedad de bloque en línea y obtendremos un menú desplegable blanco como predeterminado para la clase menú desplegable-oscuro. La propiedad de bloque en línea se elimina y obtenemos un menú desplegable negro como predeterminado para la clase desplegable-menú-oscuro.
Generador de sitios estáticos Bootstrap 4 utiliza el software Jekyll. Bootstrap 5 utiliza el software Hugo como un generador rápido de sitios estáticos.
cuadrícula de caja flexible esto facilita la implementación de diseños verticales, y las columnas y filas se pueden implementar fácilmente. las clases de autor-centro-contenido se pueden usar directamente para alinear según sea necesario. se proporciona un sistema de cuadrícula avanzado, pero las columnas no tienen posiciones relativas.
Soporte RTL No habilita la traducción RTL (de derecha a izquierda). Habilita la traducción RTL (de derecha a izquierda).
Componente fuera del lienzo No es compatible con el componente Offcanvas. Es compatible con el componente Offcanvas (que ahora está disponible).
Mis notas personales
flecha_caer_arriba

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Salir de la versión móvil