Share
Bootstrap, uno de los marcos front-end más populares entre los diseñadores web, lanzó recientemente su muy ¡Esperamos ansiosamente la versión 4! Echemos un vistazo a lo nuevo, lo que se ha eliminado y lo que puede hacer con él..
Nunca dejamos de creer, ¡y esperamos que usted tampoco! Bootstrap 4.0.0 finalmente ha aterrizado! https://t.co/zFAOxpyhvD
- Bootstrap (@getbootstrap) 18 de enero de 2018
Esta iteración de Bootstrap, según Mark Otto y el equipo, es una "reescritura importante de todo el proyecto". Eso promete muchas mejoras, y también sugiere que hay muchas cosas para pensar si está planeando migrar proyectos existentes a esta nueva versión. No hay "cambios de última hora", pero hay mucho que asimilar. Es hora de saltar y examinar las características más importantes..
Tradicionalmente, el diseño de Bootstrap ha sido impulsado por estilos basados en flotadores. En versiones recientes, se puso a disposición una alternativa de flexbox, pero dado su amplio soporte para navegadores, flexbox es ahora el maestro de las cuadrículas de Bootstrap. La tecnología CSS detrás de las cuadrículas de Bootstrap no hace una gran diferencia, pero flexbox ofrece más flexibilidad que los flotadores, por lo que las cuadrículas basadas en flexbox vienen con algunas opciones más. Por ejemplo, usar flexbox significa que puede definir una columna y hacer que sus hermanos cambien de tamaño automáticamente a su alrededor..
El movimiento hacia favorecer a flexbox en realidad provocó otro cambio: el soporte del navegador. Bootstrap v4 ha eliminado oficialmente el soporte para Internet Explorer 8, 9 y iOS 6. Esto significa que sus sitios web de Bootstrap solo serán compatibles con IE10 + y iOS 7+. Vale la pena tomar nota de.
Los fanáticos de Sass se alegrarán al saber que Bootstrap ahora es oficialmente un proyecto Sass-first. Si descarga la fuente de Bootstrap, encontrará una carpeta llamada "Sass" en la que verá todos los parciales necesarios. "_Variables.scss" contiene todas las variables y configuraciones que necesitará, luego "bootstrap.scss" contiene todos los @importar Directivas, que le permiten personalizar su instalación de Bootstrap incluyendo o excluyendo los componentes que desee.
En todos los lugares, aparte de las consultas de los medios, Bootstrap v4 ha perdido píxeles en favor de las unidades de medida relativas como rems. Esto hace que todo sea más escalable, por lo que si aún no se ha acostumbrado a las unidades rem ahora sería un buen momento para echar un vistazo a estos recursos:
Además de que Bootstrap se aleja de los diseños basados en flotadores, su capacidad de respuesta ahora también viene con un nivel adicional. A partir de ahora, podrás personalizar estos cinco valores predeterminados:
$ grid-breakpoints: (xs: 0px, sm: 576px, md: 768px, lg: 992px, xl: 1200px)! predeterminado;
El siguiente cambio notable viene en la forma de un nuevo archivo de reinicio. "Reiniciar" toma los restablecimientos de Normalize, que usan solo selectores de elementos, luego se basa en algunos estilos de restablecimiento basados en clases de opinión (encontrará .mesa y .bordeado de mesa enterrado allí con varios otros).
Si alguna vez ha descargado una versión anterior de Bootstrap, estará familiarizado con el personalizador en línea. Esta herramienta le permitió verificar y deseleccionar varios aspectos del marco de Bootstrap para crear su versión ideal.
Bueno se ha ido.
En cambio, Bootstrap ahora se enfoca en su propia estructura modular, lo que le permite aprovechar Sass desde su extremo, incluir solo lo que necesita y compilar su propio resultado final desplegable .
Hazlo tu mismoBootstrap ya no incluye Glyphicons. En su lugar, se recomienda que encuentre sus propios favoritos e inclúyalos de la forma que considere más adecuada. El equipo de Bootstrap prefiere los siguientes conjuntos, que le recomendamos implementar como SVG en lugar de utilizar iconos de fuentes web:
Thumbs up de IconicLas versiones anteriores de Bootstrap incluían el soporte de Grunt para automatizar muchas de las tareas comunes; eso ahora se ha ido En su lugar, Bootstrap ahora viene con un montón de scripts npm que encontrará en el archivo "package.json". Puede usar estos para hacer cosas como ver los archivos de Sass en busca de cambios, realizar pruebas de pelusa en su JavaScript o simplemente usar corre npm dist para hacer todo y compilar una versión de distribución de su sitio web terminado.
Para obtener más detalles sobre cómo funcionan Bootstrap y Node.js, eche un vistazo a los documentos de la herramienta de compilación o consulte los siguientes tutoriales:
Junto con estos cambios importantes, hay una serie de cambios menores en la última versión de Bootstrap. Los fans de componentes como paneles, miniaturas y pozos se sentirán decepcionados al saber que se han eliminado. Sin embargo, han abierto el camino para un componente que abarca todo llamado "tarjeta", que en realidad es una gran mejora. Puede leer todo sobre estos cambios, y más, en la página de Migración.
Estén atentos para más tutoriales y cursos de Bootstrap 4 en Tuts +, y los veré la próxima vez!
Accentsconagua