Novedades en Bootstrap 4

Bootstrap  (BS) a sido una gran herramienta para darle vida a nuestras páginas, es un framework del lado del cliente enteramente (front-end), basado en HTML y CSS, tiene una serie de elementos visuales tales como botones, formas, tipografías, menús, paneles, etc, que nos ayudan  generar nuestras páginas, de una manera muy sencilla y rápida.

Es la herramienta perfecta para todo desarrollador front-end,  y para los que no conocen mucho de sobre el tema.

BS  ha ido evolucionando radicalmente a lo largo de su vida,  en la versión 2.0 soportaba diseño responsivo, todo un hito en la creación de páginas web, que se podían desplegar tanto  computadoras, tablets y teléfonos sin la necesidad de hacer el zoom característico por aquellos años; en la versión 3.0 adoptó la filosofía mobile-first, prestando especial atención en que los diseños creados se vean bien en dispositivos móviles,  entonces si se veian bien ahi, por ende se deberían de mirar bien en pantallas más grandes, como las de laptops  y PC. Ahora en la versión BS 4.0 (todavía en Beta) agregó SASS y FlexBox entre otros componentes.

BS 4.0, después de la versión Alpha, y liberación de la versión Beta, ha cambiado considerablemente, haciendo y deshaciendo muchas cosas, ha ido puliendo para obtener un gran cambio y mejoras en distintas partes.

Principales cambios y novedades

BS 3, ha sido casi reescrito totalmente para crear BS 4, estos cambios incluyen:

  • Cambio el uso de Less a Sass, y adaptación de variables a Sass.
    • BS ahora compila mucho más rápido, gracias a Libsass, mejores variables y
    • En lugar de mover y mejorar estilos como gradientes, transiciones, sombras, clases del grid, entre otras cosas en una nueva hoja de estilos, todas estas opciones fueron movidas a variables Sass.
  • Se eliminaron los componentes panel, thumbnail, y well para poner en su lugar cards.
    • Cards, es un componente totalmente nuevo en BS, pero te debes de sentir cómodo con él porque hace lo mismo que los panel, thumbnail y well hacen, solo que ahora de una mejor manera.
  • Se elimino la fuente de Glyphicons.
  • Se elimino el componente pager.
  • Ya no soporta navegadores viejos, el caso de IE8, IE9, y iOS 6.
    • Aun ocupas soporte para estos navegadores? No te preocupes, continúa utilizando BS 3.0.
  • Se incorporó flexbox (módulo CSS3 para responsive design) y se retiró el soporte a cosas non-flexbox, además de cambios en el sistema de grids.
    • Casi todo se movió a flexbox, y se agregó una nueva estructura a los grids para dar mejor soporte a dispositivos móviles.
  • Se cambiaron las unidades de medida de pixels a root ems.
    • Unidades movidas a rem para un mejor control  del tamaño de los componentes y tomar ventaja de CSS más nuevo.
  • Se incrementó el tamaño de letra default, de 14px a 16px.
  • En general se reescribieron casi todos los componente, plugins y documentación.c
  • Plugin Javascript reescritos.
    • Cada plugin JS ha sido reescrito en ES6 para tomar ventaja de las novedades de JavaScript, nuevos métodos, opciones de chequeo de tipos y más.
  • Mejoras en tooltips, popovers y dropdowns
    • Estas mejoras son gracias al uso de la libreria js
  • Y mucho mas!
    • Controles de formularios, rediseño del carrusel, menus, HTML5 para validaciones y estilos, y cientos de clases utilitarias y  nuevos componentes han sido incluidos.

Principales novedades:

Botones

En la Imagen 01 podemos ver cómo han ido cambiando los botones en las diferentes versiones de BS, hay una diferencia obvia en las versiones 2.x y 3.x donde se movió el gradiente a un diseño plano, esto aparece en estilos de menús (elemento nav) y botones. En  BS 4 el cambio es un poco más sutil en el look-and-feel, siguen siendo planos, solo que ahora hay una versión de contornos del color del botón.

Bootstrap buttons

Cards

