El equipo detrás del framework CSS más popular Bootstrap ha lanzado una nueva versión. Al momento de escribir este artículo, la versión estable de Bootstrap 5 está disponible ( versiones ) y está disponible para su uso. Veamos cuáles son estas nuevas características introducidas en Bootstrap 5 y cuáles son las diferencias en Bootstrap 4 vs Bootstrap 5.
Si bien hay muchos cambios bajo el capó, como un nuevo logotipo para Bootstrap, pase a Hugo de Jekyll, primero tocaremos esos aspectos que afectan más a los proyectos de desarrollo web.
Novedades de Bootstrap 5 para desarrolladores web
Al igual que con cualquier cambio de versión importante, muchas cosas han cambiado en Bootstrap 5 con respecto a Bootstrap 4. Aquí está la lista de las principales diferencias que debes tener en cuenta al actualizar tus proyectos anteriores que se crearon con Bootstrap 4 o anteriores. Si estás comenzando un nuevo proyecto con Bootstrap 5 o estás utilizando plantillas de Bootstrap , tener en cuenta estos cambios te ayudará a tomar una decisión sobre la elección de Bootstrap 5 en lugar de Bootstrap 4.
1. Vanilla JS en lugar de jQuery
Desde que se introdujo Bootstrap, utilizó jQuery como una dependencia para ofrecer características dinámicas como expansión de menú, carrusel, menús desplegables, etc. Sin embargo, esta dependencia forzada de jQuery no fue del agrado de muchos desarrolladores que querían usar Bootstrap con marcos de JavaScript modernos como React y Vue.js. Con Bootstrap 5, han eliminado esta dependencia.
Tenga en cuenta que esto no significa que no haya dependencia de JavaScript en Bootstrap 5. Los comportamientos como el menú desplegable, el control deslizante, la ventana emergente, etc. en Bootstrap 5 dependen de Popper, así como de su propio módulo de Vanilla JS. No habrá ningún requisito de agregar jQuery. Si tu proyecto depende de jQuery, aún puedes agregarlo.
2. Compatibilidad con el navegador: eliminada la compatibilidad con IE 10 y 11
Con Microsoft moviendo sus esfuerzos completamente hacia el navegador Edge , Internet Explorer está perdiendo rápidamente participación de mercado. Además, Edge ha adoptado el motor de Chrome de código abierto que le permite tener todas las características modernas de JavaScript y CSS a la par con la última versión de Chrome y Firefox. Dado esto, el equipo de Bootstrap ha eliminado el soporte para Internet Explorer, lo que te permite proporcionar un conjunto moderno de características como variables CSS, JavaScript más rápido y mejores API.
Aquí hay una lista completa de navegadores que Bootstrap 5 ya no admite:
- Se eliminó Microsoft Edge Legacy
- Eliminó Internet Explorer 10 y 11
- Cayó Firefox <60
- Safari abandonado <10
- Eliminó iOS Safari <10
- Cayó Android <6
3. Propiedades personalizadas de CSS
Gracias a la eliminación del soporte para Internet Explorer, Bootstrap 5 ahora admite propiedades CSS personalizadas. En Bootstrap 4, las variables raíz estaban presentes solo para el color y las fuentes. Bootstrap 5 ahora ofrece variables CSS en un puñado de componentes y opciones de diseño. Por ejemplo, el componente de tabla hace uso de variables locales para facilitar los estilos de tabla seccionados, flotantes y activos.
.table {
--bs-table-bg: #{$table-bg};
--bs-table-accent-bg: transparent;
--bs-table-striped-color: #{$table-striped-color};
--bs-table-striped-bg: #{$table-striped-bg};
--bs-table-active-color: #{$table-active-color};
--bs-table-active-bg: #{$table-active-bg};
--bs-table-hover-color: #{$table-hover-color};
--bs-table-hover-bg: #{$table-hover-bg};
// Styles here...
}4. Paleta de colores ampliada
Muchos marcos CSS como Tailwind ofrecen un amplio conjunto de paleta de colores que ha sido bastante popular entre los desarrolladores. Bootstrap 5 ahora ha ampliado su paleta de colores para incluir más colores que están presentes en diferentes tonos como $ blue-100, $ blue-200, $ blue-300,…., $ Blue-900. Esto te permite personalizar fácilmente la apariencia de tu aplicación sin tener que abandonar la base del código. Puedes anular fácilmente estos colores con tu propia paleta de colores utilizando el generador de tonos de color .
5. Controles de formulario actualizados
Bootstrap 5 incluye controles de formulario diseñados a medida. En Bootstrap 4, los controles de formulario usaban los valores predeterminados que proporcionaba cada navegador. En Bootstrap 5, los controles de formulario ofrecerán una apariencia mucho más consistente en todos los navegadores debido a su diseño personalizado.
Todos estos nuevos controles de formulario se basan en controles de formulario estándar completamente semánticos y, por lo tanto, no es necesario agregar marcas adicionales para los controles de formulario y las etiquetas.
<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>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Default radio
</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>6. API de utilidades
Se ha integrado una nueva API de utilidades en Bootstrap 5. Puedes usar Sass para crear tus propias utilidades. También puedes utilizar la API de utilidad de Bootstrap para modificar o eliminar las clases de utilidad predeterminadas.
"width": (
property: width,
class: w,
values: (
25: 25%,
50: 50%,
75: 75%,
100: 100%,
auto: auto
)
),Ahora también puedes usar la state opción para generar variaciones de pseudoclase como y . Un ejemplo::hover:focus
$utilities: (
"opacity": (
property: opacity,
class: opacity,
state: hover,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);Clases de utilidad CSS que se generan con lo anterior:
.opacity-0-hover:hover { opacity: 0; }
.opacity-25-hover:hover { opacity: .25; }
.opacity-50-hover:hover { opacity: .5; }
.opacity-75-hover:hover { opacity: .75; }
.opacity-100-hover:hover { opacity: 1; }7. Sistema de cuadrícula mejorado
Si bien Bootstrap 5 mantiene la estructura del sistema de cuadrícula que se introdujo en Bootstrap 4, la mejora agregando nuevas clases. Esto significaría que se necesitará menos esfuerzo para mover la estructura de la cuadrícula de la versión anterior a la más nueva.
Aquí está lo que cambió en el sistema de cuadrícula Bootstrap 5:
- Nuevo
xxlnivel de cuadrícula. - Las clases de canalón se pueden agregar en la cuadrícula utilizando utilidades.
.g* - Las opciones de diseño de formulario se han reemplazado con el nuevo sistema de cuadrícula.
- Se han agregado clases de espaciado vertical.
- Las columnas ya no son predeterminadas.
position: relative
8. Compatibilidad con CSS Grid
Bootstrap 5 ha introducido una versión experimental de CSS Grid como un reemplazo opcional del sistema de cuadrícula predeterminado. Su uso no es obligatorio, sin embargo, a quienes prefieren CSS Grid sobre Flexbox les gustaría.
9. Nuevo componente offcanvas y Navbar Offcanvas
Se ha agregado un nuevo componente fuera del lienzo en Bootstrap 5 que se puede usar para crear barras laterales expandibles para la navegación o para los carritos de compras o el menú fuera del lienzo. Estos componentes fuera de la pantalla se pueden colocar a la izquierda, a la derecha o en la parte inferior de la ventana gráfica y se pueden configurar con atributos de datos o las API de JavaScript.
.navbar-expand-* Las clases también se han ampliado para incluir soporte para fuera de la lona dentro de la barra de navegación. Puedes envolver los elementos de su barra de navegación con el HTML fuera de la pantalla apropiado y apuntar el botón de alternancia de la barra de navegación hacia el menú fuera de la pantalla para que funcione. Lee los documentos de la barra de navegación de offcanvas para obtener más información
También te podría interesar
10. Nuevo acordeón
Bootstrap 5 agrega soporte para un componente nuevo . El nuevo acordeón incluye Bootstrap Icons como iconos de chevron que indican el estado y la capacidad de hacer clic. También puedes usarlo para eliminar el predeterminado , algunos bordes y algunas esquinas redondeadas para renderizar acordeones de borde a borde con su contenedor principal..accordion.accordion-flushbackground-color
11. Etiquetas flotantes en entradas de formulario
También se ha agregado un nuevo soporte de etiqueta flotante en bootstrap 5. Este comportamiento es similar al comportamiento mostrado por muchos marcos de interfaz de usuario de material design como MDB . Los estilos de validación de formularios también funcionan como se esperaba con las etiquetas flotantes presentes.
12. Componente marcador de posición
Se ha agregado un nuevo componente de marcadores de posición que te permite crear una interfaz de usuario mientras tu aplicación aún se está cargando.
13. Soporte RTL
Bootstrap 5 ahora incluye soporte RTL. La compatibilidad con RTL (de derecha a izquierda ) significa que puede crear sitios web en idiomas como árabe, hebreo, pashto, persa, urdu y sindhi. Los escritos en estos idiomas comienzan desde la derecha de la página y continúan hacia la izquierda, lo que exige su propia configuración de estilo específica para adaptarse a su diseño general. Ahora que Bootstrap 5 tienes el soporte RTL incorporado, podrás usar versiones RTL del archivo CSS Bootstrap para crear sitios web RTL. Consulta documentos y ejemplos para RTL.
14. Personalización más fácil
Bootstrap 5 ofrece una nueva sección Personalizar que se expande en la página de temas de v4 con más contenido y fragmentos de código para construir sobre los archivos Sass fuente de Bootstrap. Un proyecto de la NGP de arranque también se proporciona para ayudarte a empezar con la personalización de Bootstrap más rápido. La configuración de Bootstrap con Parcel ahora también está documentada.
15. Atributos de datos con espacios de nombres
Bootstrap utiliza atributos HTML para habilitar comportamientos de JavaScript. En Bootstrap 5, todos estos atributos han sido renombrados de a . Por lo tanto, todos los atributos de datos en Bootstrap 5 no contienen como infijo. Deberás encontrar todos y reemplazar todos esos atributos de datos al pasar de Bootstrap 4 a 5, sin embargo, en el futuro, esto mantendrá el nombre de los atributos de datos de Bootstrap separado del requerido por cualquier otra biblioteca o la suya.data-*data-bs-*bs
16. Popper.js v2
La información sobre herramientas y los elementos emergentes en Bootstrap funcionan con Popper.js . En Bootstrap 5, se adoptó la v2 de Popper.js, lo que trae pequeños cambios importantes:
offsetOpción eliminada de Tooltip / Popover y Dropdown. Esto ahora se puede lograr usando elpopperConfigparámetro.- La
fallbackPlacementopción se ha convertidofallbackPlacements.
17. Biblioteca de iconos SVG
Bootstrap ahora ofrece una biblioteca SVG de más de 1000 iconos que son fáciles de integrar en su código. Puedes agregar estos íconos por código en línea o sprite SVG. También se introducirá una versión de fuente web con la versión estable de esta biblioteca de iconos. He estado utilizando esta biblioteca de iconos en mis proyectos actuales (incluido Bootstrap 4) y me ha parecido bastante extensa.
18. Mejor documentación y ejemplos
También notarás una nueva apariencia en el sitio de documentación de Bootstrap 5 que ha sido renovado para mejorar la legibilidad. La barra lateral en la documentación ahora usa secciones expandibles para una navegación más rápida. También encontrarás documentos Sass mejorados que te ayudarán a personalizar la experiencia predeterminada de Bootstrap.
Se han agregado nuevos ejemplos con varios fragmentos de encabezados, héroes, jumbotron, características y barras laterales.
19. Hugo sobre Jekyll para la generación de sitios
El sitio de documentación de Bootstrap ha adoptado a Hugo sobre Jekyll para su generación de sitios estáticos. Hugo es un generador de sitios estáticos multiplataforma rápido y popular escrito en Go.
20. Nuevo logotipo
Por último, Bootstrap 5 ahora tiene un logotipo nuevo.
Bootstrap 5 vs Bootstrap 4 – ¿Cuál usar?
Aquí hay algunas razones por las que te gustaría seguir con Bootstrap 4 en tus proyectos actuales:
- Tu proyecto necesita soporte para IE 10 e IE 11.
- Tu proyecto depende de jQuery y no necesita nuevas funciones de Bootstrap 5.
- Ya estás utilizando Bootstrap 4 y todavía no deseas adaptarte a los nuevos cambios importantes de Bootstrap 5.
Y estas son las razones por las que te gustaría cambiar a Bootstrap 5 en tus nuevos proyectos o actualizar los anteriores:
- Estás usando React o Vue.js y quieres usar Bootstrap sin la dependencia de jQuery.
- Deseas utilizar las nuevas funciones de Bootstrap, como la paleta de colores ampliada, el sistema de cuadrícula mejorado, las utilidades personalizadas, RTL, etc.
En cuanto a mí, seguiré usando Bootstrap 4 en mis proyectos existentes. Para nuevos proyectos web, comenzaré a usar Bootstrap 5 de inmediato para hacer uso de las nuevas funciones introducidas. Poco a poco, actualizaré mis proyectos existentes para pasar a la versión más nueva. Puedes leer la guía oficial de migración a v5 en el sitio de Bootstrap para verificar las diferentes clases que necesitarían actualización y cualquier paso de migración adicional.
Kits de interfaz de usuario y kits de administración de Bootstrap 5
Estos son los kits de interfaz de usuario de Bootstrap más recientes y populares que admiten Bootstrap 5.
1. Soft UI Dashboard
Soft UI Dashboard de Creative Tim es una impresionante plantilla de panel de Bootstrap 5 que combina degradados, colores llamativos y texturas realistas. Tiene un diseño minimalista con influencias glassmorphism y bloques de diseño que te permiten personalizarlo a tu gusto. Soft UI Dashboard incluye 300 componentes, 14 complementos, 54 páginas de ejemplo e incluye soporte premium.
2. Soft UI Design System (kit de interfaz de usuario Bootstrap 5)
Soft UI Design System es un kit de interfaz de usuario premium basado en Bootstrap 5 desarrollado por el equipo profesional de Creative Tim. Cuenta con más de 300 elementos prediseñados, más de 100 bloques de diseño e incluye más de 39 páginas de ejemplo. Basado en la última tendencia de diseño de Glassmorphism , este kit de interfaz de usuario está completamente documentado y es compatible con Bootstrap 5.
3. Kit de interfaz de usuario MDB (kit de interfaz de usuario Bootstrap 5 y 4)
Al igual que con el anuncio de Bootstrap 5, MDB ha lanzado el Material Design UI Kit para Bootstrap 5. Hay muchos marcos de diseño de materiales , sin embargo, MDB ha sido uno de los más prometedores construido con Bootstrap y ofrece un diseño extenso, actualizaciones frecuentes y soporte profesional. .
MDB – Kit de interfaz de usuario de diseño de materiales con Bootstrap
MDB 5 está construido con las últimas Bootstrap 5 y Material Design 2.0. Ofrece más de 500 componentes de UI de material, documentos detallados, múltiples ejemplos prácticos, así como plantillas prefabricadas. Es una licencia del MIT y es gratuita para uso personal y comercial. Obtenga más información sobre MDB .
El UI Kit ofrece archivos SAAS que se pueden usar para modificar fácilmente los elementos incluidos si es necesario. Obtiene ejemplos de páginas como Registro, Inicio de sesión, Contraseña olvidada, Autenticación 2FA y muchas más.
Es cierto que el proceso de desarrollar una web o aplicación puede ser desafiante y confuso, pero para eso estamos, para ayudar. Contacta hoy para programar tu sesión de estrategia y dejar que comience la lluvia de ideas.
