Bootstrap 4 es la última versión de Bootstrap, el framework de CSS, HTML y JavaScript más popular, que nos permite desarrollar webs que se ajustan a cualquier resolución y dispositivo.
En esta última versión, el framework se ha reescrito por completo, con nuevos componentes, estilos más optimizados y aún más adaptabilidad.
Como suele suceder, para poder avanzar hay que deshacerse de las cargas del pasado, y en este caso implica eliminar el soporte para Internet Explorer 9 y anteriores.
Si necesitas dar soporte a esta versión del navegador, deberías quedarte con la Bootstrap 3.3.7. Por el contrario, si puedes prescindir del soporte a un navegador que va a cumplir 7 años, te animo a seguir leyendo.
Son muchos los cambios que se han introducido, estas son algunas de las mejoras en algunos de los componentes:
Navegación
Al igual que el sistema de Grid, la barra de navegación también ha sido rediseñada para usar flexbox. Con ello ahora tenemos control total de la distribución y tamaño de elementos que la componen.
Gracias a un nuevo sistema de clases, podemos usar una estructura de HTML distinta para los menús y no obligatoriamente listas.
Con Bootstrap 4, la barra de navegación se muestra por defecto colapsada (se suele mostrar un botón que la despliega), y hay que especificar a partir de qué resolución se expandirá. Para ello, disponemos de las nuevas clases navbar-expand-* para cada breakpoint.
Flex
Utiliza todas las clases disponibles en el componente grid en cualquier estructura HTML. Tan solo añade la clase d-flex al
elemento raíz.
Margen
Una nueva colección de clases para el margen se ha añadido a Bootstrap. Emplea las clases m{lado}-{tamaño} para añadir rápidamente un margen. Usa m{lado}-{resolución}-{tamaño} para hacer lo mismo con cualquier breakpoint.
Para seleccionar un lado, elige entre t,b,l,r,x e y para referenciar los lados superior (top), inferior (bottom), izquierdo (left) o derecho (right), así como x (izquierdo y derecho) o y (superior e inferior).
Para seleccionar un tamaño, elige un número entre el 0 y el 5, o auto para indicar un margen automático.
Ejemplo:
ml-sm-2 my-sm-3
Para añadir un margen izquierdo de tamaño 2 y uno superior e inferior de tamaño 3, ambos para resoluciones igual o superiores a sm (576px).
Espaciado
Igual que con el margen, para añadir un espaciado usaremos el mismo formato. Simplemente hay que sustituir la clase m (margin) por p (padding).
Ejemplo:
p-2 pl-xl-3
Para añadir un espaciado de tamaño 2 a los 4 lados, en todas las resoluciones por defecto, y un espaciado izquierdo de tamaño 3 en resoluciones igual o superiores a xl (1200px).
Texto
Bootstrap 3 ya permitía alinear el texto a la izquierda, derecha, justificado, etc., añadiendo la clase correspondiente. Ahora podemos hacer lo mismo pero personalizado por resolución. Así pues, a parte de las típicas clases text-left, text-right… Ahora también tenemos text-sm-left, text-lg-right, etc. A estas clases, se les añaden otras para especificar las mayúsculas, estilo de tipografía, negrita, salto de línea…
Conclusión
Las novedades mostradas en esta entrada son sólo unas pocas de las muchas que trae bajo la manga Bootstrap 4. Llegados a este punto ¿vale la pena actualizar? Rotundamente sí… y no.
Bootstrap 4 ha llegado para quedarse. Este framework va a girar en torno a esta gran versión. Sin embargo, y como en todos los cambios mayores de versión, implica que la compatibilidad hacia atrás se rompe en ciertos puntos: hay componentes que desaparecen, clases que cambian…
Si tu web no está en constante evolución o únicamente realizas tareas de mantenimiento, te aconsejo quedarte en la versión 3.3. El trabajo ya lo tienes hecho, y no va a quedar más bonita por usar la nueva versión. No obstante, si tu proyecto se mantiene vivo o si empiezas uno desde cero, te aconsejo encarecidamente que descartes versiones antiguas y empieces a usar la nueva. Puede que necesites un tiempo para el aprendizaje o para adaptar el HTML/CSS existentes, pero a la larga las herramientas que proporciona la versión 4 te harán ahorrar tiempo y te acabará compensando.
Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.
Cookies estrictamente necesarias
Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.
Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.
Cookies analytics
Esta web utiliza Google Analytics para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.
Dejar esta cookie activa nos permite mejorar nuestra web.
¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!