¡Llegó el primer lanzamiento Alfa de Bootstrap 5! Desde el equipo de Bootstrap anuncian una nueva versión del framework, en la que han estado trabajando durante varios meses para definir lo que comenzaron con la versión 4.
La nueva versión Alpha de Bootstrap 5 se centra en hacer que migrar de la versión 4 a la 5 sea más accesible, además de dejar atrás lo que ya está desactualizado o se ha considerado inapropiado. Por ello, en la versión de Boostrap 5, Bootstrap no dependerá de jQuery y han dejado de admitir el navegador Internet Explorer.
Enfocados en crear herramientas que más favorables para el futuro, y trabajando en la promesa de incluir variables CSS, un JavaScript más rápido, menos dependencias y mejores API´s.
Antes de actualizar, debes recordar que la versión 5 aún es una versión ALFA, y que ocurrirán numerosos cambios hasta la lleada de la versión BETA, Aún no se ha terminado de agregar y eliminar todos los nuevos apartados.
¡Ahora veamos los cambios incluidos en la nueva versión!
Nueva apariencia de Boostrap 5
Las páginas de documentos de Bootstrap ya no son de ancho completo para mejorar la legibilidad y hacer que nuestro sitio se sienta menos como una aplicación y más como una página de contenido.
Además, se actualiza la barra lateral de la página web de Boostrap para comenzar a usar secciones expandibles (con nuestro propio complemento Collapse) para ofrecer una navegación más rápida.
Nuevo logotipo de Boostrap 5
Han agregado un pequeño cambio en la aburrida forma cuadrada con la B dentro, modificando los lados laterales del cuadrado en simulación a unas llaves, las que se usan sobre todo en el mundo del CSS y de la programación.
Con lo que se hace un guiño, hacía el CSS. Queriendo simular un conjunto de reglas (la B interior) delimitada por las llaves del CSS.
Bootstrap junto JQuery y Javascript
jQuery trajo el acceso sin precedentes a comportamientos complejos de JavaScript a millones (¿miles de millones?) de personas en la última década y media.
Se debe estar agradecido a jQuery por todo el poder que ha permitido ofrecer a los desarrolladores front-end a lo largo de tanto tiempo (pero en la actualidad) ha dejado de ser eficaz y por eso, Bootstrap ha cambiado hacía Javascript para siempre.
Gracias a los avances realizados en las herramientas de desarrollo front-end y el soporte del navegador, podemos eliminar la dependencia de jQuery, lo que significa uno de los mayores cambios del framework Bootstrap en años y significa que los proyectos creados en Bootstrap 5 serán un poco más ligeros en cuanto al tamaño de sus archivos.
Además de eliminar jQuery, se han realizado un puñado de cambios y y otras mejoras en cuanto al código de JavaScript centrados en la calidad del código y en cerrar la brecha entre la v4 y v5.
Uno de los cambios más importantes será eliminar la mayor parte del complemento
Button
pasando a usar solamente HTML y CSS a la hora de indicar diferentes estados, a partir de hora los botones de alternancia funcionarán con casillas de verificación y botones de radio y así serán: mucho más confiables.
Si estas interesando, puedes ver la lista completa de los cambios relacionados a Javascript en el primer proyecto alfa v5 dentro del código de GitHub.
Nuevas propiedades CSS personalizadas
Gracias a la eliminación de la compatibilidad con Internet Explorer, en CSS 5, comenzaremos utilizar propiedades de CSS personalizadas.
En la versión anterior solamente se incluían un puñado de variables raíz para el color y las fuentes, ahora se han agregado para muchos más componentes y opciones de diseño.
Por ejemplo, nuestro componente
.table
donde se han agregado variables locales para facilitar los estilos de las tabla seccionados, apiladas y activas:
.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…
}
El equipo de Boostrap ha trabajado en sacar partido a las propiedades personalizadas y las posibilidades que ofrece la utilización de Sass intentando crear una estructura CSS más flexible.
Se pueden leer sobre los cambios relacionados a las Tablas y gracias a esto, se espera un mayor uso de componentes como los botones en un futuro.
Documentos de personalización mejorados
Se ha mejorado la documentación en varios apartados, dando más explicaciones, eliminando ambigüedades y brindando mucho más soporte para extender Bootstrap; a partir de ahora toda la documentación partirá desde el punto de “Personalizar”.
Los documentos personalizados de la versión de Boostrap 5 se expandirán a través de las página de la versión 4 agregando más contenidos y fragmentos de código. Se ha implementado una versión inicial npm para comenzar de manera más rápida y fácil; y también está disponible como un repositorio de plantillas dentro de GitHub, por lo que se puede bifurcar.
Se ha visto ampliada la paleta de colores. Con un extenso sistema de colores incorporado, y a partir de ahora podrás personalizar más fácilmente el aspecto de tus aplicaciones sin tener que abandonar la base de código.
Formularios de Bootstrap actualizados
Además de la nueva sección de Personalizar, se han revisado los componentes de Formularios. Consolidando los estilos de los formularios a través de una nueva sección de formularios.
Junto con las nuevas páginas de formularios, se han rediseñado y eliminado todos los controles de formularios que en la versión 4 se prsentaron. Los controles de formularios personalizados (cheques, radios, interruptores, archivos y más) ya que en la actualidad, se han convertido en valores predeterminados que cada navegador proporciona.
Si lo deseas, puedes explorar los nuevos cambios en los formularios en profundidad.
Bootstrap API
En Bootstrap 5, se implementará una nueva API de utilidad.
Sistema de cuadrícula mejorado
Bootstrap 5 no es cambio completa de su versión 4. Buscando la facilitación a la hora de actualizar, el equipo de Boostrap ha decidido mantener la mayor parte del sistema de compilación (a excepción de jQuery) y han trabajado sobre el sistema de cuadrículas anterior en vez de reemplazarlo por completo por algo más nuevo.
Los cambios implementados son los citados a continuación:
- Agregado un nuevo nivel de cuadrícula! Denominado
xxl. - Clases
.gutterreemplazadas por.g*, al igual que las opciones de margen / relleno; también han agregado opciones nuevas de espacio espaciado que coincide con las utilidades de espaciado con las que ya se estaban utilizando. - 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
position: relativepor defecto.
Aquí hay un ejemplo rápido de cómo serán las nuevas clases
gutter
:
<div class="row g-5">
<div class="col">...</div>
<div class="col">...</div>
<div class="col">...</div>
</div>
Si lo consideras oportuno, puedes revisar la información más en profundidad.
Próximos cambios en Bootstrap
RTL, offcanvas y más.
- Hay una versión bifurcada de nuestro modal que implementa un menú offcanvas. La idea de tener un contenedor offcanvas para colocar cualquier contenido valioso en la barra lateral (navegación, carrito de compras, etc.) es enorme.
- Estamos evaluando una serie de otros cambios en nuestra base de código, incluido el sistema de módulos Sass, un mayor uso de propiedades personalizadas de CSS, incrustando SVG en nuestro HTML en lugar de nuestro CSS, y más.
? Los Mejores Chollos de Amazon, ¡Agrégalos a tu Lista de Deseos!
Relacionado
Como una de las estructuras de control básicas en la programación, los bucles son casi una adición diaria al código que escribimos. El bucle forEach clásico es uno de los primeros fragmentos de código que aprendemos a escribir como programadores. Si fueras un desarrollador de Javascript, sabrías que Javascript no es ajeno a la iteración a través de los elementos de una matriz o un mapa ¡SEGUIR LEYENDO!
Como sabemos, Sci-hub es un sitio web increíble con millones de artículos de investigación para todos los estudiantes universitarios y académicos. El sitio web de Sci-Hub se encarga de obtener los artículos de investigación y artículos de pago utilizando las credenciales que se filtran. La fuente de credenciales utilizada por este sitio web no está clara. Sin embargo, se supone que muchas de ellas son donadas, ¡SEGUIR LEYENDO!
Aunque haya sido usuario de Windows durante décadas, el sistema operativo es tan amplio y complejo que siempre existen características útiles, pero menos conocidas, que podrían sorprenderte. En este sentido, he identificado diez funciones poco conocidas de Windows que pueden potenciar su eficiencia, comodidad e incluso su experiencia de uso lúdico en su PC.
- Procesador Dual-Core Intel Pentium Gold 4425Y (2...
- Memoria RAM de 8 GB LPDDR3
- Disco SSD de 128 GB
El rumor en torno a las criptomonedas no se desvanece por mucho que existan grandes pesimistas alrededor de los malos rumores. Entonces, si consideras invertir en el mundo de las criptomonedas, deberías estar atento a las criptomonedas que se espera que tengan un buen desempeño para el resto de 2021. En los últimos tiempos, los tokens DeFi están recibiendo toda la atención y es más que ¡SEGUIR LEYENDO!
Los cambios de paradigma revolucionarios debido a los desarrollos de la robótica en todo el mundo están generando nuevos puntos de vista en muchos sectores, entre ellos en los de la industria y la tecnología. Con la ayuda de la Inteligencia Artificial, la tecnología produce resultados innovadores cada segundo y el campo de la robótica define y reconfigura su uso a cada instante. Cada día que ¡SEGUIR LEYENDO!
Bienvenidos desarrolladores web y de software, estamos en los inicios de 2023 y es posible que muchos se esten planteado sus objetivos para lo largo del año. Con anterioridad ya he compartidos las rutas de aprendizaje para un desarrollador front-end, un desarrollador full-stack o un desarrollador back-end entre otros muchos contenidos más. En este artículo, me gustaría compartir algunos de los mejores frameworks y bibliotecas para ¡SEGUIR LEYENDO!
GitHub es el lugar que debes buscar cuando intentas mejorar como desarrollador, toda la información que necesitas está disponible en algún repositorio que alguien ya se ha molestado en indexar. Sin embargo, la parte complicado es encontrar el repositorio más adecuado. Es fácil sentirse perdido en todos los repositorios disponibles dentro de GitHub. Para ayudarte, he elaborado una lista de 10 repositorios de GitHub que pueden ¡SEGUIR LEYENDO!