Este curso te enseñará conceptos generales de desarrollo web del lado cliente, metodologías de trabajo y herramientas. Aprenderás sobre diseño responsive, grillas, y componentes CSS y Javascript de Bootstrap. Practicarás con preprocesadores de CSS, Less y Sass. También aplicarás conceptos básicos de Node.js y NPM para gestionar tus sitios web. Al finalizar este curso, habrás practicado con todas esas herramientas y serás capaz de diseñar una página web e implementar ese diseño con Bootstrap, crear un diseño responsive y preparar tu sitio web para salir a producción.
Sistema de grillas
Loading...
来自 Universidad Austral 的课程
Diseñando páginas web con Bootstrap 4
11 个评分
从本节课中
Presentación de Bootstrap 4.0
Este módulo te dará una introducción a la programación web full stack y una rápida visión del curso completo en general. Aprenderás conceptos básicos de Bootstrap, inicializar un proyecto utilizando NPM, configurar tu repositorio utilizando Git y Bitbucket. Aprenderás sobre diseño responsive y sistemas de grillas de Bootstrap.
与讲师见面
Ezequiel LamónicaLicenciado en Ciencias de la Computación (UBA), IAE EMBA Candidate 2018.
A[MÚSICA] [MÚSICA]
[MÚSICA] Habiendo
conocido el módulo flex, comencemos con el sistema de grillas de Bootstrap.
Veamos qué genera el siguiente código.
Comencemos a ver el sistema de grilla de Bootstrap.
¿En qué se basa su potencial responsive?
Básicamente, se basa el módulo flexbox.
Flexbox nos permite gestionar la visualización de nuestra página web
y el esquema de disposición de los elementos que utilizaremos.
Nos permite gestionar el espacio y ubicar los elementos utilizando un sistema de una
única dimensión.
Este sistema de una única dimensión permite disponer,
con sencillez y facilidad, los elementos que utilizaremos.
Y esto se contrasta fuertemente con el sistema bidimensional de CCS grid.
Cuando utilizamos flexbox en Bootstrap, debemos pensar siempre en dos ejes,
el principal y el perpendicular.
El eje principal, definido con el atributo flex-direction,
puede estar en cuatro direcciones, row, row-reverse, column y column-reverse.
Row y row-reverse se utilizan para disponer los elementos en línea,
ubicándolos de izquierda a derecha,
en el caso de row, y de derecha a izquierda si es row-reverse.
Column y column-reverse se utilizan para disponer los elementos verticalmente,
ubicándolos de arriba hacia abajo,
en el caso de column, y de abajo hacia arriba si es column-reverse.
El eje perpendicular, o cross-axis,
como su nombre lo indica, varía de forma perpendicular al eje principal.
Si el eje principal es row o row-reverse, se vería de la siguiente manera.
Si el eje principal es column o column-reverse, sería de esta otra.
Es importante comprender bien estos conceptos de los ejes,
porque luego todo lo referente a alineación de contenido y ubicación de los
espacios se hace en base a ambos ejes.
Otro concepto importante es el de container.
Un área del documento que utilice flexbox, se llama flex container.
Para crear un container,
utilizaremos la propiedad display con el valor flex o inline-flex.
Al utilizarlo, lo veremos de la siguiente manera.
Se muestran los ítems en fila.
Flex-direction es row.
Se comienza a la izquierda o desde arriba, dependiendo del eje principal.
Los ítems no se agrandan a lo largo del eje principal, pero podrían achicarse.
Los ítems se disponen a llenar toda la longitud del eje perpendicular.
La propiedad flex-basis es auto, la propiedad flex-wrap es nowrap.
Veamos un ejemplo.
Habiendo conocido el módulo flex,
comencemos con el sistema de grillas de Bootstrap.
Veamos qué genera el siguiente código.
Se crean tres columnas de igual tamaño en cualquier tamaño de dispositivo.
Estarán centradas en la página, debido a que se encuentran contenidas en un div
con clase container, lo que llamamos directamente container.
La row hace las veces de eje principal y las col de eje perpendicular.
Como verás,
estoy hablando de los elementos utilizando el nombre de sus clases.
Esta abreviación es para que comprendas el rol que ocupan dentro de nuestro sitio
y espero que comprendas que el uso de estos nombres
nos va a ayudar mucho en nuestro proceso de aprendizaje.
Los containers proveen el centrado de sus elementos
y ubican horizontalmente su contenido.
Tenemos dos tipos de containers.
Container, que brinda un ancho responsive; y container-fluid,
que configura el ancho en 100% para todos los dispositivos.
Las row contienen columnas que las ubican horizontalmente.
Cada columna presenta un padding horizontal
para controlar la separación entre ellas.
Es importante respetar, para el sistema de grillas, que las rows
contengan siempre columnas y las columnas estén siempre dentro de una row.
Con eso garantizamos que todo se vea de forma agradable.
Si no especificamos el ancho de las columnas, cada una de ellas ocupará el
espacio proporcionalmente, de acuerdo a la cantidad de columnas.
Por ejemplo, si tuviéramos cinco columnas con la clase col-sm,
cada una tendría un ancho del 20%.
Esto lo realiza flexbox, como vimos anteriormente.
Por default, Bootstrap maneja 12 columnas por filas.
Tenemos otra alternativa para configurar el ancho de nuestras columnas
utilizando las clases col-*,
siendo asterisco la cantidad de columnas de uno a 12 que queremos ocupar.
En nuestro ejemplo anterior,
podríamos haber utilizado col-4 y tendríamos el mismo resultado.
Un último detalle, Bootstrap permite configurar cinco tipos de columna de forma
responsive para mantener el sistema de grillas responsive.
Esos tipos de configuraciones se llaman responsive breakpoints.
Los responsive breakpoints no son más que diferentes tipos de media queries que se
adaptan a determinado tipo de dispositivo.
Veamos la lista a continuación que resume estos puntos.
En la tabla se muestran los anchos de la query que aplican los diferentes
tamaños y detalles, como el nombre de la clase y demás.
Un comentario importante es que estos responsive breakpoints y los containers
son las únicas clases que se definen en píxeles.
Todo el resto de los elementos utilizan y rem.
Te voy a dejar un artículo para conozcas las diferencias entro los tres.
Así se entiende mejor por qué está distinción.
Veamos algunos ejemplos de cómo impactan estas clases.
En una pantalla extra-small, es decir, menor a 576 píxeles de ancho, se verá así.
El mismo código, en una pantalla de small a más grande,
mayor a 576 píxeles de ancho, se verá de la siguiente forma.
Nota que en la pantalla extra-small no se aplica la clase col-sm-3 ni col-sm-9,
porque el ancho de la misma no supera los 576 píxeles.
Así es como funcionan las media queries.
Si quedó claro su comportamiento,
te va a resultar muy intuitivo el uso de estos conceptos.
En el segundo aplica correctamente,
you que estamos en una pantalla de tamaño mayor.
Si simplemente queremos tamaño de ancho variable proporcionales a la pantalla,
no hace falta especificar nada, como en el siguiente ejemplo.
Como ven, utilizar la clase col es suficiente para la mayoría de los casos
donde no nos interese diferenciar los anchos.
Pasemos ahora a temas de alineación.
Comencemos a ver algunos ejemplos de alineación vertical.
Básicamente, podemos distinguir tres opciones, al comienzo,
al centro y al final.
Observemos, con código, cómo lo aplicamos.
En este caso, aplicamos las clases de alineación sobre la fila,
por eso aplica a todas las columnas por igual.
Veamos ahora la alineación vertical pero por columnas.
Con las clases align-self,
podemos ubicar donde queramos a las columnas dentro de una fila.
Pasemos a la alineación horizontal.
En pantalla vemos lo siguiente.
Acá nuevamente puedes observar en acción algunas de las clases que tenemos
para la alineación horizontal y su resultado.
Veamos dos temas más antes de pasar a la práctica,
el uso de offsets y la anidación.
Cuando consultes la documentación de Bootstrap, vas a ver que hay muchas más
configuraciones que vas a poder aplicar y las iremos viendo a lo largo del curso
y aplicándolas en tutorials y diferentes estados de práctica.
Por ahora no quiero cansarte con tantos conceptos.
Vamos a ver el uso de offset con algún ejemplo y vas a ver que, básicamente,
lo que queremos hacer es mover columnas tantas posiciones como queramos.
En la primera fila, pusimos una columna al comienzo
y luego una al final utilizando el offset de cuatro columnas.
Nota que utilizamos dos clases,
la primera para definir el ancho y la segunda para definir el offset.
Los otros dos casos son similares.
Pasemos ahora a la anidación.
Lo interesante de la anidación es que veas cómo podemos componer las grillas dentro
de otras.
Esto nos permite utilizar el simple concepto de grillas
para armar el contenido de nuestras páginas de forma responsive y adaptarlo
a cualquiera de nuestras necesidades.
Habrás notado que empezamos a utilizar mucho el inglés.
Esto es porque, básicamente, toda la documentación de Bootstrap y la mayoría,
por no decir todos los atributos, elementos, valores,
propiedades están en inglés.
Como viste a lo largo de estas lecciones,
voy a tratar de utilizar el español para que me entiendas y espero que al leer la
documentación original puedas comprenderla con facilidad.
[MÚSICA]
[MÚSICA]
