Bootstrap 5: estas son las funciones principales de la actualización

Bootstrap, tal como se define en su sitio web, es "el conjunto de herramientas front-end de código abierto más popular del mundo, que presenta variables y mixins de Sass, un sistema de cuadrícula receptivo, componentes preconstruidos extensos y complementos potentes".

Con su versión número 5, Bootstrap sorprendió a sus usuarios con funciones y características nuevas, vamos a dar un repaso de las que más resaltaron entre los desarrolladores de esta tecnología frontend.

Características de Bootstrap 5

1. Soporte jQuery

Bootstrap ya no utilizará biblioteca jQuery, se realizaron mejoras a la biblioteca JavaScript para que este cambio se pudiera efectuar. A pesar de que la introducción de jQuery simplificó las tareas que se realizaban con JavaScript, ya no tendrá soporte. 

Ahora habrá archivos de origen más pequeños y los tiempos de carga de página se aceleraron, esto permitirá a Bootstrap tener un estilo más amigable, lo que de segura llamará la atención de otros usuarios a la tecnología.

Cabe destacar que, aunque ya no se necesita el uso de jQuery en Bootstrap 5, aún puedes usarlo si lo deseas. También vale la pena señalar que todos los complementos de JavaScript siguen estando disponibles.

2. CSS y sus propiedades personalizadas 

Las propiedades CSS personalizadas se pueden utilizar, ahora que se eliminó la compatibilidad con Internet Explorer. El navegador de Microsoft no admite propiedades personalizadas, esta es una de varias razones que han detenido a los desarrolladores web durante mucho tiempo. 

CSS es más flexible y programable con las variables personalizadas, las cuales se dividen en dos tipos: variables de raíz y variables componentes. Las variables de raíz se encuentran en el archivo _root.scss, mientras que las variables de componentes se utilizan para evitar la herencia accidental de estilos dentro de componentes con tablas anidadas. 

3. Sistema de red mejorado

Al contratrio de lo sucedido con las versiones 3 y 4, Bootstrap 5 conserva gran parte del sistema, tomando como base el ya existente en lugar de sustituirlo por completo. Algunos de los ligeros cambios que se dieron son: 

• La clase gutter (.gutter) se reemplazó por una utilidad (.g*) muy parecida a margin y padding
• También se han incluido clases de espaciado vertical.
• Las columnas ya no están predeterminadas en position:relative

4. Documentación mejorada

La documentación se ha mejorado con más información, especialmente en lo que respecta a la personalización. Un problema común era que con muchos sitios web que usan Bootstrap, se podía identificar inmediatamente que estaban usando Bootstrap. Bootstrap 5 ahora viene con una nueva apariencia y con una mejor personalización.

Tiene una mayor flexibilidad, permite personalizar sus temas y así no todos los sitios web donde se trabaja con Bootstrap lucen iguales. La página v4 se amplió con contenido y fragmentos de código, estos para construir sobre los archivos Sass. Además, se puede encontrar un proyecto npm en Github disponible como repositorio de plantillas. 

Cómo instalar Bootstrap con Vue

Antes de instalar Bootstrap, primero debe tener un proyecto Vue creado, si aún no lo tiene listo, puede crearlo ingresando el comando “Vue create” seguido del nombre del proyecto, así:

$ vue create vue-project-name

Le pedirá que seleccione el ajuste preestablecido o cree el suyo propio. Después de elegir el que más le convenga, se creará el proyecto Vue.

Después de esto, ahora podemos instalar "Bootstrap-vue" usando Yarn o NPM. Si deseas instalar "bootstrap-vue" y "Bootstrap" usando el administrador de paquetes Yarn, escriba el siguiente código:

$ yarn add bootstrap bootstrap-vue

O, si deseas instalarlos usando npm, escriba el código:

$ npm install bootstrap bootstrap-vue --save

Una vez que ambos están instalados, debes habilitarlos en el archivo main.js

import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm';
import 'bootstrap-vue/dist/bootstrap-vue.css';
import 'bootstrap/dist/css/bootstrap.css';

Vue.use(BootstrapVue);

Después de habilitarlos, ahora puedes usarlos en tu proyecto Vue.

Te recomendamos en video