4

10 novedades que traerá Bootstrap 4

1307Puntos

hace 5 años

Nota de Platzi: Aún no se sabe exactamente cuándo tendrá lugar el lanzamiento oficial de Bootstrap 4, pero su versión alpha promete mucho. En este guest post, nuestro estudiante Juan Castro Lurita comenta unos de los features nuevos que más han llamado su atención. Bootstrap es quizás uno de los Frameworks Frontend más populares del medio; desde su aparición en el 2011 ha sido usado por miles de desarrolladores en sus proyectos personales o profesionales. El tiempo pasa, todo avanza y Bootstrap no se queda atrás. Nuestros amigos fanáticos de la banda REO Speedwagon están trabajando en muchos cambios y novedades para su próxima versión, Bootstrap 4. En este artículo voy a contarles 10 novedades muy interesantes que probablemente incorporará. a

1.- Soporte para Flexbox

Este sistema es incorporado en Bootstrap 4, con el beneficio de que ahora mediante Flexbox podemos hacer que los elementos tengan un height automático y se adapten a todos los dispositivos sin problemas. Si bien ya se podía hacer desde la versión 3 o con CSS3 puro, esta es una nueva opción para poder hacerlo. Esta funcionalidad aún no está compatible con Internet Explorer 9, por ello está como opcional: la podemos habilitar o desactivar abriendo el archivo _variables.scss que viene en la versión de Bootstrap con Sass. Puedes ver el archivo _variables.scss con esta y demás opciones disponibles en su repositorio GitHub.
// Options
//
// Quickly modify global styling by enabling or disabling optional features.

$enable-flex:               false !default;
$enable-rounded:            true !default;
$enable-shadows:            false !default;
$enable-gradients:          false !default;
$enable-transitions:        false !default;
$enable-hover-media-query:  false !default;
$enable-grid-classes:       true !default;
$enable-print-styles:       true !default;
Sobre el mismo tema: Crear layouts increíbles con Flexbox con el Curso de Desarrollo Web Online

 2.- Paneles contenedores para tarjetas

Esta funcionalidad ya existía en Google Material Design y también se podía emular con CSS puro o con plugins adicionales, pero ahora Bootstrap 4 lo integra nativamente en su core. b

3.- Abandono de soporte para Internet Explorer 8

Bootstrap no se puede detener, y seguir las nuevas tendencias de desarrollo supone dejar atrás cosas que alguna vez dieron vida a una página web. A partir de Bootstrap 4 se hará un mejor uso de las transiciones, animaciones, efectos mixins, etc. que CSS3 ofrece, dándole paso al futuro de la web. Si deseas seguir soportando Internet Explorer 8 tendrás que seguir usando la versión 3 de Bootstrap y renunciar a las novedades detalladas en este post. c

4.- Hola ECMAScript 6

EC6 es incorporada en esta versión. Se han reescrito los plugins JS por completo para así aprovechar las nuevas mejoras y ventajas de JavaScript. d Así mismo se incorpora la programación modular en JavaScript UMD (Universal Module Definition). Ejemplos de este paradigma son Require JS, React JS y Handlebar JS, entre otros.

5.- Tooltips avanzados con Tether

La revolución de los Tooltips la traerá esta nueva versión de Bootstrap incorporando la librería Tether. El resultado es que al colocar el puntero sobre un elemento este mostrará de una manera diferente el texto o título correspondiente. e Con esta implementación vamos a poder gestionar e implementar Tooltips más avanzados y así mejorar la usabilidad de nuestra web responsiva.

6.- Nueva unidad de medida (rems) para la tipografía

Podemos darle un tamaño a la fuentes de nuestra aplicación con una nueva medida:
p {
    font-size: 14rem;
}


h1 { 
    font-size: 2.5rem; 
}
La principal razón de esta nueva medida es que implementa la tecnología rem off, la cual hace que todos los textos establecidos con la medida rem se amplíen o se vuelvan pequeños según el dispositivo.

7.- Nuevas clases para elementos

Esta novedad es muy cool, ya que podemos añadir padding, margin y más aspectos a nuestros elementos HTML. Por ejemplo así:
<div class="row">
    <div class="col-sm-6 m-b-lg">
        <!-- columna-pequeña-50%, margin-bottom-grande -->
    </div>
</div>
Es muy simple de usar. La sintaxis es la siguiente:
[margin or padding]-[direction]-[size]
Para hacer Margin or Padding usamos:
  • "m" para margin
  • "p" para padding
Para darle dirección a un elemento usamos:
  • "a" para todo
  • "t" top
  • "r" right
  • "l" left
  • "x" para left y right
  • "y" para top y bottom
Para darle tamaño usamos:
  • "0" cero
  • "auto" automático
  • "md" mediano
  • "lg" largo
  • Si lo dejamos en blanco usa la medida por defecto.
En esta nueva versión también se añade una nueva clase llamada outline para los botones, mostrando solo un borde:f Para implementarlos agregamos lo siguiente:
<button type="button" class="btn btn-primary-outline">Primary</button>
<button type="button" class="btn btn-secondary-outline">Secondary</button>
<button type="button" class="btn btn-success-outline">Success</button>
<button type="button" class="btn btn-warning-outline">Warning</button>
<button type="button" class="btn btn-danger-outline">Danger</button>

8.- Glyphicons nos deja

Fueron muchos proyectos hechos con la versión 3 e inferiores que mostraban los iconos de Glyphicons, pero ahora la gente detrás de Bootstrap decidió dar un nuevo paso y apostar por la librería de iconos Font Awesome. g Esta librería es la mejor en su género, están constantemente actualizando sus iconos. Hay rumores que podría llegar una versión de pago de Font Awesome, pero Bootstrap 4 nos la brindará de manera gratuita y eso es genial.

 9.- Nueva medida para los Embeds

Ahora tenemos la medida 21 x 9 para mostrar nuestros iframes u otros elementos:
<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
    <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
    <iframe class="embed-responsive-item" src="..."></iframe>
</div>

10.- Adiós al preprocesador LESS, bienvenido Sass

Para los que estaban acostumbrados a trabajar con preprocesadores, la versión 3 contaba con LESS, pero ahora la versión 4 de Bootstrap tendrá el motor Sass como preprocesador oficial. Este compila más rápido porque cuenta con LIBSASS, una potente librería para que puedas escribir código CSS más rápido y limpio. Si quieres saber más cambios y novedades por venir en Bootstrap, puedes visitar esta página en GitHub y enterarte de todos los features en desarrollo. Aunque haya nacido en Twitter, se trata de un proyecto open source y por lo tanto también puedes juntarte a su comunidad y hacer contribuciones.Te gustaría volverte un desarrollador front-end? Recuerdas que hacerlo en Platzi con nuestra carrera profesional: 

[maxbutton id="1" url="https://platzi.com/frontend/?utm_source=blog&utm_medium=cta_carrera&utm_campaign=blog-bootstrap"]

Juan Ricardo
Juan Ricardo
pepoflex

1307Puntos

hace 5 años

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
2
10004Puntos

Muy buen post!

0
1307Puntos
4 años

Gracias, puedes revisar la web oficial de Bootstrap para que veas mas detalles en cuanto a novedades de la versión 4 de Bootstrap

1

Hola Juan, gracias por el aporte. Una consulta como puedo conseguir el entrono para publicar los comentarios por el cual estoy comentado, ¡esta muy bueno!.

Saludos,
Christian Molina

0

Muy interesante !!! tenia muchas dudas al respecto,gracias por la aclaración.Saludos !!!