Transcripciones
1. Introducción: Al construir sitios web o aplicaciones, Bootstrap es una de esas herramientas que realmente pueden ayudar no solo a los principiantes, sino a los desarrolladores de todo nivel de habilidad para ponerse en marcha muy rápido. Sólo hemos conocido un poco de CSS y HTML. Realmente puedes crear algún proyecto de aspecto increíble simplemente agregando algunas clases simples a tu HTML. No solo se verán geniales tus sitios web, también
habrá respuesta totalmente, lo que significa que habrá optimizado para todos los tamaños de pantalla diferentes. ¿ Quién soy yo? Mi nombre es Chris y soy desarrollador web y llevo 20 años involucrada en la construcción de sitios web. También llevo más de cinco años enseñando estas habilidades y activamente usando Bootstrap desde las primeras versiones. Bootstrap es una gran herramienta para principiantes que quieren golpear el suelo corriendo, lo que te permite construir unos sitios web de gran aspecto, que también son realmente personalizables. Bootstrap no se trata solo del look and feel ahora, también
podemos agregar características como menús desplegables, carruseles de
imagen, también la capacidad de mostrar y ocultar contenido y mucho más, todo sin necesidad de saber sobre JavaScript. A lo largo de este curso, aprenderás todos los conceptos clave necesarios para usar Bootstrap. Empezamos por decidir sobre tu haz de proyecto. Para que podamos construir algo que sea totalmente personalizado para ti y refleje tus aficiones o intereses. Después pasa a mirar todas las características esenciales de Bootstrap, que cuenta con el sistema de cuadrícula, puntos de ruptura, utilidades, componentes y trabajando con bibliotecas de terceros, los iconos add. No necesitas ser un experto en HTML, CSS, o JavaScript para empezar. Todo lo que necesitas es una comprensión básica de HTML y CSS para ponerte en marcha. Al final de esta clase, tendrás todas las habilidades y conocimientos que
necesitas para construir sitios web de gran aspecto y receptivos. Gracias por tomar un interés y empecemos con esta clase.
2. ¿Por qué usar Bootstrap?: A lo mejor has tomado este curso y no un 100 por ciento seguro de lo que es Bootstrap. O tal vez ya has oído hablar de él antes, pero no entiendes del todo qué papel juega en un proyecto web. Bueno, ahora te voy a dar una visión general de lo que Bootstrap puede hacer. No vamos a ir demasiado profundo por el momento, ya que creo que algunas cosas están mejor demostradas a medida que avanzamos. Pero al menos podemos conseguir un entendimiento básico. Al empezar con algo nuevo, generalmente, lo primero que queremos saber es ¿qué
es exactamente y cómo puede beneficiar a nuestros proyectos? Con Bootstrap, que actualmente se encuentra en la versión cuatro. Se puede pensar en esto como un kit de herramientas para construir proyectos HTML, CSS y JavaScript. Podemos construir sitios web y aplicaciones utilizando nuestras habilidades HTML y CSS existentes. De hecho, ni siquiera necesitamos conocer JavaScript adelantado para empezar y aprovechar las características de Bootstrap. Con Bootstrap, no necesitamos aprender un nuevo lenguaje de programación. No es un marco complicado ni nada por el estilo. Simplemente se basa en nuestras habilidades existentes y agrega algunas características agradables, generalmente agregando algunas clases CSS. Por lo que podríamos pensar en Bootstrap como una mano de ayuda para nuestros sitios web o aplicaciones. Simplemente podemos dejarlo caer en nuestros proyectos y sabremos cómo hacerlo muy pronto. Otra gran característica de Bootstrap es que es full responsive por defecto. Significa que se verá genial en todos los tamaños de pantalla. Entonces si estamos usando un dispositivo de tamaño móvil pequeño, como vemos aquí, generalmente
tendremos el contenido apilado de arriba a abajo o verticalmente en el ancho completo de la pantalla. Una vez que tengamos más espacio disponible en pantalla, como una tableta o un escritorio, posible que tengamos el contenido apilado lado a lado, ya que tienes más ancho disponible. Otra gran característica de Bootstrap es que nos permite desarrollarnos a un ritmo mucho más rápido. Esto lo hace al proporcionarnos un CSS base y JavaScript, que podemos caer en nuestro proyecto y utilizar como un gran punto de partida. El CSS base proporciona algunos valores predeterminados sensatos que podemos necesitar, como algunos espaciados, algunos remates y márgenes, y algunos colores y fuentes por defecto. Todo lo que utilizamos desde los archivos CSS y
JavaScript base se puede personalizar por completo también. Esto se debe a que no queremos que todos los proyectos de Bootstrap, los que creamos, u otras personas crean también, vean exactamente iguales. Por lo que Bootstrap nos da la flexibilidad para modificar cada estilo o clase que aplicamos a nuestro proyecto y hacerlo completamente nuestro propio. Otra buena cosa de Bootstrap es que es amigable para principiantes. Todo lo que necesitamos saber de frente es algo básico de HTML y CSS. Podemos entonces implementar gradualmente bootstrap en nuestro proyecto cuando lo necesitemos. De hecho, no necesitamos conocer ningún JavaScript para empezar con Bootstrap, el Mobile First Styling in, y cosas como un menú desplegable, carruseles, modales, o spinners de progreso son todos realmente sencillos de agregar a nuestro proyecto . No necesitamos conocer ningún JavaScript antes de usarlo. Por lo que este es un resumen básico de lo que es Bootstrap. Por supuesto, buceará mucho más profundo a lo largo de este curso. Actualmente estoy en la página de inicio de Bootstrap, que es getbootstrap.com. Dentro de la barra de navegación arriba en la parte superior, podemos ver que actualmente estamos en la versión cuatro y también hay referencias a la versión dos y tres. Con la versión tres todavía siendo activamente mantenida y utilizada en muchos lugares. Pero para este curso, nos vamos a centrar en la versión cuatro. Una vez que conoces una versión importante, sin embargo, para ser honesto, no
es demasiado difícil usar una versión más nueva si necesitas trabajar en un proyecto más antiguo. La mayoría de los conceptos básicos son los mismos y la documentación es bastante buena también. También en la navegación se encuentra un enlace de ejemplos. Si nos dirigimos a aquí, podemos ver muchos ejemplos como un álbum, precios, una página de pago, una página de producto, y un carrusel por ejemplo, y si queremos aprovechar alguna de estas plantillas de inicio, todo lo que necesitamos hacer es dar click en el ejemplo. Después podemos hacer clic derecho y luego ir a Ver página Fuente y esto se abrirá en una nueva pestaña. Podemos entonces agarrar todo el código desde aquí copiando y pegando y llevárnoslo a nuestro propio proyecto. Este es un iniciador útil para muchos tipos de páginas y también puedes editar libremente según sea necesario. Si volvemos a las plantillas, podemos ver un ejemplo de algunos de los componentes de Bootstrap. Tenemos una navegación superior con nuestros enlaces y también nuestro cuadro de búsqueda en la parte superior. Este es un componente preconstruido usando Bootstrap y también hay muchas de nuestras variedades también. Debajo de esto tenemos un carrusel giratorio donde podemos agregar diferentes imágenes y también texto. Podemos desplazarnos entre ellos usando estos botones izquierdo y derecho. En la página anterior se muestran muchos ejemplos de lo que Bootstrap puede hacer. También voy a utilizar muchos de estos componentes a medida que pasemos por el curso. Entonces esta es una mirada visual de lo que Bootstrap puede hacer. Pero, ¿cómo funciona Bootstrap? Comenzamos con HTML regular. Por lo que no hay nuevos idiomas ni habilidades que aprender. La mayor parte es solo un caso de agregar algunas clases CSS. Aquí en esta diapositiva es solo una lista normal de HTML desordenada con algunos elementos de lista dentro. Incluso cuando se usa Bootstrap, comenzamos con el mismo HTML regular. Abajo en la parte inferior, vemos lo que se muestra dentro del navegador por este HTML por defecto. Tenemos cinco artículos de lista que parecen bastante llanos y con algunas balas por cada artículo. Aquí está el mismo código HTML. Pero esta vez con algunas clases de Bootstrap agregadas, la lista desordenada tiene dos clases de list-group y list-group-flush junto con los elementos de lista que tienen una clase de list-group-item. Nuevamente, en la parte inferior vemos cuál será la salida en el navegador. Este inmediato se ve mejor. Tenemos algún espaciado agradable, una línea intermedia, y también se quitan las balas. Este es sólo un punto de partida, por lo que si no nos gusta algo del diseño, todavía
podemos sobrescribir cualquier parte del mismo con nuestro propio estilo personalizado. Bootstrap solo nos hace ir con algunos estilos predeterminados y mejores prácticas, que generalmente se ven bien en todos los tamaños de pantalla. Pero, ¿qué están haciendo exactamente estas clases? Bueno, la respuesta no es nada especial en absoluto. Al igual que cuando escribimos una clase de nosotros mismos, esto sólo apunta a algún código CSS. En la parte inferior izquierda de esta diapositiva se encuentra el CSS Bootstrap o la clase list-group-item. Simplemente agrega algunos valores para la posición, la pantalla, la adición, el color de fondo y el borde. De nuevo, siempre podemos sobrescribir cualquier cosa que no nos guste. También vemos el efecto que tiene bootstrap, esta es la versión final de mi proyecto. Si vamos a hacer clic derecho e inspeccionar, esto abrirá las herramientas de desarrollador. Podemos ver cuando estiramos el navegador y también lo encogemos. Eso sin la caja Bootstrap es totalmente receptivo. No obstante, si entramos en la sección de cabecera y retiramos el enlace al CSS Bootstrap. Voy a eliminar este elemento. Podemos ver de inmediato que se está quitando Bootstrap, perdemos todo el estilo y el diseño y también toda
la capacidad de respuesta que viene con Bootstrap y si
recargamos, podemos ver que ahora se está reaplicando Bootstrap. Entonces esto es lo que es Bootstrap y por qué lo usamos. A continuación vamos a empezar en nuestro proyecto eligiendo tu tema.
3. Elige la temática de tu proyecto: Este proyecto abarca muchas de las características y componentes esenciales que Bootstrap tiene para ofrecer como barras de navegación, listas, uso de formularios, tarjetas, imágenes, y mucho más, todo al mismo tiempo que nos toca el sistema de cuadrícula Bootstrap y cómo podemos nuestro contenido para ser totalmente receptivo y lucir muy bien en todos los tamaños de pantalla. Entonces esta es la página de inicio para la versión final, en la
que voy a construir. Arriba en la parte superior también tenemos una página de precios, que aprovechará las tarjetas Bootstrap, junto con una página de contacto con nosotros para descubrir cómo podemos usar formularios en Bootstrap. Esta es solo mi versión del sitio. Puedes o seguir con el mismo proyecto exacto que estoy construyendo, cual está perfectamente bien si solo quieres aprender lo que Bootstrap tiene para ofrecer, o en su lugar, si tienes cierta idea a la mente o simplemente te sientes un poco creativo, puedes cambiar completamente el tema y hacerlo tuyo a medida que avanzamos. Todo lo que necesitarás además de tus ideas, son algunas imágenes para usar. Si nos desplazamos hacia abajo a la sección, aquí ahora las cuatro imágenes que estaré usando. Estos también se han proporcionado para su uso con este curso. Si eliges tu propio tema o diseño, también
puedes seguir adelante y encontrar algunas imágenes que quieras usar para reemplazar estas cuatro. Si nos desplazamos hacia arriba, también tenemos algunos iconos en una sección y estos son proporcionados por la biblioteca de iconos Font Awesome, que pronto estaremos agregando. También puedes cambiar fácilmente estos iconos a cualquiera de estos que se adapten a tus proyectos. También puedes cambiar cualquier otra cosa en este sitio web usando un componente o utilidad diferente, y veremos cómo hacerlo pronto. Por lo que una vez que hayas elegido tu tema y tengas alguna imagen que te gustaría usar, entonces
podemos pasar al siguiente video donde vamos a empezar
a establecer un Bootstrap en nuestro editor de texto.
4. Configurar un proyecto en Bootstrap 4: Al igual que con cualquier proyecto de sitio web, necesitarás un editor de texto para empezar. Voy a estar usando Visual Studio Code, que es un gran editor y el que uso diariamente. Está disponible para descargar para Mac, Windows y Linux, y también es de uso gratuito también. Puedes descargarlo desde este enlace aquí si lo necesitas o puedes usar cualquiera de la alternativa si lo prefieres. Para empezar a incluir Bootstrap en nuestro proyecto, hay varias opciones que podemos fusionar. Contamos con un CDN, podemos autohospedar archivos dentro de nuestros proyectos, o podemos usar un gestor de paquetes como hilo o mpm. Este es probablemente el camino a seguir si se utiliza un nodo proyectos o Ruby on Rails, o algo que aproveche un gestor de paquetes. No obstante, esto no va a ser algo que estaremos cubriendo en este curso de inicio. En cambio, nos vamos a centrar en la opción CDN, que significa Content Delivery Network. Bootstrap nos tiene cubiertos para usar esto realmente fácilmente. Provee en el sitio web de Bootstrap con un enlace para los archivos JavaScript y CSS, que fácilmente podemos caer en nuestro proyecto. Tiene diversos beneficios para nuestro usuario final, en su mayoría relacionados con la velocidad. Dado que el CDN de Bootstrap se encuentra en varios centros de datos de todo el mundo. Esto significa que nuestros archivos y carpetas serán atendidos más rápido
al usuario final porque es más que probable que sea un centro de datos en algún lugar cercano. Esto también tiene el beneficio de que el centro de datos también puede tener una versión en caché de los archivos para dar como resultado una aún más rápida y rendimiento. Múltiples centros de datos también significan que nuestros archivos
generalmente estarán más disponibles ya que si un centro de datos está caído, habrá múltiples ubicaciones a las que volver a caer. Los proveedores de entrega de contenido también suelen agregar algunas medidas de seguridad, junto con posiblemente agregar algo de equilibrio de carga para sitios web de alto rendimiento también. Otra opción es ir auto alojado. Esto básicamente significa que descargamos una copia de
todos los archivos JavaScript y CSS de Bootstrap requeridos. Entonces podemos hospedarlos dentro de nuestro propio proyecto. Hacemos esto tal como haríamos con cualquier otro archivo JavaScript o CSS, los descargaremos, los incluiremos dentro de nuestro directorio de proyectos, y luego los vincularemos dentro de nuestros archivos HTML. Esto tiene el beneficio de darnos el control total de nuestros archivos y carpetas y cómo nos gustaría estructurarlos, de
dónde nos gustaría guardarlos y guardarlos en nuestros propios centros de datos o servicio. Esta es una forma realmente rápida y fácil de empezar a hacerlo. Bootstrap también proporciona esto como un simple uso de descarga para caer dentro de nuestros proyectos. Otro beneficio también, es que si nuestra aplicación está destinada a ser utilizada fuera de línea, todavía
tendremos acceso a estos archivos cuando los necesitemos. Volver a la página de inicio de Bootstrap, que es obtener BootstrApped.com. Ahora voy a empezar con Bootstrap haciendo clic en el enlace “Documentación”, y hacia la navegación y luego hacia la sección “Introducción”. Este quickstart involucra los enlaces CDN
tanto para el CSS como también para los archivos JavaScript que se requieren. Como alternativa también podemos descargar Bootstrap nosotros mismos y colocarlo en nuestro proyecto también, igual que mirábamos antes. Esto implica tomar los archivos CSS y JavaScript, colocarlos en nuestra carpeta de proyectos y luego vincularlos usando
etiquetas de estilo y script agradables tal como haríamos si nos vinculáramos en él a nuestros propios archivos CSS y JavaScript. Solo se necesita un archivo CSS pero como puedes ver, hay tres archivos JavaScript diferentes, los cuales necesitamos incluir. Bootstrap utiliza JavaScript para ciertos componentes y si hace clic en este desplegable, que está justo aquí, podemos ver exactamente qué componentes requieren estos archivos JavaScript. Por lo que esto nos permitirá dejar fuera ciertos archivos JavaScript si no estamos usando alguno de estos componentes aquí, ahora
podemos ir a incluir todos los archivos. De alguna manera el uso completo de todos los componentes. Podemos crear nuestra propia página de índice y copiar sobre todos estos enlaces o si nos desplazamos hacia abajo, podemos copiar la plantilla iniciada desde abajo. Entonces haga clic en esto. Esta es solo una página de índice básico donde tenemos nuestros enlaces a nuestro CSS y también nuestro fondo asombrado final libre para incluir nuestro JavaScript. Por lo que acabaremos de copiar. Ahora voy a ir al escritorio y crear una nueva carpeta para todos los proyectos y por supuesto puedes almacenar esto en cualquier parte de tu sistema. Voy a llamar a mi proyecto “Productividad Bootstrap”. A continuación, ábrelo en Visual Studio Code arrastrando sobre la carpeta. El primer archivo que necesitamos va a ser nuestro index.html. Vamos a crear un nuevo nombre de archivo este index.html y luego podemos pegar en estos datos de antes. El primero que queremos hacer es cambiar el título para que sea productividad
Bootstrap o el título de tu elección y luego podemos abrir esto dentro del navegador. La forma en que podemos hacer esto es entrar en nuestra carpeta del proyecto y hacer doble clic en la página de índice o en Visual Studio Code, podemos hacer clic derecho en el título y luego ir a “Copiar ruta” y luego pegarlo como una nueva pestaña en el navegador. Todo lo que tenemos aquí es un encabezado HTML regular poner nuestro proyecto ahora está configurado y listo para salir. En el siguiente video, donde descubriremos cómo Bootstrap utiliza contenedores y filas.
5. Contenedores y puntos de ruptura: Antes de mirar contenedores y filas, quiero asegurarme de que tengas un agarre sobre los puntos de ruptura y cómo pueden cambiar el diseño y el estilo para dispositivos de diferentes tamaños. Esto no sólo va a ser importante para aprender Bootstrap, sino también para entender los contenedores que vamos a ver. Verlas en acción, podemos pasar a la página de inicio de bootstrap, cual tenemos abierta aquí, luego reducir el navegador a un ancho pequeño. Simular cómo se vería el sitio web en un pequeño dispositivo móvil. Como vemos aquí, el contenido generalmente se apila verticalmente. Sólo las secciones ocupan el ancho completo para la pantalla. Si seguimos adelante sin embargo y hacemos que el navegador un poco más amplio y así cambia el contenido, igual que los tenemos ahí, este súbito salto en el contenido se llama puntos de ruptura. Parte del contenido que vemos ahora está lado a lado. Tenemos el texto en el lado izquierdo, en el ícono de la derecha, ahora tenemos más espacio disponible en pantalla. Si estiramos aún más el navegador, simula una vista de escritorio. De vez en cuando, veremos un salto en los contenidos y estos puntos de ruptura nos
permiten aplicar diferentes estilos y maquetación a diferentes dispositivos de pantalla. Los puntos de ruptura se crean en CSS usando una consulta de medios. Una consulta de medios es básicamente una forma de agrupar reglas CSS. A continuación, Bootstrap aplicará estas reglas de estilo cuando el navegador tenga un cierto ancho. Bootstrap también toma un primer enfoque móvil, lo que
significa que generalmente está diseñado para pantalla pequeña primero. Podemos entonces cambiar las reglas CSS a medida que aumenta el ancho del dispositivo. Bootstrap también tiene oversizes a los que utiliza como puntos de ruptura y que estos puntos de ruptura predeterminados hacen que bootstrap responda fuera de la caja. Como podemos ver aquí, Bootstrap aplicará reglas CSS para diferentes dispositivos ya que se convierten en un ancho mínimo de 576 píxeles, 768, 992 y 1200 píxeles y superiores. También liberamos a antodies o creamos nuestros propios puntos de ruptura tamaños a. Observe para que no haya consulta de medios para los tamaños de dispositivo de cero a 576 píxeles. Este tamaño no es requerido ya que este es el predeterminado Bootstraps todos modos y luego podemos construir sobre él con cualquier consulta de medios más grande, ahí el nombre móvil primero. Entender estos puntos de ruptura también nos ayudará a entender que el sistema de cuadrícula, que vamos a utilizar, empezando por contenedores. Como requisitos cuando se utiliza con rejillas, agregamos de un contenido dentro de un contenedor. Un contenedor puede ser cualquier elemento HTML como un div o una sección, pero lo nombraría clase contenedor. Podemos usar este contenedor como envoltorio principal, por lo que podemos controlar el contenido dentro agregando cosas como relleno y alineación. Al trabajar con Bootstrap versión cuatro, existen tres tipos diferentes de contenedores de los que podemos hacer uso. Podemos agregar un contenedor como nombre de clase a cualquier elemento HTML como un div circundante o una etiqueta de sección. El nombre de primera clase, que vamos a ver es simplemente contenedor, y se usa un contenedor para agregar un contenedor de ancho fijo a nuestro contenido. Por ejemplo, si tenemos una página web que se ve así, generalmente
querríamos dividir nuestra página web en múltiples secciones, por lo que es posible que queramos una sección de encabezado en la parte superior y luego algunas acciones de contenido justo debajo. Utilizamos la clase container para agregar un ancho fijo propio a todo el contenido, igual que vemos aquí. En este ancho fijo depende de los puntos de rotura actuales, dejando algún espacio en blanco en el lado izquierdo y derecho. No obstante, ahora si quisiéramos agregar un contenedor que es el ancho completo de la página, entonces
haríamos uso de una clase llamada contenedor-fluido, por lo que se trata de un contenedor-fluidos. Entonces independientemente del tamaño de la pantalla, si se tratara de un dispositivo móvil o de un escritorio o una tableta, el contenedor siempre sería el ancho completo de la pantalla, estirándose para ser un 100 por ciento en todos los tamaños verdes. También hay un tercer tipo de contenedor que podemos usar en Bootstrap también, y esta es una mezcla entre estos dos. Podemos hacer esto agregando una clase de contenedor combinada con un punto de ruptura, así que tendríamos contenedor y luego dash, y luego vamos a agregar un punto de ruptura como sm o md. Por ejemplo, con container-md tendría una página web igual que antes. Para el tamaño de pantalla más pequeño disponible, que es el acceso, el contenedor sería un 100 por ciento del ancho total. Básicamente, para empezar, se vería como éste justo aquí, sería el ancho completo. Entonces, una vez que la pantalla golpeaba los puntos de ruptura del dispositivo de tamaño mediano, entonces cambiaría para tener algo de espacio en ambos lados, por lo que se vería como el contenedor regular. Es así como funcionan los contenedores en teoría, y ahora vamos a echar un vistazo a cómo podemos agregarlos a nuestros proyectos. Si volvemos a nuestro editor de texto donde configuramos nuestra página de índice, voy a eliminar el encabezado nivel uno de hola, mundo y luego agregar algún contenido inicial con el que trabajar. Voy a añadir una sección como nuestro envoltorio. Dentro de aquí podemos agregar un encabezado nivel uno y le
voy a decir a la lista que sea el contenido para mi versión final. El texto voy a agregar la solución de productividad integral y, por
supuesto, puedes cambiarla para que se adapte a tus proyectos particulares. Entonces debajo voy a agregar algún texto de recuperar el control con nuestras herramientas efectivas, en una interfaz de usuario sencilla de usar, personalizable. Por último, podemos terminar esta sección con un enlace a un botón de Comenzar. Si ahora le damos un guardado a este archivo y pasamos al proyecto en el navegador, si nos recargamos, ahora podemos ver el contenido simplemente podemos agregarlo. Lo primero que voy a hacer es agregar un contenedor a nuestra sección de envoltura y podemos hacerlo agregando una clase regular. El nombre de la clase es un cálido que enlaza con nuestro CSS Bootstrap, y este es el nombre de clase del contenedor. Si le damos un guardado a este archivo y ahora echa un vistazo a esto en el navegador recargando, aún
tenemos el texto que se añadieron antes, pero es difícil ver exactamente qué efecto tiene el contenedor en este momento, así que voy a añadir un color de fondo temporal. Podemos hacerlo de nuevo con una clase Bootstrap de bg-dark, y esto nos dará un color de fondo oscuro. Este fondo oscuro nos da la oportunidad de
ver el contenedor de fondo con más detalle. Vemos a la izquierda y a la derecha tenemos este ritmo de blancos, por lo que este contenedor es de un ancho fijo. Si reducimos el navegador hacia abajo, veremos que los puntos de rotura harán tamaño
del contenedor cambie para que se ajuste al espacio disponible. También podemos agregar el contenedor-fluido y ver cómo se ve esto en la práctica también. Vuelva a cargar el navegador, y como hemos visto antes en la pizarra, esto se extenderá hasta el ancho completo disponible independientemente del tamaño de pantalla. El tercer tipo de contenedor que miramos es un enlace a puntos de ruptura. Si tenemos un container-md, esto cambiará nuestro tipo de contenedor en dispositivos medianos, que es de 768 píxeles y superiores. lodos encogen el navegador al tamaño pequeño. Podemos ver que tenemos un contenedor de ancho completo, y una vez que lleguemos a los dispositivos de tamaño mediano, esto permitirá que cambie para ser un contenedor regular. Voy a reinstalar esto para que sea un contenedor-fluido ya que este es uno que voy a estar usando en mi proyecto pero puedes elegir el contenedor que mejor se adapte a tu proyecto. También, ahora entendemos lo que está haciendo el contenedor. También voy a cambiar los colores de fondo para que sean claros. Todo lo que necesitamos hacer es cambiarlo para que sea bg-light, dejándonos con un color de fondo claro como se esperaba. El siguiente en descubrir dos piezas más importantes de la cuadrícula, y así es como utilizar filas y columnas.
6. Filas y columnas: Las siguientes partes del sistema de cuadrícula Bootstrap para llegar al ancho de rejillas es usar las filas y columnas. Se agregan tanto filas como columnas dentro de nuestros contenedores, que acabamos de ver y utilizar para el diseño de un contenido. Empecemos echando un vistazo a cómo podemos usar filas dentro de nuestros contenedores. En el último video, miramos los principales tipos de contenedor que podemos utilizar. Aquí tenemos una clase de contenedor y luego debajo de esto, un fluido de contenedor anidado dentro de estos contenedores, podemos dividir nuestro contenido en filas. Se trata de áreas de contenido que abarcan toda la página. Podemos tener tantas filas anidadas dentro como queramos. Podemos hacer esto tanto en el contenedor como también el fluido de salpicadero del contenedor junto con el contenedor utilizando unos puntos de ruptura estándar. Si echamos un vistazo a nuestras filas con más detalle, encima del lado derecho, podemos entonces dividir nuestras filas en columnas. Esta es una forma de declarar lo amplio que queremos que nuestro contenido esté dentro de nuestra fila. Bootstrap utiliza un sistema de cuadrícula de 12 columnas, lo que significa que el ancho de la página se divide en 12 secciones. Si queremos que el contenido genere el ancho completo disponible, declaramos que queremos que esta sea de 12 columnas de ancho. Si quisiéramos dividir nuestra fila en dos secciones iguales, la forma en que lo haríamos si tuviéramos un área de contenido a la izquierda. Tiene un div y luego uno a la derecha. Podemos establecer estos dos para que sean de seis columnas de ancho, lo que equivale a 12 partes. Si quisiéramos dividir una fila de burbujas en tres partes iguales, configuraríamos esto para que tuviera cuatro columnas de ancho. Agrega una fila separada justo debajo de esto. Por ejemplo, un div en el lado izquierdo, uno en el centro, y luego uno a la derecha. Estableceremos esto para que sean cuatro columnas cada una. Recuerda desde el principio del curso, dijimos que Bootstrap por defecto es móvil primero y esto también se aplica a las columnas. Cuando se trata de un dispositivo móvil que tiene una pantalla estrecha como esta. Para empezar, las columnas siempre serán el ancho completo de la página. Siempre abarcarán el ancho completo del puerto de vista. Entonces después de ciertos puntos de ruptura, entonces
necesitamos decirle a Bootstrap cuándo
salir y luego dividirnos en estas columnas así como así. El modo en que hacemos esto es aplicar algunas clases de Bootstrap a tus elementos HTML, igual que hicimos con los contenedores. De lo que vamos a hacer esto ahora poniendo esto en práctica dentro de nuestros proyectos. Si echamos un vistazo al contenedor que creamos en el último video, tenemos nuestro contenido dentro, pero no tenemos filas ni columnas para estructurar estos contenidos. Si quitamos esto de nuestra sección, ahora
voy a sumar dentro de nuestra primera fila. Podemos agregar esto como una clase a cualquier elemento, como un div. Podemos preguntar la clase de fila, y esto va a ser un envoltorio para nuestras columnas den a todas nuestras secciones algún espacio entre medias, para que no se
estén tocando entre sí a través de la página. Anidados dentro de esta fila, ahora
podemos crear múltiples secciones ocupando partes de nuestra cuadrícula de 12 columnas. Si quisiéramos que esto fuera la mitad del ancho de la página, podríamos agregar una clase la cual comienza nos col, ya que estamos usando columnas, entonces declaró una consulta de medios, a la
que quieres que esto se aplique, como un dispositivo de tamaño mediano. Entonces el número de columnas que queremos que las secciones tomen. Dijimos antes que Bootstrap está diseñado para ser mobile-first, lo que significa que todas nuestras secciones serían las 12 columnas completas de ancho por defecto. Lo que estamos diciendo aquí agregando esta clase es básicamente la pantalla 1c está oculta. Un dispositivo de tamaño mediano [inaudible] cambia para tener sólo seis columnas de ancho. Después anidados por dentro, podemos sumar los contenidos que acabamos de quitar antes. Guarda esto, y pasa al navegador. Ahora vemos que nuestro contenido ocupa la mitad del ancho de la página. Si reducimos esto para ser un tamaño móvil, ahora
se convierte en el ancho completo de la pantalla. Volver al dispositivo de tamaño mediano. Esto ocupará ahora seis columnas de la pantalla. Generalmente el contenido comienza como el ancho completo. Ya que Bootstrap es móvil primero, hasta que lo
vendamos de otra manera, podríamos por supuesto cambiar este MD en el nombre de la clase para que sea un dispositivo pequeño o grande si quisiéramos cambiar a seis columnas en un momento diferente. Ahora la parte superior aquí es cómo tenemos nuestra sección actualmente. Está alineado a la izquierda. Estoy dejando espacio en el lado derecho por seis columnas más. Pero una vez queríamos que este contenido permaneciera la
mitad del ancho de la pantalla, empujado hacia el medio. Hay múltiples formas de hacer esto en Bootstrap. Algunas formas comunes de utilizar el CSS Flexbox, o podemos usar un offset, como vemos en la parte inferior. Si empujas esto por tres columnas, centrará los contenidos. De nuevo, también podemos afinar el punto de ruptura. Pasemos al editor de textos y antes de esto. Podemos agregar un offset. Nuevamente en dispositivos de tamaño mediano, la gran parte de tres columnas. Esto significará que nuestro contenido sigue ocupando la mitad del espacio, y las otras tres columnas, una distribuida antes y después. Guardar y recargar. Ahora nuestro contenido está centrado en la mitad de la página. Nuevamente, si reducimos el navegador hacia abajo por debajo de los dispositivos de tamaño mediano, este siempre será el ancho completo de la página. Todavía queda algo de afinación más fina para hacer frente a este apartado. Volveremos a donde veremos las clases de utilidades. Esta es una introducción al uso de filas y también columnas dentro de nuestros proyectos bootstrap. Haremos mucha más práctica a través de este curso. A continuación, vamos a pasar a echar un vistazo al uso de listas y grupos de listas.
7. Listas y grupos de listas: Ahora tenemos una mejor idea de cómo podemos hacer uso del sistema de cuadrícula Bootstrap, ahora
vamos a pasar a agregar algo más de contenido a nuestros proyectos, y más específicamente, vamos a echar un vistazo a cómo podemos usar las listas. Agregar una lista es justo lo mismo que cualquier otro elemento HTML regular, simplemente
agregamos nuestros elementos como haríamos normalmente, y luego podemos mejorarlo agregando algunas clases de bootstrap. Voy a la versión terminada la cual está abierta aquí. Esta es la zona que agregamos justo antes, y vamos a hacer que se vea un poco más bonita
así agregando algunas utilidades de bootstrap más adelante. Pero ahora vamos a desplazarnos hacia abajo a la siguiente sección que es esta parte justo aquí. Por encima de la izquierda, vamos a tener algo de texto y luego una lista a la derecha. Ya sabemos cómo crear este diseño, serán dos secciones iguales, ambas de seis columnas de ancho y como siempre, se
va a anidar dentro de una fila y un contenedor circundante. Por supuesto, si estás creando tu propia versión de esto, puedes agregar contenido diferente o secciones de diferentes tamaños si lo prefieres. Vamos a empujar y crear este grupo de listas, si sí quieres saber más sobre listas usando bootstrap y los diferentes tipos podemos
pasar a la documentación y esto está disponible dentro de los Componentes. Entonces si seleccionamos el grupo Lista, esto nos dará algunos ejemplos como listas con bordes,
lista con diferentes colores, lista sin bordes, también
puedes obtener los horizontales y estos son útiles para las barras de nav-bars. Pero ahora voy a ir al proyecto y empezar por crear una nueva sección justo debajo de la última. Esta sección va a tener la clase de contenedor, por lo que es un tamaño fijo. Entonces dentro aquí voy a crear un div, que va a ser nuestra fila, que es el envoltorio para nuestras columnas. Esto va a tener dos secciones ambas estas con una clase que se vuelve igual a la creatividad Col-MD-6. Aparecen lado a lado así de nuevo, solo para recapitular, ambas secciones serían el ancho completo de la página en un pequeño dispositivo. Entonces cuando esto llegue al dispositivo de tamaño mediano, entonces caerá hacia abajo para tener seis columnas de ancho. Empezando por la primera sección, que es el texto del lado izquierdo. Voy a añadir esto dentro de un p elementos con la clase de plomo. El plomo es una clase bootstrap que simplemente hace que el párrafo destaque se compromete, que voy a agregar es todas estas características, incluidas en todos los planes. Esta es una sección bastante sencilla. El siguiente sobre el lado derecho de la página va a ser la sección de nuestra lista. Como siempre, con bootstrap, comenzamos por crear nuestro marcado HTML estándar. Nuestra lista desordenada y luego dentro podemos crear nuestros artículos de lista. Para el wrapper que es la lista desordenada, va a recibir una clase de grupo de listas, que estableceremos nuestra lista desordenada para pasar el ratón tipo de visualización de flex, flex-direction para ser columna. Estos se apilan verticalmente y también restablecerá cualquier relleno y margen, hasta nuestro elemento de lista. Vamos a agregar una clase dentro de aquí para cada elemento individual y esto es lista-grupo-ítem. Esto va a sumar algún borde y espacio en para cada uno de nuestros ítems de la lista. El primero va a tener el texto de cientos de plantillas preconstruidas. Por supuesto, personaliza esto también a tus necesidades y
voy a copiar esto y pegar esto en tiempos anteriores. En el segundo tendremos el texto de calendario y programación. El tercero va a ser para recordatorios y alertas. El cuarto ítem de lista, que voy a elegir va a ser listas ilimitadas y a hacer páginas y finalmente, el último va a ser el texto de etiquetas personalizadas impares a tus tareas. Antes de ir más lejos, vamos a guardar esto y echar un vistazo a esto en el navegador, nos
da una actualización. A la izquierda, tenemos nuestro texto con la clase de plomo y luego la sección derecha, que es nuestro grupo de lista. Si hacemos clic con el botón derecho e
inspeccionamos para entrar en las herramientas de desarrollador, podemos consultar las clases que se habían aplicado a nuestra lista. En primer lugar, usemos inspector para pasar el cursor sobre nuestra lista, vaya a seleccionar la lista desordenada con la clase de grupo de listas. Como se mencionó anteriormente, este tipo de display ansi de flex, establece la dirección flex-y también nuestro relleno y margen. Si bajamos a nuestro elemento de grupo de lista, hacer click en este se revelará todo el CSS que se ha aplicado a nuestros ítems de lista. Podemos ver el efecto si desmarcamos alguna de estas casillas y podemos ver el efecto que tiene, como también hemos visto antes en la documentación bootstrap, la dirección de columna también se puede cambiar a una fila si queremos que esto sea una horizontal menú. Volvamos a nuestra lista desordenada donde podemos aplicar esto justo después de este grupo. También podemos cambiar esto para que sea grupo de lista horizontal y esto es útil para cosas como barras de navegación. Se ve un poco extraño porque aquí tenemos algunos elementos de lista larga, pero así es como podemos actualizar horizontalmente a través de la página. Si queremos quitar los bordes y también estas esquinas redondeadas, podemos cambiar esto para que se enlisten grupo al ras. Refresca y voy a dejar esta clase en su lugar para mi proyecto ya que esto es algo que personalmente antes. Pero recuerda que depende de ti cómo quieres darle estilo a tu proyecto. A continuación, voy a añadir un tick junto a cada elemento de la lista. Al igual que vemos si vamos a la versión final justo en el lado izquierdo aquí, vamos a agregar esto a nuestra lista ítems usando un span. El español va a contener un código de entidad HTML por lo que no es nada específico para bootstrap, solo HTML regular. Dentro de nuestro elemento de lista, justo antes de nuestro impuesto, va a agregar un span y el código de entidad HTML son los ampersands, los duros que un valor de uno, triple cero cuatro, y luego un punto y coma. Voy a agarrar esto y pegarlo en el resto de los ítems de nuestra lista. Tenemos el tick junto a cada uno de nuestros elementos de lista en el navegador. Si quieres cambios a un icono diferente, o lo que necesitas hacer es hacer una búsqueda códigos de entidad
HTML y no estarás seguro de tener opciones para elegir. Para parar también nos proporciona algunos colores de fondo los cuales puedes elegir para que estos elementos de la lista destaquen. Por ejemplo, podríamos agregar una segunda clase a nuestro elemento de lista de lista-grupo-ítem primario. Este es uno de los economistas proporcionados por bootstrap, y este es un tono azul. Si actualizamos el navegador y este es uno de los colores predefinidos establecidos por bootstrap. También hay más cerca, como peligro para el rojo,
éxito para el verde, y sí echa un vistazo a la documentación de bootstrap para obtener más colores disponibles. Incluir necesitan colores de fondo claros y oscuros, que miraban antes al trabajar con contenedores. Ahora voy a quitar estos colores ya que esto no es necesario por los proyectos. Podemos, por supuesto, incluir esto si lo prefiere. Por lo que te animaría a tener una jugada con estas clases de bootstrap
agregando y eliminando diferentes para ver exactamente lo que es posible usando bootstrap. También puedes consultar la documentación de bootstrap y ver la amplia gama de todas las clases que está disponible. También te animaría a sumergirte en las herramientas de desarrollador al agregar y quitar clases y luego puedes ver exactamente lo que está pasando entre bastidores. Con CSS se han agregado o eliminado clases para aplicar lo deseado y aspecto y tacto. A continuación, vamos a echar un vistazo a usar clases de utilidades así que te veré ahí.
8. Introducción a las utilidades: Ahora pasamos a las utilidades de Bootstrap las cuales básicamente nos ayudan a agregar CSS rápidamente a nuestros elementos. Aquí si hacemos clic en la Página Principal de Documentación en Bootstrap y luego bajamos a las utilidades dentro de la barra lateral. Esta es la sección donde encontraremos todas las clases de utilidades que Bootstrap tiene para ofrecer. Estos se utilizan para agregar fácilmente un estilo CSS común. Si miramos la barra lateral, podemos usarlas para agregar cosas como bordes, flex box, posicionamiento, sombras, espaciado, y mucho más. La mayoría de estos son autoexplicativos si ya conoces algún CSS. Por ejemplo, si vamos a las fronteras, todo lo que necesitamos hacer es agregar algunas de las clases de Bootstrap, como el borde, poner un borde por todo alrededor de nuestros elementos. Podemos agregar bordes a un lado en particular como la parte superior o inferior. Podemos quitar bordes de ciertos lados y también jugar con los colores y el radio también. Como puedes ver, Bootstrap generalmente nos proporciona algunas imágenes. Vea exactamente lo que están haciendo estas clases. También podemos hacer click en los colores, y esto es exactamente lo que miramos en el último video. Utilizamos el color primario, y esto también está disponible para su uso con texto también. También tenemos la luz y el color oscuro que
miramos antes para nuestros fondos de contenedores. Muchas de estas utilidades también se pueden utilizar en diferentes elementos. Por lo que no estamos restringidos a aprender cosas diferentes o elementos diferentes. También podemos hacer uso del flexbox CSS en Bootstrap. Podemos agregar fácilmente flexbox a nuestros elementos con el nombre de clase del flex, que significa tipo de display de flexbox. Desplazándose hacia abajo, podemos establecer las direcciones. Tenemos las columnas y filas habituales así como el reverso. También podemos justificar nuestro contenido. Alinee nuestros elementos, y acceda a cualquiera de las propiedades de flex box que tenemos con CSS regular, o agregando un nombre de clase a todos los elementos. También tenemos dimensionamiento si hacemos click en esto, donde podemos establecer la altura y el ancho de nuestros elementos. Entonces, por ejemplo, si quisiéramos que nuestro elemento tuviera un 50 por ciento de ancho, usaría la clase de W-50. Podemos reemplazar el W por una H para la altura, y esto establecerá la altura del elemento para que sea del 50 por ciento también. También tenemos otras opciones como también 100 por ciento y 25 por ciento, y haremos uso de más de estas a lo largo de este curso. Como puede ver, la mayoría de estos nombres se relacionan con el CSS que aplican y son bastante autoexplicativos, como texto izquierdo y borde superior. Pero hay uno que quiero mostrarles con más detalle, y este es el espacio y utilidad. espacio y las utilidades son margen
y relleno, y necesitamos construir un nombre de clase en tres o cuatro partes. Entonces echemos un vistazo a cómo podemos hacer esto ahora. Podemos aplicar utilidades de espaciado usando Bootstrap construyendo nombre de clase opaco. Esto lo hacemos con hasta cuatro propiedades diferentes las cuales podemos combinar para hacer que se agreguen nombres de clase opacos a nuestros elementos. Entonces lo primero que tenemos que hacer es decidir si queremos
agregar espaciado por un margen o relleno. Hacemos esto agregando una M para margen o P al inicio de nuestro nombre de clase. Lo siguiente que tenemos que hacer es decidir en qué lado del elemento queremos aplicar el espacio. Podemos aplicarlo a la parte superior del elemento, la parte inferior, a la izquierda, a
la derecha, como podemos ver aquí. O también tenemos la x en el eje y. Si lo aplicamos a la x, esto aplicará el espaciado tanto en la izquierda del lado derecho. El eje y es vertical, por lo que aplicaremos este espacio en él a la parte superior e inferior. Recuerda, Bootstrap está construido y diseñado para ser móvil primero. Por lo que cualquier margen o relleno que añadamos por defecto, se
aplicará automáticamente a los dispositivos extra pequeños bajo ambos. Después podemos agregar un punto de ruptura opcional como pequeño, mediano, grande, o extra grande, donde queremos cambiar el ajuste para el margen o relleno. Parte por defecto es para el agregar un tamaño de 0, 1, 2, 3, 4 o 5 o auto. Zero restablecerá cualquier margen y relleno y quitará esto de nuestros elementos. Tenemos el número 3, que está en medio. Esto aplicará un espaciado de una RAM. Si vamos más bajos que esto, esto es media RAM, y luego el número 1 aplica un cuarto de nuestra RAM. El valor de cuatro es igual a 1.5 RAMs, y luego el valor de cinco es igual a tres RAM. También tenemos la opción de auto 2. Al igual que el CSS regular, esta es la forma en que podemos aplicar un margen cero auto por ejemplo, y podemos hacer uso de esto. Entonces para el primer ejemplo arriba en la parte superior aquí tenemos una sección bastante estándar con un div anidado dentro. El lado anaranjado de la parte superior representa algún margen. Entonces, como vemos aquí, si quisiéramos agregar algún margen al div de la fila superior, podríamos hacer esto construyendo clase opaca. Podemos empezar seleccionando M porque queremos que se aplique el margen. Después de esto, seleccionamos fuera. Entonces uno es aplicarlo a la parte superior de nuestros elementos, y luego podemos elegir los puntos de rotura opcionales, o podemos dejarlo en blanco si quieres que esto se aplique a todos los tamaños de pantalla. Después de esto, luego seleccionamos el espaciado que queremos al final. Si queremos una RAM, iremos por un valor de tres. Para el siguiente ejemplo, tenemos un mismo div, voy a aplicar algún margen a la parte superior e inferior también. Al igual que antes, esto es margen, por lo que aplicamos el valor de M. Queremos que esto se aplique tanto a la parte superior como a la inferior. Por lo que puedo hacer uso del eje y dentro de aquí. Nuevamente, no vamos a usar ningún punto de ruptura específico. Entonces en cambio podemos agregar un valor, tú cosas a esto. Para el ejemplo adicional, tenemos algún relleno que está representado por el verde. Ahora como el relleno se agrega al interior de los elementos, agregaríamos esto a la envoltura principal en lugar del div, porque esto entonces aplicaría el interior de nuestros elementos div. Entonces para este ejemplo, escogeremos P. Ya que ahora estamos lidiando con el relleno. Añadimos entonces este el lado derecho para cubrirnos aquí. Entonces cualquier valor que quieras elegir. Vamos por cinco en este caso. Justo debajo de esto, tenemos algo de relleno, pero también queremos aplicarlo en el lado izquierdo y derecho. Entonces, en lugar de escribir dos reglas separadas, podemos hacer uso del relleno en el eje x. lo que este ejemplo sería relleno en la x. De nuevo, podemos agregar cualquier valor dentro de aquí. También podríamos cambiar esto para incluir unos puntos de ruptura. Entonces si quisiéramos que el relleno solo se aplicara en dispositivos medianos y superiores, podríamos hacerlo agregando un tercer argumento opcional. Por lo que puede agregar relleno en el eje x y luego guiar en un punto de ruptura de MD, y luego el valor de cuatro. Abajo en la parte inferior tenemos nuestro cuarto ejemplo, que es centrar y elementos en medio de nuestro div. El modo en que podemos hacerlo es aprovechando la propiedad auto, igual que lo haríamos por ejemplo, en CSS regular. Si aplicamos margen cero auto. Forma en que podemos hacer esto, podemos centrar esto en el medio del eje x con el valor de M y luego x. continuación, establecer el valor para que sea auto. Al igual que con CSS regular al usar la propiedad auto, sí
necesitamos tener en cuenta que el tipo de visualización debe estar configurado en bloque, y debemos tener un ancho ya establecido, lo contrario esto no se aplicará. Entonces esta es la teoría detrás del uso de nombre-espacio y utilidades. A continuación, pasemos a nuestro proyecto y pongamos esto en práctica.
9. Utilidades aplicadas: De vuelta a nuestro proyecto, lo primero que voy a hacer en la primera sección en la parte superior es centrar todo este texto en el medio. Podemos hacer esto con una clase simple. Si volvemos a nuestra primera sección, dentro de la envoltura, todo lo que necesitamos hacer aquí es agregar la clase todo text-center. Esto empujará todo el texto al centro de nuestra sección. También, si recuerdas de antes, alineamos la sección en el medio
proporcionando un desplazamiento de tres columnas en el lado izquierdo. Esto está bien y perfectamente bien de usar, pero ahora te voy a mostrar una alternativa, usando Flexbox. Si quitamos el offset de antes, esto significa que nuestra sección sigue siendo la misma, seis columnas de ancho, pero ahora tenemos esto sobre el lado izquierdo. Si estiramos esto hasta el tamaño más pequeño, este por supuesto será el ancho completo en dispositivos más pequeños o medianos. Vamos a empujar esto de nuevo al centro agregando el Flexbox a un contenedor. El contenedor es la fila. Podemos establecer el tipo de visualización para que sea flex y además agregar la propiedad de justificar contenido en el centro. Guarda esto, y como era de esperar, no
vemos ningún cambio en la pantalla pequeña. Pero si estiramos esto hacia fuera a los dispositivos de tamaño mediano, esto ahora está en el centro de nuestra sección para darle algo de espaciado. También podemos agregar algún margen y relleno, que acabamos de mirar. Empezando por el margen, lo construimos con m para margen, el eje y sólo desaparece en la parte superior e inferior y el valor de cinco, sobre al navegador. Esto se aplicará en todos los tamaños de pantalla. Una vez que lleguemos a la vista de pantalla más grande , al
igual que aquí, en su mayoría vamos a agregar algo de relleno para que esto sea un poco más grande. Esto se va a aplicar sólo en los puntos de rotura más grandes en el eje y. Entonces lg, el valor de cinco. Ahora bajamos a nuestro texto, que es el elemento p. Vamos a usar la clase de plomo que ya has mirado. Esto hará que el texto del párrafo destaque donde
solo necesitas el tamaño de la fuente y también el peso de la fuente. Bootstrap también tiene un montón de clases de utilidad para botones. Podemos añadir esto a nuestro enlace. La clase base que agregamos a todos los botones es btn. Entonces podemos definir qué tipo de botón queremos usar, junto con el color. El color se establece con las utilidades de color que hemos mirado antes, como primaria, secundaria, peligro y éxito. Voy a usar la clase de info, que es para un color azul. Podemos aplicar este color como un color de fondo sólido o un contorno de botones. En primer lugar, tenemos el color sólido, que es btn, seguido del nombre del color de info, dejándonos con el color de fondo sólido. Si queríamos que esto sólo fuera el color en el contorno, todo lo que hay que hacer es cambiar esto para que sea btn contorno, seguido del color justo después. Podemos entonces vincular estos botones a nuestra página de precios, que crearemos muy pronto. Desplazándose hacia abajo a nuestra siguiente sección. También podemos agregar algunas utilidades a esta sección también. Eso es suficiente con el contenedor, podemos agregar el margen en la parte superior e inferior como un valor de cuatro y luego un valor de relleno de dos. Esto le dará a nuestra sección con la lista un poco de espaciado. Lo siguiente que quiero hacer es alinear estos textos verticalmente dentro de esta sección. Podemos hacerlo agregando el CSS Flexbox, el contenedor. Podemos agregar el tipo de pantalla de flex, al igual que hicimos anteriormente. Entonces la propiedad CSS de align-item-center, y esto ahora debería empujar nuestro texto en el medio del div. Comprueba esto, también se ve bien en la pantalla pequeña. Ahora se ha aplicado el espaciado. Esto es solo un primer vistazo al uso de las utilidades de Bootstrap y cómo
podemos usarlas para que nuestro sitio se vea realmente bien y también sea totalmente receptivo. También haremos uso de muchas más utilidades
de bootstrap a medida que avanzamos con nuestro proyecto.
10. Agregar íconos con FontAwesome: En algún momento al construir un proyecto, un sitio web o una aplicación, es posible que sienta la necesidad de agregar algunos iconos para que sea visualmente más atractivo. En el pasado, he construido mis propios iconos a proyectos, pero no soy diseñador. Entonces para mí y puede ser mucho más conveniente llegar a
una biblioteca de terceros para que nos proporcione estos iconos para que los utilicemos. Bootstrap no tiene su propia biblioteca de iconos de fuente incorporada en la versión 4. Te voy a mostrar ahora cómo podemos integrar nuestro proyecto con Font Awesome. Para mi proyecto, voy a estar usando Font Awesome, que está disponible en fontawesome.com. Esto tiene miles de iconos disponibles para que podamos usar y también es un plan gratuito también, que voy a usar. Podemos empezar haciendo click en “Empieza gratis”. Sí necesitas una cuenta para empezar, por lo que tendrás que añadir tu dirección de correo electrónico dentro de este recuadro y luego hacer clic en “Crear” en el lado derecho. Ya estoy registrado, así que no voy a pasar por el proceso. Lo que todo lo que necesitas hacer es agregar tu correo electrónico y también obtendrás una confirmación por correo electrónico. Después de confirmar este correo electrónico y configurar tu cuenta, entonces
serás llevado a una página que se ve así. Una vez configurada, esto nos dará acceso a un script el cual podremos copiar y añadir esto a nuestro propio proyecto. Agarremos esto y vayamos a nuestro index.html. Mirando esto en la parte superior de la página en la sección de cabecera, así que solo voy a agregar esto por encima del CSS Bootstrap y esta es toda la configuración que tenemos que hacer. Ahora incluimos iconos en nuestro proyecto, agregamos esto en como un elemento HTML. Volvemos al sitio web de Font Awesome y luego hacemos clic en “Iconos” en la navegación. Podemos echar un vistazo a algunos de los iconos disponibles y también dar
click en ellos para saber cómo incluirlos. Con los planos libres, está el sólido y las versiones regulares de cada ícono junto con el código HTML que necesitamos incluir en nuestros proyectos. Si vemos una fuente que nos gusta, todo lo que tenemos que hacer es copiar el HTML y luego pegar esto en nuestra página de índice. Todo lo que tenemos aquí es elemento AI con un nombre de clase. En primer lugar, tenemos FAR, que es para Font Awesome Regular. Si elegimos esta opción sólida, ésta será FAS seguida de nuestro nombre de icono, que actualmente es libreta de direcciones. Este es el nombre que necesitamos cambiar para cada icono. Ahora sabemos usar esto, voy a ir a nuestro proyecto y empezar. Esta es la sección que voy a estar creando ahora usando Font Awesome. Por supuesto, puedes cambiar estos iconos para que se adapten a tu tema en particular. Vamos a empezar con un contenedor y luego configurar nuestras filas y columnas. En la parte inferior justo encima de nuestro JavaScript, vamos a crear nuestra sección. Vamos a tener un líquido de contenedor. También vamos a poner el texto para que esté en el centro. Si decimos color de fondo claro con bg-light y también ponemos algún margen en la parte superior e inferior, y también algún podio. Empecemos con un rumbo de nivel tres, que va a ser el texto de Poder arriba con un plan de pago. El siguiente paso es crear un div con la fila de clase, que va a ser el contenedor para nuestras secciones, también algún margen en la parte superior e inferior con un valor de cuatro. Entonces podemos seguir adelante y crear nuestras secciones individuales. En mi versión terminada, voy a tener cinco secciones uno al lado del otro. En lugar de incluir nuestras secciones con el número de columnas, también
podemos simplemente agregar la clase de col. Esta es una alternativa sencilla que vamos a utilizar cuando queremos que todas las secciones sean iguales en todos los dispositivos de tamaño. Dentro de aquí, podemos añadir el elemento i que acabamos de ver en Font Awesome. Podemos comenzar con el nombre de la clase para hacer el sólido de FAS. El ícono que voy a usar para empezar es fa_users. Otra clase que está disponible usando Font Awesome es el dimensionamiento. Podemos acceder al dimensionamiento con fa y luego multiplicar esto por cinco con 5x. Esto es igual a 5m y este tamaño también está disponible hasta 10x. Cada una de mis secciones también tiene algunos textos justo debajo. El primero es Múltiples usuarios, que voy a agregar en un elemento p. Entonces algo de espacio en o algún relleno en la parte superior e inferior de nuestro icono para separar esto de nuestro texto. Ahora se completa esta primera sección. Vayamos al navegador y recarguemos. Ahora como sólo tenemos una sección col, esta ahora se coloca en el centro. Cuando sumemos más de las secciones, todas
ocuparán el mismo espacio disponible. Hagámoslo. Ahora tenemos cuatro secciones más para sumar. Voy a copiar esta sección col, pegar esto justo debajo. El ícono que voy a utilizar es paleta con el texto de la tematización avanzada. Esto debería ocupar ahora la misma cantidad de espacio que el primero. Ahora sólo tenemos que sumar tres más. Pega otro en. El tercer icono va a ser para el globo y el texto que está justo debajo va a ser soporte multilingüe. El siguiente icono va a ser para la sincronización. Se trata de S-Y-N-C y el texto de sincronización en todos los dispositivos. Entonces finalmente, el último va a ser para plantillas personalizables. Este va a tener el ícono del archivo Alt. Echemos un vistazo a esto en el navegador. Tenemos nuestras cinco columnas iguales. Si reducimos esto hacia abajo, secciones
iguales intentarán mantener un espaciado igual en todos los dispositivos de pantalla, a menos que no haya suficiente espacio disponible en pantalla donde caerán en una nueva línea. También puedes notar una diferencia en el color del icono para mi versión final y esto es algo que podemos establecer en nuestra propia hoja de estilo. Al igual que con cualquier final en Bootstrap, podemos aplicar nuestra propia hoja de estilos para anular cualquiera de las clases. En nuestro proyecto, voy a crear un nuevo archivo llamado como styles.css. Entonces en nuestra página de índice, podemos enlazar esto en la sección de cabecera. Añade nuestro enlace abajo el CSS Bootstrap. La ruta del archivo es simplemente styles.css. Entonces podemos abrir esto. Entonces todo lo que necesitamos hacer es apuntar a nuestros iconos que es el elemento i, y luego establecer el color. El color que voy a elegir es 40b7ad dándonos el color verde igual que la versión final. Agregar iconos para un proyecto o aplicación puede tener un gran impacto visual, y tampoco necesitamos ser diseñador ni gastar mucho dinero para que se vean bien. A continuación en el siguiente video, vamos a continuar con nuestro proyecto mirando agregar imágenes y utilidades de imagen.
11. Trabajar con imágenes: Si has entendido todo lo que hemos hecho hasta ahora durante este curso, este video no debería darte un shock ni causarte ningún problema. Vamos a crear una nueva sección pero esta vez enfocada a agregar imágenes. Al igual que con el resto de las secciones bootstrap que hemos mirado. Vamos a empezar agregando en nuestro HTML y luego podemos integrar bootstrap agregando algunas clases CSS. En Bootstrap también podemos agregar algo de JavaScript en segundo plano también. Antes de que empecemos a mirar imágenes necesitamos agregar algún pequeño proyecto con el que trabajar. Proporcionado con este curso es una carpeta de imágenes, cual eres libre de usar. O puedes descargar las tuyas propias si lo prefieres. Esta carpeta de imágenes está en mi escritorio y quiero arrastrar esto a nuestra carpeta de proyectos. Si nos dirigimos a la versión terminada y echamos un vistazo a esto. Esta es la sección de iconos que acabamos de crear. Justo debajo de esto, esta es la sección que vamos a crear ahora. Todas estas cuatro imágenes se proporcionan con el curso junto con un sample.jpg actual de guardia. Esto no se incluirá en el proyecto final sino en cambio para probar algunas nuevas clases que podemos usar en imágenes y podemos echar un vistazo a esto ahora. Entonces al proyecto, primero que nada en el ciber tenemos nuestras cuatro imágenes y luego tenemos nuestro sample.jpg. Podemos echar un vistazo a esto en nuestro index.html. Entonces vamos a incluir esto en cualquier parte de la parte inferior de la página. Podemos incluir una etiqueta HTML estándar, por lo que esta se almacena en la carpeta Imágenes y luego en el sample.jpg. Si ahora vamos a nuestro proyecto, recargar, esta es la imagen de muestra. Si reducimos el navegador a un tamaño más pequeño, notarás que la imagen desaparece del borde del navegador. Esto generalmente no es algo que queremos ver. Queremos que la imagen sea un 100 por ciento del ancho disponible. Podemos hacer esto agregando una clase bootstrap llamada image fluid, que nos va a ayudar. Por lo que agreguemos esto a nuestros elementos de imagen. Entonces img-fluidos y ahora cuando recarguemos el navegador, ahora
la imagen debería reducirse, encajar el tamaño de pantalla disponible. Ya no vemos desaparecer la imagen fuera del borde
del navegador y también hay algunas clases más que quiero mostrarte. Muchos de ellos ni siquiera son específicos a las imágenes con el trabajo bien con imágenes de todos modos, como establecer el ancho de un elemento como porcentaje y esto es algo que miramos antes en las utilidades. Por lo que podemos agregar el ancho de imagen, ancho w y luego guión y como porcentaje y queremos probar el número 25. Recarga el navegador y esto ahora tiene un 25 por ciento de ancho. También podemos cambiar esto a sobrevalorización como 50,75,100, y auto. A la par de cambiar la w para que sea un h2 y esto afectará la altura de un elemento. A continuación, voy a copiar y pegar esta línea para luego echar un vistazo a la clase redondeada. Esta clase redondeada aplicará esquinas redondeadas a nuestra imagen y solo hagamos esto un poco más grande, para que podamos ver más claramente. Esto aplica el radio en los cuatro lados. Si quisiéramos aplicar esto sólo a la parte superior, derecha, inferior, o izquierda. También podríamos cambiar nuestra clase para ser redondeados arriba,
redondeados a la derecha, y así sucesivamente. Si quisiéramos que las esquinas fueran totalmente redondeadas, más como un círculo, podríamos cambiar esto para ser redondeado, -círculo. Esto será más como un círculo si la imagen tiene el mismo ancho y altura pero debido a que la imagen es más ancha, parecerá estar más estirada. Otra opción que tenemos que es similar al círculo es la píldora. Esto aplicará esquinas redondeadas y además dejará una parte superior e inferior plana. Entonces echemos un vistazo a esto en acción, refresquemos y esto nos da la forma de una pastilla. Otra utilidad de imagen que podemos utilizar es la miniatura de la imagen. Entonces esto es img-thumbnail y esto aplicará un borde que rodea la imagen. Vamos a hacer esto un poco más grande puede ser difícil de ver. Si hacemos zoom, podemos ver que la imagen tiene un borde rodea los cuatro lados junto con una esquina redondeada. También podemos usar float con imágenes y esto también se aplica a otros elementos. Entonces, por ejemplo, si dijimos flotar-derecha. Esta imagen ahora fluirá a la derecha del resto del contenido. Entonces esto es sólo una muestra de lo que podemos hacer con las imágenes. Como se mencionó anteriormente, algunas de estas clases, junto con otras, se aplican a muchos elementos diferentes, por lo que no estamos restringidos a usarlas con imágenes. Ahora pongamos esto en práctica dentro de nuestros proyectos construyendo una nueva sección. Quitemos estas imágenes de muestra y como siempre
vamos a empezar con una sección que va a tener una clase. Esta vez sólo voy a usar la clase de contenedor, así que no es el tamaño del fluido y luego también alinear el texto en el centro. Además, al igual que con las otras secciones, siéntete libre de hacer esto tuyo e incluir cualquier imagen o texto diferente que prefieras. Anidados por dentro tenemos nuestra fila. Esta fila se va a dividir en dos secciones iguales en dispositivos medianos. Sigamos adelante y sumamos nuestros nombres de clase de col-md-6 y podemos duplicar esto dentro de nuestra primera fila. Pongamos a trabajar con la primera sección. Por lo que esto será del lado izquierdo en dispositivos medianos y superiores. Encabezamiento de nivel dos, que es para el texto de calendario multivista. Por lo que este va a ser el rumbo para nuestra primera imagen de en el sitio terminado. Este es el texto que se ve aquí, seguido de elementos AP y luego nuestra imagen. Esto también es lo mismo en los tamaños de pantalla más amplios. Pero en cambio tenemos estos lado a lado. Por lo que después de nuestro rumbo, podemos agregar un elemento p con una clase que usamos antes de plomo. Esto hará que nuestro texto destaque y un texto de no volver a faltar una fecha. En la parte inferior, podemos agregar nuestra imagen, la cual se almacena en carpeta de imágenes. En el primero que voy a usar es el calendar.png, el texto antiguo
del icono del calendario y luego el nombre de la clase va a ser w 50, para hacer 50 por ciento de ancho. Entonces esta es nuestra primera sección, así que voy a copiar nuestro rubro, nuestro párrafo y también nuestra imagen para luego bajar a nuestra segunda sección, a este fin. El texto en este es flexible para hacer listas y sólo voy a hacer de esto una mayúscula, la etiqueta principal va a ser: tareas claras como un pro. El imagen, esta vez va a ser para nuestra lista y no olvides cambiar el texto antiguo también. Entonces antes de ir más allá con nuestra fila, vamos a comprobar que todo se ve bien y esta es nuestra primera fila, ahora completa. De vuelta a nuestro editor de textos, vamos a crear una segunda fila. Empecemos agarrando nuestra primera, ya que la estructura será la misma. Podemos pegar esto en, aún dentro de nuestra sección y al igual que antes, todo lo que necesitamos hacer es cambiar nuestro texto y la imagen. Por lo que el texto es colaborar y luego trabajar con todos los integrantes del equipo. El imagen es para el chat y también cambiar el texto antiguo también, las clases pueden permanecer iguales y el para teléfono, nivel dos rumbo es tomar notas. El texto principal es tomar notas sobre la marcha y la imagen es nota junto con los textos antiguos también. Entonces todo esto se ve bien, ahora tenemos nuestras dos secciones dentro de nuestras filas. Vayamos al navegador y veamos cómo se ve esto. Por lo que esto se ve bien en las pantallas más grandes. Vamos a encogerlo hacia abajo. Esto se ve bien, tal vez solo algo de relleno en la parte superior e inferior de nuestras secciones. Podemos hacer esto en nuestros divs circundantes justo después de call-md-6 pudding y Vamos por un valor de cuatro y podemos hacer que esto sea igual en las cuatro de nuestras secciones. pudding y4 y también el último también, refresca y esta son nuestras imágenes ahora añadidas a nuestro proyecto. Genial así que ahora sabes aplicar estilo a las imágenes con Bootstrap. Una de las grandes cosas también, así
como muchas de las clases que acabamos aprender también se aplicarán a otros elementos. No estamos restringidos a usar solo estos con imágenes. Por último, no sientas que necesites memorizar todas estas clases a medida que avanzamos. Si te atascas, todo lo que necesitas hacer es usar la documentación de Bootstrap como referencia.
12. Anidado de filas o citas en bloque: Al trabajar con nuestros proyectos hasta ahora hemos mirado una estructura igual a ésta. Hemos añadido filas dentro de nuestros proyectos. Después hemos dividido nuestras filas en números de columnas. Por ejemplo, hemos tenido una sección de seis partes a la izquierda y también seis columnas a la derecha. Dividimos nuestra fila en dos partes iguales. ¿ Y si tuviéramos una situación en la que quisiéramos también dividir uno de estos tramos? Si tuviéramos una fila así. Después nuestra sección de seis columnas en el lado izquierdo. A veces tenemos un caso en el que queremos dividir esta sección y también hacer uso de nuestro sistema de cuadrícula dentro de aquí. Los cuatro primeros serían principalmente casi exactamente los mismos que antes. Podríamos agregar seis columnas a la derecha y luego seis columnas a la izquierda dentro de un div. Bueno, esta no es la forma en la que deberíamos hacer esto en Bootstrap. Esto se debe a que Bootstrap requiere que nuestras columnas solo sean un hijo directo de una fila. La forma correcta de abordar esto sería crear una nueva fila anidada dentro de nuestras columnas. Por ejemplo, lo tendríamos así. Donde vamos a crear un nuevo div o nuevos elementos con la clase de fila. Entonces esto nos permitirá volver a hacer uso del sistema de cuadrícula de 12 columnas. Ahora podemos dividir esta fila en tantas secciones como nos gustaría. Si quisiéramos aplicar tres secciones diferentes a nuestra fila, podríamos aplicar nuestras columnas. Esto podría ser de cuatro partes, cuatro partes en el centro, y luego cuatro partes en el lado derecho. Esta es la forma correcta de acercarse a filas y columnas anidadas dentro de Bootstrap. En la versión terminada, podemos hacer uso de esta configuración de fila anidada aquí en la parte inferior. He restringido esta sección exterior para tener sólo ocho columnas de ancho en lugar del ancho completo de 12 columnas. Ya que estamos usando columnas para lograr esto, no
podemos anidar directamente estos testimonios dentro como espacios de columnas iguales. Pero en cambio, es justo como descubrimos antes, podemos crear una segunda fila anidada por dentro y luego tenemos acceso a nuestro sistema completo de cuadrícula de 12 columnas, una vez más dentro de esta fila. A pesar de que esta envoltura externa tiene ocho columnas de ancho, la fila anidada interna seguirá teniendo las 12 columnas completas disponibles. Pasemos al proyecto y creemos esto en la parte inferior de nuestra página de índice. Por lo que justo antes de nuestro JavaScript, creamos nuestra sección. Voy a darle a esto un contenedor-fluido, algún margen en la parte superior e inferior, algo de relleno en la parte superior e inferior también. Necesito un color de fondo claro. El siguiente paso es agregar una fila dentro de aquí. Esta va a ser nuestra fila inicial, que va a contener el div inicial, que tiene ocho columnas de ancho. Esto va a ser en los dispositivos de tamaño mediano. Por lo que utilizamos la clase de col-md-8 para mantener esto en el centro. También podemos proporcionar un offset en dispositivos medios también, en el valor de 2. Por último, el text-center, para alinear nuestro texto en medio de nuestra sección. Todo esto va a estar dentro de aquí es un rumbo nivel tres y esto va a tener la clase de py dash 3, para darte algo de espaciado en la parte superior e inferior. El texto, como podemos ver si vamos a la versión final, va a ser lo que nuestros usuarios tienen que decir. Añadamos esto a nuestro encabezado, guardemos esto, y echemos un vistazo a esto en el navegador. Al final de nuestra página, un inferior no puede ver esto actualmente por el fondo. Esta sección tiene ocho columnas de ancho. Ahora para crear nuestras dos secciones en el interior, necesitamos crear una fila anidada. Volvamos a nuestro proyecto. Vamos a sumar esto justo después de nuestro rumbo de nivel tres. Entonces un div con la clase de fila. Dentro de aquí podemos acceder al sistema completo de cuadrícula de 12 columnas. No obstante, mantengamos esto más estrecho. Voy a crear dos secciones, que son cinco columnas cada una. Podemos hacer esto y luego compensar el resto del contenido con el flexbox. Entonces, en primer lugar, podemos agregar un div y podemos agregar una clase de simplemente col-5. Esto establecerá que la sección tenga siempre cinco columnas de ancho independientemente de los puntos de rotura. Voy a duplicar esto para agregar nuestras dos secciones dentro de nuestra fila anidada y luego podemos espaciar estos, justificamos contenido alrededor. Esto agregará un espaciado igual alrededor de ambas secciones. Ya que tenemos un color de fondo gris claro, también
voy a compensar estos con un color diferente. Podemos usar bg white o nuestras dos secciones anidadas, y también algún relleno alrededor, que va a ser un valor de 4. Voy a copiar estos dos y también añadirlos a nuestra segunda sección. Dentro de la primera sección del lado izquierdo, vamos a añadir algunas reseñas o algunas cotizaciones. Al igual que podemos ver aquí, vamos a agregar algún texto de muestra y luego podemos agregar un usuario que lo citó justo debajo. Podemos hacer esto con un blockquote, que es un elemento HTML estándar. Pero también podemos agregar una clase bootstrap de blockquote dentro de aquí también. Anidado en el interior como elemento p. También voy a agregar algo de texto Lorem Ipsum es escribiendo lorem y luego golpear Tab. Podemos hacer esto en Visual Studio Code. Si no tiene esto disponible, simplemente escriba cualquier texto de muestra o una cotización de su elección. Aún así cuando usamos blockquote, también
podemos agregar un pie de página, que va a ser la parte inferior de nuestra sección de cotizaciones y Bootstrap también tiene una clase disponible para esto, que es simplemente blockquote-footer. Esta va a ser la fuente de nuestras cotizaciones. Voy a decir “Free plan user” y luego podemos usar los elementos del sitio, que es HTML, para citar a un usuario. Voy a decir “Capitán anónimo”. Pasemos al navegador y echemos un vistazo a esto. Ahí vamos. Ahí están nuestras dos secciones anidadas dentro de nuestra fila. Basta con duplicar esto para el lado derecho. Por lo que ya tenemos nuestro div circundante para esta sección. Agarremos el blockquote y hagamos uso de estas mismas clases. Solo voy a cambiar esto para ser un usuario del plan Pro. Dentro de esta sección de pie de página, tenemos una nueva clase de pie de página blockquote. Esto se utiliza generalmente para identificar la fuente de la cotización y a menudo se combina con los elementos del sitio, que se utiliza como envoltorio para el nombre de las fuentes. Ahora vamos a guardar esto y ver cómo se ve esto. Ahora tenemos nuestras dos cotizaciones, lado a lado. Es así como podemos anidar filas usando Bootstrap. Podemos crear tantas columnas o tantas filas anidadas como nos gustaría. Pero siempre recuerda que a la hora de crear nuevas columnas, siempre
necesitamos un rapero padre como fila. A continuación nos vamos a centrar en cómo crear una navegación responsive, que vamos a incluir en la parte superior de nuestro proyecto.
13. Barras de navegación y botones de activación: Ahora nos vamos a concentrar en uno de los factores más importantes en cualquier sitio web, y esta es la navegación. Para que nuestro sitio sea plenamente receptivo a la hora de tratar con las navegaciones, necesitamos una manera de garantizar que nuestros enlaces de navegación no solo se vean bien, los libros también sean totalmente accesibles y respondan también. En esto en lo que nos vamos a centrar en este video, sumémonos y echemos un vistazo. Cuando se trata de las navegaciones en sitios web generales, un enfoque común que puedes ver sería algo así. la izquierda aquí tenemos una vista típica de escritorio donde tendríamos una navegación, un logotipo en un lado y luego nuestros enlaces de navegación en el otro. Cuando nos ocupamos de sus pantallas de tamaño móvil más pequeñas, a menudo
necesitamos un enfoque diferente porque hay menos espacio disponible en pantalla. Lo que comúnmente veremos arriba en la parte superior es una navegación, donde tenemos un botón el cual proporcionaremos algunos enlaces al hacer click en él, suele ser los mismos enlaces que tenemos en la vista completa del escritorio, pero solo ocultos hasta dar click en la parte inferior . ¿ Cómo abordamos esto usando Bootstrap? Bueno, la forma en que funciona esto es que básicamente creamos dos secciones. Tenemos una sección para todos los elementos de la lista, y luego tenemos una segunda sección para nuestro botón. Después creamos un vínculo entre estos a través de una identificación, y echaremos un vistazo a cómo hacerlo a continuación. Proporcionamos este enlace con nuestro ID, detrás de bambalinas, Bootstrap también manejará el JavaScript para que todo esto funcione puntos separados. Ahora nos dirigamos a nuestro proyecto donde ahora podemos aplicar nuestra navegación. Haciendo buenos avances con nuestros proyectos y ahora vamos a
volver a subir a la cima de nuestro proyecto y crea la navegación. Si vas a la versión final, vamos a crear algo que se vea así. Tendremos el logo en el lado izquierdo, también
tendremos nuestros enlaces libres en el lado derecho para la navegación. Si nos desplazamos hacia abajo hasta una pantalla pequeña, obtenemos un botón desplegable, que al hacer clic en para revelar nuestros enlaces en los tamaños móviles y tabletas más pequeños, por lo que se ve mucho mejor en pantallas más pequeñas. Ahora vamos a crear proyecto SNR de la parte superior de nuestra sección de cuerpo. Volver a la página del índice, desplácese hasta nuestro cuerpo. Echemos un vistazo al abierto por dentro, que está justo aquí. Empezaremos con un envoltorio de barra de navegación, que va a tener un título de sitio y un logotipo. Voy a usar el elemento nav para hacer esto. Esta trampa también nos proporciona algunas clases que podemos usar para la navegación, la primera es simplemente navbar, que vamos a agregar flexbox, estoy posicionando junto con algún relleno. Siguiente Voy a agregar barra de navegación, expande, - LG. Este que es el contenido BD vista de ancho completo en nuestras pantallas grandes. Por supuesto, podemos cambiar el punto de ruptura para que sea cualquier otra cosa como MD Si
preferimos y luego finalmente agregamos algo de cloro por asistir a las luces de barra de navegación. Anidados dentro de nuestros elementos de navegación, vamos a añadir un enlace, que es para nuestro título de sitio, o podemos tener un logotipo dentro del si lo prefieres. Voy a empezar con un nombre de clase. La clase que necesitamos agregar es la marca navbar, cual vas a agregar nuestro CSS para espaciado y tamaño en nuestro título de sitio. Podemos agregar el nombre de la productividad bootstrap o el nombre de su elección. Ahora bajo nuestro título de sitio, podemos agregar nuestras dos secciones que mencionamos antes, que son los enlaces y también el botón, los enlaces togglese abiertos y cerrados. Empecemos con nuestro botón básico, que va a tener un tipo de botón. Esto va a controlar nuestros enlaces, que podemos agregar dentro de este div. Solo vamos a crear una lista desordenada por ahora. Entonces a continuación podemos decirle a bootstrap que este botón es para controlar estos elementos de la lista agregando primero un ID. Añadamos el ID a todos los enlaces. Dentro de aquí voy a agregar el ID como navbar-nav, y luego podemos pasar esto al botón como atributos de destino de datos. Dentro de la etiqueta de apertura, agregamos los objetivos de datos y establecemos esto igual a nuestro ID, por lo que usamos esto igual que un selector CSS. Utilizamos el hash ya que este es un ID y luego el nombre de identificación de navbar-nav. Este botón ahora controla nuestros elementos de lista, y podemos decirle que muestre y oculte el contenido configurando data-toggle, collapse. De nuevo dentro del botón, configuramos nuestro data-toggle y ajustamos esto igual al colapso. Con esto ahora vinculado, el siguiente paso es básicamente agregar las clases de Bootstrap requeridas y también algunos atributos de accesibilidad para terminar las cosas. Empezando por el botón, también
podemos añadirlos a la línea para que sea más legible. El siguiente atributo va a ser para nuestra clase, y el nombre de la clase va a ser navbar-toggle, que va a agregar algo de relleno, dimensionamiento y también un borde. La próxima vez vamos a agregar algunos atributos para hacer nuestro sitio más accesible. Esto es para personas que usan lectores de pantalla o con discapacidad. Hacer que nuestro sitio sea lo más accesible posible. El primer atributo que vamos a agregar son los controles aria, y establecer esto igual a nuestro ID, que es navbar-nav. Asegurándose de que este es el mismo nombre que le damos al ID justo debajo, que coincida con nuestros enlaces. Tenemos que entender dónde está el botón apuntando a un elemento plegable, es decir, nuestra lista. A continuación tenemos aria ampliada. Pondré esto como un valor de falso. Esto le dirá a los lectores de pantalla si nuestra lista se expande o colapsa en algún momento dado, y establecemos que esto sea falso si el elemento plegable se va a cerrar por defecto, lo cual es porque nuestros enlaces no se van a expandir hasta que un usuario haga clic en este botón. El último que necesitamos añadir es la etiqueta aria, que se va a configurar para activar la navegación. Esta etiqueta puede ser cualquier nombre de nuestra elección, y este es algún texto proporciona al usuario un nombre reconocible. El pedazo final de este botón es agregar las tres líneas. Todos estos iconos gratuitos que se ven en la vista de pantalla pequeña. Estos se pueden agregar usando un span elementos con una clase Bootstrap. Añadamos estos elementos span entre la etiqueta de apertura y cierre del botón. No necesitamos agregar ningún contenido entre nuestro lapso. Todo lo que tenemos que hacer es agregar la clase de icono de toggler barra de navegación. Ahora si le damos a esto un guardado y pasamos al navegador a todos los proyectos, se recarga, con nuestro botón y también nuestro título del sitio. A continuación tenemos que añadir en nuestros enlaces. Volvamos a nuestra navegación y busquemos nuestra lista desordenada, donde vamos a empezar agregando una clase a este envoltorio. El nombre de la clase va a ser navbar-nav, que va a controlar cualquier margen y perdón, y también eliminar la lista predeterminada [inaudible]. Esto también hace uso del flexbox. A continuación, podemos crear nuestros elementos de lista y de nuevo, estos van a tener una clase Bootstrap y este va a ser nav con un elemento anidado en su interior. Esto también tiene una clase, el nombre de la clase para los enlaces va a ser nav link, que va a eliminar cualquier cloro de enlace predeterminado, y también establece cualquier margen y relleno requeridos. Esto sólo va a enlazar a nuestra página de índice, por lo que podemos agregar en el index.html. Ya que este va a ser el enlace de inicio, vamos a agarrar este ítem de lista, ya que vamos a incluir este dos veces más. El segundo enlace va a ser para la fijación de precios. Aún no hemos creado esta página. Para esto, vas a enlazar con el pricing.html. Tan solo soplar esto, nuestro tercer y último enlace va a ser para contratistas. De nuevo, no hemos creado una página contact.html, pero vamos a estar creando esto muy pronto. Guardemos este archivo ahora y echemos un vistazo a esto en el navegador, pulsa recarga. En una pantalla pequeña vemos todo el contenido. Vemos tanto el botón como también los enlaces. Si vamos al botón de vista de pantalla grande se está quitando, y sólo vemos los enlaces. Podemos arreglar esto y ocultar estos enlaces en la vista de pantalla más pequeña
agregando clases de necesidad de colapso y que navbar colapse al div circundante. De vuelta a nuestra navegación, necesitamos buscar nuestro div que rodea nuestros enlaces con la idea de navbar-nav, y necesitamos agregar una clase de colapso y también navbar-colapso también. Vayamos al navegador y veamos si esto soluciona nuestro problema. Esto se ve mejor en pantallas pequeñas. Si ampliamos esto, ahora
vemos que se ha eliminado el botón y aparecen los enlaces. Podemos tratar de ampliar esto haciendo clic en el botón, y obtenemos nuestros enlaces en la vista de pantalla pequeña. Lo último que hay que hacer es mover nuestros enlaces hacia el lado derecho en la vista de pantalla grande. En lugar de estar en contra del título del sitio, los
queremos en el lado derecho. Podemos hacerlo fácilmente con el flex box CSS agregando la clase de contenido justificante final en el mismo trato que antes, que rodea los enlaces. Podemos sumar esto aquí. Ahora empuja nuestros enlaces hacia el lado derecho de la navegación. Incluso lo harías un menú de navegación desplegable totalmente sensible y accesible.
14. Tarjetas, grupos y pilas de tarjetas: Ahora estamos vamos a echar un vistazo a usar tarjetas en Bootstrap, y se puede pensar en una tarjeta como contenedor para algo de información. Un caso de uso típico podría ser un listado de productos en una tienda de comercio electrónico al igual que vemos aquí. Podemos iniciar nuestro listado público con una clase de envoltura de código y también hacer uso de muchas de las clases, que Bootstrap proporciona para diseñar nuestro contenido. Dentro de nuestro envoltorio, podríamos tener una imagen de tarjeta y luego debajo de ésta también podemos tener un cuerpo de tarjeta para envolver todo el resto del contenido. Dependiendo del caso de uso al cuerpo de la tarjeta, también
puede contener un encabezado y una sección de pie de página. Todo el resto de la información de nuestro producto como un título de tarjeta, un subtítulo y también el contexto para nuestra descripción. par de esto, también tenemos la libertad de proporcionar cualquiera del marcado HTML, que pueda necesitar, como el botón “Cómpralo ahora”. Podemos hacer que esto se vea y sienta exactamente como queremos que lo haga. Ahora vamos a pasar a nuestro proyecto y aplicar esta estructura de tarjetas a nuestra página de precios de productos. Mencionado por al crear nuestros enlaces de navegación, ahora necesitamos crear una página de Precios y Contáctenos. Vamos a llegar a trabajar ahora en la página de precios e introducimos tarjetas Bootstrap. Así se va a ver la página final de precios. Vamos a hacer uso de las tarjetas para crear este diseño, que va a contener nuestras secciones de precios gratuitos utilizando algunas de las clases que acabamos de mirar antes. Si también quieres saber más sobre las tarjetas Bootstrap, podemos dirigirnos a la documentación, y podemos encontrarlo ubicado en el enlace de componentes. Por supuesto, siéntase libre de echar un vistazo a través de esta documentación de tarjeta la cual
voy a saltar al proyecto y llegar a trabajar con estas secciones de precios. Empecemos por crear nuestro nuevo archivo para nuestra página de precios dentro de las raíces de nuestro directorio. Queremos llamar a esto HTML de precios, ya que este es un archivo HTML. Una vez más, necesitamos traer sobre todos los enlaces de impulso hacia arriba. También vamos a estar usando el mismo encabezado para ser consistentes también. Voy a conseguir una ventaja yendo a la página del índice, seleccionando todo agarrándolo y luego pegando esto en nuestra página de precios. Justo encima de nuestro JavaScript, podemos eliminar las secciones no requeridas, por lo que no necesitamos la sección inferior con la fila anidada. No necesitamos las cuatro imágenes para poder quitarlas, no
necesitamos la sección con los iconos, esto también puede ir, y finalmente, no
necesitamos los elementos de grupo de lista. Vamos a darle un guardado a este archivo, y si vamos al navegador,
vamos a dar click en el enlace de precios, y nos quedamos con la misma sección de navegación y cabecera superior. Lo siguiente que hay que hacer es cambiar el título del sitio, abrir la cabeza. Al final de esto voy a agregar precios, ya que esta es la página de precios. Ahora vamos a desplazarnos hacia abajo y podemos crear nuestra nueva sección para todas las tarjetas. En la parte inferior de la sección de cuerpo, justo encima de nuestro JavaScript, podemos agregar nuestra nueva sección. Esto va a tener la clase de contenedor, por lo que es un tamaño fijo anidado aquí dentro. Voy a crear un div, que va a ser un envoltorio para las secciones de tarjetas gratuitas. Esto va a tener una clase que va a ser igual a card-deck. Echaremos un vistazo a esto con más detalle cuando tengamos algunas tarjetas con las que trabajar. Por ahora aunque podemos agregar un valor de margen de tres en la parte superior e inferior y también alinear el texto en el centro. Ahora podemos seguir adelante y crear nuestra primera tarjeta. Esto va a tener un div como envoltorio con la clase de tarjeta. El tipo de tarjeta establecerá la posición, el tipo de visualización para ser lino, la palabra gota en los colores generales y bordes. Entonces dentro aquí voy a crear algunas secciones nuevas. Vamos a crear el encabezado de la tarjeta y también el cuerpo de la tarjeta. Empecemos con la sección de encabezado en la parte superior, este es el encabezado de la tarjeta. Dentro de aquí esto va a tener un rumbo nivel cuatro, con el precio del plan. El nivel cuatro rumbo y el primer precio va a ser gratis, esto también toma en una clase Bootstrap de font-weight normal. Cuales otros sonidos, estableceremos los teléfonos para que tengan un peso de normal, y esto está anidado dentro de nuestra sección de encabezado. Esta clase de cabecera de tarjeta va a agregar un radio a la parte superior de la tarjeta, algo de espaciado y también todos los colores. Justo después de esta sección de encabezado, podemos crear nuestra sección de cuerpo. Como era de esperar, esto va a tener la clase de cuerpo de tarjeta que va a establecer el flexbox crecer y reducir los valores junto con espaciado y dimensionamiento. Dentro de aquí nuestro rumbo nivel dos, que va a tener el precio del plan. Una clase de título de tarjeta, que sumará algunos márgenes a la caja de nuestro título. Este es un plan gratuito, lo que el precio va a ser cero seguido las pequeñas etiquetas donde vamos a tener el corte delantero y después mes. Esto también tiene una clase que es proporcionada por Bootstrap y esto va a ser texto silenciado. Si decimos esto, podemos ver exactamente qué está haciendo esta clase. Recarguemos nuestra página de precios, y esto la hace más pequeña y de un color diferente. Después del encabezado nivel dos, podemos agregar el texto de la tarjeta dentro de un elemento p. Esta clase de texto de tarjeta cuando usas un Bootstrap se utiliza para la mayor parte de nuestros textos en la tarjeta, como una descripción del producto, y nuestra descripción va a ser “pruébalo para siempre gratis”. Debajo de esto podemos crear nuestra propia lista de pedidos. El listado desordenado va a tener algunas características sobre este plan de precios. Lo que exactamente se incluye en la lista desordenada tiene una clase Bootstrap de lista en estilos. Esto eliminará todas las listas de entrada de estilo. Podemos agregar algún margen en la parte superior e inferior como un valor de cuatro y luego crear nuestros ítems de lista dentro. El primer rasgo para el plan gratuito, voy a añadir un terabyte de almacenamiento, y podemos duplicar esto cinco veces más, disminuir más características. Es x para el segundo va a ser cientos de temas preconstruidos. Ya que voy a seguir adelante y añadir cualquier texto que te gustaría dentro de esto para que sea tuyo. Voy a añadir a continuación el calendario y programación. Si todo punto va a ser recordatorios y alertas, segundo a último va a ser lista y páginas ilimitadas. Entonces, por último, etiquetas personalizadas. Recuerda también dijimos antes que al usar una tarjeta, somos libres de agregar cualquier otro HTML personalizado que nos guste, no
estamos restringidos a usar las clases de tarjetas y el diseño que Bootstrap sugiere. En la lista desordenada, también
podemos agregar cosas como botones, y esto va a ser un enlace para empezar. Este botón también va a tener el tipo de botón. El base pone en clase de btn, luego btn bloque, lo que hará de esto el ancho completo de la página. Podemos ver esto si guardamos esto y actualizamos, esto hará que el botón estire todo el ancho lleno de tarjeta. Podemos ver esto más claro si agregamos un contorno de botón. Voy a añadir esto como la información de contorno de botones, y ahí vamos. Dado que Bootstrap es móvil primero, este es el ancho completo de la página, ya que solo tenemos una tarjeta. Pero ahora voy a seguir adelante y repetir esto para la tarjeta número 2, y 3 y podemos ver qué efecto tendrá esto. Agarremos nuestra tarjeta, el div circundante. Podemos copiar esto, asegurándonos de mantener el div circundante con la clase de baraja de cartas. Podemos pegar esto en ella dos veces más. Para el medio, voy a cambiar este para que sea el plan Pro más que libre. Podemos cambiarlo para ser pro. Tu precio puede ser de $10 al mes. El texto de la tarjeta mejora acceder a las funciones Pro. No voy a seguir adelante y cambiar todos
estos ítems de la lista porque va a hacer para un video bastante aburrido. Pero claro, sigue adelante y cambia estos si te gustaría ver tus proyectos. Todo lo que voy a hacer a continuación es cambiar el botón de “Empezar” a “Actualizar”. El tercero, esto puede ser para el negocio. Podemos cambiar el precio una vez más, vamos por 29, el texto, usuarios
ilimitados, y almacenamiento extra, luego cambiar el botón al final a una pequeña actualización b. Dado que estos dos son planes pagados en el segundo y tercero, también
voy a cambiar el botón para que sea ligeramente diferente. En lugar de usar el contorno de botones, voy a cambiar esto para que sea simplemente información de botón. Aquí había un color de fondo sólido. Esto va a ser en el último, y también en el medio. Recarga y ahora ten nuestras tarjetas gratis lado a lado en la vista más grande. Si reducimos esto a un dispositivo móvil, todos
estos ahora apilados verticalmente. Notarás en la vista de escritorio, estas tarjetas tienen algo de espacio entre ellas. Esto se debe a la envoltura de tarjetas. Temprano agregamos este envoltorio de tarjetas y la clase de card-deck. Si echamos un vistazo a esto, esta clase proporciona el margen alrededor de las tarjetas que vemos. Si quisiéramos quitar esto y no tener espacio entre ellos, podríamos cambiar esto para ser grupo de cartas en su lugar, e ir al navegador. Esto ahora eliminará todo el espacio entre nuestras cartas, acercándolas. Esta es otra opción, pero voy a reinstalar la baraja de cartas del espacio entre estos, y luego para rematar esta sección y también esta página, voy a añadir un encabezado justo encima de esta sección de cartas. Volver a todo contenedor de tarjetas, necesitamos agregar esto justo encima de nuestro contenedor. Simplemente lo agregaremos. Añadamos un div, la clase de relleno con un valor de 3 para agregar algo de espaciado todas las rondas, y también la clase de centro tecnológico. Dentro de este div, podemos agregar un encabezamiento de precios de nivel 2, y también algunos textos justo debajo de gratis para usar para mayoría de los usuarios o actualizar tu plan para acceder a funciones pro. También podemos hacer que esto destaque agregando cualquier clase de plomo a nuestro texto, que ya hemos mirado previamente en este proyecto. Pasado a nuestra página de precios, [inaudible] sección de precios muy bonita para nuestros proyectos. Es así como podemos usar las tarjetas Bootstrap para diseñar rápidamente nuestros contenidos. El verdadero útil para casos de uso al igual que este. cosas [inaudibles] como listados de productos como miramos antes. Ya es para tarjetas y te veré en el siguiente video donde echaremos un vistazo a usar los formularios Bootstrap.
15. Formularios y entradas: Formularios e insumos son algo que utilizamos todo el tiempo al visitar sitios web o usar aplicaciones. Utilizan para capturar información o datos como nuestro nombre, nuestro correo electrónico, contraseñas, o incluso un mensaje. Que esto es lo que vamos a estar viendo en este video. Ya estamos terminados con nuestra página de precios, ahora
tenemos este enlace Contáctenos para enlazar ahora a una nueva página. Vamos a estar construyendo algo que se vea así. Si vamos a la versión final, va a compartir la misma navegación y sección de cabecera. Entonces vamos a crear un formulario justo debajo usando bootstrap. Esto se va a crear usando HTML markup y un sever, vamos a estar usando algunas clases de Bootstrap para darnos un buen tiempo de espacio con el que trabajar. Después del proyecto podemos crear un nuevo archivo en la barra lateral. Una vez más, esto va a estar en las raíces de nuestros proyectos. Es el contacto de nuestro HTML. Ya que estaremos compartiendo la misma navegación y también la sección de encabezado, voy a copiar el archivo pricing.HTML. Copiemos todo esto, y luego peguemos esto en nuestros contactos. Por supuesto que no necesitamos estas secciones que acabamos de crear en el último video. No necesitamos la sección de tarjetas. Me estoy desplazando hacia arriba aún más. Tampoco necesitamos la sección de precios. Todo lo que tenemos es el JavaScript abajo en la parte inferior. Entonces encabezo sección arriba en la parte superior. Podemos cambiar el título de la página y diremos contáctanos. Ahora vamos a trabajar en nuestro formulario. Justo debajo de nuestra sección de cabecera. Por encima del JavaScript queremos crear un elemento de formulario. Este elemento de formulario va a tener una clase Bootstrap. Bajo este nivel, podemos pasar a la documentación de Bootstrap. Esto está dentro de los componentes. Después bajaremos a la sección de formularios para obtener algo más de información. Hay muchos tipos diferentes de formas que podemos usar, todas relativas a las entradas en las que las estamos usando. Pero la mayoría de ellos generalmente tienen un grupo de formularios como envoltorio. Entonces dentro colocamos nuestras etiquetas e insumos, junto con algunas opciones diferentes para diseñar nuestros formularios, incluyendo un layout en línea también. Volvamos a nuestros proyectos. Podemos comenzar dentro de nuestra forma. Añadamos una clase de contenedor a nuestro formulario y luego le damos algún margen en la parte superior con un valor de cuatro. Entonces dentro de aquí vamos a envolver cada etiqueta e insumos dentro de un div. Este div va a tener la clase bootstrap de form-group. Este grupo de forma clásica nos va a dar el espacio requerido entre cada uno de nuestros insumos. Entonces dentro vamos a empezar agregando una etiqueta, que va a ser para que nuestro nombre detecte dentro de tu nombre. Después de esto pero aún cuando dentro de nuestro grupo de formularios, podemos agregar nuestra primera entrada. Nuevamente, esto es solo HTML regular con algunas clases de Bootstrap. Esto va a tener el tipo de entrada de texto. El bootstrap clase de control de forma, que va a controlar el tamaño en el relleno, los colores en el borde. Junto con una agradable transición de entrada y salida. Permítanme dar click en las entradas. Después de esto, vamos a crear un grupo de segunda forma. Este va a ser bastante similar. Pues éste va a ser para nuestro correo electrónico. El entorno de clase o grupo de forma, lo etiquetaré nido dentro. Esta es la etiqueta para el correo electrónico y el texto de la dirección de correo electrónico. Siguiente arriba la entrada con el tipo de correo electrónico. Del mismo modo que ambos se van a agregar a la clase de control de formulario al elemento de entrada, el id de los correos electrónicos. Esto coincide con nuestra etiqueta. Esto es así, cuando el usuario hace clic en el texto de la dirección de correo electrónico, la entrada se activará para que pueda escribir en ella. También necesitamos hacer esto justo arriba. El id de nombre por lo que esto coincide con nuestra Etiqueta de Nombre. Después de esto, podemos agregar el texto de marcador de posición de ingrese su correo electrónico para responder. Antes de ir más lejos, vamos a comprobar que esto está funcionando bien en el navegador. Vamos a revisar nuestros enlaces están ahí. Tenemos nuestro enlace en la página de precios al contacts.html. Echemos un vistazo a la página del índice y abramos la navegación superior. Tenemos nuestro enlace de contacto trabajando también. Al navegador, y en el proyecto. Haga clic en el botón de contacto. Ahora tenemos nuestro nombre y también nuestra dirección. Se puede ver el efecto de transición cuando se hace clic en esto. También podemos agregar algún texto de Marcador de posición a nuestro nombre también. Volvamos a nuestro formulario de contacto. Podemos sumar esto a nuestro insumo. Vamos a texto de introduzca su nombre. Ahora tenemos nuestros dos grupos formados. El siguiente va a ser un entradas selectas. Esto va a ser para que podamos hacer click en esto y seleccionar en qué plan se encuentra el usuario actualmente. Esto una vez más, tiene el div con una clase de grupo de forma. Anidados por dentro, comenzamos con nuestra etiqueta. Esto va a ser por el id de plan. Sólo toma de qué plan estás usando. A continuación agregamos nuestros insumos selectos. Esto también va a tener la clase de control de forma. Al igual que los demás insumos. Se va a planear el id. Esto coincide con nuestra etiqueta justo arriba. Después anidados dentro de nuestros selectos elementos, podemos pedir nuestras opciones para elegir. El primero va a ser libre. Podemos agregar el texto de forma gratuita por dentro aquí. Podemos agregar opciones de caída. Este segundo va a ser para pro con el texto de pro. El tercero es de negocios y el último es para una indagación general si usted no está inscrito. Diremos pregunta no general. Veamos cómo se ve esto dentro de nuestros proyectos, refrescar. También hay entrada selecta con nuestras cuatro opciones. El siguiente ingreso va a ser para el área de mensajes o el área de texto. Fuera de nuestro grupo de formularios, agreguemos un nuevo div. Esta vez nuevamente la clase o grupo de forma. El sello, que va a ser para todos los mensajes, sólo mensaje de texto también. Entonces podemos agregar un área de texto con múltiples filas. Podemos agregar nuestros elementos de área de texto. El clase va a ser control de formulario el id del mensaje para que coincida con nuestra etiqueta. Podemos establecer el número de columnas si nos gusta. Pero sólo voy a establecer el número de filas para que sea cinco. La última parte de este formulario es agregar un botón de envío. Tienes que tener el tipo de submit y luego algunas clases de Bootstrap. El estilo básico del botón y luego el color de la información del botón, y un texto de enviar mensaje. Vamos a probar esto en el navegador. Ahora tenemos un área de mensajes que también podemos ampliar. Enviaré botón de mensaje también. El tipo de curso, siéntete libre de personalizar este formulario para que se adapte a tus necesidades. Podemos crear formularios en línea, podemos crear configuraciones más complejas al igual que esta, donde podemos incluir botones de radio, casillas de
verificación, campos de dirección, y mucho más. Como puedes ver, las formas tienen muchas opciones y
variedades diferentes y Bootstrap ha cubierto para la mayoría de nuestras necesidades. No obstante, aunque haríamos formas o cualquier otro componente en el que usamos, si necesitamos personalizarlos para que se adapten a nuestro proyecto. Bueno, esto es lo que vamos a ver en el próximo video.
16. Cambiar el estilo predeterminado de Bootstrap: Bootstrap por defecto está destinado a darnos un aspecto agradable estilos y características fuera de la caja. Pero a veces hay cuando es posible que necesitemos anular estos valores predeterminados, no solo para que nuestro sitio se vea más como nosotros lo queremos,
sino también para que nuestro sitio no se vea igual que todos los proyectos de Bootstrap por ahí. Esto es bastante fácil de hacer y no más difícil. Ahora, voy a aplicar en un CSS regular. Si vamos a nuestro proyecto, ya
tenemos nuestro propio archivo styles.css personalizado, que creamos anteriormente. También voy a tener múltiples opciones a la hora personalizar
los valores predeterminados de Bootstrap. Si vamos a nuestro index.html y luego hasta la sección de cabeza superior. Una cosa importante a tener en cuenta aquí es, nuestro enlace a nuestras hojas de estilo personalizadas. Esto siempre necesita colocarse como el último archivo CSS debajo de cualquiera de los archivos Bootstrap y cualquiera de los archivos CSS que pueda tener de bibliotecas de terceros. Esto asegura que su carga dure, y por lo tanto el contenido anulará cualquier estilo de los dos archivos. Entonces una forma de personalizar esto es usar una clase personalizada. Por ejemplo, si quisieras cambiar la barra de navegación, simplemente
podríamos agregar nuestra propia clase personalizada dentro de aquí. Vamos por la productividad nav. Podemos agarrar esta clase y podemos llevarnos esto a nuestros estilos personalizados. Por lo tanto guarda nuestro archivo de índice. Abre nuestro styles.css. Ya que es una clase necesitamos el punto. Entonces podemos apuntar a nuestra clase personalizada con cualquier propiedad CSS que nos gustaría. A modo de ejemplo, simplemente podemos cambiar el fondo para que sea un valor. Vayamos por DDD. Guarda esto, agrega al navegador, ve a la página de inicio y ahora podemos ver nuestro color de fondo personalizado. Otra forma de anular cualquier estilo Bootstraps es simplemente apuntar al nombre del elemento, o a un enfoque más general. Por ejemplo, en lugar de agregar una clase, podemos usar algún CSS regular dirigiéndose a cualquiera de estos elementos HTML. Si quisiéramos aplicar un fondo personalizado a cualquiera de nuestros desarrolladores en la página. Podríamos simplemente agregar un selector de dev para un campo personalizado, recargar el navegador, y esto ahora se aplica a todos los desarrolladores en nuestro sitio. Entonces este no es un gran ejemplo de aspecto, pero es una forma en que podemos anular cualquiera de los valores predeterminados, y otra forma de hacerlo es usar cualquiera de las clases de Bootstrap existentes y luego podemos agregar o anular. Por ejemplo, si vamos a nuestro contacts.html, todas las entradas que hemos agregado han tenido esta clase de control de forma. Entonces agarra esto y usa esto dentro de nuestro propio styles.css. Vamos a eliminar esto, entonces apuntamos en clase de control de formulario de Bootstrap. Al hacer esto todos los estilos de control de formulario existentes seguirán aplicándose ya que estamos usando las hojas de estilo Bootstrap. Pero como nuestra hoja de estilo se incluye en última instancia, cualquier cosa que agreguemos dentro de aquí o bien
agregará o anulará cualquiera de estos valores predeterminados de Bootstrap. Por ejemplo, si en absoluto, todas nuestras entradas de formulario necesitaban algún relleno extra, podríamos agregar 30 píxeles a la parte superior e inferior y cero a la izquierda y a la derecha, y quizá también queramos quitar todos los radios fronterizas-fronterizas de nuestro y podríamos hacer esto fácilmente estableciendo esto como un valor de cero. Guarda este agregado en nuestra página Contáctenos. Ahora tenemos las esquinas cuadradas afiladas en nuestras entradas y pequeño relleno en la parte superior e inferior. Si entramos en las herramientas de desarrollador haríamos clic con el botón derecho e inspeccionaríamos. Eso es como uno de nuestros insumos. Podemos ver nuestro styles.css personalizado tiene nuestro relleno y borde radio aplicado arriba en la parte superior. También el control de formulario, que se aplica mediante hojas de estilo Bootstrap, aún tiene todas estas propiedades entrando en vigor. No obstante, si echamos un vistazo al relleno y también al borde radio
ambas propiedades se han tachado ya que ahora estamos usando un estilo personalizado justo arriba. Esto significa que aunque estamos usando Bootstrap como base para nuestro proyecto, no
estamos limitados por él. También podemos crear cualquier característica personalizada y también un aspecto y tacto totalmente personalizados.
17. Reflexiones finales: Enhorabuena por llegar al final de esta clase. Espero que hayan disfrutado tomando este curso tanto como me haya gustado construirlo también. No puedo esperar a ver lo que ustedes crean. Esperemos que compartas tu proyecto en el área de proyectos para que todos los demás lo vean. Esperemos que puedas usar tus nuevas habilidades de Bootstrap encontradas. Ponga esto en práctica, construyendo algunos proyectos futuros. Gracias por tomar esta clase y ojalá te vuelva a ver en el futuro.
Chris Dixon, Web Developer & Online Teacher
