Desarrollo web full stack para principiantes, parte 2: Flexbox, cuadrícula CSS y Bootstrap 4

1. ¡Te damos la bienvenida al curso!: Bienvenido a Full Stack Web Development para principiantes. Este curso está diseñado para llevarte de principiante a desarrollador web capaz de construir no solo interfaces de usuario front-end de un sitio web, sino también diseñar y construir el back-end con el que interactuar también. Entonces, ¿quién soy yo? Mi nombre es Chris, y seré tu instructor para este curso. Soy desarrollador web, y también productor de montones de tutoriales, enseñando a miles de estudiantes las habilidades que necesitan para construir sitios web y aplicaciones. Esta es una segunda parte de la serie completa donde seguiremos construyendo en tu conocimiento HTML, CSS, y de diseño web responsive, y te presentaremos el CSS Flexbox, la Grid, y también el Bootstrap 4 Framework. Este curso se trata de crear diseños flexibles, empezando por el CSS Flexbox, para permitirnos tener un control increíble sobre cómo se presentan los elementos en una página. Seguidamente pasamos a la cuadrícula CSS, que es una de las técnicas más poderosas y modernas para aprender. El trazado de páginas web completas, creando casi cualquier tipo de maquetación que puedas imaginar. Terminamos con el popular Bootstrap 4 Framework, donde construiremos un sitio web de restaurante de hamburguesas. Esto te dará la oportunidad de aprender, y poner en práctica, el sistema de cuadrícula Bootstrap, imágenes y texto, barras de navegación, carruseles giratorios, modelos, formas, y mucho más. También nos fijamos en las clases de utilidad que Bootstrap proporciona para un estilo fácil. A la par de cómo anular cualquiera de estos estilos y hacer tus proyectos completamente personalizados. Espero que estés emocionado por aprender todo sobre Bootstrap y diseñar sitios web en la segunda parte de este curso. 2. ¿Qué es Flexbox?: En las últimas secciones, hemos aprendido mucho sobre cómo crear y cambiar diseños. Muchas de las formas históricas de crear diseños involucraron el uso de tablas de cargas. Ya hablamos de las limitaciones de estos métodos y por qué no son ideales para diseñar páginas. En este apartado, vamos a estar mirando tanto el flexbox como la grilla. Estos modernos métodos de capa hacen que la disposición de páginas web sea mucho más fácil. Vamos a empezar con el CSS Flexbox. Flexbox fue diseñado para ser utilizado para el diseño unidimensional, lo que significa que trata de un eje en el momento, ya sea una fila o una columna. Al igual que se puede ver aquí. No sólo Flexbox controla la dirección, sino que también nos permite establecer la alineación a, como tenemos aquí. Podemos alinear un artículo o un grupo de artículos a la izquierda o a la derecha, o incluso a la parte superior o inferior. Flexbox también nos permite controlar el tamaño de los artículos individuales también. Aquí en la fila superior, tenemos dos cajas, ocupando una parte y luego un artículo que retoma dos partes. Entonces para la segunda fila, tenemos dos artículos. Un artículo retomado tres veces el tamaño del pedido. Estos también flexibles a significado si hay más o incluso menos espacio disponible, estas tres partes siempre estarán en proporción a la una parte. Otra gran característica de flexbox es la capacidad de controlar el orden en el que aparecen los ítems en la página. Tradicionalmente, los elementos aparecen en el orden de un lugar ellos en el archivo HTML. Flexbox nos permite controlar este orden fuente. Esto puede ser particularmente útil cuando se cambian elementos para diferentes diseños. Podríamos tener ciertos elementos en un orden, para pantallas más grandes, y luego un orden completamente diferente para pantallas más pequeñas. Antes de saltar a construir algo con flexbox, hay un concepto importante para entender primero. Este es el eje principal y transversal. Definimos el eje principal estableciendo la dirección del flex. La fila está en valores predeterminados y esto coloca los elementos en una fila de izquierda a derecha en un navegador estándar de izquierda a derecha. Como se puede ver a la derecha, filw-reverse es lo contrario y esto aparece de derecha a izquierda. Entonces tenemos columna que es de arriba a abajo, y luego también column-reversa, que es opuesta de abajo a arriba. Cuando establezcamos esta dirección de flexión, este será considerado el eje principal. Entonces el eje transversal corre perpendicular al eje principal. Entonces si tenía la dirección de flexión establecida en fila, columna será el eje transversal. Además, si establecemos la dirección del flex en columna, entonces fila se convertiría entonces en el eje transversal. Entonces si esto es un poco difícil de entender en este momento, solo recuerda que el eje principal es una dirección que establecemos, y entonces el eje transversal es lo contrario. Este es un resumen básico de cómo funciona el flexbox. En el siguiente video, lo configuraremos en nuestro editor de textos y lo veremos en acción. 3. Flex direction: Ahora conocemos algunos conceptos básicos sobre flexbox. Ambos vistos la inacción realmente nos ayudará a entender cómo funcionan las cosas. Para empezar, voy a crear un nuevo proyecto llamado flexbox. Haga clic derecho en “Nueva carpeta” y nombre es un flexbox. Entonces podemos seguir adelante y abrir esto en nuestro editor de textos. Arrastra esto hacia arriba. Entonces podemos crear nuestro index.html familiar. Entonces voy a usar el atajo de html Columna 5 y luego golpea hacia arriba, establece el título y esto puede ser flexbox y conseguir que guarde. Para este ejemplo, voy a poner algunos elementos a la pantalla con los que trabajar. Dentro de la sección de cuerpo, sigamos adelante y creemos un div. Esto va a tener una identificación de contenedor. Dentro de aquí, también podemos agregar algunos divs más. Este puede ser el ítem 1 y luego una clase de artículo. Quiero crear cinco más de estos artículos. Voy a copiar esta sección aquí y luego pegarla en cinco veces más, dejándonos con seis artículos diferentes dentro de nuestro contenedor. Ítem 2, 3, 4, 5, y 6 y también pueden tener el mismo nombre de clase del ítem para cada uno de estos. Entonces esperemos que podamos abrir las etiquetas de estilo dentro de la sección de cabeza. Para empezar, vamos a apuntar a este ítem con punto, y luego vamos a añadir algunos colores. Los fondos, vamos por lightcoral, algún relleno de 30 píxeles, algún margen de 10 píxeles, y el text-align del centro. Esto es solo para darte un poco de estilo básico para que podamos ver los elementos en la página. Ahora si abrimos esto en el navegador, vamos al index.html y abrimos esto. Ahí están nuestros seis artículos en la pantalla. Solo estamos viendo el comportamiento por defecto en este momento. Porque estos son elementos de nivel de bloque, por lo que todos estarán en línea. Para empezar a usar flexbox, entonces necesitamos establecer el tipo de pantalla al flex. Esto se hace en los elementos padre y los elementos padre que dimos un id de contenedor. Volvamos a las etiquetas de estilo. Entonces en la parte superior, usa el áspero porque es un id, y luego podemos apuntar al contenedor y luego establecer el tipo de visualización para que sea flex. Nos da guardar y luego volver a cargar el navegador y ahora tenemos un cambio. El motivo por el que ahora los estamos viendo en una fila como esta, es porque como hemos visto en las diapositivas en la última conferencia, la dirección flex predeterminada es fila. Echemos un vistazo a la row-reverse. Esto también está en los padres y dijimos que con la dirección flex de row-reverse guardar. Antes teníamos el ítem 1 a la izquierda y el ítem 6 a la derecha, refresca. Ahora comienza el primer elemento por el lado derecho y se mueve hacia la izquierda. También tenemos una dirección de columna, la pila estos elementos uno encima del otro. Cambiar fila-reversa. Ahora será una columna y hay una pila de arriba a abajo. De nuevo igual que antes, si queremos que el Item 1 sea lo contrario y abajo en la parte inferior, podemos configurar esto para que sea column-reverse, dirección flex diga column-reverse, y ahora nuestros artículos cambian de abajo a arriba. Esta es una cuatro opciones de dirección flex que tenemos a nuestra disposición. Recuerda cuando señale dirección flex, esto se considera el eje principal. Tenemos fila, fila-reversa, columna, y columna-reversa a. Ese es ahora nuestro primer vistazo nuestro flexbox y siguiente echaremos un vistazo a cómo podemos usar flex box y justificar el contenido. 4. Flex wrap y justify content: En este video, vamos a estar viendo flex-wrap y cómo justificar el contenido. En primer lugar, sigamos adelante y cambiemos la dirección flex-para que sea la fila predeterminada, dentro del contenedor principal. Todos los artículos que hemos agregado están ahora en la misma fila. Deberíamos refrescarnos y luego ahora ir de izquierda a derecha. Si seguimos agregando más artículos en, todos seguirán apareciendo en la misma línea. Bajemos a nuestros artículos y copiemos esto y péguelo. Número 6, justo debajo. Teniendo en cuenta esos 12 elementos, este comportamiento se puede cambiar mediante el uso de la propiedad flex-wrap. El valor predeterminado se establece en sin envoltura. Es por ello que vemos todos nuestros artículos en la misma línea. Esto también se aplica al contenedor. Si pasamos a la sección de estilo y apuntamos al contenedor, agreguemos la propiedad flex-wrap y luego establecemos esto para que sea envoltorio, guarde eso, recargue. Ahora los artículos se envolverán en múltiples líneas. Si hacemos que el navegador sea aún más estrecho, cada vez que sea menos espacio, todos caerán en dos newline. Desplaza los artículos de la línea directamente debajo. Si querías los efectos opuestos, podemos usar wrap reverse, así que agrega reversa al final de esto. Dale eso guardar y recargar. Ahora los artículos extra que estaban en la línea de abajo, ahora aparecen en la línea de arriba, porque ahora funciona de abajo a arriba. Al igual que antes, si encogemos el navegador, todos los elementos adicionales saltan un nivel en lugar de por debajo. De hecho, también hay una taquigrafía para este flex-wrap y también para flex-direction para actualizarse en una sola propiedad. Esto se llama flex-flow. Podemos eliminar estas dos líneas aquí y luego impar flex-flow. Se necesita en dos valores. El primero era nuestro valor de fila para la flex-dirección, y luego el segundo para warp. Esta primera línea con dirección flex-luego la segunda es para el flex-wrap. Guarda eso. Ahora hemos fusionado estas dos líneas en una. Lo siguiente que quiero mostrarles es cómo justificar el contenido. Esto se utiliza para controlar cómo se espacian nuestros artículos a través del eje principal. Esta es también una propiedad CSS que se agrega al Container. Entonces agreguemos justificando contenidos y luego empecemos con flex-start. Si actualizamos, no vemos ningún cambio en el navegador. Esto se debe a que flex-dot es predeterminado. Podemos ver cómo este efectivo más si intentamos flex-end. Más bien flex-start, agreguemos flex-end. Recuerda que nuestros artículos por defecto están en una fila. través de la página de izquierda a derecha, es por ello que flex-start alinea todos los elementos del lado izquierdo y luego flex-end alinea todos los elementos al lado derecho, que es el final del eje principal. También intentemos centrar, guardar y recargar. Ahora todo está alineado al centro del eje principal. Todavía tenemos el mismo comportamiento si vamos a encoger el navegador, todos los elementos seguirían cayendo en la siguiente línea comenzando desde el centro. Esto por supuesto, coloca los artículos a lo largo de la línea central del eje principal, que es justo por aquí. Las siguientes opciones gratuitas todas relacionadas con cómo se distribuye el espacio disponible entre estos ítems. Si empezamos con el espacio entre. En lugar de centrar, podemos agregar un espacio entre y ver cómo se ve esto. Ahora los ítems siguen en la misma línea que normalmente estaría. Pero ahora tengo igual cantidad de espacio distribuido entre cada artículo. Si en cambio queríamos que el espacio estuviera a su alrededor. Entonces para estar igualmente en el lado izquierdo y derecho, tenemos espacio alrededor para esto. Cambiar el espacio entre para ser espacio alrededor. Este espaciado se aplica a ambos lados ahora. Los artículos tendrán el doble de espacio entre ellos de lo que hará al final. Porque por ejemplo, el ítem 3 tiene la mitad del espacio aquí y luego ítem 4 tiene la mitad del espacio en esta idea aquí también. Si querías tener el espacio de cada lado para ser igual, también tenemos espacio de manera uniforme. Vamos a darle una oportunidad a esto. Ahora hay incluso espacio entre todos los artículos. Esto es todo ahora para este video, pero ahora deberías poder ver qué tan poderoso es el flexbox para el layout. Incluso acabamos de añadir en unas pocas líneas de CSS. 5. Alinear elementos: Comencemos este video volviendo a nuestros seis elementos originales en la página de índice. Eliminemos estos últimos seis que agregamos al principio y luego recarguemos y ahora volvamos a nuestros seis artículos originales. En primer lugar, queremos empezar por mirar una línea de artículos. En el último video, miramos a justificar contenido, que alinearon o elementos y también determinaron el espacio entre ellos. Todo esto se hizo a través del eje principal. Tenemos el eje principal establecido en fila. Esto significa que toda la alineación y el espaciado estaban a través de la página de izquierda a derecha. Alinear elementos también funciona con estos mismos artículos también, pero esta vez en el eje transversal. Actualmente, con nuestra configuración actual, el eje transversal sería vertical o de arriba a abajo. Para esta demo, podemos agregar algunas alturas diferentes a estos artículos. Esto nos ayudará a ver mejor cómo funciona alinear artículos. Pasemos a nuestros seis artículos y luego agreguemos un poco de estilo, por lo que los atributos de estilo. Añadamos la altura y vamos por 300 píxeles, luego copie esta sección. Podemos agregar esto en un par de veces más. Voy a ir por 250 en este y luego 320 al final, para luego refrescar. Ahora esto se ve un poco extraño. Sólo hemos establecido las alturas de tres de estos artículos, pero parece que todos han cambiado. Esto se debe a que el valor predeterminado para alinear elementos es stretch, por lo que los elementos flex se estirarán hasta la altura del más alto para llenar las alturas del contenedor. Por lo que volver a nuestros estilos en la parte superior de la página. De nuevo, esto es durante el contenedor padre. Podemos agregar elementos de alineación y como acabamos de mencionar, stretch es el valor predeterminado, por lo que agregar un signo no causará ningún cambio. Empecemos con flex-start. flex-start iniciará los elementos en el borde inicial del eje transversal. Entonces para esos esta sería la parte superior de la página y luego trabajando hacia abajo. Ahora vemos los tres artículos que altura hemos cambiado, y la mano derecha todavía, como originalmente lo fueron. Si queremos que los cambios comiencen al final de la página, entonces utilizaríamos flex-end. Recuerda estos flex-start y flex-end posición depende de qué eje, es nuestro principal y cruz. Si seguí adelante y cambié el eje principal para ser columna, así que en lugar de fila, si cambias esto para ser columna, refresca y ahora esto establece que el eje principal sea vertical, es decir, el flex-end, que establece un eje transversal lo haría ahora estar sobre en el lado derecho. Si lo cambiamos de nuevo a fila y luego reinstalamos. Además, hay opción de centrar los artículos también. Nuevamente, usando alinear elementos, podemos cambiar flex-end para ser centro. Probablemente te imaginas lo que hace esto. Esto agrega una línea justo por el medio del contenedor y todos los artículos estarán espaciados uniformemente por encima y por debajo de esta línea. tipo de diseños solía ser mucho más complejo, pero con flex box, esto nos permite hacer todo esto con solo unas pocas líneas de CSS. Podemos llevar las cosas aún más allá alineándonos con la línea de base del texto. Este texto que se encuentra en medio de cada ítem. Cambiemos de centro para ser de línea base, refresquemos. Dentro del navegador a primera vista, no se ve diferente de la opción flex-start. Recuerda, aunque esta es una línea hacia la línea de base. El basal es la línea de fondo del texto y esto es lo que vemos aquí. Para ver un cambio, tendremos que mover la posición exterior del texto. Línea horizontal debería hacer esto por nosotros. Bajemos a nuestros artículos y dentro de este primer div ahora podemos agregar una línea horizontal. Veamos qué efecto tiene esto sobre en el navegador. Ahora tenemos más contenido aquí dentro. Esto empujado hacia abajo es el elemento uno texto y todos los demás elementos todavía alineados a la parte inferior de este. Si movemos también la posición exterior del texto en otro elemento, también se alineará. Esta vez agrega dos líneas horizontales, esto está dentro del ítem tres y luego refresca. Ahora, podemos ver que todos los artículos siguen alineados, pesar de que he añadido dos piezas adicionales de contenido. Es así como podemos usar alinear elementos en caja flex. En el siguiente video, echaremos un vistazo a otro método de alineación de ejes cruzados llamado alinear contenido. 6. Alinear el contenido: A continuación vamos a echar un vistazo a align-content. Sé que estamos viendo bastantes términos para sacar la cabeza por aquí. A pesar de que se puede pensar en align-content como similar a justify-content, que ya hemos utilizado. Pero esta vez se aplica al eje transversal más que al eje principal. Para ello, necesitamos unas cuantas filas más de contenido. Entonces movamos estos estilos que se añadieron en la última vez. Entonces la primera, la línea horizontal, estas dos líneas aquí y luego las dos finales, atributos de estilo. Quita eso. Después voy a copiar los seis artículos una vez más y luego pegarlos. De hecho los pegamos en dos veces más va 18 artículos diferentes. Guarda eso y luego refresca. Por lo que ahora tenemos alrededor de tres líneas de contenido con las que trabajar si reducimos un poco el navegador. También ayudaría para esta demo si estableciéramos un color de fondo el contenedor y también lo estableceremos para que sea la altura completa de la pantalla. Entonces dentro de este contenedor, vamos a agregar algo de CSS. En primer lugar, los antecedentes. Yo quiero ir por verde claro. Después establece la altura para que sea a pantalla completa con 100vh. Recuerde que vh es un tamaño relativo que sólo tiene que ser un 100 por ciento de la altura viewport. Por último, eliminemos este align-items y justify-content de videos anteriores. Yo sólo voy a comentar esto. Por lo que sigue ahí, luego refresca. Por lo que ahora podemos llegar a trabajar en align-content. Recuerda que seguimos trabajando en el eje transversal. Todo esto se estará aplicando de arriba a abajo. Al igual que align-items que miramos antes. Stretch también es el valor predeterminado para align-content también. Es por ello que todos nuestros artículos y técnicamente altura completa del viewportt. También tenemos un flex-start familiar también y también flex-end. Veamos cómo se ven estos en align-content. Flex-start para empezar, y luego refrescar. Ahora no tenemos el valor de estiramiento predeterminado y todos los elementos que están al inicio del eje transversal, que es la parte superior de la página. Como probablemente te imaginas, flex-end empuja esto a la parte inferior de la página y luego sube hasta la parte superior. Entonces demostremos esto con la actualización flex-end, y ahora todo está abajo en la parte inferior del eje transversal. También tenemos centro. Lo cual empujará todo a la mitad de la altura o a la mitad del eje transversal en este caso. Deberías estar empezando a ver un patrón aquí también. La mayoría de las propiedades que se mirarán son más o menos las mismas, pero simplemente se aplican a un eje diferente. Al igual que justificar el contenido, también hay un espacio-intermedio y espacio-alrededor también. Empecemos con el espacio-intermedio. Esto aplica todo el espacio entre los elementos. Como acabamos de mencionar, también tenemos espacio-alrededor y esto nos dará igual espacio alrededor de todos los artículos. De arriba a abajo, mitad del espacio está encima del ítem y la otra mitad está por debajo del ítem. Esto nos da el efecto de tener el doble de espacio entre cada elemento. Si cambiamos el eje principal es tiempo de ser columna. A continuación, actualiza el navegador. Ahora la columna establece el eje principal para que sea vertical. Esto significa que ahora una horizontal es el eje transversal. Esto provoca align-content y ahora se aplican en toda la página, ya que este es ahora el eje transversal. Entonces sigamos adelante y cambiémoslo de nuevo a la fila y luego recarguemos el navegador. Esta es una de esas cosas que sólo necesita un poco de práctica para ponernos la cabeza alrededor. Una vez que empieces a usarlo dentro de nuestro CSS, más regularmente, las cosas se volverán mucho más fáciles. Esto es todo por ahora por espaciar los artículos y te veo en el siguiente video. 7. Control de los elementos secundarios: orden: Todas las propiedades de Flexbox que hemos mirado hasta el momento se han agregado al contenedor padre. Esto nos permite controlar los ítems como grupo. Tanto en este video como también en los videos restantes de Flexbox, las propiedades se aplicarán directamente a los elementos flex individuales. Esto nos da un mayor control sobre los artículos individuales. En primer lugar, vamos a ver cómo establecer un pedido, que aparecerán nuestros artículos. Volvamos a nuestra página de índice y podemos volver a nuestros seis artículos originales. Eliminemos estos últimos 12, dejando los elementos de uno a seis y de hecho, también podemos quitar las alturas, que fijaste antes. Eliminemos esta línea y también podemos comentar un contenido de línea del último video. Por defecto, nuestros seis ítems aparecerán en la pantalla en el orden fuente por lo que vemos el ítem uno, justo a través del ítem seis a través de este eje principal. El inmueble del pedido nos permitirá reorganizar cualquiera de estos artículos. Voy a empezar por crear una nueva clase de en el CSS. Voy a llamar a esto la orden y luego podemos agregar la propiedad de orden. Empecemos configurando esto para que sea uno. El inmueble del pedido nos permitirá reorganizar cualquiera de estos artículos por lo que todo lo que necesitamos hacer es agregar esta clase de pedido a cualquiera de estos artículos. Vayamos por el artículo dos y ordenemos como clase. Fuera del navegador y luego volver a cargar. Esto ahora mueve nuestro segundo elemento hasta el final. Esto se debe a que todos los artículos tienen un orden predeterminado, que es esta propiedad aquí de cero. Esto significa que nuestro artículo dos ahora tiene un peso de uno, moviéndolo hasta el final. Este número puede ser cualquier cosa como 10, 15, o incluso 30, por ejemplo y seguirán apareciendo en el orden en que nos pusimos. También se permiten números negativos por lo que ponemos esto en uno negativo. Esto ahora colocará el elemento dos, justo al principio ya que todos tus artículos tienen un pedido de cero. Esto es particularmente útil para el cambio en los diseños con diseño receptivo. El orden se puede cambiar en una consulta de medios. Tienen diferentes diseños para diferentes tamaños de pantalla por lo que es una herramienta realmente útil de tener. Es así como podemos reorganizar el pedido usando Flexbox. Es realmente simple y solo una línea de código, pero se puede ver lo efectivo que puede ser esto. A continuación, cubriremos cómo permitir que los artículos crezcan y se encojan con el espacio disponible. 8. Controlar los elementos secundarios: crecer y encoger: Vamos a seguir viendo cómo podemos controlar estos artículos infantiles. De manera más específica, cómo crecen y se encogen al espacio disponible. Para empezar, voy a bajar, y reducir nuestra demostración para ser cuatro productos. También podemos eliminar esta clase de pedido. Entonces también el CSS correspondiente justo arriba. Para ello, podemos utilizar una propiedad llamada flex-grow y también flex-retráctil. Empecemos por echar un vistazo a flex-grow. Esto determinará cómo puede crecer un elemento a lo largo del eje principal. En los momentos el tamaño del elemento está controlado por la cantidad de contenido en el medio, y también cualquier relleno. Actualmente no ocupan todo el ancho de la pantalla, que se puede ver en el navegador. Si seguimos adelante y agregamos flex-grow a uno de estos ítems como un estilo en línea, claro que no tiene que estar en línea. También se puede incluir en el CSS2. Añadamos el flex-grow, y pongamos esto en un valor de uno. Guardar. Entonces nuestro primer elemento ocupa mucho más espacio que los tres restantes. Básicamente, estos tres ítems aquí, número dos, tres y cuatro, siempre se mantendrán del mismo tamaño dependiendo del contenido dentro. Entonces el que flex-crecería, ocupará el espacio adicional. Si hacemos lo mismo para el ítem dos, si copiamos este flex-grow, entonces veamos qué hace esto. Los ítems tres y cuatro, ambos aún ocupan el mismo espacio, siempre lo han hecho. Entonces el espacio restante se comparte por igual entre los elementos uno y dos. Porque ambos tienen un valor de flex-grow igual de 1. Si seguimos adelante y agregamos esto a todos los artículos. El ítem 3 y el ítem 4 también, ahora vemos que los cuatro ítems comparten la misma cantidad de espacio. Este valor flex-grow de uno, no es ninguna unidad de medida en particular, como un píxel o un m Es significativo cuando se compara con el resto de estos valores. La diferencia ocurre cuando no todos son iguales. Si hacemos Ítem 3, un valor flex-grow de dos, de al navegador, y ahora ítem 3 intentará ocupar el doble de la cantidad de espacio que el resto si está disponible, Es cambios para ser tres. Ahora debería ser aún más amplio. Si bien esta propiedad flex-grow trata de cómo crecerán los artículos a través de este eje principal, si el espacio está disponible. También tenemos flex-retráctil a. Esto trata de cómo los artículos deben encogerse si no hay suficiente espacio para que quepan. En primer lugar, eliminemos el rap comentando el flex-flow, que es esta línea de aquí. Comando y barras inclinadas hacia adelante. Si usa Visual Studio Code, entonces podemos agregar un ancho fijo de 600 píxeles para el contenedor. Vamos a sumar esto abajo en la parte inferior. Ancho de 600 píxeles. Entonces podemos asegurarnos de que estos elementos no caben en su contenedor configurándolos para que sean un ancho, digamos 160 píxeles. Por lo que podríamos hacerlo así y establecer el ancho para que el elemento sea de 160 píxeles. Esta es una forma de hacerlo, o podríamos usar una nueva propiedad flex-box, que se llama flex-basis. Cambiemos esto para que sean espacios flex-base, y aún 160 píxeles. Esta base flex define un tamaño predeterminado de un elemento, antes de que se distribuya cualquier espacio restante. Aquí, los cuatro artículos son demasiado anchos para caber en el contenedor. Aquí es donde entra el flex-retráctil. Flex-Shrink determinará qué artículos se encogerán para ajustarse al espacio disponible. Bajemos y cambiemos flex crecido para ser flex-retráctil esta vez. Voy a cambiar por los cuatro artículos. Vamos a establecer los dos últimos para que sean un valor de 2. Entonces refresca. Ahora vemos que los artículos 3 y 4 se han encogido. Dado que un valor mayor en comparación con los ítems 1 y 2. Si vamos por encima de un aumento, uno de estos rubros para ser tres en su lugar. Esto hará que el artículo se encoja más cuando no haya suficiente espacio para que todos quepan en un contenedor. En este video, hemos mirado el flex-grow, flex-retráctil y flex-basis. Estas tres propiedades se pueden combinar en la taquigrafía del flex de esta manera. Hasta el artículo, podemos comentar esta base flex y luego reemplazarla por flex. Si tuviéramos que añadir cero, uno y luego auto. Estos son los ajustes predeterminados. Cero para empezar es un flex-grow. Uno es para todo flex-retráctil, y luego auto es para los espacios de bandera que agregaste justo arriba aquí. Si guardamos eso, y luego vemos cómo se ve en el navegador, así es como nos veríamos con los valores predeterminados. Tenemos este ancho fijo de 600 píxeles para el contenedor. Entonces nuestros cuatro artículos iguales, porque todos están ajustados al valor de cero. Podemos jugar con estos valores igual que antes también. Por ejemplo, si estableceríamos todos los elementos tienen un valor flex-grow de uno, entonces uno y uno, luego pasa al navegador. Ahora cada uno ocupará por igual el espacio disponible en un contenedor. Esta propiedad flex es mucho más fácil y más limpia, que en este momento estas tres propiedades por separado. Ahora terminamos con mirar cómo crecen y se encogen los artículos. A continuación, terminaremos mirando el flex-box aprendiendo sobre un auto de línea. 9. Control de elementos secundarios: alineación: Anteriormente en esta sección, alineamos el grupo completo de ítems de diversas maneras. Esto funciona bien. Pero a veces, es posible que desee que un elemento en particular se alinee de manera diferente al resto. Pero este caso tenemos la propiedad align self. Para empezar, voy a eliminar los estilos en línea que acabamos de agregar antes, y estos son los cuatro ítems a continuación. Eliminar los estilos en línea, que es un valor de contracción flex. Antes de la fuente 2. Alinear auto funciona igual que alinear artículos, que usamos en el contenedor. Pero esta vez, lo agregamos al artículo, queremos controlar la serie en acción. Voy a configurar el contenedor para que sea la altura completa. Desplácese hacia arriba hasta la sección Estilo, y luego vamos a establecer la altura para que sea 100 vh, que recuerden, es la altura del puerto de vista. Si vamos al navegador, al igual que hemos visto con los elementos de alineación, el valor predeterminado es stretch, razón por la cual estos se colocan de arriba a abajo de la página. Para controlar uno de estos elementos individuales, podemos agregar alinear auto y cambiar los valores predeterminados. Bajemos a los productos y añadamos esto a cualquiera de estos. Vamos a reintroducir el estilo. Esta vez, podemos agregar alinear uno mismo, y empecemos con centro, luego refresquemos. Ahora, estamos controlando un elemento individual en lugar de todo el grupo de ítems. También tenemos algunas propiedades de aspecto familiar, como flex start, que debemos saber qué pasa ahora si nos refrescamos. Esto ahora coloca esto en el inicio del eje. Si queremos distribuir colocado abajo en la parte inferior o en el extremo opuesto, también tenemos un extremo flex, que ya hemos visto antes. Esto nos da algún comportamiento esperado. También tenemos la línea de base dos que buscamos sobrevalorizos. Vamos a cambiar flex terminar la línea base, refrescar. Estos ahora se alinearán con la línea de base del texto a partir de los elementos superiores. Esto es ahora por nuestra mirada al flex-box CSS. Se puede ver lo útil que puede ser para colocar sitios web. A continuación, vamos a cubrir otra técnica de diseño llamada cuadrícula CSS. Te veré pronto. 10. Hora de practicar: integrar Flexbox en Tech Store: Antes de saltar a aprender sobre la cuadrícula CSS, mientras que flexbox sigue fresco en nuestras cabezas, me gustaría que se bajaran y ahora se hicieran algo de práctica usando este flexbox. Este flexbox es una forma realmente útil de colocar nuestros sitios web. Pero al igual que cuando aprenden algo nuevo, pueden parecer mucho para tomar al principio Sí se vuelve más fácil con la práctica sin embargo. Esto es lo que me gustaría que siguieran adelante y hicieran ahora. Me gustaría que utilizaras algunas de las técnicas de flexbox que has aprendido para luego seguir adelante y aplicarlas a nuestros proyectos textiles. No necesitas enloquecer y reescribir completamente todo el CSS. Pero sólo intenta cambiar algunas cosas para incluir este flexbox, algunas ideas, qubits para hacer que los productos llenen automáticamente el contenedor. O podría ir aún más lejos y usar flexbox para cambiar el diseño para dispositivos de diferentes tamaño. Ve cabeza y dale una oportunidad a eso y luego vuelve a aprender todo sobre la cuadrícula CSS. 11. ¿Qué es la cuadrícula CSS?: Ahora pasamos a otra poderosa técnica para el diseño de sitios web llamados la cuadrícula CSS. Grid resuelve casi todos los problemas de diseño Los desarrolladores web han tenido que trabajar en el pasado. El flexbox, que acabamos de ver, ayuda a resolver muchos de estos problemas de diseño también, pero es unidimensional. Sólo podemos trabajar en columnas o filas a la vez. Grid, por otro lado, es verdaderamente flexible y nos permite trabajar en dos dimensiones. Esto significa que se puede utilizar fácilmente para disenar un sitio web completo, mientras que flexbox es generalmente más adecuado para alineaciones y posicionamiento más pequeños. Se pueden usar ambos juntos y en realidad trabajar juntos muy bien. No perdamos tiempo en saltar directamente para aprender sobre la grilla. 12. Primera impresión en la cuadrícula de CSS: De acuerdo, así que empecemos con la grilla. Para empezar, voy a duplicar carpeta del proyecto flexbox y luego renombrar esto la cuadrícula. Entonces, al escritorio o a la ubicación donde guardaste tu proyecto, voy a duplicar este proyecto y luego una vez hecho eso, cambiemos el nombre de esto, la cuadrícula. Abre esto en Visual Studio Code. Entonces también podemos abrir el índice o HTML dentro del navegador. Esto dirá que estamos configurando todo el código HTML repetitivo, que necesitamos para empezar. Pasemos al índice o HTML. Podemos cerrar la barra lateral hacia abajo y luego hacer algunos cambios para limpiar esto. Por lo que el título la cuadrícula. Entonces podemos quitar todos los estilos del contenedor. Apenas saliendo en este color de fondo. También podemos reutilizar esto. Un montón de artículos reutilizados también, seleccione quitar las propiedades flex, dejando en solo un color de fondo y también el patrón está bien. Abajo al div, volverá a usar el contenedor div y también los artículos individuales así que vamos quitar la propiedad de estilo desde dentro de ahí y entonces estamos bien para ir. Bien. Al igual que con el flexbox, primero necesitamos cambiar el tipo de visualización del contenedor, pero esta vez, en lugar de configurarlo para que sea flex, usamos la cuadrícula. Entonces exhibe con el tipo de cuadrícula y veamos qué pasa en el navegador. Si recargamos, no vemos ningún cambio hasta el momento. Cuando configuramos la cuadrícula, los elementos secundarios del contenedor a nivel de bloque, también lo hacen el ancho completo de la página. Si desea que los elementos estén en línea, podemos cambiar el tipo de cuadrícula para que esté en línea. Vayamos a aquí y cambiemos esto para que sea inline-grid, recarguemos y luego todos los elementos ahora en línea en lugar de bloquear. Yo me voy a quedar con rejillas por ahora aunque. Quitemos esto en línea y restablezcamos esto a la normalidad. Entonces declare cómo queremos que se disparen estos rubros. Establecemos el número de columnas y filas que queremos utilizar. Voy a empezar con las columnas y esto se hace dentro del contenedor principal. Esto lo hacemos con la propiedad CSS llamada grid-template-column y luego voy a establecer esto para que sea de 100 pixels y también el navegador. Para ver mejor estos ítems, agreguemos un borde alrededor del exterior de cada uno y esto se necesita hacer dentro de los ítems. Tan solo un simple borde de un píxel y una línea sólida. Ahí vamos. Solo hemos especificado una columna por el momento, que tiene un ancho de 100 píxeles. Es por ello que los vemos todos apilados en una columna como esta. Si queremos más de una columna, especificamos más números. Entonces justo después de los 100 píxeles para la cuadrícula-templada-columnas, agreguemos una segunda columna de 300 píxeles y luego una tercera de 80. Así es como se ve esto en el navegador. Aquí hemos especificado tres tamaños. Los tres primeros artículos de estos tamaños. Tenemos los primeros 100, luego 300, y luego 80. Entonces cualquier elemento extra se repetirá como vemos para este cuarto ítem aquí abajo, que cae en la primera columna de 100 píxeles. Esto se puede ver mejor con más artículos. Bajemos al HTML. Ahora, podemos duplicar uno de estos divs. Vamos a pegar esto en un par de veces más. Entonces 5, 6 y luego 7 y ahí están nuestros artículos repetidos en la segunda fila. Después nos queda un ítem extra el cual se establece de forma preestablecida en la primera columna. Estas columnas y también filas, que veremos a continuación se conocen como pistas. Por el momento, tenemos una pista de 100 píxeles por pista, una pista de 300 píxeles de ancho y luego una pista de 80 píxeles de ancho a la derecha. Además, estos tampoco necesitan ser dimensionados en píxeles. No podemos usar cosas que ya conocemos. Por lo que cinco por ciento o incluso auto para ocupar automáticamente el espacio restante. En lugar de 80 píxeles aquí, podemos configurar esta tercera pista para que sea automática y luego esta tercera pista ocupará automáticamente el espacio restante. Ahora, en filas, por el momento, la altura de cada una de las filas está establecida por el contenido, esto incluye una parte en dos. Usando Visual Studio Code, podemos agregar algún texto de muestra llamado Lorem Ipsum. Bajemos a uno de nuestros artículos. Digamos que el punto dos y si escribimos lorem con una temp, entonces obtenemos más contenido de texto. Veamos qué efecto tiene esto en el navegador. Esta primera fila es ahora más alta por el contenido extra. No siempre queremos esto sin embargo, muchas veces queremos tener control sobre esto nosotros mismos. Aquí es donde entra grid-templadas-filas. Si volvemos a nuestro contenedor, también podemos establecer las cuadrículas-templadas-filas y vamos a establecer que esto sea un valor de 100 píxeles. Entonces de nuevo y las tres filas ahora están ajustadas a 100 píxeles de alto. Ahora, el contenido ya no está en control de la altura porque lo hemos establecido para que sea exactamente lo que queremos. Al igual que las columnas, solo establecer un valor solo afectará a la primera fila. Puedo seguir adelante y sumar nuestros valores. Adelante y sumamos el primero. Digamos que 250 píxeles, 150 píxeles, y luego 100. Está bien. Bien. Ahora tienen tres vías de carretera laterales de forma individual. En tan solo unas líneas, hemos controlado el diseño de nuestro contenido en dos dimensiones, utilizando tanto columnas como filas. Esto contrasta con el flexbox, que está diseñado para ser utilizado únicamente en una dimensión a la vez, ya sea una fila o una columna. Esta es nuestra primera mirada a las rejillas. Todavía hay mucho más por cubrir sin embargo y continuará en el próximo video. 13. Espacios en la cuadrícula: En el último video, agregamos un borde alrededor de estos elementos de la cuadrícula. Volveremos a ver cómo están dispuestas. Si pasamos al CSS y eliminamos este borde y volvemos al navegador. Se vuelve difícil ver las filas y columnas. Por defecto, no hay espacio entre las columnas y las filas pero para arreglarlo podemos usar grid-gap. Para agregar una grid-gap entre columnas, tenemos grid-column-gap. Esto también se aplica al contenedor. Entonces sigamos adelante y sumamos grid-column-gap. El valor dependía de nosotros. Entonces, empecemos con 10 píxeles y esto agregará un espacio de 10 píxeles entre cada una de las columnas. Como habrás adivinado, también hay grid-row-gap también y puedes agregar esto también al contenedor. Por lo que grid-row-gap y deja de nuevo establecer esto en 10 píxeles, refrescar. Ahora hay un espacio de 10 píxeles entre las filas y las columnas. Observe cómo estos huecos sólo entre las filas y columnas, no alrededor del borde. Esto resuelve uno de los viejos problemas que tuvimos al espaciar nuevos elementos utilizando métodos CSS como el margen, donde el espacio estará alrededor de los elementos, incluso el borde circundante por defecto. Además, hay una versión abreviada también llamada grid-gap. Entonces, en lugar de tener dos líneas de código aquí, podemos eliminarlas y en su lugar usar grid-gap. Al igual que cuando se utiliza el margen y el relleno, podemos establecer dos valores. El primero es para las filas, lo que 20 píxeles y luego para las columnas, 10 píxeles, luego refresca. O si queríamos que un valor se aplicara tanto a las filas como a las columnas, simplemente podemos dejar en un valor, como 10 píxeles, y luego deja huecos iguales por todas partes. Se puede ver cuánto podemos controlar con tan solo unas pocas líneas de CSS. Este tipo de diseño sin la cuadrícula sería mucho más complejo y llevaría mucho tiempo. Esto es ahora para brechas de cuadrícula. A continuación veremos cómo repetir pistas y también establecer los tamaños mínimo y máximo. 14. La repetición de pista y la unidad fr: En este video, vamos a ver algunas formas de tener un mejor control sobre nuestras pistas. En primer lugar es cómo repetir pistas que tienen los mismos tamaños. Si quisiéramos que todas nuestras columnas tuvieran 200 píxeles de ancho, así como esto. En lugar de establecer todo libre, si tuviéramos 200 píxeles, ya sabemos que el valor cuerdo uno como este, sólo dará como resultado que se muestre una columna. Para ayudar con esto, los proveedores de grilla repetirán, por lo que podemos agregar esto dentro de nuestras columnas. Añadamos repeticiones, y luego podemos agregar nuestro valor dentro de los corchetes así. Seguimos guardando aquí el tamaño del camión, pero antes de esto sumamos el número de veces que queremos que se repita. Si quisiéramos cuatro columnas, haríamos cuatro a 200 píxeles, y recargaríamos, y elementos de cuatro columnas con igual ancho. Seguimos libres de añadir más pistas individuales ya sea antes o después. Si queríamos que el primero fuera de 100 píxeles, y luego repetir antes o después, simplemente agregamos un nuevo valor en antes de esto. 100 pixels y luego repetiré después. Esto nos da nuestra primera columna con 100 píxeles de ancho, y cuatro columnas repetidas a 200 píxeles cada una. Si quisiéramos una quinta pista para ocupar el espacio restante del lado derecho, también podríamos hacer esto. Podríamos agregar un tamaño fijo o podríamos reutilizar la propiedad auto, que hemos visto antes, refrescar y ahora tenemos un artículo extra al final. O alternativamente, si sabemos cuántas columnas queremos usar, también podemos establecer este auto en, seleccionar eliminar auto desde el final, y el primer valor, y digamos que queremos columnas libres. También podríamos usar auto dentro de las repeticiones. Ahí vamos. Ahí están nuestras tres columnas y ahora las pistas se redimensionan automáticamente al contenido. A continuación, quiero mostrarles una nueva unidad de medida llamada la unidad fi, cual es abreviatura de fraccional. Esta unidad se relaciona con una parte del espacio disponible. Funciona como temprano lo que miramos, valores flex, donde un valor de uno es una parte del espacio disponible y el valor de tres es tres veces mayor. Añádalo a nuestras columnas y veamos qué pasa. Siempre que crees columnas de plantilla, en lugar de auto, podemos agregar un fi, y refrescar. Ahora el ancho de nuestras columnas no depende del contenido. Todos ocupan el mismo espacio disponible, y por supuesto, agregar una nueva columna a fi, ocupará el doble del espacio disponible. Agrega una cuarta columna, refresca. Esto es ahora el doble del tamaño de estos tres, como cabría esperar. Repetir también se puede aplicar a filas también. Justo debajo, también podemos agregar repeticiones. De nuevo dentro del corchetes, agregamos cuántas filas queremos, y luego el tamaño, luego quitar nuestra última columna de la parte superior. Ahora para recargas, obtén también tres filas de igual tamaño. Nuevamente, nuestras filas también se pueden mezclar con otras pistas de tamaño, lo que significa que esto es realmente flexible de usar. 15. Tamaño mínimo y máximo de la pista: El cuadrícula CSS también nos permite establecer un rango para el tamaño del camión agregando el tamaño mínimo, máximo, que debe ser. Esto lo hacemos con la función min-max y lo podemos hacer dentro de nuestras columnas o filas. Si vamos a las Columnas para comenzar, podemos quitar esta repetición y luego reemplazarla por la función min max. Dentro de los corchetes, esto también toma dos valores. El primero es el tamaño mínimo de la columna. Digamos 160 píxeles y luego el segundo valor es el tamaño máximo, vamos por 200 píxeles. Esta sección se aplicará a la primera columna y vamos a añadir un par de columnas más en. El segundo modo puede ser un fr, y luego el tercero lo hará el doble del tamaño de 1fr, luego pasar al navegador. Este primero es el que nos interesa. Este es uno usando min-max y el tamaño debe estar entre 160 y 200 píxeles. Para comprobar que esto está funcionando, abrimos las herramientas de desarrollador e inspeccionamos la primera columna. Vayamos con el inspector. Si abrimos este ítem, podemos ver que el tamaño está establecido en 200 píxeles. Entonces el segundo es 1fr, por lo que tomaremos un camino del espacio disponible. El tercero lo establece en 2fr, por lo que debe ser el doble del espacio disponible. Este es 518 y éste es 259, que es exactamente la mitad. También podemos ver mejor este min-max en acción reduciendo el navegador a un tamaño más pequeño. Entonces deja volver a abrir este primer elemento y puedes ver aunque su navegador es realmente pequeño, ahora tenemos un valor mínimo de 160 píxeles. Esta función min-max es realmente útil cuando queremos tener un control fino sobre el tamaño de nuestra pantalla de pista y así es como podemos usarlo. 16. Números de líneas de la cuadrícula: Cada una de las pistas que creamos, incluso en una fila o columna tiene estas líneas de cuadrícula numeradas entre ellas. Estas líneas de rejilla comienzan en una, que es el inicio de la pista, luego continúan por la dirección de rejilla hasta el final de la pista. Aquí vemos tenemos nuestras pistas de columna numeradas del 1-5, y las filas numeradas del 1,2,3,4. Pero, ¿por qué necesitamos saber esto? Bueno, podemos usar estos números de línea de cuadrícula para posicionar un elemento, exactamente donde queríamos estar en una cuadrícula. Utilizamos inicios de fila de cuadrícula, final de fila de cuadrícula, inicio columna de cuadrícula y final de columna de cuadrícula para especificar inicio en posiciones finales en cada eje, donde queremos colocar un elemento. Aquí tenemos un elementos entre las líneas dos y tres en la fila, y luego entre las líneas tres y cuatro para las columnas. Pasemos al editor de textos y demos esto nosotros mismos. Para empezar voy a replicar esta cuadrícula desde las diapositivas, abrir las columnas de plantilla de cuadrícula, vamos a añadir una repetición, vamos a quitar el min-max, y luego esta vez voy a repetir y simplemente añadir cuatro columnas a 1 fr cada una, y luego para las filas podemos repetir tres, a 1 fr también y éstas pueden ser todas iguales. Al ver esto en acción, también necesitamos algunos artículos más. Copiemos uno de estos divs, los elementos, y luego peguemos, y vayamos por 12 artículos. 8, 9,10,11, y luego 12, y ahí como nuestros 12 artículos en la pantalla, el posicionamiento con estas líneas de cuadrícula serán las primeras propiedades que hemos cubierto hasta el momento, cuales se aplican al artículo más que a un contenedor. Voy a cambiar la clase en uno de estos artículos. Pasemos a los ítems, y vayamos por éste, y cambiémoslo para que sea elemento uno, y luego cambiemos el color de fondo y el CSS, así que esto destaca un poco más. Artículo uno Iré por el color de fondo, esto puede ser cualquier cosa menos el azul claro está bien y refresco, y ahora tenemos un artículo que resulta, genial. Ahora vamos a empezar a trabajar con este único elemento, iniciado con el ejemplo de las diapositivas. Si vamos a nuestro elemento uno CSS, podemos comenzar con arranques de fila de cuadrícula, que hemos visto en las diapositivas, y esta es la posición inicial en la fila, así que vamos por la oposición dos, y también necesitamos agregar extremo de fila de rejilla para la posición final. Nuevamente, pasando por las diapositivas, esta es la posición tres, y luego la misma para las columnas. Las columnas de rejilla comienzan, posición tres, extremo de columna de rejilla, posición cuatro, y frente al navegador. Observe cómo se mueve este artículo uno y todo el resto se han ajustado y aún se han quedado en orden. Estas líneas de cuadrícula pueden ser cualquier número para colocar su elemento en cualquier lugar de la cuadrícula, o incluso puede abarcar varias filas y columnas. Si quisiéramos que este ítem azul también tomara la fila debajo de él, podríamos entrar en el CSS y cambiar el final de fila de cuadrícula, esta vez para ser el número 4. Recargar y ahora nos extiende a través de dos filas de cuadrícula, igual con las columnas dos. Si quisiéramos que los ítems también se extendieran a través de la columna a la derecha de la misma, simplemente podríamos ajustar los números. El final de la columna de la cuadrícula, para ser el número 5 y ahí vamos, y aún así todos los artículos fluirán y también manteniendo el orden. También hay alguna sintaxis abreviada, para que esto sea aún más simple. En lugar de tener cuatro líneas en nuestro CSS, si comentamos esto, podemos usar fila de cuadrícula. Nuevamente esta fila de cuadrícula, podemos agregar nuestros dos valores de fila de cuadrícula, de dos y cuatro, separados por una barra, y luego también tenemos una taquigrafía para columna de cuadrícula, que como habrás adivinado, es una columna de dos cuadrícula tamaños de tres, y luego cinco, y si ahora echamos un vistazo a esto, después de la recarga, todo sigue siendo igual, pero en cambio ahora tenemos esto en dos líneas. Por último, hay una versión aún más corta también llamada área de cuadrícula. También comentemos nuestras dos líneas aquí, y luego debajo de esto podemos y a área de cuadrícula, pero esta vez sumamos nuestros cuatro valores. Sí tenemos que tener mucho cuidado porque los dos primeros valores son nuestras dos subdivisiones de inicio. El primero es el inicio de fila, y luego tenemos inicio de columna, por lo que los dos primeros valores son dos y luego tres. Entonces las dos últimas son nuestras dos posiciones finales, que es ésta, cuatro y luego cinco. Nuevamente, no deberíamos ver ninguna diferencia dentro del navegador, pero esta vez el CSS está solo en una línea, pero ten cuidado con el orden del cual agregar los cuatro valores. Grid también nos proporciona la herramienta de palabras clave span. Esto nos permite especificar la línea en la que queremos empezar, luego cuántas filas o columnas queremos abarcar. Si quieres duplicar ejemplo para retomar también esta fila inferior dos aquí abajo, podríamos iniciar nuestra posición dos, como ya lo hacemos. Después se extiende a través de nuestras tres filas, así que una, dos y tres. Volver a nuestra área de rejilla. En lugar de que el final de fila se establezca en cuatro, entonces podemos decir span a través de tres filas. A ver cómo se ve esto, bien. Ahora empezamos en la misma posición y lapso, uno, dos y tres. Extender a través de múltiples pistas como esta es realmente ser útil para la disposición de nuestras páginas web. Por ejemplo, podríamos abarcar a través de la fila superior, para crear un área de cabecera, o una sección fuera de un área para la barra lateral, y también sección principal. Esto es ahora cuatro números de línea, y los veré en el siguiente video. 17. Nombres de las líneas de la cuadrícula: En el último video, miramos las líneas de cuadrícula y cómo están numeradas. Grid también nos da la capacidad de nombrar estas líneas de cuadrícula a algo más apropiado. A menudo se encontrará con nombres como inicio de fila o final de fila. Otra forma útil es nombrarlos relacionados con la sección de toda la página como un encabezado, pie de página, barra lateral y así sucesivamente. Ahora vamos a volver a agregar propiedades al contenedor. Podemos devolver el artículo 1 a solo ser artículo. Quitemos el del final de aquí y ahora si volvemos a desplazarnos hacia arriba a nuestro contenedor CSS, podemos seguir adelante y agregar nuestras columnas. Quitemos esta repetición de aquí y todo lo que necesitamos hacer es agregar un nombre dentro de los corchetes para cada columna, seguido del tamaño de la pista. Abrimos y cerramos los corchetes. Podemos configurar nuestro primero para que se llame primero y luego el tamaño de 1FR. Entonces podemos repetir esto con los corchetes otra vez y llamar a este segundo y esto puede ser 2FR. Si queremos la tercera columna, exactamente igual. El nombre es tercero, llamado 1FR y luego al final podemos nombrar este último y establecer esto para que sea 2FR. Recuerda estos nombres dentro de los corchetes, totalmente a ti. Veamos cómo se ve esto y veamos cómo somos cuatro columnas en acción. Bondad, nuestras cuatro columnas con 1FR, dos, una y luego dos. También en lugar de usar nombres individuales como acabamos de hacer, podemos repetir el mismo nombre para cada pista como col-start y luego col-end, col-start 2, col-end 2, start 3, end 3, start 4 y luego end 4. Para lograrlo, todo lo que necesitamos hacer es agregar col-start y también col-ends. Entonces estos números se agregarán automáticamente después de cada uno para distinguir entre cada columna y también podemos hacer exactamente lo mismo para las filas 2. Podemos lograr esto volviendo al proyecto y usando repetición. Para empezar a agregar este col-start y col-end a cada columna, podemos seguir adelante y usar el método de repetición de antes y eliminar los cuatro nombres individuales, luego seguir adelante y agregar repetición. Dentro de los corchetes voy a añadir cuatro columnas. Por lo tanto, añadir cuatro separados por la coma. Entonces podemos seguir adelante y agregar nuestros corchetes. El primer valor que vamos a establecer como col-start y este es el nombre para el inicio de cada columna individual. Será col-start, luego col-start 2, col-start 3, y así sucesivamente. Entonces el tamaño que queremos que sea cada columna a menos que yo quiera que sea 1FR. Después un segundo conjunto de corchetes para agregar el nombre al final de cada columna. En nuestro caso vamos a usar col-end y luego guardar eso y también hacer lo mismo para las filas de abajo. Podemos mantener tres filas, está bien. Podemos agregar el nombre de row-start, el tamaño de 1FR y luego nuestro nombre final de fila dar ese guardar y luego refrescar. Entonces volvemos a un estándar para el diseño de cuadrícula de cuatro por tres. Ahora podemos seguir adelante y agregar nuestro ítem una clase de nuevo en su lugar y podemos mover el elemento a donde queremos usando estos nombres de cuadrícula. El primero, está bajo clase del ítem 1. Para que podamos volver a ver el artículo azul. Para dejar las cosas más claras voy a comentar el área de cuadrícula que usamos aquí para el ítem 1 y luego volver a usar estos cuatro valores individuales para que sea un poco más fácil trabajar con ellos. ¿ Se puede tener la fila para estar empezando a las dos y cuatro? Dejemos eso por ahora. En lugar de las columnas, vamos por col-start y luego terminar posición a mí col-end. Recuerden estos son los nombres que ponemos arriba dentro los corchetes. Vuelva a cargar el navegador. Como era de esperar, tenemos el inicio de fila en la posición dos, esa es una y luego dos, y luego termina la posición cuatro la cual comenzamos con estos dos valores aquí. Después establecemos las columnas para que sean el column-start y column-end. Recuerda el col-start y col-end es la posición inicial y final de nuestra primera columna. Es por ello que sólo ha retomado un apartado aquí. Si quisiéramos que esto abarcara dos columnas como más a esta de aquí, que luego cambia para ser col-end 2. Ahora, esto comienza al principio de la primera columna y termina al final de la columna 2. Ahora queremos las filas. Si establecemos el primer valor para que sea row-start y luego el segundo para que sea filw-end 4 del navegador. Ahora, esto comienza en row-start que es la primera fila aquí y luego termina en la fila 4 que es la cuarta aquí. Aquí no hacemos nada diferente de lo que ya hemos aprendido. La única diferencia es que estamos haciendo referencia a estas líneas de cuadrícula por un nombre en lugar de por un número. A continuación vamos a ver cómo podemos usar las áreas de plantilla de cuadrícula para disenar un sitio web completo. 18. Áreas de la plantilla de la cuadrícula: Junto con los elementos de posicionamiento con estas líneas de cuadrícula, también podemos crear áreas completas como encabezado, contenido, barra lateral, y pie de página. Grid nos proporciona una propiedad llamada áreas de plantilla de cuadrícula para hacer esto. En primer lugar, tenemos que pensar en cómo se estructurará nuestra cuadrícula usando filas y columnas. Al mirar el diagrama aquí, tenemos un encabezado en una fila, contenido y barra lateral en la siguiente fila, y finalmente un pie de página en la tercera fila. Por lo tanto, no necesitamos tres filas de la cuadrícula. Sólo necesitamos dos columnas para el contenido y la barra lateral. Recuerde, las áreas de encabezado y pie de página se extenderán a través de estas dos columnas. Es así como se verán nuestras líneas de cuadrícula una vez que establezcamos las filas libres y los camiones de dos columnas. Volvamos al editor de textos y veamos esto en acción. Pongámonos a trabajar con la configuración de esto. Vamos a estar trabajando con estas áreas de rejilla para empezar. Podemos comentar todos estos 12 artículos. Quitemos todos estos por ahora con el comentario. Entonces dentro del contenedor podemos llegar a trabajar con la adición de nuestro encabezado. Agrega los elementos de sub encabezado y el texto de Cabecera 2, también teníamos una sección principal para el contenido, luego barra lateral, con los elementos laterales, y luego abajo en la parte inferior también teníamos un pie de página. Podemos ver mejor estas zonas, sumemos una frontera a las cuatro. Dentro de la sección Estilo, vamos por el encabezado, el principal, el lateral, y el pie de página. Agrega la propiedad de borde de un píxel y luego una línea discontinua. Pasado al navegador, toca refrescar y ahí están nuestras cuatro áreas de contenido que acabamos de agregar. Después de volver a nuestras filas y columnas de plantilla de cuadrícula, y podemos empezar a configurar esto, así que hasta la parte superior. Recuerda, para las columnas, necesitamos dos, una para la sección de contenido y otra para la barra lateral. Elimina las repeticiones y la primera puede ser 3fr, en la barra lateral puede ser más pequeña, por lo que 1fr está bien. Después a las filas. Necesitamos tres filas, una para el encabezado, una para el contenido y otra para el pie de página. El encabezado puede ser 1fr, 3fr para el contenido principal, y luego 1fr para el pie de página. Si ahora recargamos el navegador, así se verán ahora las cuatro secciones. Ya que establecemos dos columnas, los cuatro elementos están dispuestos en las dos filas, como se ve aquí. Pongamos a trabajar con el cambio en esto con nuestro área de plantillas de cuadrícula. Añadamos la propiedad CSS en, áreas de plantillas de cuadrícula. Recuerda la S al final. Con esta propiedad, configuramos nombres para cada sección. Estos nombres están dispuestos como una mesa. Tenemos dos columnas y tres filas, por lo que nuestros nombres están dispuestos como una tabla de tres por dos. Agregamos las cotizaciones para nuestra primera fila y luego podemos sumar nuestra segunda fila y luego una tercera fila en justo debajo. Recuerda añadir el punto y coma justo al final también. Queremos que el área de cabecera se extienda a través de estas dos columnas superiores. Agregamos encabezado en la primera columna y luego encabezado en la segunda columna también, para hacer que esto se extienda justo a través de la fila. Pero nuestra segunda fila, queremos que el contenido esté a la izquierda y luego una barra lateral a la derecha. Entonces la parte inferior, al igual que la cabecera, queremos que el área de pie de página abarque ambas columnas. Si guardamos eso, todavía no veremos ninguna diferencia en el navegador, pero nos refrescamos. Primero necesitamos colocar nuestros artículos dentro de las secciones. Hacemos esto con las mismas cuatro propiedades que ya hemos utilizado. Si bajamos al Ítem 1, usamos fila de cuadrícula, inicios, final de fila, inicio de columnas y final de columna, o podemos usar una taquigrafía de fila de cuadrícula y columna de cuadrícula, que ya hemos buscado. Vamos a armar esto. En primer lugar, podemos apuntar al encabezado. Establecemos el tamaño de este encabezado mediante el uso de fila de cuadrícula y columna de cuadrícula. En primer lugar, fila de cuadrícula, esta puede ser la sección de encabezado que configuramos para arriba en la parte superior, por lo que es justo aquí y luego lo mismo para la columna de cuadrícula. Justo debajo de esta columna agregar cuadrícula y también establecer el área de cabecera que creamos. Después lo repetimos al lado principal y al pie de página. la sección principal configuramos la fila de cuadrícula para que sea el contenido y luego la columna de cuadrícula para que también sea el contenido. También creamos un área para la barra lateral y le daremos un nombre de barra lateral aquí. Abajo para la sección de barra lateral, que eran los elementos a un lado. Al igual que antes hacemos fila de cuadrícula y establecemos esta como la columna de cuadrícula de la barra lateral. Este es el Sidebar 2. Entonces finalmente, el área de pie de página. Fila de cuadrícula, el nombre del pie de página y la columna de cuadrícula y este también es el pie de página. Guarda eso y luego Oh al navegador y refresca. Bueno solo para recapitular, tenemos nuestro encabezado repartido por la parte superior. Esto se debe a que hemos establecido el encabezado para que tenga fila de cuadrícula y columna de cuadrícula de esta plantilla de encabezado que establecemos arriba. Justo aquí que se extiende a través de nuestras dos columnas de la primera fila, entonces establecemos la segunda fila para ser dividida entre el contenido, que va a ser la sección 3fr y luego la barra lateral seremos 1fr. Definimos estos a continuación, nuevamente utilizando fila de cuadrícula y columna de cuadrícula para el apartado y la sección principal. Entonces en la parte inferior establecemos el área del pie de página y al igual que el encabezado, esto también se extiende a través de las dos columnas. Establecer el pie de página y el encabezado para que sean el ancho completo de la página. Bien. Esto deja nuestro diseño ahora completo y cómo pretendíamos usar áreas de plantilla de cuadrícula. A continuación, echaremos un vistazo a las rejillas de anidación. 19. Cuadrículas anidadas: Este diseño de cuadrícula es ahora como pretendíamos. Pero ¿y si quisieras anidar nuestros 12 artículos dentro de la sección principal también como cuadrícula? Vamos a darnos una vuelta y ver qué pasa. Si volvemos a nuestros proyectos y luego reinstalamos nuestros 12 ítems. Descomentemos esta sección aquí y también eliminemos la clase del elemento uno. Entonces podemos seguir adelante y cortar estos artículos y luego colocarlos dentro de nuestra sección principal. Corta estos outs. Entonces podemos quitar los textos de contenidos. Estoy pegando esto dentro de esta sección principal. Tenemos el encabezado en la parte superior, la sección principal con 12 elementos anidados, la barra lateral y el pie de página. Veamos cómo se ve esto inicialmente dentro del navegador. Ahí están todos los artículos. Pero si nos desplazamos hacia abajo no están en un diseño de cuadrícula. Los artículos solo se están mostrando como elementos a nivel de bloque. El elemento principal es evidente para estos rubros. Podemos cambiar el tipo de visualización para que sea cuadrícula de NCSS. Subiremos a la sección principal y luego cambiemos el tipo de visualización para que sea cuadrícula. También podemos darle a esto una brecha de cuadrícula también, sumemos cinco píxeles para la brecha. Veamos qué pasa ahora esto en su lugar, llegamos a refrescarse. Ahora los bienes tienen nuestra brecha de red aquí. Entonces necesitamos definir cuántas columnas y filas queremos igual que haríamos normalmente. Esto nuevamente se encuentra dentro de la sección principal. Añadamos las columnas de plantilla de cuadrícula. Vamos por repeticiones. Tenemos cuatro columnas, una FR. Entonces la plantilla de cuadrícula filas justo debajo. Repite estos también. Entonces solo agregamos un FR para agregar tantas filas como sea necesario y las mantiene todas incluso también. Pasado al navegador, refresca. Ahora hemos anidado nuestra cuadrícula dentro del área de contenido principal. igual que antes cuando miramos a Flexbox, la cuadrícula también nos permite tener un control más fino sobre cómo se alinean los artículos individuales. Esto es lo que vamos a cubrir a continuación. 20. Alineación: Ahora vamos a alejarnos de nuestro diseño y enfocarnos en la alineación. Mucho de lo que cubrimos en este video es similar al flexbox, donde alineamos los elementos al inicio y centramos el estiramiento para llenar espacio. Coordinar los ítems ha ocupado todo el espacio disponible. Necesitamos hacer los artículos un poco más pequeños para alinearlos. Primero comentemos las pistas y éstas son las de la sección principal. Las columnas de plantilla y las filas de plantilla establecen luego un tamaño para los elementos. La clase Items, que tendrá justo aquí, primero eliminemos el relleno y luego agreguemos una altura a los elementos individuales de 60 píxeles. Recargar, podemos ver por defecto los elementos se establecen un tramo a través de la fila. En primer lugar vamos a ver los artículos de justificación, que agregamos al contenedor para afectar a todos los artículos hijo como grupo en el eje de fila. Muchos de estos ya serán familiares, como terminar para colocar los artículos al final de la fila y también empezar. Pasar a la sección principal, que es un contenedor para estos artículos de cuadrícula. Apenas aquí podemos agregar, justificar artículos y ponerlos hasta el final, refrescar. Ahora todos los artículos se empujan hasta el final de la fila. También tenemos arranque y probablemente puedas adivinar qué hace esto también, esto mueve todo al inicio. Recuerda el segundo ítem que se utiliza aquí, si nos desplazamos hacia abajo, tiene más texto. Por lo tanto llena más el espacio disponible. Podemos reinstaurar esto para que todos los artículos se muevan igual. Cambiemos el nombre de este ítem dos. Ahí vamos, ahora todos los artículos son iguales. El valor predeterminado para esto es stretch, select replace, start with stretch. Cuánto obtienes el mismo efecto con el que empezaste, también nos habremos centrado. Esto reemplazará todos los elementos en el centro de la fila con el ancho que está determinado por el contenido interior. También tenemos la opción de línea base si estamos alineando el texto. A continuación, también podemos usar alinear elementos. Esto también se aplica al contenedor padre, afectará a los elementos a lo largo de la columna esta vez en lugar de a la fila. Para decir esto, necesitamos algo más de altura para trabajar. Dentro de la sección principal, hagamos que el principal sea un poco más alto. El alto de 1200 píxeles y luego podemos establecer alinear elementos. Empecemos por centrarnos en el navegador, refrescar. Ahora tendremos una sección principal más alta y todos los artículos están alineados al centro. Podemos ver en la parte superior tenemos una brecha igual en la parte superior aquí y también la sección inferior también. No voy a pasar por todas estas opciones porque podemos usar los mismos valores que acabamos de mirar y todos funcionan de la misma manera, pero esta vez en el eje opuesto. Las siguientes dos propiedades aplicamos a los artículos hijo para controlarlos individualmente. Vamos a volver a introducir nuestro artículo una clase. Este puede ser cualquiera de los artículos. Solo agreguemos esto y luego podremos controlar estos solo ítem individual. Después copia de seguridad a la sección principal, va a comentar, justificar artículos, y también alinear elementos también para que no interfieran. Ahora podemos volver a subir al ítem uno y luego podemos alinear elemento individual pero esta vez usamos justificarnos a sí mismo. Empecemos con fin y luego pasemos al navegador, actualicemos y debido a que esto también funciona en la fila, esto empuja este elemento azul hasta el final. De hecho creo que esto está siendo un poco mal con estas columnas de cuadrícula. Es ahora tenemos todos estos elementos, establecer el estiramiento, y luego este elemento individual al final de la fila. El centro también hará lo que se espera y trasladará este único elemento a la mitad de la fila. Cambios para ser centro, y recuerda que tendremos todas las mismas propiedades disponibles ya que acabamos de mirar hacia arriba. Guarda y luego refresca y ese es nuestro artículo ahora en el centro de esta fila. Si uno se va a centrar en la columna en lugar de en la fila. También tenemos alinear-self. Vamos a darle una oportunidad a esto y también pongamos esto para que sea el centro. Ahora esto está centrado en toda la fila y columna. Usar tanto justify-self como alinear-self juntos es una manera realmente fácil de centrar un elemento tanto vertical como horizontalmente. Esto solía ser mucho más complejo antes de grid y flexbox. Adelante y probemos uno más, alinear- yo, pongamos esto al final. Echa un vistazo a esto y ahora el artículo se empuja hacia abajo. Podemos ver que tenemos muchas opciones útiles a la hora de usar la cuadrícula, lo que provoca prácticamente cualquier tipo de diseño que alguna vez necesitemos. 21. Hora de practicar: diseño del buscador de canciones: Posteriormente en este curso, estamos construyendo esta aplicación, donde el usuario puede buscar un artista o una canción y se mostraron como cuadrícula. Por ejemplo, si escribimos a un artista dentro de aquí, así como esto, y luego golpeamos “Buscar” entonces lo presentaremos con una lista de canciones. También nos gustaría un reproductor de audio para reproducir una vista previa de estos. Construiremos esto más adelante en la sección API. Tenemos la obra de arte del álbum, el artista, título de la canción y este reproductor musical en la parte inferior, que tocaremos los primeros 29 segundos. Toda esta información musical se proporcionará conectándose a iTunes mediante una API. Si aún no estás seguro de qué es una API, no te preocupes por ello. Cubriremos todo lo que necesites saber más adelante. Pero vamos a empezar en esta aplicación creando el HTML y CSS que necesitamos incluir el diseño de cuadrícula CSS. Entonces podemos preguntar la funcionalidad en un apartado posterior. Vamos a hacer esto un poco diferente a ejercicios de práctica excesiva. Voy a pasar por esta configuración del proyecto y también el código HTML junto con [inaudible], así es como tenemos el mismo HTML. Significa que podemos hacer las mismas cosas cuando agregamos el JavaScript más adelante, por lo que no hay confusión. Entonces te dejaré para seguir adelante y completar los proyectos CSS tú mismo para darte alguna práctica extra, aplicando en las propiedades de la cuadrícula. Empecemos por crear la carpeta del proyecto. Vamos a cerrar esto y luego crear una carpeta de proyecto. Nuevamente, puedes agregar esto en cualquier lugar. Yo quiero llamar al mío, el Buscador de canciones abre esto en el editor de texto. Arrastraré esta carpeta del proyecto hacia allí. Entonces podemos seguir adelante y crear un nuevo archivo llamado index.html. Para empezar, agreguemos la estructura HTML. Voy a estar usando los cinco atajos HTML y luego golpear “Tab” para acercar esta nuestra estructura. El título del documento, de Song Finder. Después bajamos a la sección del cuerpo. Empecemos con el área de cabecera, luego asignemos título en h1 de Song Finder. Abramos esto dentro del navegador y comprobemos que todo está funcionando bien. Ahí vamos, ahí está nuestro título de canción en la página de índice. Entonces necesitamos un área de entrada para escribir el nombre de la canción del artista. Empecemos con una etiqueta, y llamemos a esto la entrada de búsqueda. Después el texto de búsqueda de tu artista favorito, y luego cierra esta etiqueta al final. Aquí también podemos agregar nuestra entrada, con el tipo de texto. Entonces el id que coincide con esta entrada de búsqueda. Entonces después de esto necesitamos un botón. Este va a ser el botón que avanza y completa nuestra búsqueda. Sólo tienes que añadir un simple botón ahí. Después una línea horizontal en la parte inferior solo para secarse fuera de estos encabezamientos. Recargar y ver cómo se ve esto. Esa es nuestra etiqueta o cuadro de texto y el botón, desplazándose hacia abajo por debajo de esta sección de encabezado. Vamos a crear la sección principal. Esta va a ser la zona donde aparecen todas nuestras canciones. Por ahora vamos a darle a esto una identificación de canciones. Entonces dentro de aquí podemos agregar un artículo. Este artículo va a ser el envoltorio para cada una de las canciones individuales. Cada canción individual necesita una imagen. Por ahora solo voy a añadir algún maniquí o algunos datos de muestra solo para ver cómo se verá en la pantalla. Podemos seguir adelante y darle estilo a esto con el CSS. Todo este texto e imágenes serán reemplazados posteriormente por algunos datos que se extraen de iTunes. Podemos ver esta imagen, voy a añadir un ancho de 100 pixeles, una altura de 100 pixeles también. Después agrega una propiedad de estilo solo para que podamos ver esta imagen, fondo de azul. Ahora deberíamos ver un cuadrado azul en la pantalla. A continuación podemos agregar las etiquetas p. Esto va a ser para nuestro nombre de artista. Cualquier artista y canción está bien así que solo agrega cualquier cosa dentro aquí. Después un segundo conjunto de elementos p para el nombre de la canción. Entonces, por fin, vamos a mirar un nuevo elemento que aún no hemos visto, y este es el elemento de audio HTML5. Esto nos permitirá reproducir nuestra música dentro del navegador. Necesita un atributo fuente el cual puedes dejar vacío por ahora. También el texto de controles, que nos dará algunos controles con los que trabajar, como nuestro juego, que también se convierte en una pausa, el temporizador, y también la barra de progreso. Ahora vamos a copiar este artículo y pegarlo para que tengamos seis de ellos. Entonces dos, tres, cuatro, cinco, y seis y luego guardar y luego recargar. Ahora tengo seis artículos diferentes en la pantalla. Recuerda este HTML, es sólo texto de posición en imágenes. Todos estos datos serán sacados más adelante de nuestra API. Por ahora sin embargo, te dejaré contigo para crear un enlace a una hoja de estilo externa, aplicar algún estilo y también un diseño de cuadrícula a las canciones. No hay forma correcta o incorrecta de hacer esto, solo dale estilo como quieras. Pero recomendaría al menos aplicar la grilla. No hace falta que sea nada complejo. Tan solo una cuadrícula simple con columnas libres y una brecha de rejilla estará bien. Buena suerte. Te veré en el siguiente apartado. 22. ¿Qué es Bootstrap?: Bienvenido de nuevo a esta nueva sección. Aquí vamos a echar un vistazo a uno de los frameworks más populares para construir sitios web, que se llama Bootstrap. Bootstrap Crony, en la última versión de la versión 4 es de código abierto y libre de usar, es una biblioteca para HTML, CSS, y también JavaScript, que aún no hemos mirado pero no nos preocupemos por eso en este momento. Lo puedes encontrar en getbootstrap.com. Algunos de los componentes que usaremos en Bootstrap, como un carrusel, requieren JavaScript para funcionar. Pero no necesitamos conocer ningún JavaScript en esta etapa para usarlos. Bootstrap nos permite empezar rápidamente a construir proyectos, y también nos permite aprovechar muchos componentes preconstruidos, como barras de navegación, carruseles de imagen, y formularios, por mencionar algunos. Empezar también es realmente fácil. Podemos simplemente agregar Bootstrap a nuestro proyecto al igual que cualquier otro archivo CSS, y empezar a escribir nuestro sitio web como de costumbre. Entonces podemos usar un componente preconstruido o escribir nuestro propio HTML como normal y luego aprovechar las clases CSS de Bootstrap que nos proporcionan para darnos algún estilo base sobre el que construir. Si seguimos adelante y abrimos la documentación desde la barra de navegación, hay bastante por recorrer, y vamos a cubrir mucho de esto para esta sección. En primer lugar, voy a dirigirme a los componentes del lado izquierdo y dar clic en esto. En el interior aquí podemos ver todas las diferentes herramientas de componentes disponibles. Por ejemplo, si queríamos una barra de navegación, hacemos click en la sección de barra de navegación y luego nos dan algo más de información sobre cómo usarlo. También luego obtenemos muchos ejemplos de código, y también la demostración. Si quisiéramos usar esta barra de navegación en nuestro proyecto, podríamos copiar este código a continuación. Esta es toda la sección aquí que produce esta barra de navegación. Normalmente hay algunos ejemplos más diferentes con algún diseño diferente también, y se pueden ver todos estos a medida que nos desplazamos hacia abajo. También hay algunas formas. Haga clic en los elementos de formas de la izquierda, y exactamente lo mismo que antes. Después tomaremos una vista de muchos ejemplos diferentes. Todo esto aprovecha elementos HTML estándar, como entradas, selecciones y áreas de texto. Pero Bootstrap entonces nos proporciona algo de CSS para que luego lo utilicemos agregando las clases Bootstrap, como form-group y form-control, igual que podemos ver aquí. También echaremos un vistazo más de cerca a algunos más de estos componentes a lo largo de este proyecto, como carruseles rotativos, y también usaremos modales. También vale la pena señalar que todos estos estilos que ofrece Bootstrap es solo un punto de partida base. Somos libres de seguir adelante y cambiar cualquiera de los estilos con algún CSS personalizado. si aún no estás seguro de lo que es Bootstrap, todo lo que necesitas entender por ahora es que podemos aprovechar el CSS predefinido de Bootstrap para no solo hacer que nuestro HTML luzca mucho mejor, sino también para aplicar algunas mejores prácticas, y mantener nuestro estilo con un aspecto más consistente en diferentes navegadores. Ahora tenemos un poco de fondo en Bootstrap. Pasemos ahora a obtener una configuración del proyecto Bootstrap. 23. Qué vamos a construir: medida que pasemos por esta sección, vamos a estar construyendo este sitio web de hamburguesas Gourmet. Este proyecto nos permitirá aprender cómo funciona bootstrap y cómo podemos utilizar diversos componentes, así como diferentes clases de utilidad y también cómo funciona el sistema de cuadrícula Bootstrap. Empezamos en la parte superior con nuestra sección de encabezado, que es una barra de navegación, incluye el título del sitio, varios enlaces, y también un cuadro de búsqueda en la esquina. Desplazándose hacia abajo, también se puede ver que tenemos un carrusel giratorio. Cada imagen diferente tiene su propio título. También usaremos controles para permitirnos desplazarnos a la izquierda y también escribir a través de estas imágenes. Este carrusel giratorio es uno de los componentes de Bootstrap, igual que la barra de navegación en la parte superior. Podría mirar diversas formas de éstos y cómo funcionan todas las clases durante este proyecto. Si nos desplazamos más abajo, entonces tenemos información sobre nuestros sitios de hamburguesas. Esto nos enseñará cómo usar los contenedores bootstrap, filas, y sistema de cuadrícula para alinear y organizar nuestros artículos en la página. Este sitio web también será totalmente receptivo por lo que para seguir adelante y encogerse, el navegador. Veremos un cambio de diseño para diferentes tamaños de pantallas, incluyendo nuestra barra de navegación tendiendo a un desplegable para las pantallas más pequeñas. Hagamos de nuevo este tamaño completo. Entonces si vamos aún más abajo, tenemos una sección de registro. Si hacemos click en esto entonces se introducirá a unos componentes modales, que es básicamente un pop-up donde podemos agregar alguna información para el usuario. En este caso, vamos a echar un vistazo a cómo podemos usar componentes de forma Bootstrap para que nuestros formularios se vean realmente bonitos. Aquí tendremos un nombre, un correo electrónico, y también un área de texto, junto con algunas casillas abajo en la parte inferior. Entonces finalmente, rematamos con un área de pie de página abajo en la parte inferior. Al final de esta sección, también tendrás este sitio web totalmente terminado también y también algunos conocimientos sobre cómo usar componentes bootstrap, utilidades bootstrap, junto con cómo podemos usar contenedores, filas y columnas para crear sistema de cuadrícula. Junto con el conocimiento de cómo anular cualquier clase de bootstrap para hacer esto totalmente personalizado. De acuerdo, bien, entonces espero que esperen con ansias esto. Ahora pasemos a poner en marcha nuestro proyecto. 24. Crear un proyecto Bootstrap: Empezar un proyecto usando Bootstrap es realmente fácil. Para empezar, si pasamos a getbootstrap.com, que es una página de inicio de Bootstrap, y luego bajamos a la sección “Empezar” aquí. Recuerda sin embargo, sitios web como este a menudo pueden cambiar los diseños así que si el tuyo se ve un poco diferente cuando lo visitas, solo echa un vistazo a tu alrededor para ver la sección Instalación o Introducción. Hay algunas maneras diferentes de ponerse en marcha. Podemos descargar la carpeta de inicio completa haciendo clic en el botón grande “Descargar” en la esquina superior. Esto es genial, pero incluye muchas cosas que no necesitamos en esta etapa. También podemos pasar a la sección de descargas de la izquierda. Entonces si nos desplazamos hacia abajo, podemos seguir adelante y descargar los archivos CSS y JavaScript. Después deja caer estos en nuestra carpeta de proyectos. Todo el camino que voy a hacerlo en este proyecto es mediante el uso de un CDN. Volvamos a la Introducción y luego desplázate hacia abajo. Un CDN es una red de entrega de contenidos. Esto básicamente significa, en lugar de agregar los archivos CSS y JavaScript a nuestro proyecto y luego vincularlos en nuestro HTML. En cambio, estos archivos están alojados en un servidor externo, sigue para enlazar a. Aquí podemos ver tenemos nuestras secciones CSS y JavaScript. Podemos copiar este enlace para el CSS. También tenemos algunos enlaces de JavaScript aquí también, donde podemos vincular nuestras etiquetas de script a la CDN. Si nos desplazamos hacia abajo aún más, tenemos una plantilla de inicio, y este es un lugar realmente conveniente para empezar. Esto tiene toda la estructura HTML básica que necesitamos, junto con cualquier enlace al CSS requerido y también al JavaScript también. Empecemos copiando esta plantilla de inicio con el botón “Copiar” en la esquina superior. Agarremos eso. Entonces si pasamos al escritorio y creamos una nueva carpeta llamada Gourmet-Burgers. Abre Visual Studio Code, y luego podemos arrastrar en esta carpeta del proyecto para empezar. Como siempre, creamos nuestro index.html, pero esta vez ahora tenemos un arranque bootstrap, por lo que podemos pegar en la estructura esqueleto. Dale a eso un ahorro. Entonces podemos seguir adelante y abrir esto en el navegador. Hagamos doble clic en el index.html, traemos el navegador, y ahí está nuestro ejemplo hola, mundo. Todo eso funciona bien. De vuelta al proyecto, ahora podemos empezar a agregar nuestras propias personalizaciones. Podemos cambiar el título para que sea Gourmet Hamburguesas, y luego guardar. Nuestro cambio se refleja ahora en el navegador. Este texto de hello world puede parecer un elemento h1 estándar, pero tiene un poco de estilo Bootstrap predeterminado como todos los demás elementos tendrán también. Podemos ver esto si comandamos el enlace CSS en la sección de cabecera. El CSS Bootstrap está justo aquí. Si ordenamos esta línea y luego actualizamos, vemos que ahora se han eliminado los estilos predeterminados de Bootstrap. Solo eliminemos estos comandos y añadamos esto de nuevo. Para ver qué está pasando entre bastidores, podemos echar un vistazo al CSS proporcionado por Bootstrap. Si copiamos este enlace dentro de la href derecho hasta el final, copiamos eso, y luego pasamos al navegador, podemos pegar esto en igual que una URL normal. Esta es la hoja de estilos a la que se vincula en esta URL. Es un poco difícil de leer porque actualmente está minificado. Esto significa que se ha eliminado todo el espacio en blanco para mantener el tamaño del archivo más pequeño. Para ver esto aún mejor, si seleccionamos todo y luego copiamos. Voy a buscar CodeBeautify. Esto es lo que necesitamos, codebeautify.org, así que selecciona esto. El que necesitamos es el CSS, así que selecciona este enlace aquí. En el lado izquierdo, podemos agregar la entrada CSS. Pegue en nuestro código Bootstrap y luego haga clic en “Embellecer” en el medio. encima del lado derecho podemos ver las salidas. Podemos hacer de esto el tamaño de la pantalla completa. Esto es todo el CSS que proporciona Bootstrap. Ahora se ve formateado de una manera que parece familiar. Si te desplazas por él, hay bastante. Si presionamos “Comando” o “Ctrl” “F”, esto buscará a través del código. Busquemos el h1 y golpeemos enter, entonces podemos ver todo el CSS que se está aplicando a este h1 elementos. En primer lugar tenemos h1 derecho a través de h6, que se aplica en el fondo del margen predeterminado, una familia de fuentes de hereda. También tenemos un peso de fuente, una altura de línea, y también hereda el color del texto. Abajo al siguiente. También podemos ver el tamaño de la fuente es de 2.5 rem, razón por la cual al quitar las hojas de estilo Bootstrap, la h1 entonces apareció más pequeña. También podemos desplazarnos y echar un vistazo a algunos estilos más también, si quisiéramos, pero ojalá se tenga la idea de lo que está pasando detrás de las escenas. También aprovecharemos muchas de las fotos creadas por la clase a medida que construimos estos proyectos. Esto también sería lo mismo que un archivo CSS si lo descargáramos y lo agregáramos a nuestra carpeta de proyectos. El último punto que me gustaría señalar es que si bien todos estos estilos son geniales para usar y hacer que nuestro proyecto se vea mejor, todavía podemos anular cualquiera de estos estilos base con nuestras propias hojas de estilo. Hacemos esto creando nuestro propio archivo CSS, igual que lo hemos hecho en proyectos anteriores y vinculamos a él en la sección de cabeza debajo de este enlace bootstrap. En realidad se alienta a agregar o anular cualquiera de estos estilos predeterminados de Bootstrap por la sencilla razón de que muchos sitios web usan Bootstrap y no queremos que todos los sitios web en línea empiecen a lucir igual. Es una buena idea usar Bootstrap sin embargo, para construir rápidamente sitios web y componentes con mejores prácticas, estilo consistente a través de diferentes navegadores, y también una excelente base para construir. Ahora tenemos nuestra configuración de proyecto. A continuación, pasemos a entender cómo funciona la cuadrícula Bootstrap. 25. La cuadrícula de Bootstrap: Nuestro ejemplo Hello World ya está configurado. En este video, vamos a ver probablemente uno de los conceptos más importantes a entender cuando se trabaja con bootstrap. Este es el sistema de cuadrícula bootstrap. Las rejillas básicamente, le permite colocar las cosas agradables y fáciles y utiliza la caja flex CSS debajo del capó. Para empezar, generalmente lo primero que tenemos que hacer es crear un contenedor para nuestros contenidos. Esto se agrega como una clase CSS de contenedor. Vayamos al proyecto y primero quitemos el h1 de hola mundo, que está justo aquí. Entonces podemos agregar nuestro div con la clase de contenedor así que solo crea un div, igual que normalmente lo haríamos. Esta vez podemos agregar una clase bootstrap de contenedor. Se requieren contenedores cuando se trabaja con el sistema bootstrap grid ya que actúan como envoltorio para nuestro contenido. Utilizarlos también nos permite enviar nuestro contenido tanto horizontal como verticalmente también. Anidado por dentro, agregamos un segundo div, y éste tiene una clase de fila. Dentro del abierto dentro de la clase de fila. Estas filas actúan como envoltorio para la disposición de contenido mediante el uso de columnas. La cuadrícula Bootstrap tiene 12 columnas de ancho. Esto significa que, si queremos dos secciones iguales en fila, podríamos establecer ambas para que tengan seis columnas de ancho cada una. Si quisiéramos tres secciones, cada una tendría que ser de cuatro columnas. Añadamos nuestro primer div dentro de la fila. Esto va a tener una clase de frío-md-4. Dentro de aquí podemos agregar algún texto con las etiquetas p de un tercio de ancho. Debido a que la rejilla tiene 12 columnas de ancho, estamos ocupando cuatro partes aquí así que este es un tercio del ancho de la fila. Si entonces copiamos esto y lo pegamos dos veces más. También asegúrate de que esto esté sangrado correctamente, así como así. Ahora si conseguimos que un guardado y luego refrescamos el navegador, obtendremos tres secciones en la pantalla, cada una con un tercio del ancho de la fila. Para ver mejor estas secciones de cuadrícula, podemos agregar algunas clases de fondo las cuales también son proporcionadas por bootstrap. Después de col-md-4 no podemos bg éxito. Esto nos da un color verde. El segundo podría ser bg primario. Esto es para azul. El tercero podría ser bg secundario y este es de color gris. Esto ahora nos muestra el efecto del contenedor que agregamos. El contenedor es de un ancho fijo. Si acabamos de estirar el navegador más ancho o más pequeño, vemos que el ancho cambia con diferentes puntos de ruptura. También hay un contenedor de ancho completo disponible también. Todo lo que necesitamos hacer es cambiar contenedor, para ser fluido contenedor. Esto abarcará todo el ancho de la página. Pero sólo me voy a apegar al contenedor por ahora. También podemos tener múltiples filas dentro de este contenedor también. Si volvemos a la clase de col-md-4, este md significa dispositivos de tamaño mediano. Se puede controlar exactamente cuántas columnas ancho queremos el contenido para diferentes raíces de pantalla. Si volvemos al sitio web getbootstrap, que es getboostrap.com, y luego documentación. Si bajamos a la sección de maquetación en el lado izquierdo. Entonces aquí abajo tenemos la opción para la grilla. Seleccione esta. Si nos desplazamos hacia abajo a la mesa, que está justo aquí, vemos aquí tenemos un prefijo de clase, y hemos usado col-md para dispositivos de tamaño mediano. Esta tabla muestra que hay un tamaño en el que se aplica cada clase. Por ejemplo, pequeño es 540 píxeles y grande 960. Podemos agregar tantos de estos prefijos como queramos. Por ejemplo, podríamos tener un diseño de 12 columnas de ancho en pantallas pequeñas, luego cambiar a tener seis columnas de ancho en pantallas medianas y luego bajar a cuatro columnas en dispositivos más grandes. Solo tenemos los conjuntos de prefijos medios, que son 720 píxeles y superiores. Si reducimos el navegador a menos de 720 dentro de nuestra página de índice, el ancho de cuatro columnas ya no aplica como podemos ver aquí. Podemos cambiar esto agregando col-sm. En lugar de md cámbialo a sm, refresca. Esto ahora se aplica a las pantallas pequeñas. Si quisiéramos que esta sección verde y la azul estuviese de lado a lado, tendríamos que establecer esta para que sea seis partes cada una. Podríamos seguir adelante y cambiarlo a col-sm-6. Entonces también nuestros dispositivos medianos cambian de nuevo a cuatro y también para el segundo, estamos podemos agregar col-sm-6. Ambas de estas primeras secciones, ambas en dispositivos más pequeños con seis columnas ancho y luego cambian con cuatro columnas de ancho en dispositivos medianos. Si guardamos, refrescamos, estas dos secciones ahora son seis columnas cada una y la sección gris es la predeterminada 12 columnas. Si hacemos esto más amplio para ir por encima de los dispositivos medios, esto de nuevo cambiará a cuatro partes cada una porque lo hemos dicho aquí. Ahora echemos un vistazo a un escenario diferente. Imagina si cambiamos ambos divs pequeños para que sean cuatro columnas así, col-sm-4 y lo mismo para éste también. Esto significa que no estamos ocupando la cuadrícula completa de 12 columnas. Nosotros sólo especificamos ocho partes para pantallas más pequeñas, que si guardamos y refrescamos y luego bajamos a la pantalla pequeña, esto ahora dejará un espacio al final de la fila. Para este caso, podemos mover el contenido añadiendo un offset. Podemos añadir este desplazamiento en el lado izquierdo empujando a estos dos hacia el medio. Si hacemos offset-sm, nuevo esto sólo se aplicará en dispositivos pequeños. Después dos columnas. Esto ahora empujará la fila por dos columnas dejando la sección verde y azul en el medio. Si estiramos el navegador, esto también se aplicará a todos los tamaños superiores a dos. Ahora en los dispositivos medios, todavía tenemos estos dos puntos de desplazamiento de columnas. Esto se resuelve fácilmente configurando el desplazamiento para que sea cero para cualquier pantalla que queramos que se elimine. Tratemos de quitarlo de las pantallas medianas y superiores. Tengamos el offset-md-0. Esto asegurará que el desplazamiento si se retira en dispositivos de tamaño mediano y superior. Si ahora nos refrescamos, ahora se retira el desplazamiento en un dispositivo mediano, ambos si reducimos esto hacia abajo aún debería aplicarse en una pantalla pequeña. Podemos simplificar las cosas aún más. Si solo queremos que todos los divs dentro de una fila sean iguales, solo podemos especificar col. En lugar de tener todas estas ventosas aquí, si quieres mantener las cosas realmente simples simplemente agrega col. Igual para la segunda sección y también la tercera, consigue eso guardado, recarga. Con esto en su lugar, todas nuestras secciones ocuparán igual cantidad de espacio en todos los tamaños de pantalla. Es así como usamos columnas con el sistema de cuadrícula bootstrap para disenar nuestros artículos. Ahora sabemos más sobre la cuadrícula bootstrap. Pasemos ahora a agregar algún contenido a este proyecto. 26. Añadir imágenes y texto: Ya que Bootstrap es solo HTML, CSS, y algunos JavaScript detrás de bambalinas. Agregar texto e imágenes es justo lo mismo que ya hemos aprendido. Empecemos configurando las tres secciones para que sean cuatro columnas, los dispositivos medios y superiores. Entonces cambia la llamada para ser MD-4. Podríamos hacer esto para las tres secciones. Agrega MD-4 a estos dos. Ya no necesitamos estas columnas para poder quitar el fondo. Éxito, Primaria y secundaria. Tendremos el contenido esta vez también ver la diferencia entre las tres secciones. Si volvemos al sitio terminado, que tenemos justo aquí, estaremos construyendo las imágenes y todo el texto para estas tres secciones. esta es nuestra primera sección de cuatro columnas, nuestra segunda, y nuestra tercera, conformando la cuadrícula de 12 columnas. He incluido algunas imágenes para que las descargues. Si quieres usar lo mismo que yo. Si no, puedes, por supuesto, seguir adelante y elegir la tuya si lo prefieres. Tengo estas imágenes guardadas en mi escritorio. Voy a ir a la carpeta del proyecto y agregarle éstos. Aquí está mi carpeta de imágenes. Entonces voy a arrastrar estos al proyecto de hamburguesas gourmet-hamburguesas. Con estos ahora dentro del proyecto, ahora podemos llegar a trabajar añadiendo esto a nuestra página web. Entonces obviamente el índice nuestro HTML vamos a trabajar en esta sección de contenedor. En primer lugar, esta primera llamada, MD-4, podemos mover el texto, y luego agregar a la imagen elementos. Al igual que el HTML normal, agregamos los atributos de origen. Añadí estos dentro de la carpeta de imágenes. Si abrimos la barra lateral, y luego las imágenes, tenemos carrusel uno y carrusel 2 para el deslizador giratorio. Aquí tenemos tres imágenes diferentes abajo, que vamos a utilizar para las tres secciones. Si cerramos esto, el primero que vamos a sumar está abierto. Esto tiene la extensión JPEG de punto. El texto antiguo, que siempre debemos agregar. Justo debajo de esta imagen, podemos entonces seguir adelante y agregar algunos elementos normales, como H2 para el título. Digamos que más de 50 restaurantes. Entonces debajo de esto algunos textos con la etiqueta P 2. Para esto agregamos el texto de regálate la próxima vez que estés en el área. Puedes cambiarlo por cualquier texto que prefieras. Realmente no importa. Ahora, pasa a nuestros proyectos, y luego vuelve a cargar la página de índice. Se puede ver que tenemos una imagen, tendremos H2 y luego algún texto. Esta imagen es realmente grande por el momento, pero lo arreglaremos pronto. Ahora, en la sección media, también podemos quitar de nuevo este texto, y sustituirlo por una imagen. El origen de la imagen es el tiempo, es imágenes/desafío. jpg. El texto alternativo de la imagen de desafío comer en. Ahora, debajo de la imagen. Si echamos un vistazo al sitio terminado, esto es lo que estamos buscando ahora. El H2 de desafío de fantasía, y luego el texto de abajo de por qué no probar uno de nuestros famosos retos de comer hamburguesas. Empezando por el H2, y luego el texto de abajo con las etiquetas p. Por lo que desafíos comer hamburguesas. Esos son nuestros dos primeros ahora en su lugar. Después el tercero, quita el texto, y agrega una imagen para este tercero. El origen en esta ocasión es sign.jpg. En la carpeta de imágenes, sign.jpg, el texto antiguo o imagen de reputación. Se trata de la primera sección que se termina en el lado derecho, que se establece 2003. Entonces algún texto a continuación. El H2, este será cualquier texto de su elección. A lo largo de 15 años de alta calidad. Una vez que hayas incluido esto, pasemos al navegador, y probablemente veamos un poco de lío, para ser honestos si nos refrescamos. Por lo que hay tres imágenes diferentes, y las tres secciones, porque las imágenes son demasiado grandes para caber en su lugar. Para solucionar esto, podemos agregar nuestro propio archivo CSS para anular cualquiera de los valores predeterminados de Bootstrap. Entonces Courtney, si recordamos en sección de cabeza, tenemos el CSS core Bootstrap. Pero esto es sólo un punto de partida base para que trabajemos. Como dijimos antes, se anima a añadir nuestras propias hojas de estilo. Si pasamos a nuestra carpeta de proyectos y luego podemos añadir un nuevo archivo. Entonces styles.css para estilos personalizados. Ahora, voy a apuntar a la llamada MD-4. Entonces todas las imágenes que siguen. Podríamos, por supuesto, agregar la clase personalizada a esto si quisiéramos. Pero vamos a quedarnos con las clases que tenemos. Por lo que el ancho tendrá 140 píxeles para mantenerlos bastante pequeños y una altura de unos 140 píxeles también. Porque recuerda que estas solo pretendía ser imágenes en miniatura. Por supuesto, necesitamos enlazar esto en la página de índice. Por lo que nuestro CSS personalizado siempre va directo al fondo. Por lo que podemos anular cualquiera de estos estilos predeterminados para ambos. Por lo que la relación de enlace es hoja de estilo, la href. Por lo que este es el mismo nivel que la página de índice. Esto sólo puede ir en el href como styles.css y luego cerrar esto. Una vez que hayas hecho eso, veamos cómo se ve esto en el navegador. Bien. Ahora, las tres columnas están ahora lado a lado con las pequeñas imágenes, página también y también el texto. El siguiente contenido a agregar a esta sección, si vamos a la versión terminada aquí, estos botones los cuales están abajo en la parte inferior. Estos bonos son bastante sencillos de agregar. Estas solo anclan etiquetas, que algunas clases de Bootstrap para que se vean más agradables. Volver al editor de textos, y luego a nuestra primera sección, justo después de estas etiquetas P aquí. Voy a añadir algunas etiquetas P más y a continuación el enlace dentro. Este enlace va a tener algunas clases de Bootstrap. Entonces esto va a ser btn. Entonces btn secundaria. Esto irá como un color gris que vimos antes. Estos primarios, secundarios es similar a lo que usamos para los colores de fondo cuando miramos las rejillas en el último video. Estos son estilos predeterminados que Bootstrap proporciona para diferentes elementos. En este caso, secundario es el color gris que podemos ver justo aquí. Posteriormente utilizamos un color diferente para esta sección verde. Volver a nuestro botón, btn y btn y secundaria. Entonces necesitamos un enlace. Por lo que la href. Simplemente podemos dejar esto vacío por ahora ya que no tenemos páginas a las que enlazar. Vamos a añadir una fila de botón. Entonces el texto dentro de los detalles de vista. Después de esto, vamos a añadir esta flecha derecha, que es ésta justo aquí. Esto se hace con una entidad HTML. Recuerda, las entidades HTML comienzan con ampersands. El código de entidad para las flechas es raquo, y esto debe terminar en punto y coma. Guarda eso. Después está nuestro botón con las flechas del lado derecho. Voy a copiar este botón y pegarlo en las otras dos secciones. Entonces copia este enlace que acabamos de añadir. Entonces el próximo no podemos días al final de nuestra segunda zona. Entonces la tercera área, justo debajo de nuestra reputación no miente. Agrega ese final tres veces. Ahora, está en nuestras secciones de árboles en la pantalla. Estas imágenes ahora se ven mucho mejor. Ahora, caben dentro de los contenedores. Pero aún podemos llevar las cosas aún más allá con algunas clases de Bootstrap. Para hacer redondeadas las esquinas, w e puede hacer esto con una clase de círculo redondeado, que Bootstrap proporciona. El primer apartado aquí para los restaurantes dentro la imagen en la clase de círculo redondeado. Lo mismo para la segunda imagen. Después la tercera y última imagen. Veamos cómo se ve esto. Parece que hay un problema este medio, deberíamos agregar un guión dentro de ahí. Está bien, bien. Por lo que estas esquinas redondeadas se agregan con el CSS border-radius. Bootstrap nos permite agregar este radio a la parte superior, derecha, inferior izquierda, o círculo, igual que solo usamos ahí dentro. Podemos ver estas clases si vamos a getbootstrap.com. Entonces si pasamos a la documentación, y si nos desplazamos hacia abajo a utilidades, también tienen los bordes, podemos agregar colores más audaces. Este es uno que acabamos de utilizar, que es un radio fronterizo. Utilizamos el círculo redondeado, que vemos aquí. Por último, también podemos alinear este nuevo contenido al centro de cada sección. Por lo que se ve más alineado como estos de aquí. Podemos hacer esto agregando una clase de centro de texto al contenedor. Por lo que justo después de contenedor agregue la clase de centro tecnológico sobre al navegador. Esto ahora alinea todo el contenido a cada sección. Genial, por lo que ahora todo el contenido está centrado. Voy a dejar ahí este video y pasar a buscarlo. Barras de navegación Bootstrap. 27. Barras de navegación de Bootstrap: Uno de los componentes realmente útiles, Bootstrap proporciona es Responsive Navbars. Si nos dirigimos a la documentación en la sección de componentes, si nos desplazamos hacia abajo hasta la pestaña Navbar, podemos ir por algunos ejemplos de lo que ofrece Bootstrap. Si nos desplazamos hacia abajo, podemos encontrar algo más de información sobre cómo funcionan estas, las clases que necesitamos aplicar, o podríamos desplazarnos hacia abajo a algunos buenos ejemplos. Esta va a ser una que es similar a lo que vamos a construir. Va a tener nuestro título de sitio en la esquina superior, luego algunos enlaces diversos. Incluso podemos tener un desplegable si queremos, un cuadro de búsqueda, y un botón de búsqueda, esto también será sensible. Entonces si fuéramos a encoger el navegador hacia abajo, esto se convertiría en un bonito menú desplegable como este. Vamos a trabajar de nuevo en nuestra página de índice. Dentro de nuestro index.html, vamos a darle un poco más de espacio a esto. Para comenzar en la parte superior de la sección de cuerpo, vamos a empezar esto igual que una sección de encabezado normal. Usemos las etiquetas de encabezado HTML y luego dentro de aquí podemos seguir construyendo un nav, dentro de este nav, vamos a añadir nuestra una etiqueta y esto va a ser para nuestro título de sitio. Podemos agregar nuestro insider de título Gourmet Burgers aquí, y solo podemos mantener el href como un atributo vacío por ahora. Eso está bien. Ahí está nuestro título de sitio dentro de aquí. Entonces justo después vamos a crear div, que serían enlaces de seguimiento de contenedores. Simplemente agrega estos en por ahora, vamos a seguir adelante y agregar algunas clases de Bootstrap pronto. Pero por ahora solo queremos mostrarte la estructura. Dentro de este div tenemos una lista desordenada y esto va a ser para nuestros ítems de lista. Vamos a tener casa y también ubicaciones. Añadamos las etiquetas li y estos van a ser enlaces también, así que anidan un enlace dentro de aquí. El primero es el hogar y luego un segundo elemento de lista, nuevo con la etiqueta a anidada por dentro, y esto va a ser para ubicaciones. Ahí están nuestros enlaces, nuestra lista desordenada. Después de esta lista desordenada, vamos a agregar un formulario. Esto va a ser para el cuadro de búsqueda, por lo que el formulario justo aquí. Asegúrate de que esto aún esté dentro de este div circundante. Entonces solo por esta etiqueta div de cierre. Entonces podemos seguir adelante y agregar nuestro insumo al formulario y luego lo pondré justo después. Este va a ser el botón con el tipo de enviar y luego cerrar esto con el texto de búsqueda. Guardemos eso y luego abramos esto dentro del navegador. Ahí está nuestra sección de encabezado de aspecto estándar, el título, los enlaces, y luego la búsqueda a continuación. Ahora, todo lo que necesitamos hacer es seguir adelante y agregar algunas clases de Bootstrap para que esto se vea más bonito y también ser receptivo. Empecemos justo en la parte superior, dentro de la sección de navegación. Añadamos la clase. El primero que necesitamos es navbar, porque esta es una barra de navegación, y luego también una segunda clase de navbar-expand-md. Esto hará que la barra de navegación se expanda en dispositivos de tamaño mediano. Entonces navbar-oscuro, esto es para el tema más oscuro. Después el fijo-top, por lo que está fijo en la parte superior de la página. Entonces bg-dark. Demos ese guardar y pasemos al navegador. Si recargamos, podemos ver instantáneamente un color de fondo oscuro. Pero entremos a las herramientas de desarrollo y veamos qué hace cada una de estas clases en realidad en la práctica. Hagamos un poco más de espacio y luego inspeccionemos nuestro nav. Este fijo-top fue una de las cosas que agregamos. Esto agrega posición para ser arreglada y también la establece justo en la parte superior de la página. Tenemos fondo oscuro, lo que establece este color de fondo oscuro que vemos aquí. Recuerda también agregamos navbar-expand-md. Esto entra dentro de la consulta de medios con el ancho mínimo de 760 píxeles, igual que miramos en los primeros videos. Volver a nuestro código, y empecemos con las etiquetas a. Tenemos el href vacío. Sigamos adelante y sumamos una nueva clase a aquí también, y ésta puede ser de la marca navbar-. Recuerda, estas son todas las clases proporcionadas por bootstrap. Guarda y luego refresca, y ahora tenemos este enlace de color blanco. Recuerda desde antes añadimos un contenedor div circundante que rodea toda esta sección aquí. Se trata de una sección que se derrumba en los greens más pequeños. Por lo tanto, bootstrap nos proporciona algunas clases que podemos agregar llamadas colapso y también navbar-collapse. Esto mantendrá la sección de colapso luciendo bonita. Abajo a la lista desordenada, tenemos la clase de navbar-nav y luego una segunda, que es mr-auto. MR-Auto aplica margen automático a la derecha de esta lista desordenada. Esto empuja esta barra de búsqueda hacia el lado derecho. Si actualizamos, esto ahora aplica margen automático a la derecha de esta lista desordenada. Mantener esta sección sobre el lado derecho. Hablaremos más sobre margen y relleno con más detalle más adelante en este apartado. Pero por ahora, pasemos a los ítems de la lista y añadamos aquí nuestras clases. El primero es nav-item, y luego podemos hacer lo mismo para el segundo ítem de lista, la misma clase de nav-item. Entonces también hay algunos enlaces. Agregamos la clase para el link de nav-link, y luego la segunda, que está justo aquí. Esto también es nav-link. Guarda y ve al navegador y ahora tenemos un poco más de espaciado y también algunos colorantes diferentes. De nuevo, podemos entrar en las herramientas de desarrollo y ver qué hace cada una de estas clases de forma individual. Pasado al nav-link. Tenemos este navbar-oscuro y también el navbar-link, que te da este color. Tenemos algunas consultas de medios los cuales aplican algún relleno de varios tamaños. Lo mismo con este nav-link que agregamos. Cuenta con un tipo de display de bloque y también algo de relleno. Esto asegurará que nuestra barra de navegación esté muy bien alineada, con algo de espaciado alrededor. Si encogemos el navegador, se cierra. Todavía no vemos el botón en la esquina superior derecha en pantallas más pequeñas como hemos visto en la demo de Bootstrap en la documentación. Para esto, necesitamos agregar un botón a nuestro código. Justo debajo del título de Gourmet Burgers y justo antes de este div, que es una sección de colapso, vamos a añadir un botón. Entonces dentro de este botón, esto va a tomar en una clase de navbar-toggler. Esto va a tener el tipo de botón y luego la siguiente parte va a ser para data-toggle y configuramos que esto sea colapso. Esto hace que el botón sea un botón de encendido, que expande y colapsa el contenido del elemento de navegación. El resto de elementos a los que nos referimos es este div de abajo con la clase de colapso y navbar-colapso. Para vincular este botón a este div, necesitamos agregar un id para empezar y podemos llamarlo cualquier cosa que queramos, pero voy a llamar a esto el NavBarCollapse. Ahora esto tiene una referencia única. Podemos seguir adelante con nuestro botón y agregar un objetivo de datos y darle a esto el mismo nombre. Entonces agregaré un hash porque es un id y luego tenemos NavBarCollapse. Ahora, vayamos al navegador y luego actualicemos. Ahora, si reducimos el navegador hacia abajo, podemos ver que tenemos el botón en la esquina superior derecha, pero no destaca demasiado por el momento. Entonces, solo echemos un vistazo. En realidad dentro de los botones necesitamos agregar el icono para el botón. Hacemos esto usando los elementos span y luego agregamos algunas clases de navbar, y esto es navbar-toggler-icon. Guarda eso, y luego encoge el navegador hacia abajo, y ahí vamos. Se trata de los elementos de span con el icono en su interior. Ahora podemos ver nuestro botón, y esto también cae porque está vinculado a la sección div separada. El div al que está vinculado es éste de aquí con el id de NavBarCollapse, que introducirá datos-objetivo justo aquí. Esta es ahora la sección completa y tendremos una barra de navegación de aspecto agradable simplemente aplicando algunas clases y ayudantes de Bootstrap. En el siguiente video, vamos a estar agregando un carrusel de imagen a esta página de inicio. 28. Carruseles de Bootstrap: Al igual que las barras de navegación que hemos visto al inicio del último video en la documentación de bootstrap. De vuelta en esta sección de componentes en el lado izquierdo, también tenemos un enlace a carruseles también. Por lo que da click en el enlace del carrusel de aquí. Entonces de nuevo, si nos desplazamos hacia abajo, podemos ver varios ejemplos del código. Entonces aquí hay un ejemplo simple aquí, que es solo el código debajo de él. Si nos desplazamos hacia abajo a la versión que dice que tenemos subtítulos. Entonces aquí están los indicadores, que pronto se sumarán. Pero queremos esta versión aquí con los subtítulos, resuelve un poco de texto sobre cada imagen. Esto va a ser similar al que vamos a estar construyendo. Entonces nosotros cómo estos subtítulos, y también estos indicadores para hacer click entre las diversas diapositivas. Entonces pasemos a nuestra página de índice. Entonces en la parte superior de este encabezado elementos, hagamos algo de espacio para nuestro carrusel. Entonces primero agreguemos una etiqueta div circundante. Entonces dentro de aquí vamos a añadir algunas clases de Bootstrap. El primero va a ser de carrusel y luego el segundo de tobogán. También agregamos un atributos de paseo de datos. Esto va a ser igual a Carrusel. El data ride atributos del carrusel le dice a Bootstrap que reproduzca automáticamente el carrusel una vez que se cargue la página. Dentro de aquí vamos a añadir un segundo div anidado en el medio. Esto va a tener la clase de carrusel interior. Esta clase de carrusel interior va a actuar como envoltorio para nuestras diapositivas o imágenes, que vamos a agregar ahora, Vamos a agregar nuestro primer div para nuestra primera diapositiva. Esto va a tener una clase, y esto es carrusel ítem. Entonces dentro de aquí podemos agregar nuestra imagen que queremos mostrar dentro del carrusel. La imagen también tiene una clase dos, y esto va a ser w-100. W-100 es una clase de utilidad Bootstrap para establecer el ancho de imagen para que sea 100 por ciento del contenedor. Después podemos agregar la fuente de nuestra imagen, que es nuestra carpeta de imágenes. Entonces la imagen de carousel.jpeg. Entonces un alt atributos con algo de texto. Sólo voy a configurar el texto para que sea primera diapositiva por ahora. Entonces ese es nuestro primer div para el primer artículo del carrusel. Si copiamos esta sección, podemos agregar una imagen más justo debajo. Esto va a tomar en las mismas clases, pero todo lo que necesitamos hacer son cambios para ser nuestra segunda imagen de carousel2. Por lo que pasa al navegador y luego a la página de índice. Si nos refrescamos, no obtenemos nada que se muestre en la pantalla. Esto se debe a que una de nuestras imágenes necesita tener agregada la clase activa. Esto permitirá que aparezca la presentación de diapositivas. Y comenzará con la diapositiva con esta clase activa en lugar de en el orden fuente. Por lo que volver al código. Justo después de uno de estos artículos de carrusel, podemos agregar activos, guardar eso, y luego refrescar. Bien. Entonces esta es la primera diapositiva que vemos aquí. Ahora podemos ver de inmediato que esto está funcionando. Cuando miramos los ejemplos en el sitio web de Bootstrap, también mencionamos agregar subtítulos a estas diapositivas. Podemos agregar estos en para cada sección de imagen. Por lo que volver a nuestro artículo carrusel. Entonces podemos agregar esto justo después de la imagen. Entonces hagamos algo de espacio aquí abajo. Entonces podemos añadir div, que va a rodear nuestra sección de subtítulos. Esto necesita una clase bootstrap y esto es descriptivo, esto es carousel-caption. Recuerda si quieres saber exactamente qué CSS está aplicando alguna de estas clases, solo tienes que dirigirte al navegador y entrar en las herramientas de desarrollador y podrás ver con más detalle. Añadamos un encabezamiento de nivel 5. Esto va a ser por el título o el título. Entonces voy a añadir “Hecho a la orden” para esta primera imagen, y luego abajo solo una etiqueta p estándar con algún texto de usar solo los mejores ingredientes. Bien. Hagámoslo un poco más de espacio aquí. Si sí ves algún problema al pasar por esta sección bootstrap, solo asegúrate de que todo el anidamiento se haga correctamente. Asegúrate de que, por ejemplo, esta leyenda del carrusel esté justo debajo de la imagen y esta sección esté toda anidada dentro de este artículo del carrusel y así sucesivamente. Esta suele ser la causa más grande de cualquier problema de codificación cuando se trabaja con Bootstrap y también las clases que se aplican a los elementos equivocados. Entonces ahora sigamos adelante y desplázate hacia abajo hasta la segunda imagen. Por lo que la segunda imagen dentro de este artículo de carrusel, vamos a añadir el div circundante igual que antes. Esto también tiene la misma clase de leyenda de carrusel, un h5 para mantener esto consistente con el texto de más de 50 tipos en nuestro menú. Entonces debajo de esto, nuestros elementos p estándar con el texto de “O construye el tuyo propio”. Ahí están nuestros dos subtítulos para nuestras dos imágenes. Veamos esto en acción sobre el navegador. Bien. Ahí están nuestros compañeros de orden nivel 5 encabezamiento y las texturas de abajo. Si salimos de esto, ojalá veamos una rotación. Ahí vamos, dice nuestra segunda con la leyenda abajo en la parte inferior. Bueno, este carrusel de imagen ahora está funcionando y de pie para quedar bien. En el siguiente video, añadiremos algunos botones izquierdo y derecho para que podamos saltar a través de estas imágenes. 29. Añadir controles al carrusel: Bienvenido de nuevo. Tenemos una presentación de diapositivas funcionando ahora, lo cual es agradable. Podemos hacer esto aún mejor agregando algunos controles para saltar entre estas diapositivas. Para ello, voy a añadir algunos botones al carrusel. Uno en el lado izquierdo para saltar a la izquierda, y luego uno en el lado derecho, para saltar hacia adelante. Estos agregados en la parte inferior de nuestra sección div carrusel. Abajo, si localizamos la etiqueta de apertura, que es diapositiva de carrusel, y luego desplácese hacia abajo hasta la parte inferior. Vamos a añadir esto justo antes de la etiqueta de cierre. Empecemos con una, una etiqueta porque va a ser un enlace. Esto va a tener la clase de control-prev carrusel, que muestra de nuestro anterior. Un papel de botón, y luego también una diapositiva de datos. Esto va a ser igual a anterior, que es P-R-E-V. Diapositiva de datos especificará a qué diapositivas ir, los dos valores que puede agregar es, anterior o siguiente. Este va a volver atrás, queremos este valor de anterior. Entonces vamos a añadir nuestras etiquetas span, y esto va a ser para los iconos. Esto funciona de manera similar a nuestro desplegable, donde agregamos el span y luego agregamos algunas clases para mostrar el icono. La clase que queremos utilizar aquí es carrusel control-previous-icon. Esta va a ser la flecha izquierda, igual que uno de estos soportes de pared de seto que se abren aquí. Este es nuestro ícono y luego vamos a añadir un segundo lapso justo después de esto. Esto va a tener el texto de anterior. En realidad no vamos a ver esto en los navegadores estándar. Esto va a ser sólo para lectores de pantalla. Ahora declaramos que esto es para lectores de pantalla agregando una clase de sr solamente. Si guardamos eso y luego recargamos, podemos ver por el lado izquierdo que no tenemos el texto de anterior. Acabamos de tener este pequeño ícono justo ahí. Entonces podemos hacer exactamente lo mismo, vamos a copiar esto una etiqueta y luego hacer lo mismo para nuestro próximo. Basta con alinear todo esto. El a tag va a tener la clase que necesitamos para cambiar esto para ser el siguiente. Las diapositivas de datos también pueden ser las siguientes. El ícono que necesita cambio previo para ser el siguiente. Entonces finalmente los textos de siguiente para los lectores de pantalla, guarde eso y luego vuelva a cargar el navegador. Es un poco difícil de ver, pero tenemos la flecha derecha justo aquí y la izquierda justo aquí también. Pero si hacemos clic en ellos, no parecen estar funcionando. Esto se debe a que necesitamos vincularlos a nuestra presentación de diapositivas. Estos bonos son enlaces utilizando los elementos a. Pero como con todos los enlaces, necesitamos especificar a dónde enlazar, con los atributos href. En primer lugar agregamos un id al envoltorio de carrusel div. Subiremos a la etiqueta de apertura. Este div con la diapositiva de carrusel de clase, podemos agregar un id Este id de controles de carrusel. Este nombre depende totalmente de nosotros. Solo necesitamos asegurarnos de que este id coincida con el href para los dos enlaces. Copiar este carouselcontrols. Podemos usar este id justo debajo como href. El primero a, agreguemos un href y usemos un # esta vez y peguemos en carouselcontrols. Entonces para el segundo enlace aquí abajo, los atributos href, de nuevo con el # de carouselcontrols. Estas dos imágenes ahora enlazan a nuestro carrusel principal. Entonces esperemos que si guardamos y luego vamos al navegador, estos dos enlaces ahora deberían funcionar. Bien, para que podamos ir atrás y adelante a través de nuestras imágenes. Genial, todo esto está funcionando y esto es ahora para nuestro carrusel. En el siguiente video, veremos otro de los componentes de Bootstrap, que es el modelo. 30. Modales de Bootstrap: Ahora es el momento de mirar otros componentes útiles de Bootstrap, que se llama modal. Un modal es una Ventana emergente la cual puede dar cualquier información al usuario. En nuestro caso, vamos a estar agregando una sección de registro en la parte inferior de nuestro sitio. Entonces, cuando el usuario haga clic en el botón de registro, esto activará entonces una Ventana modal, donde el usuario puede registrarse utilizando un formulario. Una vez que el modal ha salido, todavía podemos hacer clic fuera de él y volver a la página original. Ahora vayamos a nuestra página de índice y veamos cómo agregar modal. Para comenzar en la parte inferior de la página, voy a crear una sección de registro. Esto básicamente será una fila que algunos textos de un lado. Decir “inscribirte” para ofertas exclusivas. Después un botón en el lado derecho para hacer click, que activa el modal. Justo en la parte inferior de nuestro HTML. Desplázate hacia abajo. Voy a añadir un nuevo contenedor para esta sección. Esto puede ir justo en la parte inferior. Justo por encima de estos JavaScript, vamos a crear un nuevo div, y esto va a tener una nueva clase de fluido contenedor, lo que hace que el fluido de ancho completo de la página. Entonces también bg-dark para darle un color de fondo. Dentro de aquí podemos agregar nuestro div con la clase de fila. Cierra esto. Después necesitamos agregar dos nuevas clases, seguir la sección izquierda y la sección derecha. El apartado de la izquierda va a ser un div. y esto va a tener la clase de col-md-7 que lo haces siete partes de ancho en los dispositivos de tamaño mediano y superior. Después una segunda sección justo debajo, que retomaremos las cinco partes restantes. Esto necesita tener la clase de col-md-5, dándonos nuestra cuadrícula de 12 columnas. Ahora esta cuadrícula está en su lugar, primero podemos agregar algún texto de registro, que va a ir por el lado izquierdo dentro de estas etiquetas p. Date de alta para ofertas exclusivas, dot, dot, dot. Entonces necesitamos añadir un botón en el lado derecho, que activará nuestro pop-up modal. Dentro de la sección cinco de la derecha, agreguemos un botón con el tipo de botón. Después algunas clases de botón. El primero es btn, y luego btn-success, btn es los estilos base estándar para un botón, luego btn-success le dará el color de fondo verde. Si guardamos eso y comprobamos esto en el navegador, esto está justo en la parte inferior. Podemos apenas ver nuestro texto en el lado izquierdo aquí, y luego el botón aquí. Esto no se ve demasiado bien por el momento, pero algunas clases de Bootstrap deberían arreglar esto. También necesitamos agregar algo de texto dentro del botón también, hagámoslo primero. Podemos agregar el texto de inscribirte aquí. Dentro de esta fila podemos agregar la clase de centro de texto, y esto empuja todo el texto al centro del div. Veamos cómo se ve esto. Refrescar, bueno, nuestro botón y también el texto está en el centro de cada uno de los contenedores. Hagamos ahora estos textos, ligeros y también cursiva. Esto en el lado izquierdo. Podemos agregarlo en esto, div justo aquí. Después de md-7, tenemos la clase de utilidad de textos luz. Esto también lo proporciona Bootstrap y también forma cursiva. Estos son bastante autoexplicativos. Si guardamos y vemos cómo se ve esto, bien, ahora nuestro texto es ahora es de color blanco y también cursiva. También mejoraremos en esto más adelante agregando algún margen y relleno. Haremos esto en un video posterior. Pero por ahora, pasemos a construir nuestro modal pop-up. Esto se puede agregar en cualquier lugar dentro de nuestro código pero voy a agregar el mío justo debajo de la sección de registro. Volver a nuestro código. Entonces otra vez justo en la parte inferior, debajo del div de registro aquí, vamos a añadir nuestra sección modal. Añadamos un comentario. Ahora necesitamos agregar nuestro entorno un div. Esto va a tener una clase de modal y también se desvanecen. Esta clase de desvanecimiento es un efecto de desvanecimiento proporcionado por Bootstrap. Esto hará que la transición sea agradable y suave. Dentro de aquí añadiremos un nuevo div. Esto debería ser bastante familiar, simplemente estamos construyendo divs con clases de Bootstrap para agregar nuestro bonito estilo. El tipo de diálogo modal. Esta clase de diálogo modal hace que un modal sea más estrecho. Si eliminamos esto, hace un modal el ancho completo de la página. Simplemente mantendré el diálogo modal en su lugar para mantener este bonito y compacto. Después un nuevo div anidado por dentro. Esto va a tener la clase de modal-content. Este es el contenido que queremos tener dentro de nuestro modal, y esto se divide entre una sección de encabezado, un cuerpo, y un pie de página. Ahora sumamos tres nuevos divs al mismo nivel. Este es el primero para el encabezado. El tipo de cabecera modal. Si copiamos esta sección aquí y pegamos esto en, dos veces más. Ahí vamos, así que ese es nuestro encabezado. El medio va a ser para el cuerpo, y luego el último es el pie de página. Asegúrese de que es pie de página, sección cuerpo y encabezado está todo anidado dentro de este contenido modal div aquí, lo contrario las cosas no se verán como se pretendía. Veamos cómo nos vemos tan lejos dentro del navegador. Actualicemos y pinchemos en el botón “Registrarse”. Podemos ver de inmediato que el pop-up no sucede al hacer clic en el botón. Como es de esperar, necesitamos vincular este botón al modal para que funcione. En primer lugar, incluimos un id sobre modal real. Si vamos a la cima, este id va a ser cualquier nombre de nuestra elección. Yo sólo voy a llamar a esto modal. Entonces necesitamos agregar dos atributos al botón, lo que lo activará. El botón de registro justo aquí. Nosotros decimos que estos botones activan el modal por primero agregar en el atributo de toggle de datos, y configuramos esto para que sea modal. Después establecemos qué modal queríamos activar mediante el uso del dato-objetivo. Entonces firma esto igual al id del modal, el modal hash. Este es el mismo id que le dimos al modal justo debajo. Si guardamos y probamos esto en el navegador. Ahora vamos a dar click en el botón “Registrarse” aquí. El botón no está funcionando del todo. Deberíamos ir a nuestro código y revisar todo aquí. Tenemos el id de modal y luego el botón, necesitamos agregar data-toggle en esto y asegurarnos de que esté escrito correctamente, recargar, dar click en nuestro botón. Ahí está nuestro pop-up, que es de hecho nuestro modal. Pero recuerda que no agregamos ningún contenido al encabezado modal, al cuerpo modal y a la sección de pie de página modal. Es por ello que vemos secciones vacías libres en la pantalla. Esto es a lo que pasaremos a continuación cuando agreguemos nuestro formulario a este modal, que el usuario pueda agregar sus detalles de registro. 31. Formas de Bootstrap: Sabemos todo sobre el uso de formularios desde temprano en el curso. Este video no debe arrojar ninguna sorpresa. No obstante, vamos a ver cómo maneja Bootstrap estos formularios. Utiliza exactamente los mismos elementos, como ya vimos, pero luego agrega un buen posicionamiento de estilo, agregando las clases bootstrap. Nuestro modal ahora aparece, en la pantalla, cuando hacemos clic en el signo encima y dentro de este modal es donde vamos a sumar nuestro formulario de inscripción. En primer lugar podemos agregar algo de texto a la sección de encabezado modal, que es esta parte superior aquí. Vámonos. En realidad antes de hacer eso si hacemos clic fuera del modal, lo cerraremos. Después al editor de texto, vamos a desplazarnos hacia abajo a nuestra sección de cabecera modal aquí, y dentro de aquí voy a añadir un encabezado de nivel 5 con el texto de registrarse para ofertas exclusivas. Bootstrap también tiene algunas clases disponibles y esta vez esta se llama título modal, así que guarde eso, y luego pase al pop-up modal, haga clic en el botón, y como nuestro texto en la parte superior, luego para agregar en nuestro formulario dentro de esta sección media, que es el cuerpo, por lo que volver a nuestro modal. Esta vez dentro de esta sección de cuerpo modal vamos a agregar un formulario, esta forma va a tener un div anidado dentro con la clase de grupo de formulario. Esto agrupa todos los de la sección de formulario incluyen cualquier entrada habilitada. Agregamos cada entrada habilitar dentro este grupo de formularios para agregar alguna estructura a sus elementos de formulario, como cualquier margen para espaciarlos. Empecemos con una etiqueta y esta etiqueta va a tener los cuatro atributos habituales. Esto va a enlazar con nuestros insumos. Llamemos a esto una entrada de nombre porque vamos a agregar una sección de nombres y luego el texto de tu nombre. Entonces después de esta etiqueta puede agregar nuestra entrada, esto va a tener el tipo de texto y luego algunas clases, por lo que las clases bootstrap de control de formulario, id y este id van a ser entrada de nombre, que coincide con esta etiqueta así id de entrada de nombre. Entonces después de esto podemos agregar algún texto de marcador de posición y esto puede ser cualquier cosa de nuestra elección, voy a simplificar, introduce tu nombre. Antes de agregar esta clase bootstrap de control de formulario, esto se utiliza en cualquier entrada basada en texto como el tipo de texto, seleccionar, y el área de texto. Esto aplicará cualquier estilo como los colores y además establece la entrada para que sea 100 por ciento de ancho, si guardamos eso, podemos ver qué efecto tiene esto dentro del modal así que haga clic en el botón y ahí están nuestras entradas 100 por ciento mentidas en el medio con la etiqueta de tu nombre. Así es como se ve nuestra forma por defecto. Tenemos la etiqueta, una entrada, en líneas separadas. Bootstrap aplica el tipo de visualización de bloque y espera el 100 por ciento a la mayoría de los elementos de forma. Si queríamos que esta etiqueta y entrada estuvieran en línea hay una clase para estos dos. Podemos agregar esto al contenedor de formulario circundante y la clase se llama forma en línea, guarde eso, y luego volver a cargar, haga clic en el modal, y ahora nuestra etiqueta y entrada está en línea. Pero voy a mantener esto como lo era originalmente sin esta clase de forma en línea que debería eliminar esto de vez en cuando a nuestros grupos de formularios de correo electrónico y direcciones, así que al igual que esta sección de nombres aquí, también rodeamos otras entradas con esta clase de grupo de forma. Copiemos esto y luego peguemos justo debajo. Este va a ser para el correo electrónico, así que cambiemos tu nombre para que sea tu correo electrónico. Esto también va a tener el tipo de entrada de correo electrónico. También necesitamos cambiar la etiqueta para que los atributos sean entrada de correo electrónico, que va a coincidir con este ID aquí. También cambia esto para que sean entradas de correo electrónico. Creo que todo lo demás está bien. Tan solo un tenedor de lugar, así que entra tu correo electrónico y eso se ve bien. Justo debajo de este email vamos a pegar esto en una vez más y esto también va a tener el div circundante con una clase de grupo de formulario pero esta vez va a ser para tu dirección. Esta vez vamos a tener un área de texto, en lugar de las entradas estándar. Eliminemos esta entrada de aquí. Después de esta etiqueta entonces vamos a crear el área de texto. Recuerda que el área de texto tiene una etiqueta de apertura y cierre y la entrada solo tiene la etiqueta de autocierre. El área de texto puede tener una clase de control de formulario, que es la misma que estas anteriores porque es una entrada basada en texto. Después una identificación, que coincide con esta etiqueta de dirección. Recuerda desde antes con una entrada de texto, también podemos especificar cuántas filas queremos agregar y lo configuramos en 3 por defecto. Después un Marcador de posición, con el texto de ingrese su dirección. Creo que eso está todo hecho por las entradas gratuitas así que veamos cómo se ve. Activar el modal. Bien. Tenemos el nombre, el correo electrónico, y también la dirección, que es un área de texto. Ahora podemos arrastrar esto hacia abajo para hacerlo más grande o más pequeño. Esto solo deja el área del pie de página hacia abajo en la parte inferior. Dentro de ella aquí me gustaría agregar algunas casillas de verificación para preguntar si el usuario quiere ser contactado por correo electrónico o post luego un botón enviar también para enviar el formulario. Primero agreguemos estas casillas de verificación, así que hasta nuestro modal debe ser pie de página modal así que asegúrate de que cambiemos. Tenemos el cuerpo, el encabezado, y luego el pie de página en la parte inferior. Empecemos con nuestro correo electrónico y publiquemos entradas. El div circundante, con clases Bootstrap de verificación de formulario porque esta será una casilla de verificación y luego formulario check in line, mantiene estos elementos en línea luego podemos agregar nuestras entradas con el tipo de casilla de verificación, las clases Bootstrap de forma comprobar entradas. Después de la clase, vamos a añadir una identificación, que se ha ido a enlazar a nuestra etiqueta. Este DNI voy a llamar a este el cheque de correo electrónico. Por último, un valor que va a ser igual a la opción uno y luego cerrar esto. Recuerde que el valor es el texto que se enviará al servidor una vez que se haya enviado este formulario. Después de la entrada, necesitamos agregar nuestra etiqueta. Esta etiqueta va a tener una etiqueta de cheque de clase de formulario. Los cuatro atributos, que van a enlazar a nuestro ID de las casillas de verificación y este fue cheque por correo electrónico. Por último, consulta el interior de contactos por correo electrónico. Hagamos un poco más pequeños para que podamos ver en pantalla. Entonces solo voy a copiar esto para agilizar las cosas así que asegúrate de copiar este div envolvente completo pegarlo justo debajo y luego simplemente podemos cambiar este para que sea contacto por correo. De todas formas las clases, solo necesitamos comprobar la diferencia de IDs. El DNI esta vez va a ser post check. El atributo de formulario puede ser post check también, contacto por correo, y debo agregar un signo de interrogación después de cada uno de ellos. Por último, vamos a terminar este modal con un botón para enviar el formulario, el texto de enviar, el tipo de enviar también, las clases Bootstrap de btn, y luego btn-primary, que le dará el azul color para el botón así que debería ser todo ahora para el pie de página, iré con dos casillas de verificación aquí luego nuestro botón enviar. Echemos un vistazo a esto en acción. Activa el pop-up. El contenido del pie de página ya está ahí pero se ve un poco fuera de lugar. Podemos arreglar esto rápidamente con un poco de flexbox. En lugar de agregar todo flexbox en nuestro archivo CSS, Bootstrap también nos proporciona algunas clases de utilidad. Podemos usar flexbox en muy rápido. Pasado a nuestro código y luego podemos agregar un ayudante CSS flexbox dentro de este div de pie modal. Justo después del pie de página modal, podemos agregar justificar contenido entre. Esto funciona exactamente como justificar contenido entre lo hicimos en nuestro CSS. Bootstrap lo proporciona dentro de una clase CSS, así que guarde eso y más a nuestro modal. Ahí vamos. Ahora las cosas están bien espaciadas en el pie de página. Esto es igual a lo que ya hemos aprendido. También podemos reemplazar entre con centro, inicio, fin, y alrededor, por ejemplo dos. La única diferencia es que aquí estamos usando una clase proporcionada por Bootstrap, bajo el capó, sigue aplicando una propiedad de estilo CSS, igual que lo hicimos antes en el curso. Si tuviéramos que abrir las herramientas de desarrollador y luego desplázate hacia abajo. Si entonces inspeccionamos esta zona de pie de página del modal, haga clic en esto, podemos ver esta clase de justificar contenido entre, que agregamos justo aquí, es simplemente aplicar la propiedad justify content flexbox a estos elementos. Vamos a cerrar esto. Ahora si volvemos a nuestro HTML, si echamos un vistazo a la forma circundante, dentro del modal, por lo que el elemento de forma que tiene la etiqueta de cierre, y ahí está la etiqueta de apertura. Te das cuenta de que este elemento de formulario necesita ser movido para rodear todos los elementos de forma. Por el momento sólo rodea este cuerpo contenido de nombre, correo electrónico, y dirección. Vamos a cortar esta etiqueta de formulario de cierre fuera de aquí y luego si movemos esto hacia abajo, vamos a mover esto hacia abajo hacia abajo. Asegúrate de que tenga el botón con el tipo de enviar, y ahora podemos agregar esto en justo después de la sección de pie de página. Ahora todos nuestros insumos están ahora dentro de estos elementos de forma. Tan solo para terminar las cosas voy a agregar un botón en el formulario, que sólo va a ser una x para que el usuario pueda hacer clic para cerrar el modal. También puedes hacer click fuera de la pantalla para cerrar un modal como lo hemos visto antes. Pero a veces el usuario puede no saber que puede hacer esto por lo que una pequeña cruz en una esquina de la forma realmente se beneficiará. Voy a agregar esto en la sección de cabecera modal. Vamos a desplazarnos hasta el modal tenía una parte aquí, y luego podemos agregar un fondo. Justo después de este H5, vamos a añadir un botón entonces podemos añadir una entidad HTML, que va a ser un símbolo de tiempos, y esto va a ser un poco cruzado, que veremos en tan solo un momento. El fondo necesita un tipo de botón, una clase de cierre, y luego los datos descartan de modal. Datos descartan modal declarará que queremos que este fondo cierre un modal cuando se haga clic. Dale ese guardar y podemos probar esto de nuevo en el navegador. Recargar, abrir el modal, y ahí está nuestra entidad HTML, que es la cruz, haga clic en esto, y ahora esto cierra nuestro modal. Este es nuestro modal ahora totalmente funcional y también la forma ahora luciendo mejor. Al igual que con todos los elementos y componentes que hemos utilizado hasta ahora, echa un vistazo a la documentación de Bootstrap para ver algunas variantes y algunas formas diferentes en las que podemos usarlas junto con cualquier código de muestra para ponernos en marcha. A continuación vamos a buscar espacio Bootstrap en utilidades para agregar margen y relleno. 32. Utilidades de Bootstrap: Como ya sabemos, Bootstrap es solo HTML, CSS, y algo de JavaScript. Si queremos agregar algún CSS como margen y relleno, aún podemos seleccionar cualquiera de nuestras clases o elementos de Bootstrap y luego añadirlos a nuestro propio archivo CSS y luego cambiar las propiedades CSS como lo hemos hecho anteriormente. Hay otra forma que Bootstrap nos proporciona y esto es con algunos útiles ayudantes de utilidad. Si vamos de a la documentación de Bootstrap y luego en el menú del lado izquierdo, haga clic en “Utilidades”. Las utilidades son básicamente una forma para que rápidamente agreguemos algunos estilos a un elemento sin siquiera tener que ir al archivo CSS. A partir de los bordes, podemos ver aquí podemos agregar bordes a un elemento con algunos nombres de clase descriptivos. Tenemos frontera, que aplicará una frontera a los cuatro lados. También tenemos frontera superior, derecha, inferior, e izquierda también. Si echamos un vistazo al menú de la izquierda, podemos ver que estos ayudantes están disponibles para las propiedades CSS más comunes. De hecho, ya hemos utilizado algunos de estos ya en nuestro proyecto. Si hacemos click en “Flex”, podemos echar un vistazo a la sección flexbox y desplazarnos hacia abajo. Vemos algunos valores flex que podemos agregar como clase. Ya hemos utilizado el contenido de justifique entre para nuestra sección de formularios, quienes tendrán acceso a todas las utilidades de flexbox. Si también bajamos y hacemos clic en “Texto”, justo aquí, también mirando esta sección de texto, ya hemos utilizado la clase tech center, que podemos ver justo aquí. También hay texto a la izquierda, texto a la derecha y también algunas utilidades para aplicar esto solo en diferentes tamaños de ventanilla. Desplazándose más abajo, tenemos dimensionamiento, y ya hemos usado esto antes dentro de nuestro carrusel. Hemos utilizado la clase W 100, que tenemos aquí y esto estableció que nuestras imágenes sean 100 por ciento del ancho disponible. También hay espacio en utilidades aquí y esto es lo que vamos a ver en este video. Esto se utiliza para agregar algunos valores de margen y relleno a nuestro CSS. Si echamos un vistazo a cómo podemos usar esto, necesitamos construir un nombre de clase. Esto lo construimos comenzando con una M o una P, que significa margen o relleno. Después de este m o p, entonces especificamos a qué lado del elemento queremos que se aplique. Podemos agregar T para arriba, B para abajo, izquierda, derecha, etcétera. Si quisiéramos agregar algún margen a la derecha, comenzamos con m, r luego después de estas letras, entonces especificamos qué tamaño queremos agregar con un número de cero a cinco o también tenemos la opción de auto. Zero restablecerá cualquier margen predeterminado y el relleno de nuevo a cero. Dos nos darían un valor de 0.5 carneros y así sucesivamente. También tenemos x que aplicará las clases a la izquierda y a la derecha, o y, que es para arriba e abajo. Pasemos a nuestro proyecto y si reducimos el navegador hacia abajo, vamos a empezar dentro de la navegación. Bajemos esto y vamos a empezar a trabajar en su sección de formularios. En primer lugar, queremos agregar algunas clases para que esto se vea un poco más bonito y luego usamos algunas de las utilidades de espaciado. Abrimos nuestro editor de texto y luego pongámonos a trabajar en nuestra sección de encabezados. Desplazamos hacia abajo hasta nuestro formulario dentro de este encabezado. De hecho, eliminemos este carrusel del encabezado y solo coloquemos esto después así que desplácese la ruta hacia abajo después de estos controles, recorte esta sección, luego hacia abajo en la parte inferior de nuestro encabezado, peguemos esto afuera y para asegurarse de que todo esté bien, expanda el navegador. Genial. Ahora solo tenemos nuestra navegación dentro del encabezado. Vamos a trabajar con nuestra sección de formularios agregando algunas clases de Bootstrap. Justo aquí podemos agregar una clase de formulario de línea de form-in y luego podemos agregar algún margen, podemos usar m y Esto aplicará algún margen en el eje y, que está arriba y abajo y luego el valor de 2, guarde eso, recargue y el desplegable ahora tendrá algún margen en la parte superior e inferior del formulario. Entonces podemos seguir adelante y hacer que esto se vea un poco más bonito con algunas clases de Bootstrap. En primer lugar, las entradas pueden tener una clase de control de forma. Después agregamos el tipo para la entrada de texto, y luego un valor de marcador de posición de búsqueda. Ahora, el botón, tenemos el tipo de enviar, solo agreguemos algunas clases a esto. El primero puede ser btn, que ya hemos visto antes, luego btn outline-success. Outline se asegurará de que este color solo se aplique como un borde en lugar de un color sólido y el éxito nos dará el color verde, que veremos justo aquí. Estos están en líneas separadas porque estamos en una vista más pequeña aquí. Si hacemos esto un poco más amplio, ahora conseguimos estos componentes ahora en línea. Este my2, que hemos agregado aquí, aplicará margen para todos los tamaños de pantalla. También podemos establecer un valor de margen diferente para otros tamaños de pantalla también. Por ejemplo, si quisiéramos reducir este margen en dispositivos de tamaño mediano y superior, podríamos agregar dispositivos medianos my-md y luego reducir esto a ser 1 en lugar de 2. Si guardamos y refrescamos, ahora cuando hacemos el navegador, los dispositivos de tamaño mediano, este margen ahora se reduce en el formulario. Genial. Ahora tenemos diferentes valores de margen para dispositivos de tamaño medio por encima. Este botón de búsqueda también está un poco demasiado cerca de estas entradas. Se vería un poco más bonito con un poco de espaciado en el medio. Para solucionar esto, también podemos agregar algún margen a esta entrada. Esto ingresa justo aquí, agreguemos una nueva clase de mr, que es margen, derecha. Entonces dispositivos pequeños y arriba, pongamos esto en 2, actualicemos y allá vamos, así que ese es un margen en el lado derecho y esto debería aplicarse en dispositivos más pequeños, que justo aquí y arriba. Bien. Si reducimos el navegador al tamaño más pequeño, que hemos visto antes, este botón también está apretado contra la entrada. Añadamos algún margen al botón para espaciar esto, así que hasta el botón, después de btn esbozo éxito, podemos usar mi y luego vamos a configurar esto para que sea 2. Veamos esto en acción. Genial. Esto se ve bien en las pantallas más pequeñas. Si estiramos esto, así las pantallas más grandes. También podríamos restablecer este margen para pantallas más grandes. Pero sí se ve bien así que lo voy a mantener así por ahora. Ahora a las tres imágenes abajo en la parte inferior. También necesitamos agregar algo de espacio en la sección. Voy a añadir algo de relleno al interior de estos elementos. Bajemos al contenedor, las tres imágenes debajo del carrusel. Es éste de aquí después de contenedor y centro de texto, vamos a agregar algo de relleno en el eje y y esto puede ser un valor de 5, recargar. Bien. Ahora tenemos algo de relleno en la parte superior e inferior. Hagamos que este contenedor sea un poco más alto, agreguemos un espaciado más igual. Por último, para terminar esta página de inicio, agreguemos un área de pie de página, vuelta al HTML. Justo al fondo y cerraremos este div off. Podemos añadir una sección de pie de página. Esta va a ser un simple área de pie de página. Vamos a empezar agregando un botón de retroceso para que cuando el usuario haga clic en él, sean llevados de nuevo a la parte superior de la página. Después añadiremos un símbolo de copyright con el nombre de Gourmet Hamburguesas. Agregamos un enlace de casa y ubicaciones solo para terminar las cosas. Empecemos agregando algunas clases a esta zona de pie de página. Podemos hacer de esto un contenedor y bg-light para darle un color de fondo claro. Para espaciar las cosas, un agregamos un poco de relleno en el eje y y un valle de 4, abrimos los elementos p y este va a ser nuestro texto o volver a arriba. De hecho, solo recortaremos esto y agregaremos esto como enlace con los elementos a y pegaremos esto dentro. El p tags puede tener una clase y de nuevo, esta es una clase de utilidad de flotador derecho, Esto hará que el texto flote al lado derecho de la página. Este enlace también puede tener un atributo href con un valor de un hash. Esto significa que cuando un usuario haga clic en este enlace, serán redirigidos de vuelta a esta página principal y luego comenzará en la parte superior de la página. Echemos un vistazo a esto. Refresca, haz clic en volver a arriba y luego la página se recarga justo en la parte superior así que ahí está nuestro enlace back to top. Entonces justo después de esto podemos agregar un nuevo conjunto de etiquetas p. Esto va a contener nuestro texto de Gourmet Burgers con el símbolo de copyright y luego añadir dos enlaces, que va a ser para casa y ubicaciones. Justo después de esta etiqueta p de apertura, voy a agregar la entidad HTML del copyright, que es copia ampersand y un punto y coma, y luego el textil de las hamburguesas Gourmet 2018. Entonces voy a añadir una segunda entidad HTML, que se llama mid dot. Esto simplemente va a ser un punto que separará este texto aquí de los enlaces que vamos a agregar en el siguiente. A continuación, podemos agregar dos enlaces para el hogar y ubicaciones aún dentro de esta etiqueta p aquí. Añadamos nuestro primer enlace con el texto de casa. Esto puede tener un atributo href vacío, ya que no tenemos nada a lo que enlazar. Justo después de este enlace, también podemos agregar este punto medio una vez más para separar nuestros dos enlaces y luego podemos agregar nuestro último enlace, que va a ser para todas las ubicaciones. Nuevamente, esto también puede tener el href vacío, dar que un guardar, fuera al navegador. Bien. Entonces si acercamos y luego nos desplazamos hacia abajo hasta la parte inferior, hay un enlace que está de vuelta a la parte superior, que se flota a la derecha con esta utilidad aquí entonces tenemos nuestro símbolo de copyright y el texto de Gourmet Burgers, un punto en entre para separar nuestros enlaces de casa y ubicaciones. Esto es ahora para nuestro proyecto y también nuestras utilidades de espaciado. Espero que ahora puedas ver cómo usar Bootstrap realmente nos puede dar un comienzo a la hora de construir sitios web. Por supuesto, todos los estilos predeterminados no siempre van a ser exactamente lo que estamos buscando y se anima a anularlos y hacer personalizaciones que se adapten a tus necesidades. Esto es ahora para nuestra búsqueda Bootstrap y nos vemos en la siguiente sección. 33. Gracias: Enhorabuena por llegar al final de este curso. Espero que ahora estés mucho más cómodo colocando sitios web, usando el CSS Flexbox, Grid, y Bootstrap 4. Empezamos desde el principio, echando un vistazo al CSS Flexbox. Después pasamos al sistema CSS Grid, que es una forma increíble de crear casi cualquier tipo de diseño que puedas imaginar. Por último, aprendió a usar un framework Bootstrap 4 para permitirnos crear sitios web de gran aspecto realmente rápido. O mientras construyes un sitio web de restaurante de hamburguesas, solo pon en práctica todo lo que aprendiste. Recuerda todo esto es sólo la segunda parte de este curso. Así que asegúrese de revisar la siguiente parte, para obtener un conocimiento más profundo, y aprender todo lo que necesita saber para construir aplicaciones de pila completa. Adiós por ahora, y te veo en la siguiente parte de este curso. 34. ¡Sígueme en Skillshare!: Enhorabuena enorme de mi parte por llegar al final de esta clase. Espero que realmente lo haya disfrutado y haya adquirido algún conocimiento de ella. Si has disfrutado de esta clase, asegúrate de revisar el resto de mis clases aquí en Skillshare, y también sígueme para cualquier actualización y también para estar informado de cualquier clase nueva a medida que estén disponibles. Gracias una vez más, buena suerte, y ojalá te vuelva a ver en una futura clase.