Transcripciones
1. Introducción al curso: ¿ Has estado
luchando con hacer modernos sitios web receptivos o tal vez solo eres nuevo en el desarrollo
web en general. Mi nombre es Kyle y
voy a estar caminando por
Bootstrap y cómo usarlo para construir sitios web de
respuesta rápida para tus clientes. Vamos a estar
revisando toda la documentación y señalando características
importantes
que vienen incorporadas en Bootstrap y te dan una ventaja
competitiva en el mercado. Tus sitios estarán muy
bien que van a ser funcionales y
aprenderás mucho en esta clase. Espero que estén
listos para empezar.
2. Sección 2: introducción de Bootstrap: Muy bien, bienvenidos a
la clase, todos. Gracias por
apuntarte a la clase. Espero que estén
listos para empezar. Si no estás familiarizado
con Bootstrap, vamos a estar
buceando profundamente la documentación, echando un vistazo a algunos ejemplos
y viendo cómo podemos utilizar aquellos en nuestro sitio que
vamos a estar construyendo. En este curso. Vamos a estar construyendo un Clon de Facebook, No necesariamente el back-end, pero sólo vamos
a estar construyendo las características de front end. Vamos a empezar
con la página de suscripción y luego vamos a trabajar
nuestro camino hacia la página de inicio. Vamos a estar usando elementos
Bootstrap en todo lo que podamos. Si hay algún CSS adicional, vamos a abordar eso. Cualquier cosa que
necesitemos personalizar. Lo daremos un
paso a la vez. Este curso va a
estar dirigido a principiantes, personas que no están familiarizadas
con Bootstrap. No obstante, si estás familiarizado
con el bootstrapping, solo necesitas un poco más con experiencia, solo necesitas un refresco. En este curso
también se dispondrá eso. Entonces espero que ustedes estén
listos para ponerse en marcha. Entonces con eso dicho,
saltemos.
3. Sección 3 - Uso de Bootstrap: De acuerdo, así que para empezar vamos a necesitar un
editor de código para este curso. Voy a estar usando
Visual Studio Code. Siéntete libre de usar el editor de
código que te guste. Entonces lo que tenemos que hacer
es crear un nuevo archivo. Y sólo voy a
nombrar a este index.html. Y lo voy a guardar en mi carpeta de descargas. Y sólo lo voy
a poner dentro de una carpeta llamada curso Facebook. Siéntete libre de nombrarlo como
quieras y simplemente guardarlo. Entonces index.html y guárdalo. Genial. Por lo que ahora dentro del editor de código
donde va a poner el HTML
calderero para empezar. Y para hacer eso, sólo voy
a hacer un código corto aquí. Siéntete libre de escribir esto o si tu editor de código
tiene un atajo, adelante y usa
eso para el título. Yo sólo voy a poner curso
web y guardarlo. Genial, Así que ahora
realmente podemos abrir este archivo dentro de nuestro
navegador y no lo hicimos,
solo tienes que ir a tu explorador y encontrar la carpeta
que hiciste y hacer doble clic en el archivo. Y entonces abriré
justo en tu navegador. Ahora mismo está vacío
porque no tenemos nada en el cuerpo real. Entonces solo para asegurarme de
que esto esté funcionando, solo
voy a lanzar un encabezado
de prueba
un elemento y refrescar y
nivelar lo pueden ver ahí arriba. Por lo que ya terminamos con esto y abordaremos la instalación de bootstrap
en la siguiente lección.
4. Sección 4: cómo conectar el bootstrap: En esta sección
vamos a estar repasando cómo instalar o
conectar realmente la plataforma bootstrap
a nuestro sitio web o a nuestro
archivo index.html en este momento. Por lo que hay un par
de formas de conectar bootstrap. Entonces lo que quieres
hacer es ir a buscar bootstrap.com y luego
hacer clic en el botón de descarga. A partir de aquí, puedes
desplazarte y ver tipo de todas las diferentes formas que
dan para conectar realmente
Bootstrap a tu sitio. Tienen
gestores de paquetes, enlaces CDN, hilados, gema, compositor, así que
prácticamente cualquier cosa. Si estás más avanzado,
puedes seguir esas instrucciones. Como dije, este curso
va a estar orientado más hacia el principiante. Entonces lo que vamos a hacer aquí es realmente usar los enlaces CDN. Por lo que dice CDN vía JS entregar. Así que salta el OJS descargado entregado para entregar la versión
en caché del CSS
y JS compilados de Bootstrap a tu proyecto. Esto es exactamente lo que necesitamos. Entonces lo que tenemos que hacer es hacer
clic en Copiar al Portapapeles. Y vamos a volver
a nuestro archivo de índice. Y dentro de la sección de cabeza, lo
vamos a pegar. Y voy a encender el envoltorio de
palabras muy rápido. De acuerdo, entonces ahora que
tenemos el archivo CSS y un archivo JavaScript
vinculado a nuestra página web. Vamos a seguir adelante y sólo a guardarlo. Voy a mantener
el elemento de encabezado ahí solo para asegurarme de que la fuente y el color predeterminados y todo así
surtirán efecto en el H1. De esa forma
sabemos con certeza que Bootstrap está todo conectado. Entonces voy a saltar de nuevo
al navegador y refrescarme. Y se puede ver que
la fuente ha cambiado. Sigue siendo negro, eso está bien. Pero también han cambiado algunos de los márgenes de página
y paddings de página y cosas así. Estas son solo señales de que bootstrap se conectó
con éxito. Entonces eso es exactamente lo que necesitamos.
5. Sección 5: descripción de la cuadrícula: Uno de los mayores beneficios
de usar Bootstrap para tu desarrollo web es el hecho que cuentan con un
sistema de cuadrícula integrado. Por lo que esto es realmente
útil para construir diseños
realmente específicos o
personalizados. Esto va a ser
realmente útil para cuando estamos diseñando
esa página de inicio para el feed de Facebook donde esencialmente tienes alguna
información en el lado izquierdo, tienes tu
feed principal en el medio y luego tienes algunos amigos y tal vez algunos anuncios del
lado derecho y cosas así. Por lo que es realmente útil para
que todo esté incorporado, realmente fácil de usar. Por lo que esta sección
va a ser todo sobre la rejilla o los contenedores como se les
refiere en Bootstrap. Entonces para empezar con eso, volvamos a saltar de nuevo al sitio web
getbootstrap.com, diríjase a los perros
y luego bajemos a layout y contenedores. Entonces aquí mismo
dice que los contenedores son un
bloque de construcción fundamental de Bootstrap que contienen pad y alinean tu contenido dentro de una vista divisor
dada. En realidad tienen un par de clases
diferentes
que puedes usar. Uno de los cuales es solo contenedor. Hay uno que es
fluido de guión del
contenedor y luego punto de ruptura del
dash del contenedor, que es un 100 por ciento hasta
el punto de ruptura especificado. Genial, Entonces lo que vamos
a estar usando mayormente aquí es el contenedor normal y
el fluido de dash container, que va a ser 100% o ancho
completo de la ventanilla. Entonces si nos desplazamos un poco
aquí abajo, en realidad se pueden
ver los puntos de ruptura que están integrados en Bootstrap. Por lo que tienen extra
pequeño, pequeño, mediano, grande, extra grande,
y XX grande. Entonces estos van a
ser como tus escritorios, y estos van
a ser tus laptops, algunas tabletas tal vez. Y entonces estos van
a ser dispositivos móviles. Como saben, el desarrollo web o el diseño
web en general
se dirige más hacia un enfoque de primer nivel móvil como escritorios o ya no son tan
ampliamente utilizados. La mayoría de tus audiencias
probablemente van a estar accediendo a tu sitio web o aplicación
desde un dispositivo móvil, lo cual está completamente bien. Por eso existen Bootstrap y otros frameworks
como este. Todo está construido de manera responsable por lo que se va a
quedar bien sin importar
cuál sea el tamaño de la pantalla. Genial. Entonces, a medida que nos desplazamos un poco
hacia abajo, puedes ver
algunos ejemplos aquí. Apenas un div muy sencillo
con una clase de contenedor. Y luego pones
tu lado de contenido. Tienes contenedores responsivos. Por lo que aquí es donde
entra en juego el punto de ruptura del dash
contenedor. Por lo que se puede ver contenedor
dash pequeño, mediano, grande, y esos todos referidos a estos puntos de ruptura aquí arriba. Por lo que los contenedores fluidos,
como dije, van a ser de todo el ancho. Entonces esos van a ir todo el camino desde la izquierda, todo
el camino hacia la derecha. Y luego también puedes
anidar contenedores. Se puede hacer un contenedor de
ancho completo, y luego se puede
hacer con un contenedor de
ancho normal dentro de eso. Entonces digamos que quieres color de
fondo de ancho completo y, pero aún así quieres que tu
contenido tipo de contenido dentro de 1200 o 1400 píxeles. Para que puedas hacer cosas
así, lo cual es realmente bonito. Por lo que queremos empezar aquí. Vamos a subir y copiar
este ejemplo aquí mismo, el contenedor predeterminado. Yo
sólo voy a copiarlo. Salta al editor de códigos. Deshaznos de este elemento de
prueba H1
y solo peguemos ese ejemplo. Y
volvamos a traer el elemento y solo digamos pruebas. Veamos qué vamos a hacer la clase de
contenedor. Perfecto. Para que veas
que salta un poco. Y eso es solo por
el estilo predeterminado. Entonces voy a
inspeccionarlo muy rápido y ver qué está haciendo. Entonces tienes div con un
contenedor de clase y luego puedes ver por aquí,
contenedores dot css. Estos van a ser
los estilos Bootstrap se
están aplicando a
ese nombre de clase. Por lo que puedes ver aquí que cuando la pantalla es un mínimo
con los 4000 píxeles, el contenedor va a
ser un ancho máximo de 1320. Entonces eso es lo que estás
viendo aquí mismo. Por lo que se puede ver que este elemento sombreado
azul va a ser un ancho
máximo de 1320. Y a medida que lo hacemos más pequeño. Y va a encogerse un poco acuerdo hasta que llegue
a cierto punto. Y luego solo se
va a pegar con algún relleno básico
a izquierda y derecha. Perfecto. Por lo que para llevar
esto un paso más allá, les
voy a mostrar cómo hacer lo que he referido antes. Y eso son contenedores de anidación. Entonces saltando, salta de nuevo
al editor de códigos. Y cuando copie
esto y voy
a poner un contenedor de fluido dash. Y vamos a volver a poner ese
contenedor brillante dentro. Y entonces sólo voy a hacer
algunos estilos en línea aquí, sólo porque aún no tenemos una hoja de
estilo conectada, pero sólo voy a decir color de
fondo, gris. Y luego en el contenedor anidado voy a hacer color de fondo. Hagamos el azul solo con fines de
prueba y guardarlo. Entonces si nos refrescamos, se
puede ver que elelemento fluido
dash container de
anchocompleto elemento fluido
dash container de
ancho se va a estirar todo
el camino de izquierda a derecha con un color de
fondo de gris. Y luego el
contenedor anidado desde nuestro primero, desde nuestro primer ejemplo
va a estar dentro de max. Ancho máximo de 1320, color de
fondo azul. Y encaja realmente
bien ahí dentro. Y todo
va a funcionar igual. Igual que eso. Perfecto. Eso es exactamente lo que queremos. Entonces solo voy a quitar
esos estilos en línea por ahora, y los veré
en la siguiente sección.
6. Sección 6: descripción de la columna: Por lo que en la última sección pasamos por encima contenedores que básicamente son los
contenedores que básicamente son
solo
el titular del contenido de la página que vamos
a estar construyendo. Entonces tal vez te estés preguntando
, vale, genial, tenemos
contenedores ahora ¿qué? Por lo que Bootstrap en realidad tiene
lo que se llama el sistema de cuadrícula. Y dentro de contenedores es cómo realmente construyes
tus diseños. Por lo que dentro de contenedores
tienes filas y columnas, y puedes construir
tu diseño con esos. Hay diferentes
tipos de filas y hay diferentes tipos de columnas y clases de columnas y cosas que hacen cosas
diferentes. Entonces solo vamos a
revisar la documentación aquí y solo un poco obtener un ejemplo áspero de
cómo usar la cuadrícula. Por lo que este primer ejemplo
es realmente básico. Como puedes ver aquí, hay
un contenedor y luego dentro del contenedor hay una fila con tres divs que tienen la clase c, o, l col. ¿ Y qué es eso? Lo que eso está
haciendo es solo poner tres columnas separadas dentro de la fila que está dentro
del contenedor. Y puedes ver aquí
el ejemplo anterior crea tres columnas de igual
ancho en todos los dispositivos y vistas
usando nuestras clases de
cuadrícula predefinidas. Esas columnas están
centradas en la página con la clase contenedor padre. Por lo que para llevar esto un paso más allá, necesitamos saltar hacia abajo a
la sección de opciones de cuadrícula. Y esto muy similar a los puntos de ruptura
para los contenedores. Estos van a
ser los puntos de ruptura para ciertas columnas de clase. Por lo que puedes ver aquí
el prefijo de clase, col dash, small, col dash, medium, y así sucesivamente. En realidad puedes agregar enlaces de
columna específicos a esos. Y entonces así es lo grande que
será en puntos de ruptura específicos. Por lo que el sistema de cuadrícula se
basa en un 12 filas de columnas. Para que pudieras hacer cosas como
si quisieras un diseño 5050, podrías hacer col
dash six planet. Hay dos divs con
esa clase te daría 50 por ciento columnas, dos de ellas. Para que podamos seguir
desplazándonos por aquí. Hay diseños de columnas de auto sin usar las clases
como acabo de mencionar. Entonces estos van a ser como el primer
ejemplo en el que
solo vas a conseguir una columna
estándar. Ya sabes, sin importar cuántas
columnas pongas en esa fila es cuántas columnas
vas a conseguir. Y es un poco
predefinir de esa manera. Entonces en este ejemplo, se
puede ver que hay dos
columnas en esta fila superior, y luego hay tres
columnas en esta fila inferior. Y eso van a ser
dos columnas en esa fila, tres columnas en la otra fila, sin importar el tamaño de pantalla. Por otro lado, se
puede empezar a utilizar
predefinido definido con columnas. Entonces en este siguiente ejemplo,
y esta fila superior aquí, hay una columna,
otra columna con un guión seis y
luego una tercera columna. Entonces lo que eso va a hacer
es agregar tres columnas, pero la que está en el medio se
va a definir a las seis. Entonces eso siempre va a ser 50 por ciento de ancho pase lo que pase. Entonces no sé si
va a
estropear cuando redimensione esto, pero como pueden ver, queda 50 por ciento
pase lo que pase. Está bien. Ahí está. Por lo que se está quedando
50 por ciento pase lo que pase. Y luego lo mismo aquí abajo. Y a medida que bajamos
y se puede especie de establecer columna de ancho automático. Entonces si quieres definir
dos columnas en lugar de solo una y dejar que
las otras dos tipo de llenen automáticamente el espacio. Se puede hacer al
revés y definir dos columnas y dejar una en el medio para especie de fluctuar. Entonces eso es lo que esto
es justo aquí arriba. Y entonces las
clases receptivas es realmente lo que
vamos a estar usando
la mayoría de en este curso. Este tipo simplemente
te da más control sobre tus anchos de
tus columnas en absoluto. En los puntos de ruptura
nos dice que nos vamos un poco
más abajo aquí. Dice que puedes mezclar y
emparejar columnas de grado a fila. Entonces esta es una especie de otra discusión
más profunda. En realidad podría tocar
esto en la siguiente sección, pero esto te da una forma de construir
algo así como un,
un
sistema de cuadrícula más estructurado en lugar de un diseño. Y eso lo puedo explicar
en el siguiente apartado. Así que vamos a
saltarnos eso ahora mismo. Se pueden anidar columnas y filas. Entonces lo que realmente
queremos tocar aquí es copia de seguridad aquí en la parte superior donde
dice opciones de cuadrícula. Por lo que vamos a estar utilizando los puntos de ruptura específicos para nuestras clases de columnas y
verás por qué a medida que nos ponemos trabajando en nuestro clon de Facebook. Entonces vamos a saltar a
nuestro editor de código. Y voy a
levantar la captura de pantalla del Facebook que
queremos clonar, la captura de pantalla de Facebook
que queremos clonar. Y sólo vamos a empezar con el contenido real
de la página aquí. Nos vamos a saltar por encima
de la navegación ahora mismo. Sólo vamos
a saltar justo en medio de la página aquí. Entonces solo a primera vista, vamos a hacer tres
columnas y vamos a hacer
un poco lo que hizo ese ejemplo de
bootstrap. Y tener una 1 tercera columna, una columna del 50 por ciento, y luego otra aproximadamente
1 tercera columna aquí. Entonces ve y nuevo editor de código. Y podemos quedarnos con todo lo que
tenemos hasta ahora. Simplemente deshazte del elemento de
cabecera. Y vamos a hacer div
con una clase de fila. Y luego a partir de ahí
queremos poner una columna con un guión, gran guión tres. Y luego después de eso
queremos hacer un div con una columna, seis grandes. Esta será la parte media,
la parte de alimentación real. Y luego del lado derecho
queremos otra tercera columna. Entonces voy a hacer 1, 2, y 3 y refrescar sólo para que
podamos ver el formulario de diseño. Genial. Por lo que puedes ver aquí tenemos una columna 11 aquí también
es nuestra segunda columna. Y luego tres paradas
más o menos aquí mismo. Ahora si queríamos
que esto fuera de ancho completo, todo lo que tenemos que hacer
es simplemente deshacernos de esta clase de contenedor aquí mismo. Y entonces la fila
estaría contenida dentro del contenedor
dash fluid div, que
lo estiraría de lado a lado. Entonces solo para que veas
que voy a comentar el contenedor y refrescar. Se puede ver que
se estira ancho completo y luego traerlo de vuelta
justo sólo porque lo quiero
más contenido. Genial. Por lo que ahora realmente podemos
saltar a la siguiente sección.
7. Sección 7: ejemplo ejemplo de columnas: En esta sección, quiero
tocar brevemente en la fila, sección de
columnas de la
documentación aquí. Lo toqué brevemente
en la última sección, pero quería bucear
un poco más en profundidad y solo darles un ejemplo de para
qué se podría usar esto. Y aquí dice que
podrías usar estas clases de fila, columna que crean
rápidamente diseños
básicos de cuadrícula o para
controlar los diseños de tus tarjetas. Cuando encuentro realmente útil con esto es crear casi como una cuadrícula
de galería de imágenes de algún tipo o simplemente
mantener las cosas. Y realmente he estructurado
la posición en la pantalla. Y quiero mostrarles a
ustedes lo que me refiero con eso. Entonces voy a saltar
al editor de códigos. Y justo debajo de aquí, voy a hacer un contenedor nuevo. Y luego dentro de
eso voy a hacer una fila y voy a añadir las columnas de fila 3. Y como quiero
asegurarme de que tengo ese nombre de clase
corrige outs justo cómo esta cerca eso. Y luego dentro de aquí lo
que queremos hacer es hacer un div con la clase col. Y
luego dentro de eso, voy a hacer justo la imagen, sólo un tenedor de lugar aquí. Y creo que ese
enlace todavía funciona. Y sólo voy a
copiar esto cinco veces. Por lo que queremos un total de
cinco columnas aquí. Ahora si recuerdas,
dijimos que rho llama tres y lo que eso va a
hacer es simplemente cerrarlo. Y así sólo
aparecen tres columnas seguidas en un
momento dado. Así que guarde eso y refresque. Y se puede ver aquí
tenemos cinco columnas, pero son tres de ancho, que es exactamente lo que queremos. Ahora. Para darles
una mejor idea de para qué típicamente uso esta estructura de
filas, solo
voy a
hacer un poco de estilos para las imágenes. Hace aquí arriba y ese es Hub. Simplemente realmente rápido. Voy a añadir algunos estilos
que iba a decir imagen, ya que esas son las únicas
imágenes de la página, voy a decir con un auto de altura 100
por ciento. Y eso debería llenar el
espacio para las columnas. Está bien, perfecto. Por lo
que puedes meterte con algunos de los otros estilos para acercarlos. Bueno, lo que es realmente
bonito es a medida que te haces más pequeño y como que mantienen la relación y el TAC,
lo cual es realmente bonito. Entonces como dije, esto es bueno para galerías de
imágenes o si
necesitabas mostrar algún dato en una estructura muy
definida. Y también puedes llevar esto
un poco más allá y puedes establecer puntos de ruptura. Por lo que se puede decir
amigos de fila, tres grandes. Y luego decir en pantallas medianas queremos que solo muestren dos. Y luego en pantallas realmente
pequeñas, sólo
queremos
mostrar una en fila. Guardemos eso y actualicemos. Y no pasa nada. Pero a medida que nos hacemos un
poco más pequeños, van a cambiar a dos. Y luego a medida que nos hacemos más pequeños, va a volver a uno. Y luego para realmente pequeño
y tenemos que establecer eso, eso realmente
tendrá efecto aquí. Entonces lo que necesitamos hacer se actualiza para que solo las clases
por defecto uno, perfecto. Y luego como puedes ver, cuando nos hacemos más grandes, nuestros estilos se mantienen perfectos. Entonces ese es un ejemplo
de cómo usar la fila, columnas, clases y bootstrap. Como dije, estos
se pueden usar para cualquier cosa. Normalmente los uso
para galerías de imágenes. Pero deja que tu
imaginación se vuelva loca.
8. Sección 8: orden de columna: En esta sección
vamos a estar
hablando un poco más de columnas. Voy a entrar un
poco más de profundidad sobre las clases personalizadas que
se aplican a estas columnas. Las columnas Bootstraps son, supongo que la cuadrícula está realmente construida
usando flexbox, CSS, flexbox. Por lo que hay muchos estilos y clases
incorporados que puedes usar que
utilizan estilos Flexbox. Entonces cosas como la alineación
vertical, alineación
horizontal
y cosas como
esas están todas integradas
directamente en bootstrap, lo
que hace que sea realmente agradable
hacer cosas como esta. Para que puedas tener tus
columnas
alineadas verticalmente o puedes
tenerlas alineadas horizontalmente. Por lo que esto resulta muy útil
cuando estás construyendo tus diseños o navegaciones. Por ejemplo, es realmente agradable
que tus muchos enlaces estén alineados
verticalmente en el contenedor versus
intentar escribir un montón de CSS personalizado para hacer que aparezcan centrados. Entonces eso es realmente bonito que
Bootstrap tenga todas esas cosas
incorporadas como envoltura de
columnas. Algo que
uso con bastante frecuencia es reordenar. Entonces esto es agradable. Entonces, por ejemplo, digamos que tienes contenido a la izquierda y la
imagen a la derecha. Y luego la fila de
abajo que tienes imagen a la izquierda y
contenido a la derecha. Bueno, en el móvil,
cuando apilas esos, vas a tener contenido,
imagen, contenido de imagen. Entonces lo que me gusta hacer es reordenar esas columnas de segunda fila para estar de una manera donde en móvil
va el taxi, imagen de
contenido, contenido, imagen y simplemente fluye un
poco mejor para el usuario. Entonces eso es realmente bonito. lo que puedes ver aquí el
ejemplo dice primero en DOM, ningún orden aplicado tercero y
DOM con un orden de 1, segundo y abajo con un
pedido con un pedido más grande. Por lo que puedes ver esto es solo una columna
estándar justo aquí. El segundo aquí
ha ordenado dash f5, lo
que significa que
se va a colocar al final mismo, ya que tiene un número mayor. Y entonces la tercera
columna tiene orden uno, que lo pondría,
cuando se muestre, se renderizaría por encima de cinco. Entonces así es como están
consiguiendo este ejemplo aquí. Y también puedes
aplicar el punto de ruptura a estas clases para que
solo cambiaran el orden en
un cierto punto de ruptura. Bootstrap también tiene columnas
de compensación. Entonces si por cualquier razón no quieres tener
una tercera columna, solo
puedes compensar por
cuatro en este ejemplo. Y eso
te daría una brecha entre. Entonces voy a
saltar al editor de códigos y sólo darles un ejemplo rápido de lo
que estaba hablando. Está bien. Entonces solo voy a
subir aquí justo entre los contenedores R2 ya y agregar uno nuevo con una fila y luego dos columnas
dentro de esa fila. Voy a decir en pantallas
grandes
queremos que sean seis de ancho. Y luego voy a copiar esta fila y pegarla
justo abajo. Y luego en la primera
columna dirá este texto. En la segunda columna se va a obtener
la misma imagen desde abajo. Y entonces esa misma
imagen va a ir en la primera columna
y en la segunda fila. Y entonces esto es algo de texto
irá y la segunda columna
y la segunda fila. Y yo sólo voy a eliminar nuestros viejos contenedores ya que ya
no los necesitamos. Y luego guardar y refrescar. Y esto es lo que
deberíamos conseguir algunos. Tenemos algún contenido
en la imagen de la izquierda, imagen de la
derecha tendrá
constante a la derecha. Entonces en este momento cuando encogemos
la pantalla, se apilan. Y se puede ver que
realmente no se ve el más grande tener dos imágenes tipo de
espalda con espalda así. Vamos a querer darle
al usuario poco de espacio para respirar
entre elementos de nuestra página. Entonces para conseguir este efecto, en realidad
vamos a quedarnos
todo, cómo lo tenemos. Y solo vamos
a cambiar el orden
con las clases de Bootstrap predeterminadas. Entonces lo que tenemos que hacer es
que las clases de orden. Entonces vamos a decir
en esta primera, vamos a decir
Order dash T2, que sólo está diciendo por
defecto que queremos
que esta sea la segunda columna. Y luego vamos a
decir orden medio uno. Entonces cuando sea
más grande que una pantalla media, va a ser
la primera columna, que la mantendrá
en el lado izquierdo. Pero aparte de eso, vamos a querer
en segundo lugar, lo que significaría cualquier cosa
mediana o menor. Entonces los teléfonos móviles,
queremos que sea esta, la primera columna. Y luego en la columna inferior, vamos a decir Ordenar guión
uno y luego pedir medio 2. Sigamos adelante y
guardemos eso y refresquemos. No se puede ver nada
realmente cambia. Pero si nos hacemos más pequeños, se
puede ver aquí mismo, el texto está arriba. Imágenes en la parte inferior, textos en la parte superior, imagen
en la parte inferior. Perfecto. Eso es exactamente lo que queremos.
9. Sección 9: revisión de todos los componentes: El siguiente tema que
quiero cubrir son algunas
clases predeterminadas de Bootstrap con respecto a topografía, imágenes, tablas y figuras. Por lo que Bootstrap tiene mucho estilo
predeterminado que
en realidad se ve bastante bien para la
mayoría de las aplicaciones. Por supuesto puedes
personalizar estos como familias
de fuentes y pesos
y tamaños y cosas. Pero lo que está construido
aquí mismo, como se puede ver, es algún tamaño predeterminado
para los elementos de encabezado. También tienen estilos por defecto
para el elemento pequeño, lo
que le da más de un look desvanecido para algún contenido
secundario. Típicamente como un subtítulo
o algo así. Tienen encabezados de visualización
que son aún más grandes. Y luego puedes por supuesto, personalizar estos como más te convenga. Que el párrafo principal, que es típicamente, ya sabes, cuando estás mirando
una entrada de blog ese tipo de destaca un poco más, hace más de un punto, poco te lleva por la página. Y luego solo ten un tono de clases incorporadas
realmente bonitas que puedes utilizar sin tener que escribir tu propio CSS, que, ya sabes, si estás
construyendo un sitio web grande, te puede ahorrar mucho tiempo. Ahí clases un poco universales, así que son fáciles de recordar como estás escribiendo o
como estás codificando,
puedes, ya sabes, ser realmente fluido mientras
trabajas, lo cual es realmente agradable. Entonces esas son las fuentes, las imágenes de la imagen incorporada
clase responsive, IMG dash fluid, que aplica el ancho máximo
100% y la altura auto. Esto solo permite que la
imagen llene el espacio. Si recuerdan en
una lección anterior, realidad
hice esto
manualmente para llenar la fila, ejemplo de
columna que estaba
tratando de expresarles a ustedes chicos. Por lo que muy fácilmente podría
haber usado esta clase, um, pero como dije, acabo de aplicar los dos estilos ahí para
obtener los mismos resultados. Por lo que habría sido mucho más rápido solo aplicar
esta clase a las imágenes. A medida que avanzamos aquí abajo, tienen
miniaturas de imagen, lo cual es bonito. Te da un bonito borde
redondeado con un borde muy débil. Tienen muchas
clases de alineación para que las imágenes las
hagan alineadas a la izquierda o a la
derecha, centradas. Y entonces puedes hacer lo mismo
con elementos de imagen aquí. Entonces sólo bueno saber mesas. Esto en realidad es muy útil si estás lidiando con una gran cantidad de datos que estás
expresando al usuario. Tener estilos de mesa integrados va a
ahorrar un montón de tiempo. Entonces solo por defecto, poniendo parte de la
tabla de clases en tu tabla HTML, lo
vamos a diseñar realmente bien. Puedes ver a medida que vas un
poco más abajo, puedes aplicar variantes secundarias a tus tablas para darles, ya
sabes,
dependiendo de la aplicación, diferentes, un color diferente. Podrías hacer X y luego
tablas con filas rayadas. Nuevamente, estas son
solo clases para ahorrarte tiempo creando tu
aplicación o tu sitio web. Tienen filas flotantes. Oscuro para modo oscuro, activo. Entonces sólo un montón de cosas
grandiosas aquí. Por lo que sólo quiero
tocar brevemente esta sección. Yo quiero ir demasiado en profundidad sólo porque muchas
de estas cosas
se van a personalizar a medida que ustedes
construyan su sitio web. Entonces sólo sepan que
estos están aquí. Hay otros
estilos incorporados son clases
que Bootstrap tiene para la alineación de texto y cosas como ese margen
de relleno. Por lo que definitivamente toma una inmersión
más profunda ahí cuando tengas una oportunidad. Es realmente, realmente agradable y
acelerará tu desarrollo. Esta sección va a
ser una rápida visión general de todos los componentes que
están integrados en Bootstrap. No voy a profundizar
en todos y cada uno, pero sí quiero
hablar de ellos conforme
bajamos esta lista y
cuáles son. Por lo que a partir de arriba,
tenemos el elemento acordeón. Y todo esto es, es sólo una forma expandir y colapsar el contenido. Solo para darle a tu página y aspecto y tacto
más concisos. Se ven mucho estos
con secciones como FAQ. Tienes la pregunta
como el título y luego la respuesta dentro. Por lo que es una manera realmente bonita de
tipo de condensar tu página. Y sí proporcionan un poco más de control
sobre cosas como esta. Puedes quitar el color de
fondo y los bordes para tener una más fluida e
integrada con tu sitio web. A medida que te bajas, puedes hacer
cosas como siempre abiertas. Entonces cuando se carga la página
de las primeras abiertas, y luego se puede ver
la accesibilidad para más información. Entonces eso es realmente bonito. Alertas, estos van a ser elementos
más interactivos. Si envías un formulario
con éxito o falla, o el usuario descarga algo o como lo tengas configurado. Tienen estas
alertas incorporadas las cuales son realmente agradables. Están temáticas basadas
en el éxito o el fracaso. Si hay una advertencia, dice algo
tal vez un poco más genérico, sin estilo alguno. Entonces esos son bastante geniales. También cuentan con funciones de
descarte incorporadas. Simplemente puedes cerrarlo
y desaparecerá. Eso está integrado en la parte
JavaScript de Bootstrap, que es realmente agradable.
El elemento distintivo. Ves esto mucho para desencadenar
como este ejemplo aquí, algo que es nuevo o una
notificación o lo que tienes. Por lo que te dan la
capacidad de sumar números. Aquí está el tipo
del símbolo de notificación al que estamos acostumbrados, el símbolo de la bandeja de entrada. Se puede cambiar el
color de fondo, insignias de píldora. Se pueden hacer cosas. A lo mejor asignar múltiples
categorías a algo, pan rallado. Por lo que estos son bastante
estándar criado vienen enlaces de miga de pan
en todo el sitio web. Los botones son realmente geniales. Estos también son bastante
interactivos. Entonces el estado hover, todo tipo de modos
diferentes aquí. De manera primaria, secundaria éxito, advertencia de
peligro, etcétera. Hay muchos de estos
componentes, el peligro de éxito primario, secundario, estos nombres de clase
son consistentes. Por lo que si estás usando un botón
sucesivo, también
puedes usar una
alerta de éxito. Entonces eso es realmente bonito, algo en lo que ponen
mucho de pensar. De nuevo, has
delineado botones, tal vez un
llamado secundario a la acción ahí. Tienes diferentes tamaños. Estados con discapacidad. puedes hacer todo tipo
de cosas. Tienen el toggle Estados. Por lo que se puede ver esto es hover, esto es y activo
y luego deshabilitado. Tan realmente agradable ahí. También te dan la
capacidad de agrupar botones. Ves esto
mucho con páginas en un blog mientras te desplazas,
cosas así. Tan poco de estilos
incorporados, sus tarjetas son realmente bonita
característica con Bootstrap. Entonces esto te da una manera realmente
fácil de expresar un lugar o un restaurante, o una tienda o
algo así. No obstante, ustedes están
mostrando su contenido. Esto te da una manera muy
agradable y rápida de
tener un elemento organizado en
muy bien presentado. Para que veas que
tienes la clase de tarjeta. Dentro de eso tienes la
imagen con la imagen de la tarjeta, cuerpo de tarjeta de
primera clase con el
título y texto y botón. Y puedes agregar múltiples botones y todo tipo de
cosas así. Y todos estos componentes
son personalizables. Entonces si no quieres el botón
principal ahí, puedes usar un botón personalizado, puedes usar un botón de
clase diferente y así sucesivamente. Así que sólo un poco más profundo en eso y no
tiene una imagen en absoluto. Esto sí tiene una imagen
sin botón, y así sucesivamente. Por lo que las cartas son
definitivamente muy manejables. No los pases por alto. Como dije, ya
son Bill, así que te ahorrará una tonelada
de tiempo de tener que codificar manualmente y darle estilo a
algo como esto. carrusel es otra característica realmente
genial de Bootstrap. Es básicamente un deslizador
que está incorporado. Entonces, de nuevo, no tienes que usar otro servicio de terceros
o no tienes que codificar algo completamente
desde cero para obtener una especie de elemento tipo
carrusel slider. Es realmente genial también
porque tienen algunas características adicionales aquí como indicadores y flechas
y cosas por el estilo. Entonces realmente cool,
son botón de cierre. Yo creo que esto sólo permite hacer despreciables ciertos
elementos. No estoy seguro. Creo que este es un elemento bastante más nuevo aquí
con Bootstrap, así que no estoy demasiado familiarizado
con éste, pero parece que sí tienen bastantes
opciones diferentes con él. Entonces definitivamente
algo voy a estar mirando más a fondo yo mismo. Colapso. Entonces puedes ver esto es
algo así como un acordeón, solo un poco
de una forma diferente desencadenar algún contenido. Esto puede servir una amplia
variedad de uso aquí. Y de nuevo, todos estos son solo elementos básicos que cambian con las clases predeterminadas de
Bootstrap. Así que asegúrate de prestar
atención a estos. Entonces para este ejemplo colapsado
aquí y enlaza con HRF, puedes ver que hay un guión de
datos BS título de dash igual a colapso. Y luego si te desplazas un poco
por encima, sí, el área controla el
colapso ejemplo. Entonces esto es lo que
en realidad vas a estar mirando para
apuntar al contenido. Por lo que se puede ver cortar los ejemplos de colapso
ID. Entonces cuando haces clic en esto, bootstrap te está diciendo, Ok, Buscaremos este elemento
y luego si lo encuentras, adelante y expandirlo o colapsarlo en base
al estado activo. Por lo que puedes ver click que
muestra el mismo texto aquí. Entonces así funciona eso. Así que asegúrate de que si estás
copiando estos ejemplos a los que estás prestando mucha
atención, los ID son los elementos
que su segmentación. Porque si
no lo haces, va a ser un poco más complicado
solucionar problemas. Así que solo asegúrate de que estás
prestando atención a eso. Se pueden ver
cosas así. Pequeñas animaciones. A continuación tenemos dropdowns. Verás estos mucho
y navegaciones o a veces rellenos de formularios o cargas de
archivos y
cosas por el estilo. Entonces otro
elemento incorporado que es realmente, realmente bonito. Enumerar grupos. Por lo que esto solo agrega un
poco de estilo predeterminado a la lista desordenada
o a una lista ordenada. Por lo que se puede ver que hay
un ligero borde con un radio de frontera. A lo mejor un poco
de relleno alrededor de todo.
Tienes los activos. Se tiene el
estado activo, estado deshabilitado. Puedes agregar algunos enlaces y
botones ahí dentro. Y así sucesivamente. De nuevo, una versión borrada, por lo que cabe un poco
bien en su sitio web. Se pueden agregar números. Y esto es realmente genial. Entonces sólo tomando
éste, por ejemplo aquí,
para codificar algo
como esto por cero, tendrías que crear todo
el elemento,
darle a cada uno y a todo
su propio nombre de clase. Construye esto,
posiciona esto aquí a la derecha, y así sucesivamente. Por lo que Bootstrap lo hace realmente fácil una vez que
te das la mano, agregar estas clases incorporadas
se convierte en una segunda naturaleza. Por lo que se puede ver lista, lista de
grupos, grupo numerado. Eso es lo que va a sumar
estos números reales aquí. Y luego en tu ítem de lista, vas a agregar
lista-grupo-ítem, justificar contenido entre
en inicio de elemento. Entonces esas son las
clases de las que
hablé en una
sección anterior aquí. Y esos son solo los estilos
flexbox que dan todo lo que espaciado. Estos son los márgenes predeterminados y las clases de relleno y así sucesivamente. Y luego puedes ver es solo que el subtítulo
y los contenidos,
por lo que el resto se maneja todo,
todo el estilo se
maneja a través todas estas clases grupales de lista. Entonces eso es realmente genial. Los modales de nuevo son algo muy
bonito tener incorporado. Tengo que codificar algo como esto desde cero
podría llevar mucho tiempo. Entonces, de nuevo, si estás
copiando estos ejemplos, solo asegúrate de que
todo coincida. Si estás cambiando los nombres de clase están haciendo algo diferente. Entonces es realmente genial. Lanzó demo, modal
y así. Así que realmente genial. Aquí está
el botón de cerrar, botón de cerrar, cosas así. Por lo que todos estos
son solo incorporados y super, super agradables de tener. Por lo que navs y pestañas. Esto es otra cosa
agradable tener incorporado aquí
para las navegaciones, ya sea que sea en el
encabezado o en el pie de página. hecho de tener una
forma de diseñar las cosas para que se vean bien inmediato es una característica realmente bonita. Entonces voy a seguir adelante. Tenemos navbar y eso solo usa algunas de las clases
de navs y tabs, así
como algunas cosas
adicionales. Por lo que puedes ver
aquí arriba en este ejemplo, tenemos la barra de navegación. Esto en realidad se
llama la marca, por lo que la barra de navegación, el dash y la marca. Aquí es donde
podrías poner el nombre de tu sitio o tu
logotipo con un enlace. Entonces seguimos adelante. Tenemos el menú real. Y esto utiliza el elemento
desplegable. También tienen un estilo de
forma incorporado que aún no
he tocado. Esa va a ser la siguiente sección, pero tienen un formulario
y el encabezado también. Y luego por defecto, si copia estos ejemplos de
barra de navegación, en realidad
tienen también funcionando la
versión móvil. Por lo que estás viendo esto
en una pantalla más pequeña, se colapsará y te mostrará el botón de hamburguesa para expandir
realmente la forma. Y se puede ver eso aquí. Clase de botón navbar-toggle
o Tipo Datos de botón, BS dash toggle
colapso, y así sucesivamente. Este de aquí es
el ícono de la hamburguesa. Entonces si esta fuera una pantalla
más pequeña, se podría
ver que aparece el botón del
móvil, el menú principal aquí
y la forma desaparecen. Y luego cuando haces clic
en ese botón de menú, todos esos elementos
aparecerían moda
muy bien estilizada, así que realmente agradable ahí. También tienen
diferentes estilos aquí para imágenes en su
imagen y tags nav, creo que aquí también hay una
clase de modo oscuro. Por lo que puedes ver aquí mismo,
nav bar dash Light, BG light, puedes cambiar eso a oscuro y obtendrás una versión más oscura. Aquí está la forma para las barras de navegación. Por lo general es
solo un cuadro de búsqueda, por lo que es bastante simple. Pero estas clases de entrada
y clases de botón son capaces de ser utilizadas en otros
lugares donde están las formas. Así que realmente genial ahí
puedes agregar algunos iconos. Entonces eso es nav bar. Definitivamente, definitivamente
explora eso. Muchas características geniales. Off Lienzo. Esto es bastante similar a
los menús desplegables móviles. Estos son, esta es una forma de que el contenido de la vista
Off Off
aparezca en tu página web. Entonces como puedes ver aquí, enlaza con una unidad, se
desliza desde la izquierda. En ocasiones estos se
utilizan para menús móviles. Otras veces, ya sabes, puedes hacer prácticamente
cualquier cosa con esto. Es solo una forma de
almacenar contenido que está disponible
para un acceso rápido. Tan bien genial ahí. Y a veces lo que algunos de estos componentes
bootstrap
te permite enlazar directamente a él. Entonces, por ejemplo, un acordeón, en realidad
podrías apuntar
al panel de acordeón que quieres abrir agregando
un parámetro a la URL, que es una característica
realmente, realmente genial. Si ustedes tienen alguna
pregunta con eso, por favor háganmelo saber y yo también puedo
elaborar sobre eso. Paginación o paginación. No sé si eso se está
pronunciando correctamente. Pero esta es una gran característica
para estilos de blog y así sucesivamente, o lo que sea que necesites
pasar por página. Por lo que tener ese incorporado, de nuevo. Marcadores de posición de características agradables. Entonces esto es interesante, esto es más si lo estás, si te estás burlando un diseño o algo así y
no tienes contenido real. Parece que en realidad
puedes simplemente poner marcador de posición y
un poco te da esta caja apretada
animada gris. Esto puede ser útil si estás
compartiendo tu diseño con un equipo o un cliente o algo
tratando de obtener la aprobación, simplemente dando un ejemplo, esto es lo que podría parecer. En lugar de poner contenido
real
, podría ser bastante útil. Popovers es algo que está confiando en una
biblioteca de terceros llamada Popper. No está construido directamente
en Bootstrap, pero podría
conectarse con bastante facilidad. No uso esto con demasiada frecuencia, pero esto es lo que
parece un poco
te da pensar que también
se les conoce como una punta de herramienta. Pero te da mucho
control sobre cómo lo quieres, cómo quieres que
aparezca, cosas así. Tan bastante cool. Las barras de progreso suelen utilizarse
para mostrar el progreso de carga. No se ven estos con demasiada frecuencia en los sitios web más así las aplicaciones. Pero estos están aquí. Te dan la capacidad de
agregar etiquetas y alto en animaciones y
fondos y esas cosas. Por lo que otra característica bastante
cool allí. Esta es una
característica bastante buena también, ScrollSpy. Esto le da la
capacidad de desplazarse a una ubicación específica de la
página en función de un clic. Por lo que puedes ver aquí, puedes bajar
al segundo encabezado
al hacer clic en segundo, o si conduces
hasta el tercer encabezado basado en el tercer clip. Entonces eso es realmente
genial, algo para utilizar si tienes
una página realmente larga. Spinners, de nuevo, típicamente
se muestran para cargar animaciones. Este es también un elemento bastante
más nuevo, creo. Pero de nuevo, tienes
éxito primario, secundario y así sucesivamente. Esquemas de color para si
quieres mostrar un formulario, envío, cargarlo
o algo así. Entonces, así los brindis son
básicamente notificaciones. Se ven
mucho estos con aplicaciones web. No tanto como un sitio web
estándar, sino de nuevo, Bootstrap está hecho para sitios web
y aplicaciones. Entonces esto es bastante guay. De nuevo, son
despreciables y muchas, muchas cosas geniales
que puedes ver aquí abajo. Justo así. Cosas tan bonitas ahí. Nuevamente, todo incorporado. No creo que éste
requiera de un tercero. Ahora está incorporado. Entonces otra vez, mucha buena información aquí si quieres implementar eso. Y luego tooltips, de nuevo, similares a los popovers, pero estos no son
tan personalizables. Por lo que puedes ver que es
mucho más pequeño, tipo de puntas de herramienta
más estáticas. Por lo que esa es
la mayoría de los componentes que están
integrados en Bootstrap. Nuevamente, si quieres una inmersión profunda, cualquiera de estos ya que estás construyendo tu sitio web o
aplicación, por favor hazlo. Te ahorrará una tonelada de tiempo. Otra vez. Incluso si quieres usarlo
como punto de partida, solo consigue algo en la página y luego
siempre puedes ajustarlo a partir de ahí, agregarle tu propio
toque personal, pero definitivamente echa un
vistazo, no lo harás lo lamentamos. Lo último que quiero
cubrir antes de
sumergirnos en realmente construir nuestro clon de Facebook es la
característica de formularios dentro de Bootstrap. Entonces como puedes ver aquí, incluyen muchos estilos para casi todos los elementos que se
te ocurra para una forma. Por lo que forma controles, cheques
y radios, grupos de entrada, layout, selecto rango,
etiquetas flotantes y validación. En
realidad, la parte de validación es bastante genial. Entonces a medida que estás construyendo tus formularios y quieres tener validación para la entrada del usuario. Bootstrap tiene ese incorporado, que es realmente, realmente agradable. Por lo que sólo nos desplazaremos un poco
hacia abajo y solo obtenemos una visión general muy
rápida. lo que en este ejemplo
aquí mismo tenemos la dirección de correo electrónico y la
contraseña con un botón de enviar. Esto es más que probable
lo que
realmente vamos a estar usando
en nuestro ejemplo. Pero puedes ver por el código, solo
tienes un elemento de forma
estándar. Y luego tienes un div
con la clase MV3. Y luego dentro de eso tienes una dirección de correo electrónico de etiqueta con
la clase de etiqueta de guión de formulario. Junto a eso
tienes la entrada con
el tipo de correo electrónico con la
clase de control de formulario. El control de forma es
en realidad lo que le da
el, las bonitas esquinas redondeadas, un ligero borde, un poco de espaciado
alrededor de él y así sucesivamente. Y luego justo debajo de que
tienes el texto ayudante, que se le da la clase de texto guión de forma que simplemente dice nunca
compartirá tu
correo electrónico con nadie más. Eso es algo así como
un pequeño consejo para el usuario. Entonces lo que se va a dar
un estilo ligeramente
diferente a la etiqueta real. Entonces es agradable que, eso está
construido en contraseña. Nuevamente, clases muy similares, se forman formulario de control, etiqueta, y luego
tienes el botón de enviar, lo
siento, justo
antes de eso tienes la casilla de verificación la cual
también está estilizada formulario check etiqueta. Creo que eso pone
la etiqueta al lado la casilla de verificación en lugar de
debajo de ella o encima. Y luego el botón con
una clase de primaria. Entonces se puede ver como se están
juntando todas estas cosas. Todas las clases a lo largo, todos los componentes tipo de trabajo conjunto para darle consistencia al
sitio. Entonces este tipo de justo y se expande en algunas de esas
clases, los textos de forma. Por lo que parece que esto se
usaría comúnmente para describir cuánto tiempo debe ser
una contraseña. De nuevo, solo uno más pequeño ahí. Diferentes estados, accesibilidad. Se puede ver por
aquí a la izquierda, se
puede hacer clic en cualquiera de
estos grupos de entrada son agradables. Te da la
capacidad de agregar iconos. Para los montos en dólares son
nombres de usuario y cosas así. Por lo que darle al usuario
un poco de orientación siempre es agradable. Etiquetas flotantes. Esto es un poco guay. A medida que haces clic en una
especie de colapsos y arriba y luego te da un poco de espacio
para escribir Validación. Y se puede leer
a través de todo esto. Pero aquí abajo, si
hace clic en enviar formulario, en
realidad validará
la información. Por lo tanto, por favor use nombre de usuario ,
seleccione un estado, acepte
los términos, y luego envíe. Entonces otra vez, realmente genial
que eso está incorporado. Por lo general, tendrías que usar un servicio de terceros para
conseguir algo como esto. Entonces otra vez, muy agradable que
Bootstrap tenga eso incluido. Y en la siguiente sección en la que realmente
vamos a
sumergirnos y empezar construir nuestro clon usando
lo que hemos aprendido hasta ahora. Si te quedaste conmigo tan
lejos, muchas gracias. Espero que ustedes estén
disfrutando de la clase. Y sólo va a mejorar
a partir de aquí.
10. Sección 10: página de inicio de inicio de construcción: En esta sección, en
realidad vamos a
empezar a construir nuestro clon de
Facebook. Entonces si ustedes se han
quedado conmigo tan lejos, de verdad, verdad, de verdad, de
verdad lo aprecio. Por favor deje una reseña del
curso si lo ha disfrutado. Realmente me ayuda a pensar en
temas para futuros cursos, cómo puedo mejorar y demás. Por lo que es realmente útil obtener
esa retroalimentación para mí chicos. Entonces otra vez, gracias. Entonces con eso dicho,
sigamos adelante y empecemos a construir la página de inicio de sesión. Entonces no vamos a
construir esta carpeta parte de ellos sólo van a hacer
la sección superior aquí. Entonces volvamos al editor
de código y solo
usaremos el archivo
index.html que
hemos estado usando hasta ahora. Y vamos a
limpiarlo un poco para que realidad no
necesitemos el estilo. Y volvemos a encender word wrap por alguna
razón se apagó. Entonces voy a encender eso
y luego sólo voy a
deshacerme de las cosas del
líquido del contenedor también. Entonces mirando hacia atrás a
la página de inicio de sesión, solo
voy a desglosar
esto en términos de cómo vamos a
construir la cuadrícula. Por lo que esta sección aquí
es bastante fácil. Vamos a hacer un contenedor de
ancho completo. Vamos a hacer un contenedor
en el interior con dos columnas. Vamos a tener algún
contenido a la izquierda, y luego vamos a
tener un formulario a la derecha. Entonces vamos a saltar al
editor de código y vamos a añadir el fluido de dash container. Y luego vamos a
añadir otro contenedor. Y dentro de este contenedor
anidado, vamos a añadir una fila. Y luego vamos a hacer para igualar columnas de
ancho así. Y luego del lado izquierdo, vamos a hacer una imagen. Y voy a realmente
sólo voy a copiar esta imagen de Facebook y refrescar la página. Y se pueden ver las
imágenes de Facebook ahí mismo. Genial. Y luego justo debajo de eso solo
voy a agregar algo de texto. Entonces veamos qué
tienen aquí. Tienen conexión
con amigos y el mundo
que te rodea en Facebook. Sólo voy a copiar
y pegar de eso. Está bien, perfecto. Entonces sí necesitamos hacer un
poco de estilo aquí solo para que las cosas se alineen
un poco mejor. Pero antes de hacer eso, sí
quiero agregar a la sección de
formulario a la derecha. Entonces voy a saltar de
nuevo a Bootstrap. Voy a bajar dos formularios. Reseña, y solo voy a copiar este
primer ejemplo aquí, pero el correo electrónico y la contraseña y copiar eso y
saltar al editor de código. Yo voy a hacer una
cosa aquí sin embargo. Voy a agregar un div con
una clase de envoltorio de
formulario, formar envoltorio de subrayado y
pegarlo dentro de eso. Y la razón por la
que hago eso es solo para darle algún tipo de color de fondo. Por lo que puedes ver esto es una especie de envuelto en esta
caja blanca con una caja-sombra. Entonces yo quería hacer
lo mismo. Genial, Así que con el
fin de darle estilo a esto, así que sigamos adelante y
conectemos una hoja de estilo. Entonces voy a hacer link y luego css, styles.css. Por lo que en realidad necesito
abrir mi Finder y simplemente agregar una
carpeta llamada CSS. Y luego dentro de eso necesito realmente
crear el archivo CSS. Entonces lo que voy a hacer aquí es en mi editor de código Visual
Studio Code, go File Open. Y solo voy a abrir esta carpeta del curso o la carpeta del sitio que
hicimos al principio. Y de esa manera consigo el
navegador de archivos del lado izquierdo aquí. Entonces voy a abrir de nuevo
el archivo index.html. Y luego voy a
abrir mi carpeta CSS y crear un nuevo archivo llamado un
tipo llamado estilos. Eso es CSS. Genial. Por lo que dentro del archivo
styles.css, necesitamos básicamente
apuntar a algunas de estas cosas. Entonces para comenzar en el fluido de dash
container, voy a agregar una nueva
clase y solo
llamarlo contenedor de guión bajo página. Y luego en la hoja de estilo, voy a poner ese nombre de
clase ahí. Voy a darle un color de
fondo de F6, F6, F6. Eso le va a dar un fondo gris
muy claro. Y luego a continuación,
vamos a apuntar a la fila. Y lo que queremos hacer aquí es usar la clase Bootstrap incorporada para
filas para alinear verticalmente nuestros elementos. Y eso es alinear artículos
centro así como así. Así que adelante y
guarde eso y nos
refrescaremos y veremos cómo
se ven los cambios. Y en realidad no se puede decir
sólo porque no hay. Altura o relleno o
cualquier cosa en este contenedor. Entonces lo que podemos hacer
es saltar de nuevo a la hoja de estilo y darle a
esta una altura de 100 vh, que es la
altura vertical de la ventanal. Por lo que eso debería estirar
este color de fondo, altura
completa de la ventana. Y entonces ahora se puede ver eso. Y entonces necesitamos
hacer lo mismo para el contenedor en tamaño, mientras que un
contenedor de página subrayan alturas de
contenedor un 100 vh. Sigamos adelante y guardemos eso. Y no está funcionando. Entonces,
descubramos qué estamos haciendo mal aquí. Por lo que la fila también necesita y altura
vertical 100. ¿De acuerdo? Entonces sólo podemos hacer,
vamos a copiar esto. Y diremos que la fila dentro
de eso es 100 también. Vale, genial, Así que tenemos que
todo se ve
realmente bien. Ahora podemos poner la
caja blanca alrededor del formulario y en realidad hagamos la
forma un poco más pequeña. Vuelve al editor de códigos, a nuestro archivo HTML. Y en lugar de hacer
la última columna 6, Hagámosla cuatro. Ves eso
lo encoge un poco. Voy a saltar de nuevo a
la documentación aquí, ve a Columnas de diseño. A ver si podemos encontrar
el área que
habla de dejar una brecha en el medio
que debe ser compensada. Entonces básicamente todo lo que
necesitamos hacer es simplemente agregar una clase offset. Offset grande 2. Entonces desde que pasamos
de seis a cuatro, nos quedan
espacios de dos columnas. Entonces lo vamos a compensar
por 2 en pantallas grandes, lo que debería resultar en eso. Y en realidad lo
voy a cambiar por
uno sólo para que esté un
poco más centrado. Al igual que eso luce
realmente, muy bien. Entonces, solo agreguemos un poco de fondo
blanco a esto. Por lo que vamos a apuntar a
esta clase de envoltura de formularios. Diga color de fondo, blanco, y agregue un
radio de borde de 10 píxeles. Vamos a agregar algo de
relleno en todo el camino. Y eso no debería ser
suficiente para darnos eso. Y luego agreguemos una sombra de caja
realmente ligera. Voy a ajustar este color
negro aquí para que sea un poco más claro. Está bien, genial. Entonces
sigamos adelante y actualicemos esto a D3, D3, D3. Y refrescar y lucir bien. Entonces sigamos adelante
y actualicemos algunos de los estilos
del lado izquierdo aquí. De acuerdo con la
página de inicio de los logotipos, mucho más pequeño y el texto
es un poco más grande. Entonces en realidad podemos
cambiar esto para ser, digamos sólo un h3 y
en lugar de un párrafo. Y luego voy a dar
la imagen y el DNI del logo. Entonces voy a decir Logo, altura
máxima, 75, ancho, auto. Y eso debería
estar bastante bien. A lo mejor podemos ir un
poco más grandes. Soy logo, pero el texto en
sí se ve bastante bien. Entonces cambiemos esto a un 100. Perfecto, y nos
vemos bastante bien. Y una cosa más que
podemos hacer es realmente agregar el botón crear cuenta que está debajo del formulario
que tienen aquí. Entonces sigamos adelante y
hagamos eso realmente rápido. Entonces para ello, queremos seguir
estando dentro de la caja blanca, la caja de fondo blanco. Entonces vamos a ir justo debajo de
este botón enviar aquí. Vamos a añadir
una fila horizontal. Y luego voy a
añadir un momento de botón. Entonces Botón de clase y
luego vamos a decir éxito de
botón para que podamos obtener
el botón de fondo verde. Voy a decir Crear, crear una
cuenta, y luego actualizar. Está bien, genial. Por lo que
no se han centrado. Entonces volvamos a saltar de nuevo
a Bootstrap y
entramos en la sección de botones. Y lo que queremos hacer
es añadir tipo igual botón a nuestro botón
aquí, así como así. Y entonces queremos realmente obtener la clase de alineación
para estos botones. Entonces busquemos eso. De acuerdo, Así que parece que
todo lo que necesitamos hacer es poner esto dentro de un div con un par
de clases aquí. Alguien va a copiar esto y luego envolver nuestro
botón y este autofill
div tratando de
llenarlo con el elemento equivocado. Entonces déjame arreglar eso. Está bien, genial. Entonces sigamos adelante y actualicemos
y ajustémonos según sea necesario. Y no está cambiando. Entonces, descubramos
qué hicimos mal aquí. Oops, necesito deshacerme
de este div de cierre. Igual que eso. De acuerdo, perfecto, Así que tenemos eso centrado. Entonces ese es un ejemplo rápido de cómo usar algunos estilos Bootstrap para obtener una pantalla de inicio de
sesión de aspecto agradable. Hemos utilizado el contenedor, las clases de columna de suma de fila, algunas clases de alineación de filas
así como todas las clases de formulario. Entonces este es un buen ejemplo de cómo conseguir algo
como esto en un tiempo relativamente corto
.
11. Sección 11: cómo construir la navegación: Y estas últimas
secciones vamos a estar construyendo nuestro clon de Facebook
de la página de alimentación real. Entonces vamos a estar construyendo
la navegación superior y luego la barra lateral a ambos
lados así como
el contenido principal. Sólo vamos a hacer exactamente
lo que hay en esta captura de pantalla. No vamos a construir toda la página a medida que se
desplaza y cosas así, pero siéntete libre de llevar
esto hasta E1. Toma lo que has
aprendido aquí y un
poco corre con él y
mira hasta dónde puedes llevarlo. A mí me interesaría mucho
ver lo que ustedes pueden
crear a partir de esto. Entonces sigamos adelante y sumérjase. Lo que vamos a hacer es
empezar con la barra de navegación superior. Entonces para hacer eso, y sigamos
adelante y hagamos un nuevo archivo. Y sólo vamos a
llamar a este home.html. Y lo que podemos hacer
es simplemente copiar lo que
tenemos en el índice y simplemente
pegarlo en el archivo de inicio. Y solo limpiemos
todo lo que hay dentro
del cuerpo y mantengamos
todo en la cabeza. Podemos cambiar el título a página de inicio para que podamos
decir la diferencia. Y entonces podemos seguir
adelante y empezar. Así que vamos a saltar a la documentación de
Bootstrap y necesitamos solo reunir alguna información
sobre la barra de navegación. Entonces busquemos uno
que sea similar. Por lo que necesitamos un logotipo así como un menú y funcionalidad de búsqueda. Entonces creo que ese
ejemplo está aquí. Hay algunos
esquemas de color y estoy bastante seguro que ya
pasó en la parte superior es el primer ejemplo.
Sí, ahí está. Entonces sigamos adelante
y solo copiemos esto. Vuelve al
editor y pega. Entonces lo que podemos hacer es
en lugar de sólo navbar, podemos poner aquí nuestra propia imagen. Y sólo voy a ir a Google
y agarrar un logotipo de Facebook. Esta ronda uno de aquí no
debería ser perfecta. Entonces solo copia la
dirección de la imagen y pega eso ahí. Y entonces podemos darle a esto
el DNI de pequeño logo. Genial, Así que en nuestra hoja de estilo, vamos a seguir adelante y
darle estilo un poco. Y dale una
altura de 30 píxeles y un ancho de 30 píxeles. A lo mejor barcos demasiado pequeños van
adelante y vean cómo
se ve eso arriba en la URL, simplemente cámbialo a casa. Y puedes ver que ya
tenemos esto yendo. Pero parece que la imagen
que copiamos estaba un poco sesgada sólo porque hay
algunos hay algunos
espacios en blanco a su alrededor. Entonces todo lo que eso significa
es que solo
necesitamos darle un
poco más de ancho, altura porque
no son unos cuadrados perfectos. Probemos 50. De acuerdo, perfecto, Eso
debería ser suficiente. Ahora lo que tenemos que hacer es agregar algunos iconos y más
iconos a la derecha. De acuerdo, así que ahora mismo tenemos
algunos enlaces de textos aquí arriba. voy a
dejar como texto sólo porque no quiero
cazar iconos, pero siéntete libre de usar iconos. La única diferencia va
a ser en lugar de texto aquí, en lugar de link o home, solo
pondrás una etiqueta de imagen
con el enlace al ícono. Esa va a ser
la única diferencia. Simplemente los voy a dejar como texturas porque
va a ser un poco más fácil por el bien
de encontrar iconos. También queremos que este menú esté centrado. De acuerdo, así que trabajemos
en centrarlo. Por lo que solo necesitamos encontrar el menú real y cambiar
algunas clases alrededor. Entonces si recuerdas de
la lección anterior con el formulario de inicio de sesión centrando el botón
Crear una Cuenta, tomó la clase m x dash Auto. Ahora mismo tenemos M E dash auto, así que voy a
cambiarlo a MX, guardarlo. Y ahora tenemos un recinto
centrado. Perfecto. Para que podamos mover
el formulario hacia la izquierda. Y luego agregaremos algunos
botones más aquí a la derecha. Entonces sigamos adelante
y trabajemos en eso. Pero para hacer eso, sólo
necesitamos encontrar la forma. Voy a cortarlo y
volverlo a subir hasta aquí arriba. Y luego podemos agregar algunos menús, elementos de
menú sobre
el lado derecho. Y acabo de copiar
este menú desplegable solo para tener algo de contenido, pero voy a limpiar esto. No necesito nada de
esto aquí. Simplemente me desharé
de este divisor. Veamos cómo se ve esto. Por lo que tengo la clase auto dash MX con una lista desordenada
con tres elementos de lista. Voy a llegar a las clases de ítem
desplegable
también por ahora y refrescar. De acuerdo, así que parece que
se ve bastante bien, pero sí necesitamos poner una clase aquí para que
se vea así. Entonces vamos a saltar aquí
y sólo vamos a decir Navbar Nav, soy ex auto. Y
ojalá esto haga el truco. De acuerdo, estamos llegando ahí. Parece que solo
necesitamos un poco de estilo adicional aquí. Por lo que necesitamos la
clase de ítem nav para cada elemento de lista. Entonces sigamos adelante
e implementemos eso. Y esto debería limpiarlo, darnos un poco mejor espaciado, así que mejor formato.
Y no lo es. Entonces, averigüemos
qué está pasando. El enlace de navegación es también lo
que necesitamos para la clase. Entonces sigamos adelante y
añadamos eso y eso. Está bien, Perfecto. Entonces nos vemos bien. Otra vez. Siéntase libre de usar iconos, como el ejemplo aquí. No tengo ningún ícono
guardado en mi computadora, así que no tengo ninguno disponible, pero siéntete libre de hacerlo. Solo los voy
a mantener como enlaces por ahora. Y una última cosa que
podemos hacer es simplemente cambiar esta clase de auto dash MX
a float dash end. Y entonces
en realidad vamos a agarrar todo
el asunto y moverlo justo debajo de esta etiqueta de lista
desordenada de cierre aquí. Esto realmente lo
mantendrá dentro
del contenedor principal
para la barra de navegación, lo
que permitirá que también se mantenga dentro de la
navegación móvil. Y a esto me refiero con eso. Entonces en este momento todo
parece igual. Pero cuando subamos a
las pantallas más pequeñas, se derrumbará correctamente
y aparecerá aquí abajo. necesitamos ajustar los estilos para que no
se pegue todo el
camino por el lado derecho. Pero eso al menos
lo conseguirá en el menú móvil. Intercambia esos estilos. Todo lo que necesitamos hacer es encontrar
la clase de extremo de dash flotante y simplemente cambiarla a
float dash, LG dash end. De esa manera sólo
fluirá al final en pantallas
grandes y será cosas en el lado izquierdo o no flotará en absoluto en pantallas
más pequeñas. Entonces sólo para que puedas ver
que se ve bien. Y ahí está. Entonces esto se ve genial. Esto es exactamente lo que estamos tras conseguimos el logo con la búsqueda, algunos enlaces en el medio y luego enlaces en ese lado
derecho también. Genial, Entonces en la siguiente
sección vamos a construir el cuerpo real. tanto que empezar con
el lado
izquierdo, el lado izquierdo, y trabajar nuestro
camino hacia la derecha. Vamos a estar usando algunos elementos
más de Bootstrap para poner en marcha estas listas, algunas tarjetas y así sucesivamente. Por lo que esperamos con ansias.
12. Sección 12: Sidebar: Muy bien, En esta sección vamos a
empezar a construir
el contenido real de
nuestra página de inicio aquí. Entonces vamos a empezar con la
construcción de la estructura. Vamos a hacer una columna del lado
izquierdo, el contenido medio, y
luego vamos a tener una columna del lado derecho. Entonces si ustedes chicos quieren
tomarse un par de minutos y ver si pueden hacer que
esto vaya solos. Y si quieres seguir
adelante y pausar el video, pruébalo y vuelve. Voy a empezar. De acuerdo, entonces ahora vamos a
saltar al editor de código y sólo
vamos a
entrar justo en el archivo home.html. Y vamos a empezar
justo debajo del elemento nav. Y vamos a ir div
con una clase de contenedor. Y queremos que esto sea
de ancho completo, por lo que estira
todo el ancho de la ventana gráfica. Y luego dentro de
este contenedor, vamos a hacer en
un div con una clase de col dash, gran guión. Vamos tres. Y luego junto a esa, vamos a hacer col con
una clase de, o lo siento, un div con una clase de
col, dash big six. Y entonces la última columna
aquí será la misma que la primera. Igual que eso. Y luego solo para asegurarnos de que
tenemos todo funcionando, Sigamos adelante y solo pongamos aquí
algunos marcador de posición. Y una cosa más,
en realidad necesitamos envolver todas estas columnas
dentro de una fila. Adelante y hagámoslo
realmente rápido. Igual que eso. Podemos refrescar la página
y deberíamos ver cadera, por lo que los arcontes van a
terminar justo aquí. Esto va a terminar
justo aquí. Y entonces esto
comenzará hasta el final. Perfecto. Entonces
volvamos a nuestro ejemplo. Entonces tenemos una lista con un, básicamente un icono o una
imagen con algún texto. Ver Más. Y luego debajo de eso, un
poco
lo mismo pero tenemos un
título en esta sección. Y luego otra vez para ver más,
así que sigamos adelante y centrémonos primero en esta barra lateral. Si quieres saltar a la documentación de
Bootstrap, podemos bajar
a los componentes y luego desplazarnos hacia abajo al grupo de lista. Y esto será
lo suficientemente bueno para empezar aquí. Entonces déjame ver si
tienen un sí. Flush. Esto es lo
que buscamos aquí. Esto nos dará un poco más de un grupo de tenedores de lugar que podemos
personalizar un poco cómo queremos. Vamos a seguir adelante y
sólo copiar este ejemplo y pegarlo en
nuestra primera columna. Y solo dejaremos todo
este texto igual por ahora, guárdelo y actualicemos para asegurarnos de
que esté funcionando. Está bien, perfecto. Entonces ahora solo necesitamos
conseguir un ícono aquí y hay un par de maneras
diferentes de hacerlo. Lo que quiero hacer es usar el sistema de cuadrícula dentro
de este grupo de lista. Hay otras formas como
pseudo elementos con CSS. Podría ser un
poco complicado conseguir la imagen o
icono correcto dentro de esos. Entonces con este sistema de rejilla, podremos tener un
poco más de control para poder seguir adelante y
empezar con eso. Por lo que dentro de estas listas
grupos están estos ítems de lista. Elimina el texto, y luego
dentro pondremos una fila. Con una columna. Este será realmente pequeño, así que solo diremos
col dash large dos. Y entonces esta será nuestra imagen. Y luego si recuerdas
de la sección anterior, vamos a hacer
un tenedor de plaza. Esto puede ser de 25 por 25. Y entonces la siguiente columna sólo
puede llenar el
resto del espacio. Y este será algún texto aquí. De acuerdo, vamos a asegurarnos de
que eso funcione correctamente. ¿ De acuerdo? Por lo que nuestra columna podría ser un
poco más grande de lo que necesitamos. Podemos hacer que tal vez uno, pero todo lo demás se ve bien. Entonces sigamos adelante
y ajustemos eso. Y entonces podemos simplemente copiar todo
este elemento de la lista y reemplazar a nuestros otros
aquí para que coincidan. Hagamos cinco elementos aquí. Refresca, vale, perfecto, así
que eso se ve realmente bien. Veamos cómo
se ve cuando nos hacemos un poco más pequeños. De acuerdo, así que probablemente podamos
condensar esto. Por lo que en pantallas medianas, Volvamos a saltar aquí arriba. Y esta primera columna
podríamos decir media. Mantengámoslo uno
y luego pequeño. Nos quedaremos con esa también. A ver qué hace eso. Está bien, se ve bien. Sigamos adelante y solo tomemos eso en efecto para
todas nuestras columnas aquí. ¿ De acuerdo? ve bastante bien
en pantallas extra pequeñas, en realidad
necesitamos agregar una
clase para eso también. Entonces solo vamos a hacer col
dash y solo mantenerlo uno. Adelante y
rápidamente agreguemos eso a nuestras columnas y
luego seguiremos adelante. Genial. ve bien. De acuerdo, entonces ahora lo que podemos hacer es agregar
el elemento acordeón, que nos dará nuestro botón
Ver más voluntad, que esencialmente solo
mostrará más elementos de lista. Entonces sigamos adelante y
hagamos esto un
poco más grande y
entraremos en la
documentación de bootstrap. Y volveremos a saltar, y navegaremos
hasta el acordeón. Podemos simplemente copiar el
primer ejemplo aquí y luego simplemente limpiar
lo que no necesitamos. Entonces voy a copiar aquí
esta versión de flush. Entonces copia todo esto. Y sólo vamos a
venir justo aquí después de nuestra lista ordenada y pegar. Y luego rápidamente,
se puede mirar un poco a través de
estas clases aquí. Encendemos palabra roja. Puedes mirar rápidamente
por aquí y ver de acuerdo con el
encabezado al ras del encabezado 1. Entonces esto, cuando se hace clic en este
elemento H2, este botón, esencialmente
va a estar mostrando este
contenido aquí mismo. Por lo que se puede ver el encabezado de
descarga, uno, encabezamiento de
descarga, un
área etiquetada por. Entonces así se
comunican entre sí. Así que vamos a
seguir adelante y deshacernos de los otros dos artículos de acordeón. De acuerdo, sigamos
adelante y refresquemos. Y esto debería darnos
gran acordeón punto uno, y se expandirá
un poco genial. Entonces vamos a
limpiar un poco esto. En lugar de acordeón,
elemento número uno, queremos ver más. Y luego dentro
del cuerpo del acordeón, sólo
vamos a
subir aquí y copiar nuestra lista desordenada. Y luego pegarlo dentro
del cuerpo del acordeón. Y a lo mejor no
necesitamos los cinco. Sólo pongamos dos ahí dentro. Y guardar y refrescar. Genial, Así que hemos visto
más si haces clic en él y tienes algunos ítems de lista
más. Entonces hay un poco de
estilo ese tipo de agregar algo de relleno en los
lados si quieres
limpiar esto y
tenerlo al ras de nuevo. Por lo que sólo parece una
continuación de la lista anterior. Siéntase libre de
experimentar con eso. Simplemente lo voy a
dejar como es sólo porque se ve un poco, se ve más intencionada de esta manera. Estás, estás expandiendo
y colapsando contenido. Sólo se espera que se
vea un poco diferente. Tan genial. En nuestro ejemplo, parece que hay una fila
horizontal o un borde. Y luego básicamente
la misma cosa justo debajo de ella con un título. Entonces sigamos adelante y hagamos eso. Entonces al final de nuestro acordeón, cuando viene aquí abajo y está en un elemento de fila horizontal. Y entonces vamos a poner,
digamos un H4. Creo que dicho atajos. Y entonces realmente
todo lo que necesitamos hacer es simplemente copiar todo lo
que tenemos arriba y volver abajo justo abajo aquí y
pegarlo y refrescar. De acuerdo, Entonces hay un problema y podemos solucionar
esto en 1 segundo. Como puedes ver, expandir un acordeón en realidad
expande ambos. Pero parece que nuestros atajos, tal vez un poco grandes, pero nuestros artículos de lista lucen bien,
todo se ve bien. Entonces sigamos adelante y
cambiemos esto a un H5. Y luego vamos a solucionar problemas de
nuestro acordeón. Por lo que aquí mismo se puede ver ejemplo de escalera
de acordeón. Y lo que esto está
haciendo es básicamente darle una identificación a este acordeón
específico. En este momento, ambos acordeones de la página están
compartiendo el mismo ID. Entonces lo que podríamos hacer en lugar de Según ejemplo de flush, podemos simplemente renombrar este
ID a acordeón de atajo. Y entonces podemos copiar esto
y pegarlo
aquí abajo para que estén
conscientes el uno del otro. De acuerdo, Entonces lo que también
tenemos que hacer es actualizar el ID de contenido de colapso. Por lo que puedes ver
aquí mismo este ID
también es similar al anterior. Entonces, solo agreguemos atajo
justo dentro de eso. Y luego actualizar donde
necesita estar. De acuerdo, veamos si
eso hace el truco. Perfecto. Entonces que uno está trabajando
, ese está trabajando. Genial. Por lo que esta sección se
ve bastante bien. Esta barra lateral aquí,
es receptiva, aún funciona en pantallas más pequeñas, todo se ve genial. Por lo que en la siguiente
sección,
pasaremos al contenido medio aquí. Construiremos
estas cartas arriba. Vamos a añadir un poco de un,
un elemento de forma aquí
con algunos botones. Y luego pasaremos
a la tarjeta real. Y luego la siguiente sección, terminaremos con
la barra lateral derecha. Y estarás todo listo. Estarás en camino de hacer sitios web de
gran aspecto usando
Bootstrap como marco.
13. Sección 13: contenido principal: En la última sección
hablamos de la barra lateral izquierda y esta sección
vamos a pasar al contenido medio. lo que mirando nuestra imagen de ejemplo, vamos a empezar
en la parte superior aquí. Y lo que vamos a
hacer es
añadir un contenedor con fila, con un par de columnas. Vamos a
tener cinco columnas. Y este es un buen ejemplo. Tocando de nuevo en una sección
anterior aquí cuando hablamos de la fila de columnas donde
cada cosa es idéntica. Entonces eso va a ser
un ejemplo realmente bueno,
um, o caso de uso para eso. Entonces vamos a usar eso. Vamos a seguir adelante,
construir una sección de formulario con un pequeño ícono, un par de botones,
y luego la tarjeta. Entonces sigamos adelante
y buceemos justo dentro. Entonces vamos a saltar a la, en
la documentación de Bootstrap. Y queremos entrar en el diseño. Y luego vamos a ir a la grilla. Y vamos a desplazarnos hacia abajo. Y queremos columnas de fila. Así que vamos a seguir adelante y
copiar este ejemplo aquí mismo, y luego saltar
al editor de código. Y pasemos a
nuestra columna media aquí. Y sólo voy a dar algo de
espacio entre estos. Y voy a pegar eso
de la documentación. Y ahora mismo
parece que tenemos cuatro columnas. Voy a sumar una quinta. Y luego voy a
ajustar un poco esto. Por lo que mirando hacia atrás a
la documentación, parece usar el, utilizar las clases de astérix de
vacas de fila responsive para establecer rápidamente número
de columnas que mejor renderizan tu
contenido y diseño. tanto que las clases magistrales col
dash normales se aplican a columnas individuales, las clases de recuento de filas se
establecen en la fila principal como un atajo con rho cause auto puedes dar las columnas
que son de ancho natural. Para que podamos seguir adelante y
tratar de ajustar esto. Entonces lo que queremos hacer es
basarnos en el punto de ruptura, mostrar cierta
cantidad de columnas. Entonces viendo este
ejemplo aquí mismo, esto es esencialmente
lo que vamos a hacer, es que voy a copiar esto, todas estas clases de fila y
saltar a nuestro ejemplo y luego
simplemente pegarlas aquí. Entonces uno donde en
pantallas grandes salimos, tuve que mostrar y probablemente
queremos que todos phi se muestren en pantallas
medianas también. Y luego a medida que nos hacemos un
poco más pequeños, vamos a saltar a tres. Y luego en pantallas pequeñas solo
mostrarán dos. Entonces guardemos eso, refresquemos y veamos cómo se ve eso. De acuerdo, Vamos a seguir adelante y hacer un poco de
ajuste aquí. Está bien. Para que lo
veas apilado. Mostraría una
pantallas grandes de nuevo hasta cinco. De acuerdo, sigamos adelante
y empecemos a peinar esto. Por lo que en la primera columna aquí, elimine el texto del Marcador de posición. Y sólo voy a
poner un div con una clase de titular de cuentos. Y luego dentro de esto, queremos un icono, necesitamos una
imagen de fondo y luego algunos textos que
diga Agregar a la historia. Entonces, empecemos con eso. No soy fan, lo siento, vamos a hacer una imagen. Y luego dentro para la fuente, sólo
nos van a
colocar sostén que otra vez. Hagamos sólo 25 más señal resplandor que tendrá el lapso con los textos
que dice Agregar a la historia. Y luego por ahora, sólo
voy a hacer un poco de estilo en
línea para poner un color de fondo en esto. No voy a hacer
negro, vamos a hacer azul, así que el texto se está mostrando, vale, así que ahora exactamente lo que estamos buscando bastante todavía,
pero estamos en camino. Entonces agreguemos algunos estilos
más aquí. Entonces en realidad voy a
eliminar este estilo en línea. Y voy a copiar esta clase y luego entrar en
nuestra hoja de estilo. Voy a decir
altura a 100 píxeles. Hagamos algo de relleno todo el
camino alrededor de ocho píxeles. Hacer display flex. Y luego dentro,
podemos hacer justificar contenido o el espacio edu entre. Y vamos a ver cómo se ve
eso realmente rápido. Y aún no del todo. Entonces vamos a hacer columna de
dirección flex. De acuerdo, estamos llegando
y parece que nuestra imagen está siendo distorsionada un
poco demasiado. Entonces sigamos adelante y digamos historia. Imagen más antigua, altura 25 con 25. De acuerdo, así que tenemos nuestro ícono, top, Es un poco pequeño. Probablemente podamos hacer eso
un poco más grande. Además, nuestro texto es un
poco demasiado grande también. Entonces sigamos adelante y hagamos 35, 35. Y entonces nuestro titular de la historia lapan, si puedo deletrearlo correctamente. Queremos que este sea tamaño de fuente
10 pixels, color, blanco. Alinear texto, izquierda. Hagamos nuestro
color de fondo en el titular de la historia. Está bien, se ve bastante bien. Entonces lo que podemos hacer ahora
es aplicar esa clase al resto de las columnas
y estaremos en camino. Entonces vamos a copiar esto y ponerlo dentro de
nuestras columnas restantes. Y vamos a refrescarnos. Está bien, se ve bien. Para que podamos hacer el texto
un poco más grande y vamos a añadir un
radio de borde alrededor. Vamos a seguir adelante y hacer el
radio de frontera 10 píxeles. En realidad, vamos a hacer 15. Y luego nuestro lapso, Hagamos un poco
más grande a 12 píxeles, y eso debería ser suficiente. Está bien, genial. Nos vemos
bastante bien hasta ahora. A continuación tenemos esta sección aquí. Si ustedes quieren intentar
hacer esto por su cuenta, siéntanse libres de pausar
el video y
volver cuando lo tengan listo. Si no, solo siéntete libre de
seguir adelante. Por lo que de nuevo en el
archivo home.html justo a continuación. Y queremos hacer otro
contenedor con fila. Y luego vamos a
hacer algo similar a los ítems de lista que
hicimos anteriormente. Y sólo vamos a hacer una
columna con un guión grande. Y luego la imagen. Simplemente vamos a estar
usando la misma imagen. Y luego en la siguiente
columna sólo
vamos a tener un relleno
el espacio restante. Y esto
en realidad será una forma. Entonces lo que podemos hacer es
saltar a la
documentación de Bootstrap, saltó dos componentes
y luego lo siento, salté dos formularios justo encima los componentes y simplemente
haga clic en Visión general. Y esto nos dará
suficiente ejemplo aquí. Probablemente podamos
describir este primer elemento así como este. Y ven justo aquí. Y solo actualicemos
algunas de estas cosas. Por lo que no necesitamos exactamente
decir dirección de correo electrónico. Ni siquiera creo que
haya una etiqueta en nuestro ejemplo. Dice lo que
tienes en mente, Josephine. Entonces, solo agreguemos un positor para que podamos deshacernos de la etiqueta. Y luego dentro de
nuestra entrada real, podemos decir que el placeholder es igual. qué está en tu mente. Yo sólo voy a poner mi nombre. Podemos poner cuando leas el DNI, no necesariamente necesitas
eso por el momento. Y entonces podemos
deshacernos de esto también. no tenemos etiqueta Yano tenemos etiquetay sólo
vamos a cambiar esto a texto. Genial, así que vamos a refrescarnos. Y tuvimos nuestros iconos
un poco demasiado pequeños otra vez, pero sí tenemos nuestra
entrada con estilo muy bien. Entonces sigamos adelante y sumamos
algunos estilos más para conseguir esto, cómo queremos que se vea. Primero lo primero, hagamos
esto un poco más grande. Hagamos 50 por 50. Y voy a poner una clase
adicional
en este contenedor y decir contenedor status. Y luego me voy a
pasar a la hoja de estilo. Y justo debajo de nuestras historias, voy a decir margen 35 arriba y sólo
dirá auto a izquierda y derecha. Y entonces probablemente deberíamos hacer lo mismo por
nuestro titular de la historia. Así que saltemos aquí a
este contenedor y digamos contenedor
historia y aplicemos un estilo similar aquí. Y la razón por la
que estoy teniendo que estas sean instancias
separadas
aquí es porque
necesitamos poner un color de
fondo de blanco con un
radio de borde en éste. En realidad todo nuestro fondo de
página es blanco y nuestra imagen de ejemplo, el fondo de
Facebook
es como un gris claro con elementos de fondo blanco. En realidad voy
a revertir eso. Entonces voy a mantener
el fondo blanco, pero en realidad voy a hacer que
este sea un gris muy claro. Adelante y refresca. De acuerdo, Genial, Así que
tuvimos un mejor espaciado aquí. Esta sección es todavía
podría usar algo de amor. Entonces sigamos adelante y hagamos eso. Añadamos un poco
de relleno por aquí. Digamos sólo 20 píxeles. La carrera fronteriza fue un poco demasiado
alta como bajarla a 12. Y luego solo por diversión, podemos hacer imagen
contenedor de estado. Y entonces solo
pondremos un radio fronterizo del 50 por ciento en esto, así que es un círculo completo. Está bien, se ve bien. Y lo siguiente que
tenemos que hacer es agregar una fila de botones esencialmente. Pueden ser enlaces
en esta instancia, pero vamos a usar elementos
Bootstrap. Entonces vamos a hacer botones. Para que puedas acudir a los componentes. Es grupo de dos botones. Y sólo podemos copiar
este primer ejemplo. Pero primero lo
primero, lo que queremos
hacer es dentro de nuestro contenedor de
estado, queremos agregar otra fila
con una columna de ancho completo. Y luego podemos pegar nuestro
grupo de botones que acabamos de copiar. Y luego de nuestro ejemplo, tenemos foto ID
slash video tag, amigos y sentimientos
slash actividad. Entonces vamos a copiar eso. Foto. Etiquetar amigos y sentimiento. Actividad. De acuerdo, Entonces podemos seguir adelante y refrescar y ver con qué
tenemos que lidiar ahora. De acuerdo, Entonces no del todo
exactamente lo que queremos todavía. Y un grupo de botones podría no ser el mejor ejemplo o
elementos que usan para esto. En realidad podría cambiar esto. Entonces volvamos atrás y en
realidad solo implementemos un sistema de cuadrícula en esta fila y
deshagamos de un grupo de botones. Creo que va a ser
más estilismo involucrado para conseguir esto como queremos versus solo hacerlo
en un sistema de cuadrícula. Entonces a veces cosas como
esta o prueba y error, Realmente no
hay manera
equivocada de hacerlo. Pero voy a
cambiarlo aquí arriba. Entonces vamos a seguir adelante y sólo
deshacernos de este grupo de botones. Y luego la fila, columna gran guión 12. Sigamos adelante y sólo
cambiemos esto a cuatro. Y luego dentro de aquí
sólo vamos a añadir un enlace. Y entonces éste
dirá video slash fotográfico. Y podemos copiar esto, pegarlo dos veces y conseguir esto
actualizado para etiquetar amigos, además de sentir actividad de
barra. Entonces esto debería darnos
algo un poco más de lo que estamos
buscando. Está bien, perfecto. Entonces vamos a seguir adelante y solo darle estilo a
esto para que
parezca nuestro ejemplo. Entonces podemos decir contenedor de estado
y luego apuntar al enlace, ya que esos son los únicos enlaces
en ese contenedor en este momento. Estado contenedor a. y podemos decir color,
333, decoración de texto, ninguno. Y luego saltemos al contenedor
de postura en
sí en decir,
text-align center. Genial, Entonces eso debería
ser suficiente para
conseguirnos lo que estamos buscando. A lo mejor agreguemos algo de relleno alrededor de esto para
darle un poco más de espacio. Por lo que podemos decir fila
contenedor de estado, y sólo podemos decir
margen, 10 pixel auto. Está bien, perfecto. Se ve
bastante bien hasta ahora. Sí tenemos que añadir
nuestros iconos aquí. Entonces sigamos adelante y
hagamos eso realmente rápido. Y solo para mantener las cosas simples, solo
editaremos
aquí dentro. Lo mantendremos pequeño, 25. Está bien, perfecto. Entonces a partir de nuestro ejemplo
estamos bastante cerca. Parece que aquí hay una
frontera, así que podemos hacerlo muy rápido. Simplemente podemos hacer una clase llamada fila de botones a la fila que está
alojando los botones. Y entonces podemos subir aquí
y decir contenedor de estado, fila de
botones como un borde
de sólido de un píxel. Y luego haremos otro
tono de gris claro. Y parece
que eso se ve bien, pero sólo necesitamos un poco de espacio entre el borde y nuestros botones para que
solo podamos hacer relleno top, digamos 15 píxeles. De acuerdo, perfecto, luciendo
realmente bien hasta ahora, nuestra siguiente sección aquí es
una tarjeta gigante de contenido. Entonces tenemos otra
imagen con un nombre, algún subtexto o un subtítulo aquí, el contenido real
y luego una imagen. Por lo que bootstrap, hacer
esto realmente fácil. Se puede entrar en
componentes y luego Tarjeta. Y entonces podemos mirar
a través de los ejemplos aquí y simplemente encontrar el
que se adapte a nuestras necesidades. Entonces ahora mismo éste se
ve bastante bien. Título es algún contenido
y luego enlaces. A medida que seguimos desplazándonos. Ves esto es una especie de uno
totalmente construido aquí. Podríamos hacer esto. Elementos de encabezado y pie de página. Puedes agregar algunas
cotizaciones de bloque, cosas así. No exactamente lo
que estamos buscando, pero definitivamente podemos
trabajar con ello. Y se ve alineación de texto, tarjetas de
navegación, algo
interesante. Y luego imágenes. Entonces esto es, esto de
aquí es exactamente lo que buscamos este
título de auto de la imagen de abajo. Entonces sigamos adelante y copiemos eso. Vamos a seguir adelante y
copiar este de abajo. Y podemos volver aquí. Y luego justo
debajo de esta sección, vamos a añadir una nueva
sección o un nuevo contenedor. Y vamos a darle a este
una clase adicional llamada contenedor de contenido. Y luego dentro de aquí haremos una fila con una columna de ancho completo. Y luego pegaremos
nuestra tarjeta. Perfecto. Entonces lo que tenemos que
hacer es simplemente guardar esto y ver con qué
tenemos que trabajar antes hacer grandes cambios. Podemos mover este texto hacia arriba y luego este
contenido por debajo de eso. Entonces sigamos adelante y
hagamos algunos cambios. Podemos tener este párrafo
debajo del título. Observe el guión de texto
clase silenciada que en realidad le
está dando una especie de desvanecido o
un aspecto gris más claro. También, el pequeño elemento
dándole texto más pequeño. Adelante y pongamos aquí una imagen de
marcador de posición. Y entonces éste
puede ser, diremos, 600 píxeles por 400 píxeles de alto. Y sigamos adelante
y guardemos eso. Refrescar. De acuerdo, luciendo bien hasta ahora, tal vez la imagen sea un
poco más grande. No necesariamente un problema, pero eso sobre lo
envuelve para este apartado. En nuestra última sección,
vamos a estar cerrando con la barra lateral
derecha aquí, van a ser muy similares a la primera barra lateral que hicimos. Pero espero que ustedes estén
disfrutando de la clase hasta ahora y saltemos a la derecha
en la siguiente sección.
14. Sección 14: Sidebar y conclusión derecha: Bienvenido a la última
sección de este curso. Vamos a estar
terminando con la barra lateral derecha aquí. Y mirando nuestro ejemplo, podemos reutilizar muchos de los elementos que hemos
estado utilizando hasta ahora. Podemos usar el título y algunos otros
estilos similares a lo largo. Así que sigamos adelante y
solo zambullamos directamente, saltemos al editor de código y
volvamos al archivo home.html. Y luego vamos a navegar
a nuestra última columna aquí. Dentro de esto,
vamos a querer un contenedor. Y luego vamos
a querer una fila. Y luego dentro de eso
haremos una columna de ancho completo. Y luego queremos hacer un H5. Y entonces esta cabecera
va a decir patrocinada. Por lo que esto es para la sección Agregar. Y luego justo debajo de eso
vamos a hacer otra fila. Y entonces esto
en realidad contendrá el pequeño ícono con el nombre. Y entonces tendremos una
imagen justo debajo de ella. Entonces vamos con
una columna grande. Y entonces esta
será nuestra imagen con un positor por ahora. Perfecto. Y luego justo
al lado de eso, bueno, hagamos una columna en expansión. Y entonces esto puede ser
sólo un párrafo. Y sólo diremos lugar de pizza. Y luego justo debajo de esta fila, hagamos otra fila con
una columna de ancho completo. En realidad, esta
imagen está contenida. Entonces lo que queremos
hacer es que sea 11. Y diremos offset. Uno. Dentro de esta columna,
vamos a hacer una imagen. Y solo diremos 300 por 175 y refrescados y
veremos qué tenemos. Está bien, se ve bien. Entonces puedes ver que sí necesitamos un poco de
espaciado justo arriba. Pero tenemos nuestro icono con nuestro nombre y luego
tenemos el desplazamiento de una columna para que la imagen llene este
espacio apropiadamente. Así que sigamos adelante y solo
agreguemos algunos estilos aquí para que este look sea mejor. Lo que podemos hacer es solo decir
el contenedor patrocinado, copiar esta clase a la hoja de estilo y nos
vamos a mover hacia abajo. Sólo vamos a decir
margen, top 20 pixels. Y entonces la imagen sólo servirá. En realidad tenemos
dos imágenes aquí, por lo que necesitamos ser un
poco más específicos. Lo que podemos hacer es
decir título patrocinado, y luego solo
diremos contenido patrocinado. Agarramos primero la clase de
título. Yo estoy por aquí. Y luego
para la imagen aquí, queremos un radio
de frontera del 50 por ciento. Y luego para nuestro contenido, vamos a querer
un poco menos. Entonces solo diremos
tal vez 12 píxeles. Está bien, se ve bien. Y podemos pasar a la siguiente pequeña sección
aquí, que es cumpleaños. Nuevamente, esta va a ser una
sección bastante sencilla. Entonces vamos a añadir una fila horizontal, otra fila, y luego
otra carretera horizontal. Entonces saltaremos aquí. Empieza con otro
contenedor y le daremos a este también la clase
de
contenedor de cumpleaños y lo pondremos aquí. Haremos una fila. Esto también tiene un ícono, así que sólo vamos a
copiar esto aquí mismo. Ahorrarnos algo de tiempo, y luego simplemente cambiaremos el lugar de la
pizza por cumpleaños. Y entonces en realidad
justo debajo de los cumpleaños. De hecho voy a tener esto
mezclado un poco. A lo que nos referimos es a una
fila de título, así. Por lo que div con la clase de
fila columna de ancho completo, esto puede ahorrar cumpleaños. Y luego aquí abajo, en realidad
necesitamos esto
para decir el cumpleaños. Entonces esto le dice Jessica
Eric a los demás. Jessica, Erica en otros
tienen cumpleaños hoy. No me voy a meter
con los pesos de las fuentes en esta sección, pero siéntete libre de hacerlo. Y luego justo al final aquí, sólo
voy a añadir otra actualización de fila
horizontal. Y nos vemos bastante bien. En nuestra última sección aquí para
terminar es sólo la lista de contactos. Creo que esto es para la función de
mensajero de Facebook. Bueno, vamos a seguir adelante y sólo reutilizar algo que ya
hemos construido, que es muy similar
aquí a los atajos. Así que vamos a ir a desplazarnos hacia
arriba en nuestro home.html y encontrar nuestros atajos
lista desordenada, así como esto. Copia eso y luego
desplázate hacia abajo. Aquí mismo podemos decir
div con un contenedor. Diremos contacto contenedor. Y luego con una fila, el ancho de columna completo
o una columna de ancho completo, simplemente
pegaremos esa
lista justo aquí. Limpia un
poco el espaciado, cambia al contexto. Y podemos refrescar. Y nos vemos bastante bien. Entonces esto es, podemos hacer un
poco más aquí. Sigamos adelante y hagamos círculos de
estas imágenes, y luego les añadiremos un
poco de frontera. Entonces lo que podemos hacer
es acudir a la
clase de contenedor de contacto y a nuestra hoja de estilo. Y podemos decir que las
imágenes tendrán un radio de frontera del 50 por ciento. Y luego
para que nos sea fácil, por este ejemplo, podemos decir contacto contenedor
imagen y de tipo impar. Y podemos decir que estos tienen
un borde de dos píxeles, botón azul
sólido,
guardar eso y refrescar. Y en realidad está surtiendo efecto. Por lo que sólo necesitamos ajustar
nuestro estilo aquí rápidamente. En lugar de la imagen,
en realidad necesitamos que sea la mentira que tiene
la enésima de tipo. Y luego diremos la imagen
dentro de esos ítems de la lista. ¿ De acuerdo? Y ahí se puede
ver primero, tercero, quinto, voy a tener aplicado
ese estilo. Por lo que eso sobre envuelve nuestro clon de Facebook
de la página de inicio. Sección superior aquí, si se quiere. Espero que ustedes realmente
hayan disfrutado este curso hasta ahora. Siéntase libre de continuar
con lo que tenemos hasta ahora. Echa de menos un diseño muy áspero
de un clon de Facebook. Entonces si ustedes chicos quisieron
expandirse en esto, ya saben, un poco hacerla suya
en contenido real, imágenes
reales, hacer que todo sea
más receptivo y así sucesivamente. Tendría mucha curiosidad por ver hasta
dónde pueden tomar esto tan aislados que ustedes
chicos por tomar este curso. Espero que hayas aprendido mucho. Si tienes alguna pregunta,
siéntete libre de avisarme. Puedes llegar a mí a través Skillshare o estoy
en Twitter también. Espero que ustedes
realmente hayan disfrutado de esta clase. Por favor déjenme sus comentarios. Hazme saber cómo lo hice y
si hay algo que pueda mejorar si hay algún tema que quieras que cubra. Definitivamente avísame. De verdad disfruté haciendo
estas clases y espero que ustedes hayan disfrutado
tomándolas. Gracias de nuevo, chicos.
Kyle Sampson, Web Designer & Developer
