Bienvenido a la segunda parte de mi serie de estilos, donde repaso algunas bibliotecas/marcos de estilos populares. En este blog, repasaremos Bootstrap. Bootstrap es un potente marco de interfaz de código abierto que agiliza y facilita la creación de sitios web al proporcionar un sistema de cuadrícula intuitivo, componentes de interfaz de usuario y una amplia gama de utilidades.

Configuración

Por supuesto, antes de entrar en algunas de las funciones, tenemos que hablar sobre cómo configurar Bootstrap en un proyecto. Al momento de escribir este artículo, la versión actual de Bootstrap es 5.3.3 y eso es lo que usaré para cualquier ejemplo.

Arranque a través de CDN

Bootstrap se puede configurar muy rápidamente utilizando una CDN o red de entrega de contenido. Este método no requiere ninguna instalación, simplemente agrega los enlaces CSS y JavaScript de Bootstrap a tu archivo HTML y ¡listo!
Pondrás el siguiente enlace CSS dentro de la etiqueta

Después de eso, colocarás el siguiente script antes de la etiqueta

A través del Administrador de paquetes

Si está trabajando en un proyecto más grande o con herramientas de interfaz modernas, es posible que desee realizar la instalación a través del administrador de proyectos. ¡Por suerte para nosotros, esto también es simple! En su terminal, simplemente escriba npm install bootstrap si usa npm, o hilo agregue bootstrap si usa hilo. Después de la instalación, querrás importar CSS y JavaScript de bootstrap a tus archivos CSS y JS principales respetuosamente:

// Import Bootstrap CSS
import 'bootstrap/dist/css/bootstrap.min.css';

// Import Bootstrap JavaScript
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

El sistema de red

Una de las características más poderosas de Bootstrap es su sistema de cuadrícula. Esto le permite crear diseños responsivos que se ajustan automáticamente a diferentes tamaños de pantalla.

Estructura

La grilla se basa en una estructura de 12 columnas para organizar el contenido. Su estructura básica puede verse así:

  

    
Column 1
    
Column 2
    
Column 3
  

• Contenedor: El contenedor contiene las columnas y filas mientras las alinea
• Fila: Las filas mantienen y agrupan columnas horizontalmente
• Col: Las columnas son donde vivirá tu contenido, cada fila puede tener 12

Tallas

¡Las columnas también pueden tener sus propios tamaños! Esto se puede utilizar para proporcionar diferentes diseños. Se indican según la cantidad de columnas que ocuparán en la fila.

  

    
100% Width
  
  

    
50% Width
    
50% Width
  
  

    
33.33% Width
    
33.33% Width
    
33.33% Width
  

Puntos de interrupción

El grid de Bootstraps es móvil primero, lo que significa que está diseñado para dispositivos móviles antes de escalar a dispositivos más grandes. Debido a esto, Bootstrap tiene clases que definen cómo actúan las columnas en diferentes tamaños de pantalla. Estos son:

• xs: Para pantallas de menos de 576px
• sm: Para pantallas de más de 576px
• md: Para pantallas de más de 768px
• lg: Para pantallas de más de 992px
• xl: Para pantallas de más de 1200px

Por ejemplo:

  

    
Wide on medium and larger screens
    
Narrower on medium and larger screens
  

En este ejemplo, la primera columna ocupa todo el ancho en pantallas pequeñas, pero solo ocho unidades de cuadrícula en pantallas medianas o más grandes. El segundo ocupará la mitad del ancho en pantallas pequeñas y solo cuatro unidades en medianas o más grandes.

Componentes comunes

Bootstrap nos brinda una variedad de componentes prediseñados que ayudan a crear sitios web atractivos y fáciles de usar con CSS personalizado mínimo. Hay muchos componentes, así que repasaré algunos de los más comunes con los que probablemente trabajarás.

Tipografía

Comenzaremos hablando del texto, ya que los usuarios necesitan leer para creer. Las clases de tipografía facilitan la definición de estilos de texto coherentes, desde títulos hasta texto del cuerpo y listas. Por ejemplo, los distintos títulos se indican según su clase de visualización:

Heading 1
Heading 2
Heading 3
This is lead text, which stands out from regular paragraph text.
This is regular paragraph text.
This is small text, which stands out from regular paragraph text.

También puedes definir el texto del párrafo con clases de utilidad para modificar el texto del cuerpo como se ve arriba.

Botones

¡Cada sitio web o aplicación necesita botones! Bootstrap ofrece una variedad de estilos de botones listos para usar. Sus clases se definen como tales:

Primary Button
Secondary Button
Danger Button


Large Button
Small Button


Success Outline
Warning Outline

Barra de navegación

¡El componente de barra de navegación de Bootstrap viene con clases integradas para alineación, menús desplegables y más!

En este ejemplo, la barra de navegación colapsará en pantallas más pequeñas.

Clases de utilidad

Bootstrap también incluye una amplia gama de clases de utilidades para ayudar a acelerar el desarrollo y reducir la necesidad de CSS personalizado. ¡Con solo unos pocos nombres de clases, puedes ajustar el espaciado, la alineación, las propiedades de visualización y más!

Espaciado

El espaciado es extremadamente importante en el desarrollo para facilitar la lectura del usuario. Afortunadamente, Bootstrap nos brinda clases para ajustar los márgenes y el relleno de elementos. Todos siguen un formato similar de {propiedad}{lados}-{tamaño}.

• Propiedad: m para margen, p para relleno
• Lados: t arriba, b abajo, l izquierda, r derecha, x izquierda y derecha, y arriba y abajo, o en blanco para todos los lados
• Tamaño: 0, 1, 2, ..., o automático

Por ejemplo:

Margin Top of 3
Padding of 5
Horizontally Centered with Auto Margin

Mostrar

Las utilidades de visualización ayudan a controlar la visibilidad y el diseño de los elementos. Se pueden utilizar para mostrar, ocultar o cambiar el comportamiento de los elementos. Las clases de visualización incluyen:

• bloque d: Mostrar como elemento de bloque
• d-inline: Mostrar como un elemento en línea
• d-ninguno: Ocultar el elemento
• d-flex: Habilitar Flexbox
• d-inline-block: Mostrar como un bloque en línea

Bootstrap también proporciona versiones responsivas de estas clases que se aplican a puntos de interrupción, como d-none d-md-block, esto oculta un elemento en pantallas pequeñas.

Visible on medium and larger screens
Centered with Flexbox

Utilidades de texto

Bootstrap ofrece una gran cantidad de personalización de texto con clases como:

Alineación de texto

• text-start: Alinea el texto a la izquierda
• fin de texto: alinea el texto a la derecha
• centro de texto: Alinea el texto al centro

Ajuste de texto

• text-nowrap: Evita que el texto pase a la siguiente línea
• text-truncate: Trunca el texto con puntos suspensivos si es demasiado largo

Color del texto

• text-primary: Texto con color primario (predeterminado: azul)
• text-success: Texto con color de éxito (predeterminado: verde)
• text-danger: Texto con color de peligro (predeterminado: rojo)

This text is centered and green
This text is right-aligned and blue

Conclusiones

Bootstrap es un marco potente y flexible que permite a los desarrolladores crear sitios web responsivos de manera eficiente. Al dominar estos conceptos fundamentales, podrá optimizar su flujo de trabajo y centrarse más en el diseño y la funcionalidad de su sitio en lugar de en CSS personalizado y gestión de diseño. ¡Así que sumérgete! ¡Experimente con algunos de los ejemplos y cree una aplicación increíble!

Fuentes

Oreja