¿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). |