Que es Grid
bootstrap
Fredy
Hugo
Carlos
Mauricio
Definicion
• Grid en Bootstrap es un sistema de diseño basado
en una cuadrícula de 12 columnas que permite a
los desarrolladores web crear layouts que se
ajustan automáticamente a diferentes tamaños de
pantalla y dispositivos. Este sistema facilita la
disposición y alineación de elementos en una
página web, utilizando un conjunto de clases CSS
predefinidas.
Clases de Grid Bootstrap
Columnas (.col-*): Las
columnas son los elementos
que se colocan dentro de las
filas para estructurar el
contenido. Bootstrap utiliza
contenedor : Es el elemento Filas (.row): Dentro del
un sistema de 12 columnas
principal que contiene el grid contenedor, se usan las filas
por fila, lo que significa que
y proporciona un margen para agrupar las columnas.
puedes dividir una fila en 12
automático a los lados para Las filas se utilizan para
partes iguales o combinar
centrar el contenido. Hay dos organizar el contenido
varias columnas para ajustar
tipos: .container (ancho fijo) y horizontalmente y gestionar
el tamaño según el diseño
.container-fluid (ancho los márgenes y el espaciado
deseado. Las clases de
completo). entre las columnas.
columna pueden ser
específicas para distintos
Clases de columna: Cada Offset y orden: Puedes usar tamaños de pantalla,
clase de columna define clases adicionales como .col-sm-, .col-md-, .col-
cuántas columnas ocupará un como .offset-* para agregar lg-, y .col-xl-.
elemento en una fila. Por espacio en blanco a la
ejemplo, .col-md-4 indica que izquierda de una columna
el elemento ocupará 4 de las y .order-* para cambiar el
12 columnas disponibles en orden de las columnas en
una pantalla mediana (768px diferentes tamaños de
a 992px de ancho). pantalla.
Viewport
• Viewport es el área del navegador o la pantalla
de un dispositivo donde se renderiza y muestra el
contenido web. En el desarrollo web y diseño
responsivo, el viewport es crucial para garantizar
que las páginas se vean bien en una variedad de
dispositivos, desde móviles hasta pantallas de
escritorio grandes.
Breakpoints
• Breakpoint es una medida
específica del ancho de la pantalla (o
a veces la altura) en la que el diseño
de una página web cambia para
mejorar la usabilidad y la apariencia
en dispositivos con diferentes
tamaños de pantalla. Los breakpoints
se definen utilizando media queries
en CSS para aplicar estilos
específicos en función del ancho del
viewport.
Componentes
• Los componentes del sistema de grid en Bootstrap
(contenedores, filas, columnas, offsets, orden,
alineación y justificación) permiten a los
desarrolladores construir layouts responsivos y
estructurados. Utilizando estas herramientas, es
posible crear diseños que se adaptan a una
variedad de dispositivos y tamaños de pantalla,
mejorando la experiencia del usuario y la
flexibilidad del diseño.
• Bootstrap proporciona una variedad de clases para crear botones con diferentes estilos,
tamaños y estados. Aquí están los aspectos clave:
• Tipos de Botones
Botones •
•
Botón Básico:
html
• <button type="button" class="btn btn-primary">Botón Primario</button>
•
• .btn: Clase base para los botones.
• .btn-primary: Clase para un botón con el estilo primario (color principal).
• Variantes de Color:
• .btn-secondary: Botón con un estilo secundario.
• .btn-success: Botón con un estilo de éxito (verde).
• .btn-danger: Botón con un estilo de peligro (rojo).
• .btn-warning: Botón con un estilo de advertencia (amarillo).
• .btn-info: Botón con un estilo de información (cyan).
• .btn-light: Botón con un estilo claro.
• .btn-dark: Botón con un estilo oscuro
• Tamaños de Botones
• .btn-lg: Botón grande.
• .btn-sm: Botón pequeño.
• .btn-block: Botón de ancho completo.
• Ejemplo:
• html
• <button type="button" class="btn btn-success btn-lg">Botón Grande</button>
•
Menus
Barra de Navegación Horizontal
.navbar: Clase base para la barra de navegación.
• .navbar-expand-lg: Expande la barra de navegación en pantallas grandes y la
colapsa en pantallas más pequeñas.
• .navbar-light: Estilo de barra de navegación con texto oscuro.
• .bg-light: Fondo claro para la barra de navegación.
• .navbar-toggler: Botón para colapsar o expandir la barra de navegación en
pantallas pequeñas.
• .navbar-nav: Clase para la lista de elementos de navegación.
• Barra de Navegación Vertical
• Para una barra de navegación vertical, puedes utilizar el componente .nav con la
clase .flex-column para organizar los elementos en una columna.
• .nav: Clase base para el menú de navegación.
• .flex-column: Organiza los elementos en una columna en lugar de en una fila
Iconos
• . *Iconos de Bootstrap*: Bootstrap incluye un conjunto de iconos que puedes utilizar en tu grid. Puedes agregarlos utilizando las clases `bi`
seguidas del nombre del icono.
• Por ejemplo:
