Saltar la navegación

Clases de Boostrap (grid classes)

Bootstrap contiene un gran compendio de clases para resolver las necesidades más comunes de un sitio web.

Bootstrap utiliza un sistema de clases predefinidas que los desarrolladores pueden aplicar directamente a los elementos HTML para aplicar estilos y funcionalidades específicas. Estas clases facilitan el desarrollo web al proporcionar un conjunto común de reglas y estilos que se pueden aplicar con facilidad. Aquí hay algunos ejemplos de clases de Bootstrap:

Rejilla (Grid System)

container: envuelve el contenido y proporciona márgenes laterales para centrarlo.

row: define una fila en la rejilla.

col: define una columna en la rejilla.

col-{tamaño}: especifica el ancho de la columna, donde el tamaño puede ser xs (extra pequeño), sm (pequeño), md (mediano), o lg (grande).

offset-{tamaño}: desplaza la columna hacia la derecha según el tamaño especificado.

Tipografía

h1 a h6: define encabezados con tamaños de fuente diferentes.

lead: aplica estilos para resaltar un párrafo, generalmente usado para introducciones.

blockquote: estilo para citas en bloque.

Estilos de Texto y Colores

text-{color}: cambia el color del texto.

bg-{color}: cambia el color de fondo.

font-weight-bold: hace que el texto sea negrita.

text-center, text-right, text-left: alinea el texto en el centro, derecha o izquierda.

Botones

btn: estilo básico de botón.

btn-{tipo}: donde {tipo} puede ser primary, secondary, success, danger, warning, info, o light.

btn-lg, btn-sm: tamaños grandes o pequeños de botón.

Formularios

form: estilo básico de formulario.

form-control: aplica estilos a campos de entrada, selectores y áreas de texto.

input-group: agrupa elementos de formulario.

Barra de Navegación

navbar: estilo básico de barra de navegación.

navbar-expand-{tamaño}: define cuándo la barra de navegación se colapsará, donde {tamaño} puede ser sm, md, lg, o xl.

Componentes Adicionales

badge: etiqueta que muestra información como notificaciones o recuentos.

alert: estilo para mensajes de alerta.

card: contenedor de contenido con estilos consistentes.

Estas son solo algunas de las clases que Bootstrap proporciona. Al utilizar estas clases, los desarrolladores pueden construir rápidamente interfaces web atractivas y responsivas sin tener que escribir una gran cantidad de código personalizado. Puede consultar la documentación oficial de Bootstrap para obtener una lista completa de clases y ejemplos de uso en el siguiente enlace: https://getbootstrap.com/docs/5.3/components/accordion/

Creado con eXeLearning (Ventana nueva)