Un mundo ideal con Bootstrap 4

Como si de la canción procedente de la película de Disney, Aladdín, se tratara, os voy a llevar por un mundo ideal, que compartir que imaginar, de responsive design. Y es que ya tardada en escribir del ‘Framework’ por excelencia, en cuanto a la hora de hacer aplicaciones web responsive. Y es que no es para menos, ideado por Twitter, este framework tan famoso ya se llega por su versión 4. Os contaré ciertos aspectos que más me han llamado la atención de esta nueva versión.

Mundo ideal Boostrap4_2

Adiós a los Glyphicon

Si señores si, tristemente (para mí), los chicos de Bootstrap han dado muerte a los iconos predeterminados que tenia la versión 3. Y no es para menos, ya que no estaban dándoles la misma continuidad que otros iconos de terceros como los Font Awesome. En su lugar, te sugieren que utilices Iconic u Octicons, pero no te impiden que uses los que quieras.

Mundo ideal Boostrap4_3

¡El frotar se va a acabar!

Relax, no os contaré las bondades de Wipp Express, cuando digo que el frotar se va a acabar, es porque… ¿Cuántas veces hemos tenido que hacer CSS con estilos padding, margin, display, border, etc? Pues bien, Bootstrap 4 nos ha traído clases específicas para ello, Ejemplo: p = padding, d = display, m = margin, etc

Alineamiento vertical… ¡Por fin!

Creo que todo el mundo, se ha vuelto loco por alinear verticalmente cualquier div, o elemento html sin tener que hacer malabares. Pues bien, con la clase “align” podemos alinear verticalmente cualquier elemento.

¡A mí me gustan grandes!

Bueno vale, esto ha sonado a cierto anuncio de la teletienda muy rancio, pero era necesario hacer la gracia para entenderlo. En la nueva versión de Bootstrap, han renovado el sistema de tamaños predeterminados de pantalla. Antes teníamos tal que esto:

Large (lg), Medium (md), Small (sm) y Extra Small (xs)

Ahora se ha añadido una más, Extra Large (xl), si esto se parece a las tallas de la ropa, pero la diferencia ahora es que la xs la han dejado como predeterminada y si miramos el ejemplo con la clase col lo veremos:

  • Extra Small: col-1
  • Small: col-sm-1
  • Medium: col-md-1
  • Large: col-lg-1
  • Extra Large: col-xl-1 Mundo ideal Boostrap4_4

Y hasta aquí he llegado. Espero que os lo hayáis pasado bien con el artículo y que os haya servido de una mínima guía antes de pasar a la versión 4 de Bootstrap. Un saludo y como siempre…

Happy Coding!

fco-javier-gonzalez-blogJavier González

.NET Senior Developer and Technical Leader | Soluciones Microsoft | SOGETI ESPAÑA

Autor: ITblogsogeti

Sogeti es una compañía tecnológica perteneciente al Grupo Capgemini y especialista en: Testing y Calidad de Software; Soluciones Microsoft y High Tech Consulting. En Sogeti entendemos la importancia de obtener el máximo valor empresarial de sus sistemas de IT, por ello somos líderes mundiales en Testing & QA.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s