UIRejilla y maquetación
Contenedores, filas y columnas que ordenan el contenido y lo adaptan al ancho de la pantalla.
La rejilla tiene doce columnas y cinco puntos de corte. Una fila contiene columnas que se reparten su ancho; cada columna dice cuántas de las doce ocupa en cada punto de corte. El contenido se apila en pantallas pequeñas y se coloca en paralelo en las anchas.
Cuándo usarlo
Úsalo
- Diseñar primero para pantalla pequeña y añadir columnas al crecer el ancho.
- Mantener la suma de columnas de una fila en 12.
- Usar los mismos márgenes entre columnas en toda la página.
No
- Anidar más de dos niveles de filas.
- Usar anchos fijos en píxeles para las columnas.
- Usar la rejilla para alinear un solo control; usa espaciado.
Anatomía
Un contenedor (container, container-fluid) contiene filas (row) que contienen columnas (col, col-md-6…). El hueco entre columnas es el margen.
Variantes y estados
Esta versión de Moodle no tiene modo oscuro: los ejemplos se quedan en claro.
Combinaciones
| Combinación | Para qué usarla |
|---|---|
| Columnas × puntos de corte | col-12 col-md-6 col-lg-4: una columna en móvil, dos en tableta, tres en escritorio. |
| Fila × márgenes | Mantén los mismos márgenes (g-3) en toda la página. |
| Contenedor × ancho | container para páginas, container-fluid para herramientas que usan toda la pantalla. |
Qué cambia Didactika y por qué
| Qué cambiamos | Por qué ayuda |
|---|---|
| La rejilla no se toca | La maquetación es lo único que todo plugin comparte con Bootstrap y con las páginas de Moodle, así que Didactika no la cambia. |
Clases
| Clase | Qué hace |
|---|---|
container, container-fluid |
Envoltorio de ancho fijo y de ancho completo |
row |
Un grupo horizontal de columnas |
col, col-6, col-md-4 |
Una columna: automática, 6 de 12, 4 de 12 desde el punto de corte medio |
g-0, g-3no-gutters |
Margen entre columnas |
En esta versión
Bootstrap 5.3 guarda sus colores en variables CSS (--bs-*), así que un tema recolorea el componente con una sola variable. El margen entre columnas se define con g-*.
Bootstrap 4.6 compila sus colores en las clases, así que un tema recolorea el componente recompilando su hoja de estilos. El margen entre columnas se quita con no-gutters.
Bootstrap 4.6 compila sus colores en las clases, así que un tema recolorea el componente recompilando su hoja de estilos. El margen entre columnas se quita con no-gutters.
Accesibilidad
- El orden de lectura es el del marcado: no dependas de la rejilla para reordenar lo importante.
- El contenido debe tener sentido cuando se apila.
- Nunca exijas desplazamiento horizontal a 320 px de ancho.