"El diseño es el embajador silencioso de tu marca"
- Paul Brand

Novedades Bootstrap 4.1

Hace una semana que ha sido liberado Bootstrap 4.1, y dentro de las novedades que trae podemos destacar las siguientes.

Nuevo elemento de rango en los formularios

Se ha añadido una nueva clase para el elemento de rango de los formularios.

Aunque el input de tipo range por supuesto es nativo de HTML5, al añadirle esta clase quedará correctamente maquetado dentro de nuestros formularios.

La clase en concreto es form-control-range y la podemos usar de esta manera…

El resultado visual es el siguiente.

Nueva transición del Carousel

El componente carousel tiene un nuevo tipo de transición, al clásico efecto de desplazamiento que lleva tanto tiempo con nosotros ahora se le añade el de desvanecimiento.

Para indicar que queremos este tipo de transición solo debemos añadir la nueva clase .carousel-fade dentro del componente.

El código será similar a esto…

Como se puede observar solo es añadir la clase mencionada a mayores, el resultado es este…

Elementos de dropdown de texto plano.

Tal vez el título no se entienda muy bien, para ponernos en antecedentes cuando creamos un dropdown estamos definiendo un elemento que al ser clickado despliega hacia abajo una serie de elementos.

Hasta ahora se entendía que todos los elementos de este componente eran elementos interactivos y por eso tenían ciertas características:

  1. Eran operables mediante teclado al tratarse de botones o enlaces.
  2. Tenía distintos efectos al recibir el foco, al pasar el puntero por encima al hacer click…

En la nueva versión 4.1 se introducen elementos de texto plano que no son interactivos y por lo tanto no tienen esas características.

Para definirlos solo tenemos que usar la clase dropdown-item-text y envolverlos en elementos neutros como el span.

Un ejemplo de código es el siguiente…

 

Nuevas utilidades del Layout

Bootstrap 4 usa Flexbox para crear el layout y en esta nueva versión se han añadido clases para exprimir toda la potencia de estos atributos.

Para ello tendremos disponibles las clases .flex-fill, .flex-grow-*, y .flex-shrink-*.

Si ya conoces de que va Flexbox (y si no lo conoces aquí tengo una entrada donde lo explico) te sonará por donde van los tiros, pero vamos a explicarlo igualmente.

Con flex-fill definimos que todas las columnas dentro de una misma fila tengan el mismo ancho.

Esto es bueno porque si incluimos una más y le damos ese valor, todas las otras columnas se reajustan para que el ancho sea proporcional sin necesidad de redefinir sus valores.

Tanto flex-grow como flex-shrink se usan para definir la estrategia a seguir para ocupar el espacio.

Mientras que con grow establecemos que el elemento ocupe todo el espacio libre disponible, con shrink indicamos que el elemento se contraiga en caso de ser necesario.

Ambas propiedades pueden tener como valor 0 y 1, estando activas si es 1.

Tablas sin bordes

Se añade un nuevo estilo a las tablas para eliminar por completo los bordes.

Solo tenemos que añadir la clase table-borderless como en el siguiente ejemplo…

Escoger texto Monospace

Se ha incorporado una nueva utilidad para forzar texto monospace. Las fuentes monospace son aquellas donde todos los caracteres ocupan el mismo ancho, para más infomación visita este link

Para ello debemos usar la clase text-monospace y se escogerá una fuente de estas características entre las que definas.

Manipular el color del texto

Se han añadido algunas clases de apoyo con las que podremos manipular el color de los textos de manera sencilla.

Por ejemplo text-body para establecer el color por defecto del texto del body.

Y también text-black-50 que mostraría el texto en color negro con una opacidad del 50%.

Y su equivalente text-white-50 que mostraría el texto en color blanco con una opacidad del 50%.

Añadir sombras

Otra utilidad que se demandaba era la de una manera de añadir sombreado a los elementos, y ya está aquí.

Si bien es cierto que por defecto las sombras están deshabilitadas, podremos cambiar la propiedad $enable-shadows para activarlas.

Esto pondrá a nuestra disposición un juego de clases shadow-* que nos permite eliminar la sombra, y crearla hasta en 3 distintos tamaños.

Un ejemplo sería…

 

The following two tabs change content below.
Especialista en diseño web responsive, programador html5, css3, jquery, php y java.

Latest posts by Óscar Lijó (see all)