Algo notorio inicialmente en BS4 es el uso de card, las antiguas clases .panel y .well han sido reemplazadas por  .card. Este cambio tiene mucho sentido, ya que en diseño responsivo se utiliza mucho este término “card” para el acomodo de los componentes, donde estos componentes (cards) pueden ser ordenados y acomodados independientemente unos de otros, haciéndolos un elemento esencial para la creacion de paginas responsivas.

Los cards se pueden mostrar agrupadas, solas, o en diferentes estilos, de igual o de diferente tamaño, hay distintos acomodos y opciones en el contenido.

En la siguiente imagen se puede ver que tienen aspecto similar a los paneles, pero dado su habilidad para ser acomodados fácilmente y definidos de una manera mas clara, hacen que sea muy fácil su desarrollo y mantenimiento. También podemos apreciar el cambio de fuente de 14px a 16px.

 

bootstrap Card

 

Fuentes

Otro punto que resalta es el incremento del tamaño default de fuente. El tamaño default paso de 14px a 16px en BS4.  Recordemos que todos los tamaños de fuentes cambiaron a unidades rem, entonces el tamaño de las fuentes son relativas al elemento raíz (root).

Bootstrap Header

BS 4 también integra clases para el tamaño del fuente en los títulos, el grupo de clases display-* , veamos el siguiente ejemplo:

<h1 class=”display-1″>Display 1</h1>
<h1 class=”display-2″>Display 2</h1>
<h1 class=”display-3″>Display 3</h1>
<h1 class=”display-4″>Display 4</h1>

El código anterior produce estas diferencias en un elemento H1:

Imagen 04- Encabezado

Flexbox

BS4 ahora utiliza Flexbox por default, Flexbox es una poderosa herramienta para diseño de layouts, y nos provee una gran flexibilidad y un mejor control del sistema de grid utilizado por bootstrap y componente core. El costo de incluir Flexbox es que se dejó de tener soporte para IE9, pero nos da mejoras significativas para alineaciones y tamaño de elementos.

Por decir un ejemplo, gracias a la utilización de Flexbox en los nuevos elementos cards, es mucho más fácil crear grupos de cards :

Para las personas que no están familiarizadas con flexbox,  veamos una lista de mejoras que esta herramienta nos aporta en BS4:

  • Igual anchura en columnas de las tablas.
  • Cards con la misma altura y anchura.
  • Centrado vertica y horizontal sin valores hardcode en márgenes u otros elementos.
  • Clases de utilidades para manejar mejor la visualización, dirección y alineación de elementos.
  • Auto márgenes para un espaciado más fácil.
  • Grupos de botones y menús justificados.

Casi cada componente de BS toma ahora ventaja de la integración de Flexbox. Se tiene ahora mejor control sobre el DOM, y el ordenamiento visual, esto nos lleva a tener menos errores y mejor mantenimiento. Incluso componentes complejos como el carrusel ha sido modificado en algunos lugares para utilizar flexbox.

Comentario final

Algo muy importante es que hay que tener en cuenta que la versión de BS 4 actual, continúa en versión Beta, y que algunas de las características aquí descrita podría cambiar un poco, pero no es algo de que alarmarse demasiado, dado que BS 4 se encuentra al final de la fase beta, los cambios que pueden ocurrir son relativamente pocos casi nulos.

Invito fervientemente a todos nuestros lectores, a que visiten la pagina oficial de Bootstrap para estar al tanto de cualquier actualización de ultimo momento, ademas de que nos contacten por cualquier duda o comentario. No dejen de seguirnos en nuestras redes sociales, e invitar a sus amigos que conozcan nuestra revista.

 

Referencias

Guia oficial

http://bootstrap4.guide/

Cards

https://uxdesign.cc/design-better-cards-c0d12ab581c4

Flexbox

https://filisantillan.com/el-gran-poder-de-css3-flexbox/

Guia visual.

https://medium.com/wdstack/bootstrap-4-whats-new-visual-guide-c84dd81d8387

Rafael Lopez Ibarra
Rafael Lopez Ibarra

Deja un comentario


*