Crea tu sitio web | Hadi Youness | Skillshare
Menú
Buscar

Velocidad de reproducción


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Lecciones en esta clase

    • 1.

      Introducción

      1:31

    • 2.

      ¿Qué es Bootstrap

      2:08

    • 3.

      Elementos

      12:49

    • 4.

      Listas y colores

      8:19

    • 5.

      Imágenes

      6:14

    • 6.

      Tablas

      12:18

    • 7.

      Formularios

      14:24

    • 8.

      Formularios 2

      8:54

    • 9.

      Cheques y radios

      13:46

    • 10.

      Rango Y entrada

      13:42

    • 11.

      disposición/composición/diseño

      12:52

    • 12.

      Componentes

      14:35

    • 13.

      Tarjetas

      11:56

    • 14.

      Tarjetas 2

      11:21

    • 15.

      Carrusel

      10:57

    • 16.

      Navar

      14:58

    • 17.

      Sitio web de Bootstrap: Navbar

      12:01

    • 18.

      Hogar y misión

      12:08

    • 19.

      Productos

      7:06

    • 20.

      Marcas

      7:21

    • 21.

      Clientes

      11:15

    • 22.

      Contacte con nosotros

      14:50

    • 23.

      Project

      1:37

  • --
  • Nivel principiante
  • Nivel intermedio
  • Nivel avanzado
  • Todos los niveles

Generado por la comunidad

El nivel se determina según la opinión de la mayoría de los estudiantes que han dejado reseñas en esta clase. La recomendación del profesor o de la profesora se muestra hasta que se recopilen al menos 5 reseñas de estudiantes.

139

Estudiantes

--

Proyectos

Acerca de esta clase

Este curso trata de usar Bootstrap para crear y mejorar sitios web existentes.

Debes estar informado sobre HTML para que puedas completar este curso, si no es así, te animo a ver la clase HTML y CSS antes de comenzar con éste.

Este curso consta de dos partes:

1-Descubrimiento de diferentes clases, formas y componentes

2- Usándolos para crear un sitio web puro de Bootstrap.

En la primera parte vamos a usar diferentes clases de correas de arranque disponibles para nosotros y crear diferentes formas y componentes como encabezamientos, párrafos, tarjetas, navbars, y mucho más.

En la segunda parte vamos a usar lo que hemos aprendido hasta ahora y crear un sitio web completo con Bootstrap y HTML.

Espero que disfrutes de esta clase. No te olvides de dejar una reseña incluyendo cualquier sugerencia que puedas tener. Tus sugerencias son extremadamente importantes para mí actualizar y mejorar mi clase.

¡Gracias por tomar esta clase y buena suerte!

Conoce a tu profesor(a)

Teacher Profile Image

Hadi Youness

Computer Engineer

Profesor(a)

Hello, I'm Hadi. I am studying Computer Engineering at the Lebanese American University (LAU). I like to share my knowledge with everybody and I believe that teaching is a perfect way to understand anything since you must be well informed about something to be able to teach it in the simplest possible ways!

Ver perfil completo

Level: All Levels

Valoración de la clase

¿Se cumplieron las expectativas?
    ¡Superadas!
  • 0%
  • 0%
  • Un poco
  • 0%
  • No realmente
  • 0%

¿Por qué unirse a Skillshare?

Mira las galardonadas Skillshare Originals

Cada clase tiene lecciones cortas y proyectos prácticos

Tu membresía apoya a los profesores de Skillshare

Aprende desde cualquier lugar

Ve clases sobre la marcha con la aplicación de Skillshare. Progresa en línea o descarga las clases para verlas en el avión, el metro o donde sea que aprendas mejor.

Transcripciones

1. Introducción: Hola y bienvenidos. Tengo unidades y esto es crear tu sitio web usando Bootstrap. Entonces, en primer lugar, ¿qué es Bootstrap? Básicamente, bootstrap es un sitio web que nos permite tomar las clases ya implementadas e incorporadas y utilizarlas en nuestra propia página web. podamos tomar las clases que están disponibles para nosotros en bootstrap y utilizarlas en nuestros archivos HTML para modificar y hacer que nuestro sitio web se vea más bonito. Entonces esta es la idea general sobre bootstrap. Y en esta clase, vamos a revisar las diferentes clases. Bootstrap, después aprende a usarlos. Y por supuesto, um, y nuestros sitios web. Entonces vamos a usar lo que hemos aprendido hasta ahora y construir nuestra propia página web. Y ten en cuenta, este sitio web será urllib construido usando Bootstrap. Y por supuesto, terminaremos nuestra clase con la creación del proyecto. Y esta sesión de proyecto es para que construyas y crees por tu cuenta y por supuesto los publiques y la sección de proyectos para que te pueda dar una revisión y algunas sugerencias. Y por supuesto, para que completes esta clase, deberías poder entender los elementos básicos o las tareas básicas que vas a usar un HTML. Entonces, sin más preámbulos, empecemos. 2. Qué es Bootstrap: Hola y bienvenidos. Por lo que hoy vamos a hablar de Bootstrap. Y bootstrap es un marco CSS gratuito y de código abierto. Y básicamente contiene plantillas o formularios de diseño basados en CSS y JavaScript, botones, navegación, y otros componentes de interfaz. Y si no estás familiarizado con HTML y CSS, te animo encarecidamente a que empieces con esos antes de que puedan volver a mi clase anterior y ver estos temas, entonces vuelve aquí y empieza con Bootstrap. Y para esta clase vamos a utilizar el código de Visual Studio. Y puedes ir a Google y a la derecha, descargar código Visual Studio y presionar descargar. Y obtendrás la última versión. Entonces esto es todo para el código de Visual Studio. Y ahora dividamos nuestra tarea en otras más simples. Entonces, en primer lugar, bootstrapped es, como dijimos, un marco CSS libre y de código abierto. Entonces, ¿qué significa eso? Significa que siempre que vamos a escribir nuestro archivo HTML y CSS, siempre podemos usar la ayuda de bootstrap. Entonces en lugar de escribir el encabezado y especificar su ancho, su color, su diseño, donde quería que estuviera. Simplemente puedo usar Bootstrap para hacer el trabajo por mí. Y es más fácil y siempre mejor usar este tipo de framework. Entonces, en primer lugar, vamos a ver diferentes componentes de interfaz y cómo usarlos usando un bootstrap. Entonces vamos a crear varios componentes y varias formas. Después de eso, vamos a terminar nuestra clase con la creación un sitio web completo usando HTML, CSS, y Bootstrap. Entonces esto es todo. Empecemos con nuestro primer video. 3. Elementos: Entonces lo primero que hay que usar Bootstrap es ir a bootstrap.com. Y esta es la página de inicio. Entonces haz click en empezar. Esta es la introducción, Quickstart, CSS JavaScript. Y podemos ignorar todos estos e ir todo el camino hasta nuestra plantilla de inicio. Por lo que esta es la plantilla iniciada de bootstrap. Como puedes ver, incluye la longitud para CSS, documento Bootstrap que CSS y también el enlace para el JavaScript. Entonces ahora copiemos esto y volvamos a nuestro código de Visual Studio. Ya creé un archivo y lo llamé Bootstrap. Aquí te dejamos algunas imágenes que vamos a utilizar más adelante, por supuesto. Y lo primero que vamos a hacer es crear el archivo HTML. Por lo que simplemente podemos escribir index.html. Este es nuestro archivo HTML. Simplemente basamos aquí toda nuestra plantilla de inicio de Bootstrap. Y déjame simplemente guardar esto. Y por supuesto, si queremos revisar este archivo, siempre podemos hacer clic, hacer clic derecho en nuestro archivo y abrir y por defecto el navegador. Como podemos ver, este es nuestro HTML5. Dice Hola Mundo. Este es el encabezado que creamos, o es básicamente que el predeterminado en Bootstrap. Por lo que siempre podemos quitarlo. Y por supuesto, si volvemos aquí, refrescamos, ya no estará disponible. No obstante, este Hello World es del título. Y déjame simplemente cambiarlo y suscribir Bootstrap. Entonces déjame solo crear un encabezamiento. Bienvenido a nuestro sitio web bootstrap. Y si vuelvo aquí y refresco, esto aparecerá. Entonces como podemos ver aquí, este es un rumbo uno y este es el rumbo más grande. Tenemos encabezamientos que van de uno todo el camino a sí mismo. Y todos están disponibles en Bootstrap. Ahora, cada vez que creamos esta gonorrea agregando, cada vez que escribimos una etiqueta uno y la etiqueta de cierre H2, nunca usamos realmente Bootstrap aquí, simplemente especificamos que este es un encabezado en HTML. Entonces si escribo, por ejemplo, en x2 y esto va a volver aquí, refresca. Este es el encabezamiento uno y esto está sumando dos. Ahora en bootstrap, tenemos el H1, H2, o todas estas son clases y Bootstrap. Por lo que podemos especificar aquí y este H2 último, y vamos a especificar la clase H1. Si vuelvo aquí, si basura, como podemos ver. Este rubro tomó los atributos y parece que es un Encabezado uno, pesar de que creamos este rubro como Epígrafe dos. No obstante, como podemos ver, es lo mismo y estas son clases en Bootstrap. Déjame solo ajustar esto y clase H1 y luego verlo claramente antes de dejarme crear un encabezamiento dice sexo, tenía que volver atrás, refrescar. Como se puede ver, esto se dirige al sexo y se ve muy pequeño. No obstante, si le doy una clase, cada una, se verá como este rubro uno. Y esto no es básicamente para los rubros. Podemos crear agregando 123456. Ahora, también podemos personalizar el encabezado. Entonces por ejemplo, si quiero escribir Bienvenido a nuestro sitio web bootstrap, sin embargo, quiero escribir este bootstrap como desvanecido. Por lo que simplemente puedo dejarme borrarlo. Y lo arrastraré en pequeño. Y la clase será silenciada. Y escribiría aquí Bootstrap. Y eso está comprobado como podemos ver. Y de esta manera personalizamos nuestro rumbo con un paso muy sencillo y se ve un poco mejor. Ahora. Y volvamos a nuestro código y aprendamos a mostrar nuestros encabezamientos. Entonces aquí creamos nuestro encabezamiento uno. Y por ejemplo, si quiero mostrarlo, puedo usar la clase display one. Y verás la diferencia en un minuto. Entonces mostrar uno y guardar volver atrás. Y como pueden ver, este display uno hará que nuestro rumbo no sea Becker. No obstante, será el tamaño de las letras son un poco más pequeñas. Y esto es básicamente para la pantalla. Y por supuesto podemos mostrar cualquier clase, por ejemplo, es si escribo aquí el SpaceX. Y se verá como el sexo de cabecera. A pesar de que si escribo edge six y escribo esto como agregando seis y le doy una clase, display. Sx, retrocede, refresca. Se verán exactamente iguales. Y por supuesto, si le doy una clase es jugar uno para ser más grande que este display. Ahora, también tenemos el liderato de clase, y básicamente solo hace que cualquier párrafo destaque agregándolo. Entonces, por ejemplo, permítanme borrar estos encabezamientos y vamos crear un párrafo con algunos aprendices a aprender ayuda. Y déjame volver aquí y veamos el párrafo. Entonces este es nuestro párrafo. Volvamos atrás y le demos una clase de plomo. Ahora, vuelve aquí. Y como pueden ver, este es nuestro párrafo tras modificación que se verá. Al igual que esto. Y puedes estar de acuerdo en que este es un párrafo con mejor aspecto que el anterior simplemente añadiendo este plomo de clase. Ahora y HTML, tenemos el estilo para los elementos, tenemos el siguiente elemento en línea. Permítanme sólo demostrar algunos de los ejemplos. Entonces, por ejemplo, si quiero resaltar una palabra, simplemente puedo usar la etiqueta MAC. Entonces si tengo, esto, es el MAC atado a la luz alta. Y en este caso quiero resaltar esta palabra. Entonces si escribo Mark aquí y esos resaltados detallados, Vuelve atrás. Y como se puede ver, esta es la marca para resaltar textos y la palabra resaltar en realidad está resaltada. Por supuesto, también tenemos otro elemento de texto en línea. Y en este caso será la etiqueta d, l o delete. Entonces si tengo a Lorem, Déjame solo bajando pipa y como podemos ver, tenemos a nuestro Señor y yo simplemente añadiré la etiqueta de borrar. Lauren cinco. Regresa, refresca, y vamos a conseguir nuestro párrafo de inicio de sesión, pero con una línea recta en el medio. Y por supuesto también tenemos la línea que está debajo y la podemos usar usando el Uta x2, y2 y un bajarle cinco, retroceder, refrescar. Y esta es nuestra etiqueta. Y tenemos tantas otras cosas en las que no vamos a entrar tanto detalle. No obstante, siempre podemos usar Bootstrap para este tipo de cosas. Realmente no necesitamos escribir la etiqueta aquí o aquí. Entonces, por ejemplo, permítanme simplemente borrar esto. Y en lugar de usar la masterclass, simplemente puedo usar el cristal de marca DOD usando Bootstrap. Entonces tengo un párrafo, tenemos ocho, y simplemente puedo usar la clase aquí. Marca, retrocede, refresca, y como puedes ver, se resaltará. Ahora por supuesto, si quieres resaltar unos elementos específicos, por ejemplo. De esta manera, siempre podemos crear, expandir, y escribir la palabra dentro y luego añadirle la marca de clase. Permítanme borrar esto. Y el, la marca de clase desde aquí, retrocede y refresca. Y como podemos ver, obtuvimos el mismo resultado exacto que antes. Ahora volvamos a nuestro código y eliminemos este párrafo. También tenemos abreviaturas, así que vamos a crear un párrafo aquí. Y dentro de este párrafo tenemos una abreviatura para cierta palabra. Y el título será, por ejemplo. Y esto es, por ejemplo, CSS. Si regreso y refresco mi página, como podemos ver, tenemos esta abreviatura y para un tamaño de fuente ligeramente menor, podemos agregar el inicialismo de clase. Y permítanme simplemente crear otra abreviatura sólo para ver la diferencia. Por lo que aquí también tenemos CSS. No obstante, sólo nosotros, también tenemos la clase. Cualquier caparazón no lo hace. Si volvemos a nuestro navegador, y como puedes ver, es un tamaño de fuente ligeramente menor. Y esto es todo para la abreviatura. Y por último, el último elemento que vamos a cubrir en este video como los códigos de bloque. Y en este caso, siempre que vamos a crear un código de bloque, necesitamos abrir las etiquetas de código de bloque y tenemos algunos aprenden aquí. Entonces este es el volumen nueve. Regresa, refresca, y este es nuestro código. No obstante, aquí podemos agregar el vaso y también será apagón. Como puedes ver, la mayoría de las clases tenían el mismo nombre que la etiqueta. Tan solo para simplificar las cosas para ustedes chicos y solo para que sea un poco más fácil y como pueden ver, es un poco más grande y se ve mejor. Ahora también tenemos la fuente. Siempre que escribimos un código, lo más probable es que quieras agregar nuestra fuente. Entonces este es nuestro frío. Aquí puedo agregar una figura, Doug. Y déjame simplemente reemplazar aquí. Y esta es nuestra figura. Dentro de nuestra figura, tenemos nuestro código, y por supuesto, tenemos nuestro, por ejemplo, nuestro título de higo o título. Y en este caso, simplemente escribiré Loudon siete. Y aquí puedo agregar el código de suerte de clase y ponerlo para indicar que este es el título o el pie de página de nuestro código de bloque. Regresa y como puedes ver, esta es nuestra leyenda y este es nuestro código de bloque. Entonces esto es básicamente para este video. En el siguiente video vamos a hablar de menos. Entonces nos vemos. 4. Listas y colores: Pasando a menos. Y a menos que tengamos una lista sin estilo y tengamos algo que se llama lista en línea. Entonces, empecemos con lo desestilizado. Y esto es básicamente como lo indica el nombre, es una lista sin clasificar. Y esto sólo se aplicará a los hijos inmediatos de los ítems de la lista. Entonces, por ejemplo, permítanme simplemente borrar la figura. Y en este caso, para crear una lista, como sabemos, podemos crear una lista desordenada. Dentro de esta lista desordenada. Déjame solo conseguir un punto de lista cinco y copiar esto un par de veces. Por lo que 12345. Y en este caso, este es el primer elemento de lista. Y si vuelvo aquí y refresco, y como podemos ver, tenemos una lista desordenada con algunos puntos de bala. obstante, si no queremos que estos puntos, puntos apelen, simplemente podemos usar la lista y la clase estilizada de bootstrap. Entonces en nuestra lista desordenada, o puedo escribir clase y usar la lista y el estilo. Tu espalda, refresca. Y como puedes ver, los puntos de bala desaparecerán. Y también dijimos que estas características no se aplicarán a los hijos de los niños. Entonces supongamos que tengo una nuestra lista desordenada, otra lista desordenada. En este caso, consistirá en lorem diez. Y si vuelvo aquí, refresca, como pueden ver, este punto de bala seguirá apareciendo sentido este niño no es el niño como la primera lista desordenada. Entonces esto es básicamente para la lista sin estilo. Pasemos a algo que se llama en línea. Y en este caso, podemos quitar la bala y aplicar algún margen ligero con una combinación de dos clases. Tenemos el plazo de lista y la lista y línea de partida. Y los vamos a explorar ahora mismo. Entonces lo primero que vamos a hacer es quitar todos estos elementos. Entonces esta es nuestra lista desordenada. No obstante, no queremos que se desestile. Queremos que sea menos que línea. Y esto se usa básicamente en barras de navegación. Siempre que queramos crear un ABA, podemos usar este tipo de clases. Y por supuesto tenemos nuestro primer artículo. Entonces déjame solo crear casa, bienvenido. Y estado. Y por supuesto, necesitamos agregar aquí una clase llamada lista y lista y línea de ítem. Y necesitamos agregar la misma clase aquí y aquí. Y este es un atajo si quieres usarlo. Siempre que quieras agregar algo en más de un lugar, puedes hacer click aquí, por ejemplo. Y haga clic en agregar en su teclado y luego haga clic en la otra posición. Entonces estas son, se puede montar en estas posiciones al mismo tiempo. Entonces si presiono el espacio aquí, puede ver que aquí podemos escribir cristal y lista y línea de partida. Ahora volvamos atrás y refresquemos. Y como podemos ver, nuestros artículos ahora están listados en la misma línea, casa, bienvenida y estado. Y esto es básicamente para el inline para no ser. También tenemos tantas descripciones y tantos elementos que puedes ir y echar un vistazo en la página web de Bootstrap. Hay tantos elementos y tantas clases que puedes usar para hacer que tu sitio web se vea mejor. Pero estos son los conceptos básicos que debemos conocer antes de crear cualquier sitio web usando Bootstrap. Ahora como tenemos algunos artículos, podemos, vamos a crear algunos otros y podemos hablar de colores y Bootstrap usando estos ítems. Entonces lista y línea de partida. Y en este caso, lo nombraré. Contáctanos. Y en este caso, si vuelvo a nuestro navegador y refresco nuestro ítem Contáctenos. Entonces en primer lugar, tenemos en Bootstrap tantos colores. Volvamos a nuestro bootstrap. Y aquí tenemos a los economistas. Entonces, en primer lugar, tenemos la información primaria, secundaria de éxito, advertencia, peligro, luz, y oscuridad. Y también tienes tantos ajustes por estos y puedes seguir adelante y probarlos tú mismo. No obstante, vamos a probar algunos de los originales y utilizar a los eruditos. Simplemente podemos ir a nuestro artículo de lista y aquí tenemos nuestro artículo de inicio. Podemos utilizar el texto info para indicar que se trata de una información. Y como se puede ver, se volverá azul. Y por ejemplo, tenemos el éxito. éxito tan gravado. Cambiemos esto a peligro, texto rojo, peligro. Y este será el hacha oscuro. Ahora, volvamos, refresquemos. Y como podemos ver, tenemos ahora el estatus de bienvenida a casa. Contáctanos. Todos estos artículos son de diferentes colores y simplemente creamos a los eruditos o usamos estos colores, prompt Bootstrap sin usar ningún CSS en absoluto de nuestro lado. Espero que a estas alturas entiendas completamente qué es Bootstrap y por qué lo usamos. Por lo que simplemente podemos crear estos estatus CSS o característica en nuestro archivo aquí. Pero elegimos no tensar. Ya están creados y disponibles para nosotros siempre que queramos usarlos. Ahora, ya que hablamos de colores, hablemos de color de fondo. Y para usar esto, simplemente podemos hacer la derecha B, G y dash dot por ejemplo. Volvamos aquí. Y como podemos ver, este depurador de ítem encendido, este ítem resulta oscuro. Ahora usemos VG peligro, BG, éxito, y básicamente son las mismas clases. Pero como el texto, sin embargo, escribimos Vg para indicar que estos son antecedentes. Entonces VGS, por ejemplo, himno. Ahora vuelve atrás, refresca. Y sé que no coinciden, pero esto es sólo una simple indicación de cómo usarlos. Y esto es básicamente por los colores. Tenemos tantos autos en bootstrap. Y puedes seguir adelante y revisarlos desde la página web original. Y hay súper fáciles y agradables de usar y aprender. Y te animo a que vayas y los revises tú mismo. Entonces esto es todo para este video. Y el siguiente video vamos a descubrir algunos otros componentes en Bootstrap. Tenemos tantos componentes y vamos a pasar por la mayoría de ellos. Y con eso dicho, este es el final de este video. Nos vemos el siguiente. 5. Imágenes: Hola y bienvenidos de nuevo. Y en este video vamos a empezar con imágenes. Entonces, en primer lugar, para crear una imagen, simplemente podemos usar la etiqueta geo. Y aquí necesitamos escribir nuestra fuente y luego seguir la alternativa. Entonces esta alternativa es usar solo para indicar que esta imagen es, por ejemplo, digamos que tengo niño un niño tomó una teoría, usemos la primera imagen. Buena. Y en este caso, la imagen no se abrió por ningún motivo. El alternativo será esto como E primero. Y si sigo adelante y abro esto, simplemente podemos usar eso. A ver que este es el primero asustado ya que no agregamos el número del ciclo solar. Ahora para agregar la fuente, simplemente podemos ir a nuestro archivo de imágenes. Tenemos estas imágenes y vamos a usar la buena. Cuadro, retroceder, refrescar. Y como podemos ver, este es el primer cuadro. Y se puede ver claramente que este cuadro es muy grande y tenemos que ajustarlo. Entonces hagámoslo usando Bootstrap. Entonces, en primer lugar, esta es nuestra fuente. Esta es la alternativa. Añadamos aquí nuestras gafas. Entonces el primero, así que vamos a sumar es el fluido de imagen. Ahora vuelve atrás, refresca. Y para ajustar nuestra imagen, necesitamos agregarla a una división específica o a una forma específica. Y en este caso, para hacer eso, simplemente podemos agregar nuestra división aquí, escribir def, mover todo esto, y añadirlo a la división. Dentro de nuestra división, sumaré el contenedor de clase y ahora regresaré. Y vamos a refrescarnos. Y esta es nuestra imagen ahora ajustada. Y esto es sólo usar la división que otra vez, nuestro archivo HTML. Y por supuesto, la clase de contenedor de Bootstrap. Ahora supongamos que quiero agregar algunas imágenes aquí. Entonces, por ejemplo, quiero tres imágenes. El primero aquí, segundo, tercero. Y en este caso, necesito crear una fila. Entonces esta es la primera fila. Y luego necesito crear algunas columnas. Entonces esta es la primera columna, segunda columna, y la tercera columna. Ahora, por lo general nuestro navegador se divide en 12 elementos o 12 elementos. Y en este caso, podemos dividir estos 1223 elementos iguales utilizando para cada uno. Por lo que la primera columna tomará papel de aluminio, la segunda tomaremos papel de aluminio, y la tercera también, lo definen para ello. Para hacer eso, permítanme simplemente borrar esto. Y vamos a crear el rho. Y podemos crear el rol ya sea creando las muertes y luego escribiendo la clase Grove, o simplemente escribiendo el punto rho y luego presionando Enter. Y esto creará automáticamente una división de última fila. Ahora necesitamos crear la columna, y en este caso, vamos a crear la columna. Y la primera columna será de cuatro. Y entonces también tenemos otra columna, lo siento por escribir d columna de puntos hacia adelante. Y finalmente el último sería ese componente también. Y aquí podemos agregar nuestras fotos. Por lo que la primera imagen, la primera imagen será de imágenes y obtener b1. El segundo imagen será también de imágenes, llegar a. Y la última imagen serán imágenes. Y volvamos atrás y refresquemos. Y como podemos ver, conseguimos nuestras imágenes, sin embargo, no son como queremos. Por lo que voy a golpear el fluido de imagen de clase y el fluido aquí también. Y finalmente agregado a esta clase de imagen fluido y volver atrás, refrescar. Y como podemos ver, aquí tenemos nuestras imágenes. Por lo que estas son nuestras imágenes y se dividen en tres lados iguales. Y por supuesto, si los queremos en el navegador como papel de aluminio, necesitamos fluido de dos años. Ya que utilizamos la clase de fluido de imagen, podemos usar el fluido del contenedor también. Así que retrocede, refresca. Y como podemos ver, estas son nuestras tres imágenes. Ahora, supongamos que no queremos estos bordes cuadrados. Siempre podemos ajustar estas imágenes usando las clases en Bootstrap. Por lo que dentro de nuestra clase aquí, puedo ver que quiero que esta imagen sea redondeada si vuelvo aquí. Y como puedes notar, que esta imagen es un poco redondeada en comparación con las otras. Y esto es básicamente para crear imágenes y colocarlas en nuestro sitio web usando Bootstrap. Por supuesto, tenemos tantos elementos o tantas características que puedes usar. Pero los vamos a explorar más adelante mientras creamos nuestros sitios web. Por ahora, creo que esto es suficiente para las imágenes. Ahora, pasemos a otro componente que sea capaz, y lo discutiremos en el siguiente video. Entonces nos vemos. 6. Tablas: Hola y bienvenidos de nuevo. En este video vamos a crear algunas tablas. Entonces, en primer lugar, como de costumbre, donde sea que necesitemos crear cualquier componente en HTML, simplemente lo escribimos, luego golpeamos enter. Entonces esta es nuestra mesa. Dentro de nuestra mesa, como sabemos, tenemos la cabeza y el cuerpo. Entonces, antes que nada, vamos a crear la cabeza. Entonces este es el cabezal de mesa d-hat. Y dentro de nuestra cabeza de mesa, necesitamos algunos encabezamientos. Entonces supongamos que quiero crear una tabla que conste en un FirstName, LastName, y email. Y para ello, simplemente necesitamos agregar el encabezamiento, el primer encabezamiento, ese será el nombre de pila. Y luego el segundo, apellido, finalmente, dirección de correo electrónico. Y por supuesto, después de terminar, vamos a volver. Esta es nuestra dirección de correo electrónico FirstName, lastName, y se ven demasiado pequeños. Pero por ahora vamos a trabajar con él. Entonces esta es la cabeza. Vamos a seguir adelante y crear a nuestro amigo. Dentro de nuestro cuerpo. Tenemos que crear nuestra primera fila. Y por dentro creceré. Esto será y los primeros datos, el nombre será Mi nombre Heidi, y luego Urano, y luego mi dirección de correo electrónico, por ejemplo, 1-2-3 en gmail.com. Ahora bien, esta es nuestra primera fila. Entonces podemos crear otra fila. Dentro de la segunda fila. El primer nombre será marca, y luego el apellido será, supongamos fuente. Y entonces por supuesto, el correo electrónico sería de uno a dos en email.com. Ahora si volvemos a la actualización de nuestro navegador, podemos ver que acabamos de crear una mesa entera que consiste en una cabeza y un cuerpo. Y dentro de nuestro cuerpo tenemos nuestros datos. Por lo que hemos tenido unidades, Mark Thornton, y si volvemos aquí, creemos que necesitamos algunos ajustes en el establo ya que no se ve muy bien. Entonces lo primero que vamos a hacer es darle a esta tabla el atributo o la tabla de clases desde bootstrap. Entonces tabla de clases, volver atrás, refrescar. Y como pueden ver, hay una enorme diferencia entre nuestra primera mesa y esta mesa. Esta mesa está en toda la página y una mesa de mejor aspecto, y tenemos estas líneas. Por lo que la primera línea es más atractiva que las otras, ya que éstas son ligeras quizá, y este es el rubro. Y por supuesto, nuestros primeros elementos están en perno y comparándolos con los datos. Entonces esta es sólo una palabra simple que cambió tanto. Ahora, claro, si no estamos contentos con el establo, siempre podemos cambiar y agregar algunas clases aquí. Entonces, por ejemplo, si quiero que esta fila sea oscura. Segunda fila para ser ligera, simplemente puedo agregar estos en nuestra clase de mesa. Entonces, por ejemplo, supongamos que quiero que todas las filas sean info. Para que pueda agregar tabla y volver atrás, refrescar. Como podemos ver, la mesa se puso azul. Ahora, no queremos eso. Simplemente queremos que la primera fila, por ejemplo, la primera fila de datos sea así. Por lo que podemos agregar aquí en clase y podemos detectar o color de fondo, lo siento, color NFO, volver atrás, refrescar y color de fondo de enfermedad. Y consiste en una fila que colorea en la que el color es azul. Ahora, movamos esto y hagámoslo oscuro, por ejemplo. Y como podemos ver, si lo oscurecimos, aquí no vamos a ver el texto. Entonces una forma de lidiar con eso es dar el texto para que sea más atractivo o más blanco. Tenemos la diapositiva de texto y podemos usarla aquí. Y esto se suele usar con el fondo oscuro, y le da un Taemin de mejor aspecto. Ahora, también podemos crear aquí la segunda tabla o la segunda fila, será una luz de color de fondo, y el texto será oscuro. Y esto es lo contrario de la primera fila. Y se verá más bonito. Y esto es básicamente por los colores. También tenemos la tira crecer. Y para hacer eso, simplemente podemos usar la clase de rayas de mesa aquí. Entonces en lugar de agregar estas clases y nuestra, dentro de nuestras filas, simplemente puedo agregar aquí tabla. Vuelve atrás, refresca. Y como podemos ver, ahora nuestra mesa está despojada. Entonces tenemos el primero así, El segundo, supongo que solo déjame añadir la tercera fila. Tercera fila de datos solo para ver la diferencia. Y esto es todo. Y así es como podemos crear un script rho, también tenemos la tabla oscura o table-rayada. Y mientras está oscuro, simplemente agregamos la mesa oscura aquí. Tan oscuro. Y por supuesto, si vuelvo ahora, refresca como dijimos, lo es. Y al mismo tiempo, mientras detecta como blanco. Ahora menos, pasemos a las filas dobles del hover. Y en este caso, solo, necesitamos agregar algo aquí. Y ese es el final. Vuelve atrás y refresca. Se puede ver que no es muy especial. Pensé sin embargo, cada vez que te muevas sobre los datos, eso sólo dará este efecto. Y es un bonito efecto. Y en realidad podemos hacer lo mismo con la versión oscura. Vuelve atrás. Y como pueden ver, tenemos este bonito efecto cada vez que pasamos cursor sobre cualquier dato dentro de nuestra tabla. Entonces esto es todo por las horribles filas. Y ahora tenemos algo que se llama un papel activo. Y esto se suele usar siempre que necesitamos precisar que esta paja. Por ejemplo, la primera fila es la activa y necesitamos mover la segunda. Entonces simplemente cambiamos o alternamos entre lo activo dentro de la primera segunda fila. No obstante, aquí solo aprendemos lo básico y en realidad hay una clase que podemos usar. Por ejemplo, en esta fila cuando podemos especificar que se trata de una fila activa. Ahora si volvemos, refrescamos, déjame ponerlo como mesa, solo tabla y refrescar. Volvamos a ver el problema. Lo siento, para agregar la mesa activa dentro de nuestra clase. Y si volvemos atrás, refrescamos, y esta es una fila activa dentro de nuestra mesa, es muy común y muy usado. Y por lo general cada vez que abres cualquier sitio web, por ejemplo aquí, este es un botón activo. Por lo que cada vez que presione en este formulario, éste desaparecerá. Y esta forma estaría activa ahora. Y también tenemos el efecto hover aquí. Como puedes ver, más o menos, donde cada vez que presionas hay un efecto de desplazamiento. Y estas son herramientas muy esenciales y muy poderosas que puedes usar dentro de tu web. Ahora pasemos a la mesa sin fronteras. Y para hacer eso, simplemente podemos sacar el activo de aquí. Y podemos usar la mesa sin bordes. Y esto nos dará una mesa sin fronteras. Entonces si volvemos aquí, refresca, como puedes ver, no tenemos calderas y no es tan bueno. No obstante, se utiliza en algunos sitios web. Y por supuesto, si queríamos que fuera más oscuro, simplemente podemos añadir la mesa oscura. Y creo que esto se verá un poco más bonito. Ahora también tenemos las mesas pequeñas. Y para ello, simplemente podemos añadir la tabla aquí. Y sólo eliminemos esto. Guardar, refrescar. Y esta es nuestra mesa. Y simplemente cortó todo el relleno por la mitad. Entonces solo para asegurarte de que entendiste la diferencia. Esta es la mesa como de costumbre. Y si escribimos tablas y retrocedemos, refrescamos, eso, nos pondremos un poco más pequeños ya que el relleno se cortará por la mitad. Ahora, pasemos a la cabeza ahora. Entonces ahora esta es nuestra cabeza. Podemos hacer exactamente lo mismo que hicimos para los datos. Por ejemplo, podemos sumar el año o tener una clase para indicar que esta es la tabla y será ligera. Por supuesto, vamos a mover esta mesa pequeña. Y como pueden ver ahora tenemos nuestro rumbo. Y es como ahora también podemos hacerlo como oscuro, por supuesto, simplemente agregando aquí oscuro. Y no voy a hacer eso ya que es lo mismo. Ahora pasemos al pie de página. Y en realidad, el pie de página es otro elemento que no es tan comúnmente utilizado. No obstante existe y simplemente podemos usarlo después del cuerpo. Por lo que siempre que terminemos el para el cuerpo, simplemente podemos añadir el pie de mesa. Y dentro de esta comida de mesa, probemos un poco. Entonces hola, o sólo intentémoslo pie de página. También lo hicieron el pie de página y el pie de página. Y ahora si volvemos atrás y refrescamos, vamos a conseguir Footer, Footer, y Footer. Ahora, por fin, también tenemos las subtitulaciones. Por lo que siempre que creemos una tabla, lo más probable es que necesitemos un pie de foto. Y para ello, simplemente podemos añadir este epígrafe justo antes de la cabeza. Por lo que podemos anexar Etag que se llama Caption y todos los usuarios. Entonces esta es la tabla de todos los usuarios. Y parecerá brillante hecho. Ahora bien, creo que esto es suficiente para las mesas. Estos son los conceptos básicos que debes saber siempre que queremos crear una tabla y HTML usando Bootstrap. Y con eso dicho, este es el final de este video. Nos vemos en el siguiente. 7. Formularios: Hola y bienvenidos de nuevo. Y en este video vamos a discutir los controles de formulario. Entonces déjame seguir adelante y borrar esto. Entonces para empezar, vamos a empezar con una entrada y un área de texto donde el usuario pueda escribir algo. Entonces, por ejemplo, si vamos a crear una entrada, tiene sentido comenzar con una división. Por lo que una vez que creemos nuestra división, podemos crear nuestro insumo y será de tipo II hecho, por ejemplo. Y vamos a darle una clase de control de forma. Y entonces sólo pongamos el positor es entrar tu correo electrónico aquí. Y después de eso, déjame simplemente abrir esto aquí. Y como podemos ver, este es nuestro insumo. Ahora bien, realmente no queremos que nuestra entrada esté en la parte superior de la página. A lo mejor queremos un poco de espacio. Entonces para hacer eso, simplemente podemos usar una de las clases que está relacionada con el relleno y en Bootstrap. Entonces tenemos varios. Una vez, por ejemplo, si queremos un relleno en el margen, lo siento, un margen en la parte superior. Simplemente podemos usar el MD y especificar la longitud. Por ejemplo, aquí, quería ser cinco píxeles. Si yo quisiera ser tres, otra vez, simplemente escriba tres. Se trata de cuatro márgenes, arriba, margen, MB inferior. Y entonces tenemos un hacha para eje X y por supuesto y para eje y. Por lo que eje X significa que nos dará un margen de último y secado. Y eje y significa que nos dará el margen desde botón superior. Y también podemos precisar, por ejemplo, que todo el margen debe ser de tres. Y si vuelvo ahora, refresco, podemos ver que tenemos tres de aquí y tres de aquí, y también tres de aquí. Y si insertamos algo después de esta entrada, vamos a llegar aquí otro relleno. Y esto es básicamente para la entrada, lo modificará más tarde, pero por ahora, déjame simplemente crear la otra división. Y luego esta división, vamos a tener un margen, también tres. Y por supuesto necesitamos crear un área de texto. Por lo que el nombre de esta área de texto será un ejemplo. No quiero una identificación por ahora. Desplazamiento de columna nosotros, de acuerdo, y ahora vamos a comprobar qué tenemos. Entonces estos son nuestros ataques hasta ahora. Podemos probar algo aquí. Por ejemplo, P tiene razón, y si lo guardamos, podemos ver que aquí tenemos abejas. No obstante, siempre que queramos escribir algo, podemos agregarlo o simplemente borrarlo y justo desde el principio. Y por supuesto, no es guapo, así que necesitamos modificarlo un poco. Ahora, volvamos aquí. Y veamos ¿qué podemos hacer? Lo primero que vamos a hacer es agregar aquí una clase de bootstrap, y es lo mismo que antes, que sería un control de formulario. Ya que vamos, estamos usando un formulario, ya que tiene sentido usar la clase de controlador por defecto. Si vuelvo aquí y podemos ver que tenemos un área de texto todo el camino en todo el navegador. Y lo mismo para el área de entrada. Ahora, podemos ver que el usuario podría no entender lo que estamos tratando de decir. Por lo que simplemente podemos agregar, por ejemplo, aquí una etiqueta para el correo electrónico y por supuesto otra etiqueta para el área de texto. Entonces una forma de hacerlo es simplemente agregar una etiqueta antes de la entrada. Y esta etiqueta estará teniendo la lámina, esta específica. Y déjame solo añadir una identificación aquí. Y será igual a entrada. Y esto es por la entrada. Y por supuesto, la clase será también para etiqueta. Entonces vamos a escribir algo aquí, por ejemplo, dirección de correo electrónico. Y por supuesto, después de terminar desde aquí, simplemente puedo quitar esto. O podemos escribir 1-2-3 en example.com. Y esto haría que el usuario comprendiera mejor lo que está pasando aquí. Entonces, en primer lugar, teníamos la dirección de correo electrónico y también tenemos el ejemplo aquí. Ahora volvamos atrás. Y como podemos ver, necesitamos ajustar área detecta. Entonces una forma de hacerlo es agregar también la etiqueta. Esta etiqueta será para área de texto. Y por supuesto, la clase será un extranjero etiquetado como antes. Y esta es área de texto. Y por supuesto, después de terminar desde aquí, simplemente borra esto y refresca. Y como puedes ver, tenemos nuestra dirección de correo electrónico y área de texto. Ahora bien, si por ejemplo, estamos encontrando que aquí tenemos tantos espacios, simplemente podemos modificar nuestro margen. Por ejemplo, aquí estamos diciendo que queremos estar teniendo dirección de correo electrónico y luego seguido de esto. Y por supuesto, seguido del área de texto con el cuadro de área de texto. Ahora por ejemplo, podríamos ajustar el margin-bottom aquí, lo siento, el margen a margin-bottom. Entonces si hago algo como esto y volvemos a refrescar, podemos ver que tenemos la dirección de correo electrónico en la parte superior de la página. Y por supuesto, el correo donde podemos insertar nuestro correo electrónico. Y por supuesto cada vez que presionamos Entrar aquí, pasará nada ya que no agregamos nada ni ninguna acción que pudiera resultar de ingresar o enviar nuestros datos. Por ahora, esta es nuestra dirección de correo electrónico y el área de texto. Ahora también tenemos el dimensionamiento. Por lo que tenemos el dimensionamiento de clases como. Control de formulario y luego especifica un determinado decidir. Entonces, por ejemplo, este tamaño, déjame simplemente cambiarlo aquí. Puedo ir a nuestra entrada y dentro de nuestra entrada y dentro de nuestra clase, podemos agregar control de formulario. Y luego seguido por LG. Y esto significa lodo. Vuelve atrás, refresca. Podemos ver que decide se hizo un poco más grande. Y tenemos tres clases, el LG y el predeterminado, y el pequeño SM. Ahora también podemos agregar el atributo deshabilitado, y este es un atributo booleano. Entonces por ejemplo, si tenemos algo que no vamos a mostrar para el usuario ya que podría no estar conectado. Y lo podemos hacer usando el botón deshabilitado. Entonces, por ejemplo, puedo volver a nuestro insumo. Y dentro de nuestra entrada simplemente agrego a los discapacitados aquí. Vuelve atrás, refresca. Y lo siento, déjame justo y por supuesto que no lo agregamos aquí, así que déjame agregarla. Por lo que hemos discapacitado. Y por supuesto volver atrás, refrescar. Como podemos ver, recibimos esta dirección de correo gris. Podemos teclear init o incluso eliminar cualquier cosa desde aquí. Por aquí, simplemente podemos añadir. Muy bien, ahora volvamos a nuestro código y hablemos de contraseña y confirmación de identidad. Entonces, en primer lugar, tenemos nuestra división. Permítanme simplemente eliminar todo esto y crear nuestro formulario. Y en esta forma, vamos sin acción, luego, ya que no lo aprendimos. Y ahora tenemos nuestra clase. Y luego tenemos dentro de nuestra clase. Usemos la fila y por supuesto g tres. Y entonces vamos a crear nuestro deficiente y esta es columna, déjenme darle el atributo de auto. Entonces vamos a crear nuestra mano de obra. Por lo que esta etiqueta será utilizada para correo electrónico. Correo electrónico, y luego por supuesto, nuestro tipo de entrada, podemos especificar que puede ser correo electrónico o texto, no importa. Y luego después del tipo, podemos agregar la clase, control de foro y por supuesto, texto plano. El positor será enviado por correo electrónico a example.com. Esto es diferido. Primera división. En la segunda división también se tendrá el auto de isla de vidrio y tenemos la etiqueta para esta etiqueta, será por la contraseña, así que simplemente escribiré pase, y luego la clase quedará visualmente oculta. Entonces esta es la clase que usamos siempre que queremos crear una contraseña. Y veremos qué haremos en un momento. Entonces esta es la entrada etiquetada. Yo, por supuesto, contraseña para ocultar la entrada. Y entonces la clase será para el control, seguida de la ID, que será el pasado que le dimos antes a la etiqueta. Y por supuesto el placeholder será contraseña. Y luego aquí solo necesitamos escribir ID Email. Entonces esta es nuestra segunda división. Y en la última división vamos a crear nuestro botón para sólo dar estos datos a nuestro servidor. Entonces, ¿cómo hacemos eso? Simplemente creamos nuestro, por supuesto, la clase será auto como antes. Y dentro de esta división simplemente vamos a crear el botón. El botón será conformación de identidad y el tipo será Enviar. Y luego la clase, vamos a dar algunas clases. Pero por ahora, déjame refrescar esto. Y como pueden ver, tenemos aquí el correo electrónico, correo electrónico en example.com. Después tenemos la contraseña de confirmación de identidad. Y como podemos ver aquí, esta afirmación de una identidad no parece un hielo. Nosotros lo vamos a modificar, pero con el uso de Bootstrap. Ahora bien, este es el correo electrónico en example.com. Déjame leer. Esto. En realidad no se ve bien. Entonces déjame simplemente decente o podemos usar lo visualmente oculto aquí también. Por lo que simplemente podemos añadir visualmente y luego volver atrás. Y vamos a ver. Hemos hecho visualmente. Y como podemos ver, ya no está aquí. Ahora bien, si volvemos a nuestro código, podemos ver que necesitamos ajustar este botón. Entonces tenemos varias clases aquí. Una de las clases más importantes es DBT, y eso indica que esto tiene un botón. Vuelvo ahora, veamos la diferencia. Y se ve muy, muy diferente de antes teníamos estas fronteras y la corriente no era agradable. Y ahora como puedes ver, se ve moderno y mucho más bonito. Entonces este es el primer ejemplo o la primera clase que vamos a usar. Por supuesto, podemos elegir el a fondo, por lo que el botón será primario por ahora. Y por supuesto, margen, abajo tres, volver atrás, refrescar. De esta manera podemos ver que ahora tenemos nuestro botón. Y por supuesto si queremos ajustar esto, simplemente podemos agregar a nuestra forma aquí los tres marginados y volver atrás, refrescar. Y ahora tenemos nuestro margen. Entonces esto es todo para la contraseña y el botón de confirmación de identidad. Siempre puedes cambiar lo que quieras si no te gusta el color o si quieres cambiar el tamaño, cualquier cosa puedes ir a bootstrap.com y revisar cada elemento y verás una descripción detallada de todos y cada uno de los elementos en ahí. Y por supuesto, por ejemplo, permítanme simplemente terminarlo con esto. Podemos cambiar este botón para que quede oscuro. Y creo que ahora se ve mejor con blanco y oscuro como colores. Y esto es todo para este video. Y el siguiente video, seguiremos con nuestra discusión sobre foros. Y vamos a introducir algunas nuevas formas que podemos utilizar y que son de uso común entre los sitios web. Entonces nos vemos. 8. Formularios 2: Ahora hablemos de la entrada de archivos. Siempre que veas algo o alineado, por ejemplo, y dentro de esta línea tenemos el atributo choose file. Esto suele ser una entrada de archivo. Ahora vamos a crear uno de ellos sólo para demostrar el uso de estas entradas de archivo. Entonces, por ejemplo, lo primero que vamos a hacer es crear nuestra división. Dentro de esta división, le daré una clase de mercancía arbusto. Y esta clase sería el margen, por supuesto, sólo para darle algún margen desde todos los ángulos, entonces tenemos nuestra mano de obra y así la etiqueta sería de archivo. Se formará la clase etiquetada como de costumbre. Y entonces también tenemos la etiqueta aquí podemos agregar, por ejemplo, archivo. Pero después de la etiqueta, podemos agregar nuestro insumo. Por lo que la entrada será de tipo archivo. El vidrio sería de control foráneo, seguido de la identificación sólo para hacerlo para la etiqueta. Y esto también es de archivo. Ahora volvamos atrás y refresquemos. Y como podemos ver, esta es nuestra etiqueta y esta es nuestra ficha Elegir. Siempre que presiono sobre esto, puedo ir a mi escritorio, Documentos, Descargas, etcétera. Elige cualquier archivo de aquí y subido. Ahora, veamos la diferencia entre esto y la etiqueta sin este HTML en este Bootstrap. Como podemos ver, no se ve elegante, no es tan moderno. No obstante, cuando agregamos este control de formulario de clase, creo que podemos estar de acuerdo en que se ve mucho mejor. Ahora bien, esto no es para la entrada del archivo. Tenemos también algunos otros atributos que podemos agregar, por ejemplo, las múltiples entradas. Podemos agregar múltiples archivos a la vez. Y también tenemos los deshabilitados, la entrada de archivo pequeño, pequeño y grande. Podemos o este es el tamaño predeterminado, podemos hacerlo más pequeño o más grande. No voy a repasar todos estos ya que los numeramos antes. No obstante, siempre puedes ir a bootstrap y comprobarlos. Algo aquí, en algún lugar aquí. Y creo que esto es lo básico. Y solo necesitamos los fundamentos para hacer nuestros sitios web si lo deseas, si quieres profundizar más en ellos, siempre puedes ir a Bootstrap. Pero por ahora, esta es nuestra entrada de archivos. Y vayamos a otro tema, y este es el recolector de color. Y aquí tenemos algo que se llama el recolector de color en realidad. Y en este caso, vamos a crear un deliberado será la esquina para los colores, por ejemplo, para columna. Y la clase será como de costumbre para el trabajo y un color. Y luego seguido de la entrada real. Y en este caso, tenemos la entrada de tipo. Hola, clase para el control. Y déjame simplemente borrarlo y veamos qué está pasando. Entonces si elimino la clase, vuelve atrás, refresca. Este es nuestro recolector de color FE, y presiona sobre él. Nos dará todos los rincones disponibles para nosotros. Este es el RGB. Podemos elegir desde aquí, cambiar los números, o elegir desde aquí. Y desde la pantalla. No obstante, no se ve bien. Por lo que una forma de ajustar esto es agregar la clase controlada de forma, seguida del color de control extraño. Vuelve atrás, refresca. Y como podemos ver, tenemos este aspecto más bonito, se ve mejor. Y hará el mismo trabajo que antes. No obstante, tal vez no queremos este color negro como defecto. Entonces, ¿cómo podemos modificar esto? Entonces una forma de hacerlo es volver a la entrada. Y dentro de la entrada tenemos algo, déjame simplemente agregar la idea para tripa más bien. Y entonces tenemos algo que se llama valor. Y dentro de este valor, podemos elegir cualquier número o cualquier color para ser el color predeterminado. Entonces, ¿cómo eliges el tipo de que podemos volver al color y Bootstrap la idea de cualquier color que queramos. Entonces supongamos que quiero este color. Simplemente puedo copiarlo, volver atrás, derecha, hashtag, este color, y luego volver a nuestro sitio web, refrescar. Y ahí vamos. Tenemos nuestro color azul por defecto. Entonces esto es básicamente para el color. Ahora, sigamos adelante y hablemos de las listas de datos. Por lo que en este caso, las listas de datos nos permiten crear un grupo de opciones que se puede acceder y autocompletar desde dentro de una entrada. Por lo que en realidad son similares a los elementos selectos, pero vienen con más estilo de menú, limitaciones y diferencia, y los exploraremos en este momento. Por lo que lo primero que debemos hacer para crear este tipo de lista como para crear la etiqueta y la etiqueta será como de costumbre. Entonces d4 es, será la lista de datos, luego la clase para etiqueta. Y por supuesto, esta es una lista de datos. Y luego seguido por la entrada real de tipo. En realidad podemos ignorar el tipo. Y vamos a crear la clase para el control. Después seguido de la ID para ser lista de datos, luego el tipo de Marcador de posición para subir. Y por supuesto, para crear esta idea, necesitamos tener la lista, los datos, las opciones de lista. Y en este caso, cada vez que hacemos algo así, si vamos y refrescamos, esta es nuestra lista de datos. Y aquí podemos buscar cualquiera, cualquier cosa que queramos. Ahora, las opciones serán después de la entrada. Podemos crear nuestra lista de datos. Y dentro de esta lista de datos, lista de datos. Déjame crear así. Y la idea serían opciones de lista de datos, como dijimos antes. Y luego abramos. Por lo que la primera opción será de valor. Digamos que te dividan Líbano que Egipto. Escribamos Estados Unidos. Y por último, India. Ahora volvamos, refresquemos. Y creo que aquí tenemos problemas. Por lo que esta es la opción de listas de datos, opciones de lista de datos. Vamos a mover clics aquí, guardar, volver atrás, refrescar, pulsar aquí. Y tenemos nuestras opciones aquí, Líbano, Egipto, Estados Unidos. Y podemos elegir entre ellos. O podemos escribir el nuestro propio, por ejemplo, Dubai. Y funcionará correctamente, pero estas son algunas opciones. Es posible que quieras hacerlas las las únicas opciones, depende completamente de ti. Y esto vendrá más tarde. Siempre que utilicemos JavaScript o cuando terminemos con nuestro sitio web. Y esto no es básicamente para la lista de datos, tema muy sencillo, pero también es muy potente y nos da un poco, o hace que el sitio web sea un poco más agradable ya el usuario realmente puede verlo que tiene algunas opciones o puede elegir de algo. Y no es sólo que sólo puede escribir si. Y esto es básicamente para este video. Pero dicho eso: Nos vemos en el siguiente. 9. Comprobaciones y radios: Ahora hablemos del selecto. Y este es un selecto personalizado que se puede utilizar en HTML. No obstante, tenemos algunas clases que podemos modificar o net podemos agregar a nuestros seleccionados. Entonces lo primero que vamos a hacer es volver a nuestro código, eliminar todo esto, y luego empezar desde cero. Por lo que lo primero es crear el select y sin nombre ni ID. Y simplemente puedo decir que la clase debe ser el control extranjero. Y empecemos con nuestras opciones. Por lo que la primera opción será, como de costumbre, opción número uno sería una, y aquí podemos secarla. Líbano, opción para comprarte dos Estados Unidos. Después seguido por el valor tres, Egipto. Y entonces estos son nuestros valores que simplemente los empujaron. Y por supuesto, podemos agregar aquí el área LeBron, y serán los ejemplos selectos por defecto. Por lo que este es el ejemplo de selección por defecto. Y por supuesto, si vuelvo aquí arriba en esto, y tenemos opciones DS3. Ahora, por ejemplo, no queremos que el Líbano esté apareciendo en el primero. Podríamos agregar la opción y se seleccionará. Y el valor será sin nadie, aquí no damos ningún valor. Y por supuesto, la opción sería abrir esto para seleccionar de Refrescar. Por lo que abre esto para seleccionar de arpanet. Tenemos todos estos disponibles para nosotros. Puedo elegir Estados Unidos, Egipto, y Líbano. No obstante, aquí es diferente a antes. Podemos probar cualquier cosa aquí dentro. Por lo que estas son las únicas opciones disponibles para nosotros, y necesitamos elegir una de ellas. Entonces esto es básicamente por el defecto. Ahora también podemos elegir el tamaño simplemente añadiendo el tamaño aquí. Por lo que tenemos el formulario select, puede agregar formulario select lunch. Y si vuelvo, refresca, como podemos ver, esta selección se hizo más grande. Y se ve claro. Ahora también podemos elegir el y este Abel. Y este es el atributo que agregamos antes, y es un booleano, por lo que simplemente podemos agregarlo aquí. Por lo que este habilitado volver atrás, refrescar y podemos elegir de él. Y son sitios web muy usados y comunes, sobre todo si no estás conectado y no puedes elegir ni modificar nada. Y este botón deshabilitado, atributo deshabilitado permitirá al sitio web o al creador asegurarse de que estás conectado para hacer esto, o puedes hacerlo. Entonces esto es básicamente para el selecto. Ahora hablemos de cheques y radios. Entonces sigamos adelante y eliminemos esto y creemos nuestro cheque. Entonces para hacer eso, simplemente podemos crear nuestra división y estaremos por shock dentro de nuestra división, vamos a crear nuestro insumo. Por lo que el tipo de esta entrada será una casilla de verificación. Y por supuesto, la clase será para Jack and put. Y luego la idea, digamos que esto es un cheque seguido por el etiquetado la clase. Por lo que aquí necesitamos agregar el cheque y luego la clase será antes de cheque etiquetado. Entonces esta es nuestra primera división por go. Y refresca esta página. Podemos ver que aquí tenemos esta división. No obstante, no tenemos nada dentro están etiquetados. Por lo tanto, permítanme añadir aquí. Consúltame, refresca. me hemos comprobado. Puedo comprobarlo o desmarcarlo y va a funcionar muy bien. Ahora, a veces no queremos este botón predeterminado sin marcar aquí. Necesitábamos serlo. Entonces una forma de hacerlo es hacer un cheque o decir para el navegador que este botón está comprobado. Entonces déjame copiar esto y pegarlo aquí. ¿Cómo se hace eso? Simplemente podemos ir a nuestra entrada y agregar la palabra comprobada, refrescar. Por lo que tenemos un botón que no está comprobado y la otra casilla de verificación está marcada. Y siempre se puede alternar o elegir entre ellos o marcar ambos ya que son casilla de verificación. Ahora, tenemos también algo que se llama intermedio, y viene como la línea horizontal. Entonces déjame volver aquí. Y no podemos crearlo a partir de HTML o bootstrap. Debe crearse usando JavaScript y no está disponible en atributos HTML. Ahora, por último, podemos crear nuestro botón deshabilitado o deshabilitado cheque por ejemplo, aquí, en lugar de comprobado, simplemente puedo escribir deshabilitado, volver atrás, refrescar. Y como pueden ver, no puedo revisar este botón. Yo solo, creo, puedo revisar el cisne. Esto está deshabilitado. Ahora, vamos y pasemos al radio. Y en este caso, permítanme simplemente borrar esto, empezar de nuevo. Por lo que la forma será de cuatro. Check. El insumo será de tipo radio. El clase será para entrada de choza. Y luego seguido de alguna idea. Por ejemplo, se trata de una radio. Y entonces el nombre estará en radio. Y luego después de la entrada, necesitamos crear nuestra etiqueta. Entonces para la radio, y luego se formará la clase. Consultar y etiquetar. Por supuesto, dentro de nuestra etiqueta, podemos crear o escribir cualquier cosa. Entonces por ahora escribiré radio, y como podemos ver, tenemos esta entrada de radio. Ahora también podemos escribirlo o hacerlo como Jack simplemente agregando el checado aquí. Vuelve atrás, refresca, y ya está comprobado. También podemos usarlo como predeterminado o como un discapacitado. Pero no voy a hacer eso. Simplemente puedes cambiar esta palabra con discapacitados y para trabajar simplemente bien. Ahora, tenemos algo que es muy popular y muy utilizado en los sitios web. Y a esto se le llama interruptor. Por lo que cambié tiene notable casilla de verificación personalizada, pero utiliza la forma conmutada clase dos licuadora o un interruptor de alternancia. Entonces para hacer eso, nos vamos a quedar y esta sorda. Pero déjame simplemente ajustar esto que teníamos antes. Y también tenemos interruptor deformado. Entonces ahora tenemos las dos formas. Déjame borrar y vi la porquería de D. Y la entrada será del tipo, será una casilla de verificación. Después tenemos la clase para chequeo. Y luego seguido de la idea o no, déjame simplemente alimentar nuestra etiqueta dentro de nuestra etiqueta. Nosotros vamos a teclear. Déjame sólo hacer esto para. Y la clase será igual a la etiqueta de cuatro cheques seguida del texto real aquí. Entonces esto es switch, checkbox y put. Y si vuelvo aquí, refresco, Tenemos esta casilla de verificación y cambio entre encendido y apagado. Y en realidad podemos hacer lo mismo con esto como lo hicimos antes. Podemos desactivarlo, podemos hacer un comprobado como predeterminado o podemos desactivarlo mientras está comprobado. Entonces esto no es básicamente para estos patrones y creo que esto es suficiente por ahora. Permítanme simplemente agregar una cosa que son las casillas de verificación iluminadas. Entonces si por ejemplo, no quiero que estén en la horizontal o en la misma columna. Yo quiero que estén en la misma fila. Por ejemplo, permítanme agregar aquí algunas casillas de verificación. Por lo que la primera será la división de cuatro, cheque, cheque iluminado. Y esto iluminado hará que las casillas de verificación en la misma línea. Por lo que la entrada será de tipo checkbox. El clase será para entrada de control. Y luego seguido del valor, ese nombre y opción uno. Y por supuesto la etiqueta será de clase. Esta clase será de cuatro cheques etiquetados. Y por supuesto, esta es la opción uno. Y déjame solo copiar y pegar esto dos veces más 12. Entonces esta es la opción dos. Y el valor aquí serán también dos y aquí tres y también tres. Y si vuelvo ahora, refresca, como podemos ver, todos están en la misma línea ya que usamos el control de formulario o cheque foráneo en línea. Y puedo marcar cualquiera de estos insumos. Ahora, pasemos a los botones de alternancia de la casilla de verificación. Y en este caso, permítanme simplemente borrar esto. Y vamos a crear nuestro botón de casilla de verificación. Entonces lo primero que vamos a hacer es crear la casilla de verificación y poner la clase será btn cheque. Vamos a darle la misma idea y luego autocompletar TLB apagado. Después de eso, simplemente podemos volver a la siguiente línea y crear nuestra etiqueta. El clase será como de costumbre, btn, BTN primaria por primera vez. Entonces regresa y démosle el nombre. Botón de verificación. Vuelve atrás, refresca. Y como podemos ver, tenemos este botón y es uno primario. Ahora bien, si quería que se revisara, simplemente puedo usar el atributo comprobado aquí. Entonces como pueden ver aquí, puedo volver atrás, refrescar y ahora está comprobado. Si hago click en él, no pasará nada ya que no terminamos agregamos nada a ahora. Y esto es básicamente para los botones. Siempre podemos habilitarlos, todos, revisarlos como queramos. Entonces podemos, podemos quitar esto, que desactivó aquí y volver refrescar. De esta manera podemos ver que se trata de un botón deshabilitado. Y por último, tenemos el estilo de contorno. Y esto se suele usar para simplificar las cosas. Entonces por ejemplo, si este es el botón y no estamos contentos con el estilo de este botón. No estamos contentos con el color de fondo. Podríamos querer quitarlo. Simplemente podemos usar este esquema. Y en este caso para la etiqueta, simplemente puedo usar el esquema primario BTM. Ahora volvamos atrás y refresquemos. Y como podemos ver, podría verse más bonito en algunos casos especiales. Entonces esto es todo para los cheques y radio. Dicho esto, este es el final de este video. Nos vemos en el siguiente. 10. Gama y entrada: Ahora hablemos de alcance. Y en primer lugar, permítanme simplemente borrar esto y crear nuestro laborioso. Por lo que este cable estará buscando la gama. El clase sería como de costumbre para etiquetado. Y este es un rango. Por supuesto, necesitamos crear la entrada de venas tipo. También tenemos la clase para rango. Y déjenme darle la idea de rango también. Volvamos aquí y refresquemos el como podemos ver, tenemos ahora nuestro alcance para poder moverlo ida y vuelta como podemos ver y ponerlo donde queramos. Y tenemos esto extraño. Ahora, siempre podemos modificarlo. Podemos o bien crear algunas filas, por lo que esta es la fila y dividir la página en dos columnas diferentes y hacer su pulgada más pequeña, por ejemplo. O crear una división en medio del sitio de trabajo y poner esta página dentro de esta división y con el fin de que se vea mejor y más inteligente. Porque esta no es una gama muy guapa. No obstante, tiene todas las características que necesitamos. Ahora siempre podemos agregar el atributo deshabilitado. Podemos agregar un mínimo y el máximo. Y te animo a que las pruebes tú mismo. Y por supuesto, todos están disponibles en el sitio web de Bootstrap. Ahora, pasemos a otra forma muy importante que es el grupo de entrada. Y para hacer eso, permítanme simplemente borrar esto y crear nuestra división. Y dentro de nuestra división, le daremos la clase. Esta clase sería el grupo de entrada, y añadiré el margen por todos los lados. Dentro de esta clase, vamos a tener nuestro elemento expandir dentro de esta banda. Simplemente escribiré el anuncio para indicar que se trata de un nombre de usuario. Y por supuesto la clase sería texto de entrada. Y como podemos ver ahora, si regreso y refresco nuestra página, vamos a conseguir esto en símbolo y y los radios. Y como podemos ver, esta es nuestra división. Creamos el lapso. Ahora, necesitamos crear nuestra entrada donde el usuario pueda escribir ha pronunciado. En este caso, vamos a crear la entrada de texto tipo. Declaraciones serán como de costumbre para el control, y el positor estará en el nombre de usuario. Y por supuesto puedes agregar lo que quieras después de eso, pero solo usaremos esto por ahora. Y como podemos ver, este es nuestro nombre de usuario de anuncio. Podemos escribir lo que queramos aquí. Y por supuesto podemos agregar un botón o algo así sólo para indicar que queremos presentar. O quizá tengamos una forma. Entonces si tenemos varios elementos, necesitamos simplemente llenarlos todos y luego dar click en enviar para enviar nuestra información toda a la vez. Entonces esto es todo para el nombre de usuario. Por ejemplo, si queremos agregar este correo electrónico, podemos usar el span, por ejemplo, en la parte inferior aquí. Y por supuesto, puedo agregar example.com para indicar que este es el fin. Y si intento eso una vez más, tenemos nombre de usuario aquí y example.com. Y tal vez solo quieras disminuir el ancho o la longitud de esto. Desde su muy largo, está en toda la imagen en la página web. Simplemente puedes crear una división y tal vez solo la mitad de la página o en medio de la página o así sucesivamente. Entonces esto es básicamente para el correo electrónico. Ahora, supongamos que no estamos seguros del ejemplo.com. En este caso, podemos agregar otra entrada después de este lapso y podemos indicarlo como antes. Entonces déjame solo mover esto y copiar pegar. Y por supuesto podemos cambiar el tenedor del lugar para agregar example.com, volver atrás y refrescar. Y como podemos ver, tenemos ahora nuestra nueva división o nuestro nuevo insumo. En este caso, podemos escribir nuestro nombre de usuario aquí en, y por supuesto, el example.com, necesitamos cambiarlo por cualquier cosa que tengamos. Ahora, una cosa más que añadir, por ejemplo, si queremos hacer que esto y poner se vea mejor, siempre podemos usar el grupo de entrada pequeño o insumo a Agrupar alimentos grandes, un insumo más grande. Por lo que grupos de entrada pequeños. Ahora vuelve atrás, refresca, y como puedes ver, se hizo más pequeño. Y por supuesto el LG será más grande. Y como podemos ver, este es nuestro insumo ahora. Ahora también podemos agregar las casillas de verificación y radios dentro de nuestras opciones. Entonces, por ejemplo, en lugar de especificar el tipo de la entrada como texto, podemos especificarlo como casilla de verificación. Ahora, claro que necesitamos cambiar esto y le damos la choza de bichos de clase. Y esta es la entrada. Vuelve atrás, refresca. ¿ Podemos ver que tenemos esta casita de verificación aquí. Y cuando podamos modificarlo, también podemos añadirlo en lugar del add aquí. Y podemos hacer lo que queramos en esta división. Ahora también podemos agregar múltiples complementos. Entonces, por ejemplo, en lugar de especificar esto o tal vez simplemente elimine esto. Y antes de esto, permítanme volver a nuestro incumplimiento. Y en lugar de esto, agregaré otro elemento span con una clase de entrada. Texto de grupo. Y aquí voy a añadir el example.com y volver a refrescar. Y como se puede ver, tenemos que extender elementos y estos indican múltiples añadidos. Ahora también podemos agregar el botón add ons. Entonces en lugar de crear un span, podemos crear un botón real. En este caso, permítanme simplemente borrar el segundo, o tal vez el tercero. Y vamos a crear un botón de clase BTN, PT y delinear secundaria. Y por supuesto, intentemos algo. Entonces esto es un botón y volver a refrescar. Y como podemos ver, tenemos nuestro botón aquí. Podemos flotar sobre él y nos da un bonito efecto. Ahora, también tenemos algo que se llama botones, desplegables. Y en este caso, podemos crear nuestro botón y podemos agregar algunos elementos a este botón. Entonces cada vez que lo presionamos, aparecen estos elementos y podemos elegir entre ellos. Entonces para hacer eso, eliminemos esto y mantendré la división y las clases dentro de la división. Entonces lo primero que vamos a hacer es crear la clase, el botón y las clases serán el final btn, contorno y secundaria como de costumbre. Y ahora vamos a añadir otra clase para el menú desplegable, y se llama desplegable toggled. Y en este caso, el tipo será un botón. Y por supuesto, siempre que necesitemos usar el desplegable, necesitamos actualizar los datos. Por lo que los datos ps serán iguales al desplegable. Y en este caso, nos ponemos, podemos añadir nuestro botón. Entonces dentro de este botón que tenemos, vamos a crear una lista desordenada. Por lo que la lista desordenada será de una clase que se llama menú desplegable. Entonces esta es nuestra clase y los ítems de lista. Dentro del último ítem vamos a crear un enlace. Y este es el hipervínculo. Y siempre que quieras crear un enlace sin ninguna referencia, simplemente puedes escribir el año hashtag y luego trabajar como de costumbre. Por lo que la clase sería un elemento desplegable. Recuerda que todas estas clases son potenciadores las clases de Bootstrap, y no nos hacemos responsables de escribirlas. Simplemente podemos usarlos ahora mismo. Y por supuesto dentro de esto, podemos crear, por ejemplo, digamos homepage. Déjame copiar esto y pegarlo varias veces, y sólo hacerlos en líneas separadas. Y aquí, digamos misión. Digamos que contáctanos. Y digamos retroalimentación. Suena bien. Y esta es nuestra lista desordenada. Tenemos la clase de menú desplegable dentro de nuestra lista desordenada que dentro de cada elemento de la lista, tenemos un enlace y este enlace es Avid ítem desplegable cristal. Ahora sólo tenemos que crear nuestra entrada aquí. Entonces este es nuestro insumo y aquí, esto no debería estar aquí. Simplemente podemos moverlo a aquí y crear el botón. Entonces déjame probarlo, tal vez botón. Y esto es todo. Simplemente hazlo en la misma línea. Y ahora, bien. Entonces el tipo será de texto, tal vez. Entonces lo dejaremos como texto. Y vamos a escribir algunas clases. Por lo que la clase será como de costumbre para el control. Y también ajustamos esto. Y ahora creo que estamos bien, volvamos atrás y refresquemos. Y como pueden ver, tenemos nuestro botón. Y cada vez que presionamos en ello, tenemos nuestra casa Michigan Contáctenos y feedback. Ahora recuerda cada vez que descansemos en algo, no pasará nada ya que no agregamos ninguna acción a nuestro atlas. Entonces esto es básicamente para el botón con desplegables. Siempre podemos cambiar la ubicación del botón. Por ejemplo, aquí lo creé a la izquierda, te creas en la novia o tal vez ambos. Entonces esto depende de ti. Y esto es todo básicamente, podemos simplemente modificar algo aquí. Entonces por ejemplo, supongamos que tengo la casa Michelle Contáctenos y retroalimentación por un lado. Y necesito una línea separada para separar estos de otra cosa que pudiera, que quizá quisiéramos agregar. Entonces para hacer eso, simplemente podemos agregar y nuestra lista desordenada, el ítem de lista. Y este elemento de lista básicamente será el elemento y la clase será un divisor desplegable. Y así es como lo hacemos. Entonces ahora tenemos un divisor, lo que sea que nos intenten otra cosa aquí, supongamos que nos despedimos y volvemos a fresco y presionamos una vez más. Podemos ver que el Adiós es diferente y separado de los demás. Y creo que aquí cometí un error. Por lo que esta actualización desplegable y está bien ahora. Entonces estos son nuestro, nuestro primer lado y este es el segundo lado separado por esta línea. Entonces esto es básicamente para los botones. Por lo que hablamos de varios grupos de entrada y cómo crearlos. También hablamos de rangos. Y creo que estos son suficientes por ahora. Y con eso dicho, este es el final de este video. Nos vemos en el siguiente. 11. disposición/composición/diseño: Hola y bienvenidos de nuevo. Y en este video vamos a discutir el diseño. Entonces volvamos atrás. Y básicamente lo que vamos a hacer es crear varias páginas o varias formas de un sitio web. Y por supuesto necesitamos modificarlos y hacerlos parecer un sitio web moderno. Entonces, en primer lugar, permítanme simplemente borrar esto e ir aquí. Podemos empezar con la creación de nuestra división. Y vamos a empezar con la utilidad inferior del margen de mi gimnasio. Y esto es básicamente, como podemos decir, m3. Entonces déjame simplemente escribirlo B5. Entonces en lugar de especificar eso, en lugar de decir que efectivamente todos los bordes para ser por lo menos tres píxeles. Podemos precisar que sólo necesitamos el fondo. Y por supuesto, después de salir de la división, podemos empezar con la creación de nuestra etiqueta. Así será entregado, déjame sólo borrar el para. La clase será igual a cuatro etiquetadas. Y entonces tenemos el ejemplo aquí. Ahora pasemos a nuestro lado de entrada. El input será texto mecanografiado. Entonces la clase será control de forma como de costumbre. Y por supuesto, permítanme simplemente crear el placeholder aquí. Y el placeholder será el nombre de usuario tal vez. Y ahora si vuelvo aquí mismo, refresco, esto es lo que vamos a conseguir. Ahora, supongamos que necesito el nombre y apellido, o el correo electrónico o contraseña y contraseña. Entonces por ejemplo, en este caso puedo crear otra división. Y en este caso, si me refresco ahora, voy a conseguir estas dos divisiones separadas en líneas separadas. A lo mejor no queremos eso. A lo mejor sólo queremos que el nombre de usuario sea, que se tome la mitad de la página y el, por ejemplo, la mitad de nombre y el apellido, la segunda mitad. Por lo tanto, permítanme ajustar el Marcador de posición para que sea nombre y apellido. Ahora vuelve atrás. Y este es FirstName, LastName. Ahora una forma de hacerlo es crear nuestra nueva división. Y dentro de esta división, coloquen esas dos divisiones. Por lo que en primer lugar, nuestra división debe ser de fila de clase para indicar que esta es nuestra masa. Y por supuesto, necesitas lo explícito aquí. Y estos son vasos columna. Entonces estas son nuestras dos columnas dentro de nuestro dron sobre refresco. Y como podemos ver, tenemos nuestras dos divisiones y están separadas en el medio. Entonces ahora sigamos. Nuestra página, por lo que tenemos ahora nuestro FirstName, LastName. Por lo que simplemente eliminaré esto y escribiré correo electrónico y contraseña hasta que esto también. Entonces el placeholder aquí, acaba de eliminar y luego eliminar el apellido. Aquí tenemos el correo electrónico y la contraseña. Como de costumbre, siempre que utilicemos contraseña, el tipo de la entrada también será contraseña. Ahora, después de crear estas dos columnas dentro de nuestro drive, podemos crear otra fila. Y en este caso, solo puedes crear otra fila aquí. Dentro de esta fila, vamos a dividir nuestras columnas y dos, tal vez tres separadas. O déjame simplemente agregar la dirección en primer lugar y luego crear esto. Entonces este es nuestro dron y sólo tenemos una columna. Y esta columna estará conformada por una entrada y el tipo será gravado. El clase será para el control. Y por supuesto el placeholder será dirección. Ahora si vuelvo aquí, refresco, también tenemos nuestra dirección, pero como pueden ver, no tenemos espacio entre ellos. Entonces tal vez solo agregue un poco de un margen superior aquí. Entonces dentro de nuestro vaso, podemos, dentro de esta clase de margen de fila superior, tal vez tres. Eso es suficiente refresco. Y como podemos ver, conseguimos un poco de espacio entre las dos entradas. Ahora, volviendo aquí, esta es nuestra primera dirección. Ahora donde tenemos una segunda dirección, déjame copiarla y pegarla. Por lo que aquí hemos agregado esto para volver atrás, refrescar. Y como podemos ver, tenemos dirección uno y dirección dos, pero tal vez sólo los modificó. Entonces, en lugar de solo uno, simplemente podemos escribir un ejemplo de dirección. Por lo que Main Street, este es el placeholder. Y aquí simplemente podemos sumar el edificio y el flujo. Y como no especificamos direcciones, necesitamos crear nuestras propias etiquetas. Por lo que dentro del erudito, la etiqueta será de tipo. Entonces para abril y luego seguido de la mano de obra real, esa es la dirección. Y por supuesto, permítanme simplemente copiar esta base aquí y cambió solo para abordar, para volver atrás y refrescar. Y como podemos ver, conseguimos nuestras direcciones. Ahora, agreguemos la ciudad, estado, y el código postal. Y en este caso, necesitamos crearlos en una división y ellos retomarán toda esta página web. No obstante, necesitamos dividir nuestra página web. Y como dijimos, tenemos 12. Este sitio web. Por lo que podemos dividir este 12. Por ejemplo, tal vez la ciudad pueda tomar hasta ocho, y los otros 24, tal vez cinco. Entonces vamos a averiguarlo. Ahora. Volvamos a nuestro código. Y dentro de nuestro joe Ahora necesitamos crear nuestras columnas. Entonces la primera columna será, digamos sexo. Creo que el sexo es bueno. Y dentro de esto, vamos a crear nuestro conjunto M. Así que la etiqueta será de vidrio para L1. Entonces esto es para etiquetado. Y entonces la etiqueta sería la ciudad. Entonces la entrada. Tan gravado como clase habitual para el control y luego seguido por el otro, el estado. Y déjame refrescarme y ver qué está pasando. Entonces esta es nuestra ciudad. Se llevó a la mitad de la página. Todavía tenemos la otra mitad. Y en este caso, simplemente puedo copiar y pegar de nuevo. obstante, no queremos que el estado retome todo el resto de la página que necesitábamos para ocupar hasta cuatro. Ahora vuelve atrás, refresca. Tenemos nuestro estado aquí, y luego finalmente seguido de nuestro código postal. Entonces simplemente puedo copiar esto, de nuevo, cambio basado, esto, refrescar, y ahora tenemos nuestra ciudad, estado y código postal. Entonces permítanme simplemente modificar esto. Entonces este es el código. Entonces esto es básicamente también podemos modificar algunos de los elementos aquí. Entonces, por ejemplo, si conocemos el número exacto de los estados y los nombres exactos, simplemente podemos agregar la opción aquí. Y luego cada vez que el usuario simplemente presiona esta opción, aparecen todas las opciones y puede elegir entre ellas. Y siempre puede escribir algo aquí. No obstante, como dijimos, siempre que escribamos algo, no pasará nada. Y como no agregamos ninguna acción para esta forma, y creo que esto es suficiente. Siempre podemos agregar un botón simple aquí, por ejemplo, para enviar nuestro formulario. Y creo que esto es todo para este sitio web. Vamos a crear otro simplemente modificando algunos de los elementos aquí. Entonces, por ejemplo, tal vez necesitamos el correo electrónico y la contraseña, y luego necesitamos revisar algunas de las opciones. Por lo tanto, permítanme borrar todo esto. Y dentro de nuestro sorteo tenemos contraseña de correo electrónico y creo que no necesitamos todo esto. Esta es la versión. Esta es la segunda división. Esto es en el fondo. Y ahora podemos crear otro, ir dentro de la paja. Vamos a tener la primera columna y va a tomar hasta dos dentro de esto, vamos a probar algo tan span, como de costumbre son tal vez vamos a crear una etiqueta. La cosa se pone mejor. Y la clase sería para etiqueta. Después seguido de choza. Y creo que esto es suficiente por ahora. Tenemos aquí nuestro cheque, déjame solo ajustarlo. Entonces dentro de nuestra columna, lo siento, dentro de nuestra fila, agregaré tal vez MD5. Y como podemos ver, tenemos este cinco. Déjenme hacerlo desde todos los lados. Ahora tenemos nuestro cheque aquí. Y por supuesto, vamos a crear la otra columna. Y se llevará hasta todo el resto de la página. Y dentro de esta columna podemos crear algunas opciones. Entonces vamos a crear nuestra caja de chat. Y simplemente podemos escribir input, type checkbox. Y por supuesto, tenemos varias clases que sumar. Una de ellas es para entrada de cheques y ésta es la más importante. Vuelve a fresco, tenemos nuestra caja de chat ahora. Entonces esta es nuestra clase y esta es nuestra aportación. Siempre lo podemos agregar a una división y una clase para choza. Y entonces sólo esta es nuestra división. Y si queremos escribir algo, por ejemplo, en casa. Y como pueden ver, este es nuestro primer insumo. Siempre se pueden agregar varias entradas aquí. Por lo que para revisarlos. Y luego finalmente agrega el botón aquí, por ejemplo, regístrate o algo así. Y creo que esto es suficiente por ahora. Siempre se puede jugar con estos elementos. Por ejemplo, puedes ponerlos todos en la misma línea, o usar los formularios en línea. O puedes ponerlos, cada elemento y una línea. Y esto depende de ti, cómo quieres que se vea tu sitio web, y de diferentes tipos de páginas. Con eso dicho, este es el final de este video. Nos vemos en el siguiente. 12. Componentes: Hola y bienvenidos de nuevo. Y en este video, vamos a discutir algunos componentes en Bootstrap. El primero será el acordeón. Entonces déjame solo crear uno para que mejor entiendas lo que es un acordeón. Entonces, en primer lugar, para crearlo, como de costumbre, necesitamos crear una división. Dentro de esta división, el vidrio será guardián. Y déjame darle una identificación. Entonces esto es acordeón. También dentro de esta división, vamos a crear un artículo de acordeón. Para que ese artículo de acordeón, esta es otra división. Dentro de esta división, podemos crear nuestro acordeón. Entonces este es el artículo del acordeón. Consta de un encabezado y un botón. Por lo que para crear el sin cabeza, crea un encabezado H2. El clase será acordeón Hadoop. Y simplemente podemos escribir algo aquí. Entonces este es el ítem uno, luego seguido del botón y la clase, y este botón será el botón de acordeón. El tipo como de costumbre será botón. Y entonces por supuesto, ya que vamos a usar el acordeón, digamos algo aquí. Por ejemplo, se trata de un ítem uno de yen frío. Y déjame simplemente colocarlo aquí. Por supuesto, borra este ítem uno ya que acabamos de añadirlo a nuestro botón. Ahora si vuelvo atrás y refresco, así que este es nuestro acordeón. Ahora, siempre que le agreguemos algo a este acordeón y lo presionemos, aquí aparecerá. Entonces vamos a crear, después de crear el encabezamiento, vamos a sumar la división. Esta es la segunda división dentro del artículo. Y luego esta división, vamos a dar una clase de laboratorios de acordeón. Y entonces claro, déjame solo crear el compañero. Por lo que aquí división será de un acordeón de clase. Pero dentro de esta división, vamos a crear el párrafo. Lauren. A lo mejor. Vuelve atrás, refresca. Y este es nuestro párrafo. Ahora, empecemos a agregar algunas ideas, ya que no podemos usarla para ahora sólo podemos hacer desaparecer este párrafo. Entonces, para hacer eso, necesitamos agregar dos cosas aquí. Entonces los datos, BS conmutan para colapsar y el objetivo VS. Y yo le di el colapso solo para añadirlo dentro de la segunda división. Ahora. Entonces aquí, dentro de nuestra segunda división, vamos a crear nuestro colapso de identificación. Uno, claro. Y sólo modifiquemos esto. Aquí. Tenemos el ID de división colapso una clase y necesitamos también escribir datos BS, padre. Y en este caso, será el acordeón, ese es éste de antes. Por lo que esta banda será igual a. Ahora. Si presiono sobre esto, desaparecerá. Y si lo presiono una vez más, apelará. Y podemos hacer lo mismo por varios acordeones. Por lo que podemos simplemente copiar esto dos veces más y luego jugar lo paga. Lo paga. Entonces déjame simplemente copiarlo. Y creo que vamos a volver atrás, refrescar. Como podemos ver, tenemos nuestros tres acordeones y podemos cambiar entre ellos. No obstante, ahora están relacionados, ya que tenemos el mismo ID y las mismas ideas en realidad para varios artículos en China dentro de estos acordeón. Por lo que necesitamos cambiar las ideas sólo para asegurarnos de que sean completamente independientes. Entonces como pueden ver, si presiono sobre esto, esos dos cambiarán y no queremos realmente que eso suceda, así que simplemente podemos cambiar estas ideas. Entonces por ejemplo aquí lo puedo nombrar según, según, y entonces estamos bien. Y creo que esto es todo para el acordeón. Pasemos a las alertas. Entonces, ¿qué son las alertas? En realidad, las alertas son algo que nos proporcionan un mensaje de retroalimentación para un usuario típico. Cualquier acción que realicemos. Y ganamos al usuario para obtener este mensaje. En realidad podemos proporcionarles este mensaje usando la clase de alerta disponible para nosotros y bootstrap. Y en realidad son un plugin de JavaScript. Entonces SS nazis, usan JavaScript. Entonces para hacer eso, déjame simplemente borrar esto y empezar de cero. Entonces supongamos que quiero crear una alerta. Simplemente podemos crear nuestra división. Dentro de esta división, la clase que estaría alerta y otra primaria. Dentro de esta división. Podemos probarlo. Lauren. Y en realidad podemos especificar el papel para ser el límite. Ahora, sigamos adelante y aparecerá como una alerta. Ahora, también podemos crear otra alerta por descartar algo. Entonces, por ejemplo, permítanme simplemente eliminar esto y crear nuestra clase la cual estará alerta. Y dentro de nuestra división. Añadamos unas clases aquí. Por lo que tenemos la clase de alerta, alerta y alerta descartable. También tenemos el desvanecido y show. Por supuesto, el papel estará alerta. Y luego después de crear esta división, vamos a crear un párrafo. Por lo que dentro de este párrafo, voy a escribir Lorem siete y luego seguido del botón. Y este será el botón X. Entonces tipo será botón. Y luego después de este botón tenemos la clase BTN, ropa y datos, BS, despedir. Será igual a alertar. Y por supuesto, podemos especificar que la etiqueta sea igual a cerrar. Ahora si volvemos a refrescar, vamos a conseguir esta alerta de despido. Y es JavaScript de nuevo, y es posible descartar cualquier alerta en línea. Y así por ejemplo, si presionas sobre esto, desaparecerá. Y así podemos usar esto siempre que algo mal sucedió o el usuario simplemente ingresó algo que no se debe agregar. Podemos simplemente hacer que esto salga y decir, por ejemplo, esto está mal, pero solo inténtalo de nuevo o prueba este método o así sucesivamente. Y el usuario puede presionar el botón X y desaparecerá automáticamente. Entonces esto es para la alerta. Te animo a que sigas adelante y los revises. Son agradables y puedes usar tantos de ellos en diferentes casos. Ahora, pasemos a las insignias. Entonces supongamos que tenemos un rumbo. Y dentro de nuestro rubro, queremos agregar que este artículo es nuevo. Entonces supongamos que tengo un H1 dentro de éste. Tenemos, por ejemplo, Ítem uno, y queremos especificar que este ítem es nu. Una forma de hacerlo es ganando el elemento span y luego agregar a esto un vaso de lote. Y podemos cambiar el color para que el color de fondo sea secundario. Y simplemente puedo añadir nuevo aquí. Ahora si vuelves atrás y refrescas, vamos a ver el ítem uno y con este nuevo y decidimos indicar que se trata de un nuevo ítem. Y a esto se le llama lote. Ahora podemos usar, podemos usarlo en cualquier artículo o un, cualquier elemento. Entonces esto es agregar uno. Se puede utilizar para los encabezamientos uno a seis, y por supuesto, párrafos, botones y demás. Entonces permítanme simplemente demostrar el uso de la misma en un botón. Entonces supongamos que tengo un botón. Dentro de este botón. Tenemos el tipo aquí, claro. Y luego tenemos las clases. Entonces btn, btn-primaria. Ahora podemos crear, por ejemplo, supongamos que quiero crear el botón de notificación. Entonces esto no es derrota pacientes. Y luego crea el elemento span de clase. El clase será insignia y BG, secundaria. Y dentro despacho, Déjenme añadir. Número específico, por ejemplo, tengo nueve notificaciones. Así que vuelve atrás, refresca. Tenemos estas modificaciones de botón. Y aquí tenemos nuestra insignia indicando que tenemos nueve multiplicaciones. Ahora, también tenemos algunos colores de fondo que podríamos querer cambiar. Entonces aquí utilizamos la primaria, tenemos también el éxito secundario, el peligro, la advertencia, y luego para la luz y la oscuridad. Por lo que finalmente, todavía tenemos las insignias de píldora y suelen ser redondeadas. Entonces como podemos ver aquí, están a tierra de EBIT, luego no totalmente cuadradas, pero tal vez los quieren como cinturón. Simplemente podemos usar el vidrio de píldora descargado aquí. Entonces déjame sonar idea. Clase, retrocede y refresca. Y como podemos ver, ahora se cuenta. Entonces déjame ajustar esto solo para que lo veas más claro. Entonces este es nuestro elemento de clase span, lo siento, para que la clase esté fundamentada y el fondo sea primario. Ahora, probemos algo aquí. Entonces esto es primario. Y volver a refrescar. Y como pueden ver, tenemos nuestro redondeado. Pero así es para las insignias. Ahora, ya que estamos usando algunos botones aquí, hablemos de botones. Será más. Entonces. Por ejemplo, este es un botón. Entonces como dijimos, el tipo debe ser botón. Y luego clases que vamos a usar. El btn es esencial y DBD y para elegir los colores. Entonces voy a elegir primaria. Entonces este es un botón, uno, refrescar. Entonces este es nuestro primer botón. Como dijimos, tenemos varios tipos y varios otros. Entonces, por ejemplo, si quisiera ser cavado, simplemente puedo agregar oscuro aquí, refrescar. Estoy recibiendo este botón oscuro. Ahora. Supongamos que no quiero que este botón sea otro fondo, Doug, yo quería ser transparente. Y en este caso puedo usar los botones de esquema que ya implementé antes, pero es mejor simplemente decirlo cuando vamos, estábamos discutiendo el elemento de botón. Por lo que en este caso, podemos utilizar el esquema comenzó, delineado, primario, y volver a refrescar. Como podemos ver, los bordes del botón ahora son azules. No obstante, por dentro es blanco. Y siempre que pasemos por encima de él, podemos ver que este es el efecto. Nos da el efecto de un botón ordinario. Y esto es para el botón exterior. Contamos también con tallas. Podemos elegir el tamaño de nuestra mantequilla. Entonces si vuelvo aquí y BTN, grande, estás de vuelta y refresco. Podemos ver que nuestro botón se hizo más grande y también tenemos las gafas pequeñas y esta capaces. Y no los voy a usar ya que son iguales. Y creo que con esto basta de botones. Tenemos varios elementos y varias características, varias clases que podemos usar un botón. Y te aconsejo que los empates tú mismo y te pongas muy bien en ellos para que ya no tengas que ir a la documentación. Simplemente puedes usarlos cuando quieras. Pero dicho eso, este es el final de este video. Nos vemos en el siguiente. 13. Tarjetas: Hola y bienvenidos de nuevo. Y en este video vamos a hablar de tarjetas. Por lo que vamos a personalizar nuestras propias partes usando clases de Bootstrap. Y tenemos tantas características y tantas clases que podemos usar de. Entonces sigamos adelante y empecemos con nuestra primera. Entonces lo primero que vamos a hacer es crear nuestra clase de división. Y dentro de esta división, la clase será carta ya que estamos creando un guardia. Y permítanme simplemente ajustar el ancho de esto. Tienes que ser 18 RER. Y ahora podemos trabajar con descarte. Entonces vamos a crear una imagen. Por lo que la imagen será imágenes segundo cerdo. Y por supuesto puedo agregar una alternativa, así segunda imagen. Y ahora si vuelvo atrás y refresco, se puede ver que la imagen es muy larga y tenemos que ajustar esto. Y en realidad tenemos una clase de Bootstrap que nos ayudará en Dios. Y esta es una imagen actual. Y ahora volvamos atrás y refresquemos ahí como podemos ver, contemplemos nuestra imagen. Y se ve bien. Ahora podemos añadir algo de texto aquí. Por ejemplo, podemos agregar un encabezado y luego seguido de un párrafo que describa la imagen. Y se puede hacer eso creando, podemos crear una división. Dentro de esta división, tenemos el rubro, por lo que uno y luego párrafo ni él ocho. Y como podemos ver ahora, si retrocedemos y refrescamos, tenemos nuestra guía llamada una Lorem Ipsum, Y este es nuestro párrafo. Y sin embargo, también tenemos una clase en Bootstrap para ayudarnos e hicimos amable Bali y esta es una tarjeta pero la clase llamada compañero. Ahora si retrocedemos y refrescamos, podemos notar la diferencia. Tenemos algo de relleno de izquierda a derecha e inferior y superior. Y por supuesto también tenemos algunas clases dentro del cuerpo. Y uno de ellos es el título y el otro texto de la tarjeta SD. Entonces recuerda que puedes ignorarlos, pero si volvemos atrás y refrescamos, puedes ver que se ven mejor cada vez que usas este tipo de clases, llamadas título de auto cuerpo y contextos. Y por último, permítanme añadir tal vez un enlace aquí. Y en este enlace, la clase debe ser un botón, botón primario. Y por supuesto, déjame sólo tratar de ir. Si actualizamos, tenemos ahora nuestra corriente completa. Tenemos la imagen dentro. Tenemos el encabezamiento del párrafo del cuerpo y el botón. Entonces esta es S. Así que este es el primer ejemplo. Y volvamos atrás y creemos otro ejemplo sólo para entenderlo mejor. Entonces tal vez nuestra tarjeta no necesita una imagen. Entonces permítanme borrar esto. Y mantengamos el cuerpo actual. No obstante, si no tenemos una imagen, tal vez sea una buena opción para crear nuestro encabezado. Entonces déjame crear el código división Hadoop. Y dentro de esto, simplemente estoy escribiendo cualquier cosa. Déjenme leer. Este es el encabezado. Ahora si retrocedemos y refrescamos, podemos ver que ya no tenemos nuestra imagen. No obstante, tenemos algo. Y se ve así, el encabezado de nuestro código. Y puedes estar de acuerdo en que esto es mucho más bonito que simplemente escribir directriz y luego escribir nuestros párrafos, ahora podemos eliminar nuestra tarjeta uno. Y tenemos el encabezado aquí y el párrafo en el cuerpo. Ahora si volvemos a nuestra página web, podemos ver que todos los elementos de Hadar, título y párrafo y también el botón del lado izquierdo de nuestra guía. A lo mejor queremos que estén del lado correcto o así. Una forma de lidiar con eso es crear dentro de nuestro título o tal vez nuestra división. Entonces aquí tenemos a nuestro Dios. Podemos agregar el centro de texto. Y ahora si vuelves atrás y refrescas, podemos ver que ahora todos los elementos están centrados. Y si queremos que estén al final, simplemente podemos usar el texto y la actualización de clases. Y ahora están del lado derecho de nuestros autos. Ahora bien, esto es por lo básico. ¿ Cómo podemos crear algo más complicado o un poco más complejo? Por ejemplo, si queremos crear una navegación dentro de nuestra corriente, déjame seguir adelante y eliminar esto y empezar desde cero. Entonces lo primero que vamos a hacer es crear nuestra división actual. Y voy a agregarle el centro de texto plus. Y ahora vamos a crear nuestro carrito Hadoop, así llamado. O bien. Dentro de nuestro encabezado de código, voy a crear nuestra lista desordenada. Entonces aquí vamos a crear un número pequeño. No obstante, lo vamos a discutir en detalle en los próximos videos. Pero por ahora vamos a crear nuestra lista desordenada. Dentro de esta lista, tenemos nuestro ítem de lista. Dentro de este artículo de lista tenemos nuestra longitud. Y este elemento de lista tendrá el elemento de nav clase. El listado desordenado tendrá la clase nav y ahora abs. Pero cualquiera de las pestañas. Y todas estas son clases en bootstrap. Y por supuesto, nuestra longitud, necesitamos agregar algunas clases. Por lo que la clase será nav link y luego este es el primer elemento de lista. Por lo que el hierro lo hace activo. Y por supuesto, déjame escribir algo años, así que en casa. Y ahora si vuelves atrás y refrescas, podemos ver que nos dieron nuestra guía y es y el todo de la página. Y tenemos nuestro botón o nuestro primer elemento de lista de elementos aquí y está activo, se llama hogar. Ahora volvamos a copiar este ítem de la lista dos veces más. Aquí y aquí. Déjame simplemente cambiar esta casa, tal vez Misión y luego producto. Ahora volvamos atrás y refresquemos. Y como pueden ver, tenemos tres artículos. No obstante, no queremos que estén activos. Entonces permítanme simplemente borrar esto de aquí y de aquí. Y creo que podemos volver atrás y refrescar. Y como puedes ver, este es el primer elemento de lista y está activo. No obstante, todos estos aún no están activos. Ahora bien, si no queremos que nuestra guardia esté tomando todo nuestro sitio web, podemos agregar el estilo y el ancho será, serán 18 RAM RAM. Ahora volvamos atrás y refresquemos. Y esta es nuestra guía. Ahora bien, deberíamos agregar algún rubro o título, año y el cuerpo. Y por supuesto puedes ajustar este pájaro como quieras. Por ejemplo, si quisieras, por ejemplo, en la mitad de la página, puedes ajustar el ancho de los chicos desde aquí. Y ahora volvamos atrás y sumamos. Entonces este es nuestro encabezado y termina aquí. Podemos crear otra división llamada cuerpo dentro de la falda compañero. Vamos a crear nuestro rumbo. Este es el pastoreo de y luego algún párrafo Lorem seis. Ahora agreguemos algunas clases aquí. Entonces más el título actual y el texto del párrafo. Ahora si vuelves refrescar, tenemos nuestro código completo y este texto centrado, tenemos producto de máquina casera. Esto es encabezar la tarjeta y el gráfico de tarta que queremos. Ahora bien, si notan, si presiono estos botones, no pasará nada ya que no agregamos ningún JavaScript que pueda pasar entre los átomos de cada elemento. Pero por ahora tenemos esto como activo y todos estos como elementos normales. Ahora, tenemos algo que se llama superposiciones de imagen. Y vamos a seguir adelante y crear uno de esos sólo para ver la diferencia entre ellos y nuestra corriente normal. Entonces lo primero que vamos a hacer es crear nuestro código. Y lo hacemos simplemente creando nuestra división. Y se incurriría en la clase y el color de fondo será oscuro, luego detectar será blanco. Ahora, después de terminar de división, vamos a crear nuestra imagen. Por lo que la imagen será como la imagen antes de la segunda clavija. Y por supuesto, necesitamos agregar la clase de imagen de culto. Entonces vamos a crear nuestro cuerpo. Y hacer eso simplemente creará una nueva división. No obstante, necesitamos que este órgano esté en nuestra imagen. Y para hacer eso simplemente agregamos la clase, esa superposición de imagen. Entonces regresa y pruébalo, lo que queramos aquí. Entonces, por ejemplo, este es un título. Y si vuelvo atrás y por supuesto, la clase de título y el párrafo estarían gravados más bajar ocho como de costumbre. Ahora volvamos atrás y refresquemos. Y como podemos ver, tenemos nuestra foto. Y dentro de esta imagen tenemos nuestro título y párrafo. Ahora siempre podemos ajustar el ancho de una imagen simplemente añadiendo el estilo aquí. El ancho para ser 18 RAM por ahora. Ahora volvamos atrás y refresquemos. Y como podemos ver, nos dieron nuestra imagen y dentro de esta imagen tenemos nuestro título y párrafo, y están uno encima del otro. Ahora, tenemos tantos otros elementos y características que podemos sumar a nuestra guía y los vamos a descubrir. Y el siguiente video. 14. Tarjetas 2: Ahora pasemos a otra estructura. Y es el corte horizontal. Y se hace usando una combinación de clases de grit y utilidades. Entonces sigamos adelante y eliminemos esto y empecemos con la creación de nuestra tarjeta de división de clase de división. Y dentro, déjame solo darle un margen, tal vez tres. Y como de costumbre, podemos especificar el ancho a lo largo de este tiempo. Usaré la propiedad max-width. Y esto es para indicar que el ancho máximo permitido es de 540 píxeles. Y ahora podemos empezar con nuestra guardia. Entonces lo primero que vamos a hacer es crear la fila dentro de nuestro trabajo. Como de costumbre, usamos la columna y vamos a necesitar dividir realmente nuestro corte en dos divisiones. Entonces déjame volver aquí. Y supongamos que este es nuestro código. Vamos a dividirla ya que esta área es para nuestra imagen y esta área para nuestro cuerpo que incluye nuestro rubro y párrafo. Y para ello, quizá podamos optar por dividirlo como 48 foil para la imagen y ayuda para todo el párrafo, título y cuerpo en enero. Entonces para hacer eso, simplemente podemos usar la lámina de columna y agregar nuestra imagen aquí. Entonces imágenes, segunda imagen. Y ahora vamos a crear la segunda división y será ocho. Y esta división incluirá el rubro. Esta es la actualización. Y luego el párrafo. Y por supuesto podemos agregar algunas clases aquí, como título. Y luego aquí un texto. Ahora, creo que podríamos ahorrar, volver. Y como podemos ver, contemplen esta imagen. Y volvamos atrás. Aquí. Nos olvidamos de nuestra clase. Entonces la clase será imagen, dios dañado. Y ahora si volvemos, refrescamos, conseguimos esta imagen y seguido de ésta, pero también nos olvidamos de sumar aquí la división. Una clase llamada cuerpo. Se ve más bonito. Y por supuesto, vamos a añadir una lágrima. Y ahora mira, adelante y refresca. Y como podemos ver ahora, si sólo quiero disminuir el tamaño, no pasará nada. No obstante, queríamos ser horizontales siempre que nosotros. A enredado entre los tamaños. Por lo que aquí tenemos una pantalla de gran tamaño. No obstante, si tenemos un tamaño mediano o menor, necesitábamos que esta imagen fuera grande y el título y título, título, y párrafo están por debajo de él. Entonces una forma de hacerlo es simplemente precisar que cada vez que tengamos aquí medio y arriba, esto aplicará. Y de lo contrario, necesitamos que nuestro cuadro esté en la parte superior y luego le siga el título de cabeza y párrafo. Ahora, como se puede ver, si el tamaño de la pantalla, se volverá horizontal. Y esto es todo para lo horizontal. Adelante y empecemos con nuestros colores de fondo. Entonces, por ejemplo, podemos crear nuestra tarjeta con un fondo azul. Como podemos ver. Eliminemos esto y empecemos a diseñar el alcohol. Entonces lo primero que vamos a necesitar es crear el código. A las clases se les gravará blanco. Porque voy a elegir el primario de fondo, que es principalmente azul. Y por supuesto, vamos a darle algo de presupuesto y desabotonado. Y elijamos este ancho de azulejo de 18. Rem. Ahora estamos bien. Podemos empezar a diseñar nuestras tarjetas para que las tarjetas encabezen y regresen simplemente a la derecha, primaria. Y luego dentro del amigo de la tarjeta, podemos crear nuestro encabezado. Y una forma de crear nuestra contratación y nuestras clases al mismo tiempo es simplemente secar nuestro rubro H5 y luego presionar sobre eso. Y luego seguido de b, una clase, que se llama Título VI había entrado. Se creará automáticamente. Y simplemente puedo escribir apretar párrafo cinco. Y me olvidé de agregar aquí la prueba de clase. Ahora si vuelvo y refresco, nos dieron nuestra tarjeta, que es azul en la primaria, y este es el título y el párrafo. Y también siempre podemos cambiar esto. Por lo que tenemos tantos colores como sabes, hemos usado la mayoría de ellos. Y esta es la oscuridad. Y tenemos, como dijimos, éxito, peligro, advertencia, NFO, secundario y ligero. Ahora quizá también quisiéramos hacer que sólo la frontera descubriera el color oscuro. Y no queremos que el fondo sea lenteja de pato solo necesitaba ser transparente. Entonces una forma de hacerlo es simplemente y modificar esto para que no queramos el fondo, solo necesitamos que lo evitado sea oscuro. Vuelve a fresco. Como podemos ver, conseguimos nuestra dieta fronteriza. No obstante, nuestro texto es blanco y lo podemos ver ahora. Entonces déjame simplemente borrar esto. Y refrescar. Y este es nuestro carrito ahora. Entonces esto es básicamente por los colores. Pasemos a otro tema, y eso son las tarjetas de la cuadrícula. Entonces, por ejemplo, supongamos que quiero colocar tantas tarjetas en mi página web. Puedo elegir colocar ya sea 123 cartas en el mismo nivel y luego seguidas de tres cartas o tal vez cuatro cartas y luego cuatro. Entonces esto depende de nosotros. Volvamos atrás y eliminemos y empecemos a crear nuestras vidas. Supongamos que quiero que mi sitio web tenga pronósticos. Por lo que 1234. Y empecemos con esto creando nuestra sonda. Entonces lo primero que vamos a hacer es crear la fila. Y luego dentro de esta clase le voy a dar la fila uno y la segunda, y vamos a discutirlas intermitentes. Entonces estas son las clases y la primera clase adentro hacia fuera rho es columna d. Y tenemos nuestro código. Entonces esta es la división de la tarjeta. Podemos agregar nuestra imagen aquí como un agregado vastamente. Entonces dentro de nuestro código, podemos agregar a nuestra guardia Buddy. Simplemente agrego el sencillo encabezamiento. Entonces creo, y pienso bien, bueno ahora en este código, déjame simplemente volver atrás, refrescar. Como podemos ver, conseguimos esto y déjame simplemente ajustarlo usando la parte superior de la imagen. Vuelve atrás, refresca. Y esta es nuestra corriente hasta ahora. Añadamos otro. Y simplemente copiando esto toda esta fila, columna, lo siento. Y si vuelvo ahora, tengo dos cartas. Cambiemos el panorama. Por lo que esta será la primera imagen. Y como podemos ver, lo siento, elijamos otra imagen. Entonces quizá la tercera. Y creo que ahora estamos bien. Volvemos atrás y refrescamos. Tenemos ambas fotos. Ahora si queremos añadir algunas otras fotos, por ejemplo, puedo copiar y pegar ds. Si refresco. Para conseguir estas fotos, sin embargo, déjame simplemente volver atrás. A ver. Entonces para la columna y esto, OK, Así que este es el problema. Agregamos una división por error aquí. Y aquí. Y creo que ahora vamos a clásico malo. Lo siento. Sólo eliminemos esto también. Sí. De acuerdo, entonces ahora estamos bien. Refrescar. Y esto es todo. Tenemos nuestras cuatro tarjetas a 1234. Y esto es todo por las grandes cartas. Siempre se pueden agregar algunos elementos a las faldas de, por ejemplo, aquí acabo de añadir el encabezado. Se puede agregar el párrafo y lo mismo va para todo el resto de las tarjetas. Y esto es básicamente el, en realidad lo último que voy a cubrir es el pie de página. Entonces por ejemplo, si tengo una corriente y quiero agregar un pie de página, simplemente puedo agregar el vaso y agregar lo que quiera. Déjame ya sea en pequeña. Por lo que la clase debe ser gravada silenciada. Y este es pie de página. Y acabo de añadir en el último cuadro, así que no lo voy a ver en ninguna de esas raíces de aquí. Este es el pie de página y parece un pie de página real. Y esto es básicamente para la tarjeta. Con eso dicho, este es el final de este video. Nos vemos en el siguiente. 15. Carrusel: Hola y bienvenidos de nuevo. En este video, vamos a hablar de carrusel. Y estas son las diapositivas que puedes, que ves. Por lo general, cuando tienes un sitio web, por ejemplo, un sitio web de compras. Y hay tantos productos, suelen usar carrusel. Y esta es la imagen. Y eso se puede cambiar. Y puedes ir ya sea a la derecha o a la izquierda. Y cambia automáticamente también. Y para crear esto, permítanme simplemente borrar esto y empezar. Entonces lo primero que vamos a hacer es crear nuestra división. Y será en nuestras clases carrusel y tipos de terrorismo y deslizamiento. Y esto es un, vamos a crear dentro de nuestro carrusel, el carrusel. Entonces hay energía. Esto es todo. Y antes de olvidar, necesitamos agregar los datos BS, ¿verdad? Y esto es para indicar que se trata de una sombrilla. Y por supuesto, dentro de nuestro carrusel, necesitamos crear los artículos. Por lo que el primer artículo será de artículo carrusel de clase. Y le daré el tipo de activo. Ya que ésta es la primera y será principalmente una imagen para ser de imágenes. Esta vez elegiré niños. Entonces el primero sería bueno. Y por supuesto, Vamos a añadir algunas clases aquí. La primera clase será la suerte, y la segunda será de cuatro ancho 100, solo para que se vea bien. Y luego vamos a copiar esto y pegarlo un par de veces. Y tal vez sólo tres veces faltan piezas suficientes. Ahora, cambiemos esto de activo a normal. Y esto de los niños quieren conseguir 32. Y ahora creo que deberíamos volver a refrescar. Y este es nuestro carrusel. Y como podemos ver, si esperamos un poco, cambiará drásticamente. Y como podemos ver, cambió a la segunda imagen. Y si esperamos más tiempo, vamos a conseguir el tercer diez. Volver a la primera imagen. Por ahora, volvamos a nuestro código y veamos cómo podemos modificar esto. Por lo que en realidad tenemos los controles. Y estas son las flechas que viene y la derecha y la izquierda. Y podemos añadirlos a nuestro carrusel. Y para ello, simplemente podemos sumar dentro de nuestra división. Por lo que después de terminar desde nuestro enter, podemos agregar el enlace. Y este enlace será. Gafas, control de carrusel. Siguiente. Y por supuesto, el rollo será un botón y datos BS slide. Y esta diapositiva será de tipo anterior, por lo que d igual a anterior. Por lo que aquí tenemos nuestro enlace. Y en este caso, vamos a crear algún lapso. Por lo que el primero sería icono de Rebus controlado por carrusel. Este es el icono del anterior. Y por supuesto, permítanme decir que el área escondida será igual a verdadera. Y luego después de crear el lapso que crea el segundo, en este caso será el botón Anterior. No obstante, lo hago visualmente oculto, así que está aquí, pero lo podemos ver ahora. Tan visualmente. Y entonces ahora, para que aparezcamos estas flechas, necesitamos vincularlas con nuestro carrusel. Y para hacer eso, simplemente necesitamos crear una identificación aquí. Entonces déjenme ponerle el nombre sombrilla y quizá controles de carrusel. Y por supuesto, tenemos que vincular esto con el carrusel y los pros también. Y creo que podríamos. No obstante, aquí agregamos un icono anterior y aquí lo especificamos a una X. Así que solo ajustemos esto. Por lo que este es un anterior también. Ahora volvamos a refrescar. Y como podemos ver, tenemos este botón aquí. Si lo presiono, vuelvo y vuelvo una vez más. Ahora vamos a hacer lo mismo para el próximo. Entonces aquí tenemos los controles del carrusel. Y entonces las clases serán una clase en realidad carrusel control. Y a continuación, el rol es botón y datos, BS, diapositivas, y será el siguiente. Y creo que ahora estamos bien con sólo hay que sumar nuestro lapso. El clase será carrusel. Control. Siguiente icono. Entonces aquí estamos agregando el siguiente ícono del ítem. Y el pedal de área será cierto también. Y vamos a crear la segunda clase span, que visualmente había hecho plus. Y esto indicará que este es el siguiente aquí. Ahora si volvemos refrescar, como pueden ver, tenemos ambos. Tenemos el siguiente y el anterior. No obstante aquí, a continuación se comete un error aquí, y voy a volver atrás, refrescar. Y ahora estamos bien. Tenemos nuestra derecha e izquierda. Y puedes cambiar entre ellos. Podemos optar por ir a la derecha y a la izquierda o podemos esperar. Y se cambiará por sí misma. Y esto es todo para el carrusel. También tenemos el indicador. Y esto es algo que viene al final de la pantalla. Y podemos elegir entre, tal vez, si tenemos quizá tres fotos, aquí tendrá tres líneas y podemos elegir la línea que queremos. Entonces sigamos adelante y lo implementemos. Y para ello, tenemos que volver a nuestra división. Antes de crear el carrusel entrar. En realidad necesitamos crear la lista ordenada. Y dentro de esto, vamos a tener los indicadores de clase Darussalam, haters. Y creo que estamos bien. Y ahora vamos a crear nuestro elemento de lista. El primer ítem de lista tenemos los datos BS, objetivo. Y esto indicará para el carrusel, el DNI del carrusel. Por lo que controla el carrusel. Y luego datos VS diapositiva. Y esto se deslizará al primero, será la diapositiva 0, y le daré la clase de activo. Y el segundo, déjame copiar esto y pegarlo aquí. Y una vez más. Por lo que el primero indicará a 0, el segundo y el tercero 22. Y por supuesto, el primero que sólo tendremos será el único que tenga activa la clase. Ahora si vuelvo y refresco, como pueden ver, aquí tenemos estas pequeñas líneas. Si presiono sobre una de ellas para que me lleve automáticamente a la foto. Entonces si presiono aquí, vuelvo al primer cuadro. Y cada vez que creas un carrusel, solo necesitas uno de estos. Entonces o bien están los controles o los indicadores ahí abajo. Y esto es todo para los indicadores del carrusel. Ahora, supongamos que necesito conducir algo aquí, tal vez un pie de foto. Entonces volvamos a nuestro código. Después de crear la imagen, podemos agregar cada elemento del carrusel, la leyenda del carrusel, y que creamos usando la leyenda del carrusel. Y voy a sumar la clase, el ninguno y el bloque medio. Entonces ahora si escribo algo aquí y bajo, entonces Apartado seis, si vuelvo ahora y refresco. Como pueden ver, tenemos algo aquí. No obstante, si minimizo, el panorama desaparecerá. Y esto es por esta clase que agregué aquí. Por lo que DMD negro. Esto significa que esto se aplicará para cualquier cosa mayor que el medio. No obstante, si llegamos a un punto donde tenemos tamaño mediano, pequeño x pequeño, tamaños de pantalla y 12 desaparecen automáticamente. Y esto es todo. Podemos copiar esto y pegarlo en diferentes artículos y va a funcionar muy bien. Entonces ahora si vuelvo y refresco, lo puedo ver aquí. A lo mejor cambió el Kynar cada vez. Entonces tal vez aquí podamos agregar el texto oscuro. Volvamos atrás y refresquemos. Y como pueden ver aquí, tenemos nuestros textos en el color oscuro, y esto es todo para el pie de foto. Y creo que esta es suficiente información sobre carrusel ya que la vamos a utilizar cada vez que creemos un proyecto. Y con eso dicho, este es el final de este video. Nos vemos en el siguiente. 16. Navar: Hola y bienvenidos de nuevo. En este video, vamos a hablar de siestas y pestañas. Ya utilizamos e implementamos algunos de ellos en los videos anteriores. No obstante, en este vamos a profundizar y vamos a entrar en los detalles de cómo crear y utilizar. Entonces, antes que nada, eliminemos todo esto y empecemos. Entonces lo primero que tenemos que hacer es crear la lista desordenada. Y la clase lo será. Entonces u l punto. Y esta es nuestra lista desordenada. Ahora podemos crear algunos elementos de lista dentro para que el elemento nav, por lo que la clase sería nav item dentro de esta clase, vamos a darle un enlace. Dentro de esta larga clase estará nav item o nav link. Y este primero estaría activo. Y sólo podemos añadir esto. Por lo que esto es actual y será igual a página. Y por supuesto, esto es, necesitamos darle un nombre y esta será la página principal o el elemento de inicio. Ahora volvamos aquí. ¿ Ves qué creamos? Por lo que solo creamos este hogar. Ahora, vamos a crear algunos otros elementos de la lista. Por lo que en la segunda se mencionará. Entonces. Marcas tal vez. Ahora si retrocedemos y refrescamos, esto es lo que obtendremos. Entonces esto es todo para los ítems de enlace. Siempre podemos agregar, por ejemplo, la clase discapacitada aquí. Y esto es para hacer desactivado el ítem de lista para que podamos presionar sobre él. Y en comparación con esto, puedo presionar sobre las marcas de casa y misión. Podemos presionar en esto. Entonces volvamos atrás y ahora hablemos de la alineación horizontal. Y una forma de lidiar con esto, si no quieres estar del lado izquierdo, es usar el contenido de justificar centrado. Y esta es una clase que generalmente se utiliza a la lista desordenada cuando se crea una barra de navegación. Por lo tanto justifican contenido Centro. Vuelve atrás, refresca. Y ahora tenemos nuestros elementos en el centro de la página. Si quieres que estén al final, simplemente puedo cambiar esto a y volver y refrescar. Y como podemos ver ahora están al final. Tenemos también la alineación vertical. Y en este caso, déjame volver aquí. Y usemos la clase flex collar. Por lo que banderas columna. Ahora vuelve atrás, refresca. Y como podemos ver, ahora, todos son verticales, por lo que los elementos son verticales y también tenemos las pestañas. Y esto se usa. Usando las pestañas de navegación de clase. Por lo que nav tabs. Y si retrocedemos y refrescamos, vamos a conseguir las pestañas. Y esto está deshabilitado ya que lo desactivamos usando los discapacitados aquí. Y por supuesto también tenemos las píldoras. Y como su nombre indica, necesitamos usar las píldoras de navegación. Si vuelvo y refresco, vamos a conseguir el pulso así. Y permítanme que simplemente elimine al actor de éste. Entonces vemos la diferencia, refrescar. Y como pueden ver, esto está activo, esto es normal, y esto es este habilitado. Ahora, usemos desplegable en nuestra barra de navegación. Y en este caso, tenemos bandas de Misión en casa. Vamos a sumar aquí, se bajó y agregar algunas opciones. Entonces lo primero que vamos a hacer es copiar esta base aquí. Y este debería ser el desplegable. Bajar. Y por supuesto, cada vez que creamos nuestro desplegable, necesitamos crear algunas opciones. Y para ello, simplemente creamos una lista desordenada. Y la clase sería menú desplegable. Ya implementamos esto antes, pero vamos a incrementarlo una vez más. Y en este caso, lo vamos a implementar aquí y el navbar. Por lo que tenemos lado de elemento de lista, este ítem, tenemos un enlace de clase y este enlace apuntan a nada. La clase será elemento desplegable. Y este es el punto uno. Entonces déjame copiar esto. A lo mejor dos o tres veces 123. Entonces este es el ítem al ítem tres, el ítem para y éste es para la lista desordenada. Y por supuesto, necesitamos agregar algunas clases a nuestro enlace. Para mí tenemos el enlace de navegación y el botón desplegable. Por lo que desplegable toggle. Y finalmente al elemento de lista en su conjunto, necesitamos agregar el menú desplegable de clases. Y creo que estamos bien. Si vuelvo atrás y refresco, vas a conseguir este desplegable es presiono sobre él. Creo que va a pasar. A lo mejor hicimos un error tipográfico. Entonces tenemos un reloj de arena ahora jugando dropdowns que podría. De acuerdo, Así que nos olvidamos de agregar los datos. Toggle a UDL. Sea lo que sea que presionemos, esto bajó. Y ahora podríamos refrescar. Y esto es todo. Tenemos nuestros artículos, pero presionaré en desplegable. Aparecen y una vez más desaparecieron. Ahora como tenemos algo de info sobre desplegable y barra de navegación, vamos a crear un mapa completo que podamos utilizar en nuestra página web. Entonces lo primero que vamos a hacer es crear nuestra división. Y contendrá la barra de navegación de clase y Navbar expandirse en pantallas grandes. Tan barato. Y creo que por ahora estamos bien. Dentro de nuestra clase, vamos a crear el fluido contenedor y lo discutiremos más adelante. Pero por ahora sólo lo escribiremos. Tenemos el enlace. Y en este caso, la clase será de marca navbar. Y esto es navbar. Entonces volvamos atrás y refresquemos. Y como podemos ver, conseguimos nuestro primer elemento en nuestro primer elemento dentro a la derecha, y está aquí. Ahora volvamos a nuestra división. Dentro de esta división, vamos a crear un botón. Y en este caso, el botón será de tipo botón. Y las clases serían suficientes pero toggled, toggled. Y por supuesto, tenemos toggle de datos. Y será de tipo colapso. Y ahora después de crear esto, todavía tenemos los datos BS y objetivo. Y esto es todo. Y esto es para apuntar a los datos. Y cada vez que presionamos, así que vamos a darle un nombre como el contenido de la barra de navegación. Y creo que ahora estamos bien. Si vuelvo aquí. Y así este es nuestro botón. Vamos a crear nuestro spanned. Por lo que dentro de nuestra división, tenemos a esta banda. Esta banda sería de clase navbar, icono de doble filo. A ahora que hemos hecho con nuestra primera división o nuestro primer botón, sigamos adelante y creemos la segunda división. Y estos serán los elementos de barra de navegación. Entonces déjenme darle la clase de colapso y colapso navbar. Y Entrar. Por supuesto, necesitamos agregar el ID que usamos aquí. Por lo que dijimos que los datos son, deberíamos apuntar al contenido de la barra de navegación. Por lo que necesitamos agregar el contenido de la barra de navegación ID. Y por supuesto dentro de nuestra división, necesitamos crear nuestra lista desordenada como antes. El clase será navbar, nav. Y el auto. Demos algún margen. Por lo que MV2 y ser grande 0. Por lo que esto es margin-bottom para pantallas grandes es igual a 0. Y ahora podemos abrir nuestro ítem de lista, el primer ítem de lista, como de costumbre artículo de navegación clase. Y dentro de nuestro artículo de lista podemos crear nuestra longitud. En este caso, el área actual será igual a página. Y por supuesto, las clases serán nav link y la primera estará activa. Y este es el hogar. Ahora vamos a copiar este par de veces. Entonces este es el primero 1, segundo, tercero, cuarto. Por lo que a casa Misión, producto y contáctanos. Entonces volvamos atrás y refresquemos. ¿ Podemos ver que tenemos nuestros botones aquí. Y si queremos, podemos añadir el botón desplegable. Siempre que, como lo hacíamos antes, cada vez que presionamos algo, aparecen algunas opciones. Pero no lo vamos a hacer por el bien del tiempo. Pero por ahora creo que esto es bueno. Ahora volvamos atrás y añadamos la búsqueda. Por lo que después de que terminemos con nuestras listas desordenadas, podemos crear nuestro teléfono sin ninguna acción. Y la clase serán los rezagos. Por supuesto, dentro de nuestra forma, tenemos la entrada. El insumo será de tipo de búsqueda en este caso. Y por supuesto, necesitamos agregar algunas clases como de costumbre. Por lo que la primera clase será para el control y el positor. Podemos agregar un Marcador de posición para ser búsqueda vía etiqueta. También busca. Y creo que somos buenos con el insumo. Podemos añadir el botón. Y este botón será de clases btn, PTEN, éxito. Y el tipo será Presentar. Y por supuesto hay que añadir la palabra búsqueda. Ahora si vuelvo atrás y refresco, como podemos ver, tenemos nuestro botón Buscar y podemos Social cualquier cosa desde aquí. No obstante, si escribimos algo y búsqueda precedente, no pasará nada ya que no agregamos ninguna Fontenelle ni ninguna acción. Entonces esto es todo para la barra de navegación. Puedes usar cualquier cosa que aprendimos hasta ahora de tal vez palabras, insignias, alertas, tarjetas. Se puede poner cualquier cosa dentro de esta red. Y por supuesto, puedes dividirlos como lo hicimos antes. Y como pueden ver aquí, decidimos colocar esto al final. Si quitamos la clase de desviaciones y volvimos a refrescar, podemos ver que no se ve bien. Tenemos unas maletas aquí. Y esto desvía nos ayuda a manipular mejor nuestra barra de navegación. Entonces esto es básicamente para la barra de navegación. Puedes seguir adelante y probarlo tú mismo. Se puede cambiar tal vez el color. Déjame cambiar una vez el color. Podemos decidir o elegir el color desde aquí. Entonces estaremos entre la oscuridad. Si retrocedemos y refrescamos. Este es nuestro oscuro nav bar. También podemos cambiar el texto para que se alinee. Y lo podemos hacer usando el atributo oscuro navbar o cristal. Tan naff, pero oscuro. Y así podemos ver que la máquina de casa navbar resultó blanca. Ya que Bootstrap sabe que estamos usando un fondo oscuro, automáticamente convertirá estas palabras en un modo blanco. Ahora si volvemos atrás y para hacerlo un poco mejor, podemos quitar el btn-success de aquí, refrescar y tal vez simplemente elegir el btn Light. Creo que va a ser bueno, fresco y se ve más bonito ahora. Estamos usando la oscuridad y la luz dentro de nuestra red. Entonces esto es básicamente para la barra de navegación. Puedes seguir adelante y modificar, cambiar lo que quieras y elegir tu barra de navegación. Con eso dicho, este es el final de este video. Nos vemos en el siguiente. 17. Sitio web de Bootstrap: Navbar: Hola y bienvenidos de nuevo. En este video, vamos a empezar a construir nuestro primer sitio web bootstrap. Y este sitio web será completamente construido usando Bootstrap. Y al final podríamos agregar algunos efectos y algunos de estilo usando CSS. Pero por ahora lo vamos a construir usando Bootstrap Andi. Por lo que antes de empezar, necesitamos ir a Google y buscar Font. Impresionante. Y este es un sitio web que nos permitirá utilizar los iconos. Para que sigas adelante y te inscribas gratis, crea tu primer get, y luego acudes a tus hijos desde tu cuenta y presiona en este el primero. Y luego después de conseguir las habilidades, simplemente copias el código y lo pegas dentro de tu sitio web. Y eso es todo lo que necesitas hacer básicamente, ahora, podemos trabajar con font-awesome como queramos, y vamos a ver cómo podemos usar estos iconos dentro de nuestro sitio web. Entonces lo primero que vamos a crear es la barra de navegación. Entonces déjame seguir adelante y crear un comentario. Y así es como podemos crear un momento usando HTML y número límite. Y entonces, y así ahora podemos empezar. Lo primero que vamos a crear es el NADPH. Y podemos crearlo usando el elemento nav. Y las clases serán navbar, barra navegación, expandir HAT medio. Y tal vez usaremos el fondo oscuro, así Vg oscuro. Y por supuesto si vamos a usar el fondo oscuro, necesitamos tener las mazos de diapositivas de texto o la luz Navbar en este caso. Y ahora dijimos que podemos seguir adelante y empezar con nuestra red. Lo primero que vamos a crear es un icono. Entonces para hacer eso, vamos a crear el enlace. Y este enlace no señalaría nada hasta ahora la clase será marca navbar. Y dentro de este enlace podemos crear nuestro icono. Y aquí tenemos que darle algunas clases. Por lo que aquí necesitamos usar algunos iconos de Font Awesome. Si volvemos a nuestra y también a la página y vamos a iconos, podemos buscar más de 7 mil iconos. Si nos desplazamos un poco hacia abajo, encontraríamos algunos iconos disponibles. Estos son para pro y necesitas una licencia para tenerlos. Por lo que usaremos el que está disponible para nosotros. Y esto parece, así que presiona sobre él para tomar, para llevarnos a esto. Y como pueden ver, podemos usarlo. Y como B y Microsoft. Entonces volvamos a nuestro código y dibujados aquí f a, b, f a. Y por supuesto necesitamos que el texto esté alerta tenso, estamos usando un fondo oscuro. Y vamos a darle algunas clases. Entonces f a dos actos, necesitábamos 2x veces. Y por supuesto vamos a darle algún margen y max tres tal vez. Entonces volvamos atrás y refresquemos nuestra página. Como podemos ver, tenemos nuestro ícono aquí al inicio de nuestra barra de navegación. Entonces esto es todo para el ícono. Ahora, vamos a seguir con nuestra barra de navegación. Después de crear nuestro enlace, podemos crear nuestro botón. Entonces este es el botón que será de tipo botón. Y tenemos que darle unas gafas. Por lo que nav bar, tabular y el fondo será ligero. Y también podemos agregar el data-toggle. Y será de tiempo transcurrido. Por supuesto, no queremos estropear el objetivo de datos. Y esto va a apuntar y algo que vamos a crear el posterior, pero déjame darle el ID nav. Ahora, después de crear el botón, podemos crear nuestro expandir. Y dentro del lapso. Vamos a darle algunas clases como navbar, icono tabular, y cargado para visualizar el HTML de la página web. Al conducir nuestro código. Descargaré esta extensión y es un servidor en vivo. Puede seguir adelante y descargarlo. Entonces, cuando termines, puedes presionar en Go Live. Y el total anexa automáticamente la página de Bootstrap en nuestro sitio web y cambiará y se modificará automáticamente cada vez que cambiemos algo. Entonces déjame solo ajustar esta página y creo que ahora estamos bien. Entonces, por ejemplo, si degradado este ícono y guardo eso, automáticamente se eliminará de aquí. Pero por ahora, déjame guardarlo de nuevo. De esta manera podemos ver que conseguimos nuestro yo remontada. Entonces sigamos. Nos vamos a nuestra primera división y será de tipo suficiente o la idea, déjenme nombrar el ID ya que nombramos aquí dentro de nuestro nervio dato-objetivo. Entonces vamos a apuntar a esta división. Y la idea será, ahora vamos a sumar algunas clases, pero déjame aparecer aquí y las gafas serán las primeras es colapsar. Para colapsar. Y alertas de Navbar. Tenemos que sumar también lo justificado. Entonces entre y estamos viendo, vamos a ver qué va a hacer esto en un minuto. Pero por ahora sumémoslo. Y por supuesto, cada vez que creamos nuestra barra de navegación, necesitamos agregar la lista desordenada. El listado desordenado será de clase navbar nav, y los elementos de lista serán de elementos de tipo nav. Por lo que artículo nav clase. Y luego abrimos una lista desordenada, elemento de lista dentro. Tenemos la longitud. Y esta longitud será de gafas. Ahora, la longitud y el texto serán fuente ligera. O tal vez solo déjame hacerlas mayúsculas. Entonces texto mayúscula. Y vamos a sumar el b X tres solo para darnos algo de relleno. Y por supuesto, necesitamos agregar algo en el medio. Entonces lo primero que vamos a estar en casa haciendo click en Guardar. Y ahora no podemos verlo ya que tenemos esto. Entonces si solo aumento el tamaño, podemos ver que llegamos a nuestra casa aquí. Entonces volvamos atrás y continuemos. Copiemos esto un par de veces. Entonces a casa. Y creo que ahora con bien, si cambio esto, lo primero que vamos a añadir es después de Home es el contacto con nosotros o tal vez nuestra misión. Y luego lo último que podríamos agregar SP, contáctanos. Y podemos agregar aquí nuestro producto. Y creo que estamos bien. Como podemos ver, conseguimos nuestros productos de máquina casera y contacto. Permítanme que disminuya el tamaño de esto. Y también esto. Y ahora estamos bien. Terminamos el primer paso de nuestra barra de navegación. Por lo que ahora podríamos querer agregar el botón de búsqueda que viene aquí o la entrada de búsqueda. Y para ello, necesitamos crear una nueva reforma. Y sin acción alguna, la clase será igual a cuatro. Check in line. Y yo estoy a las tres. Y ahora, si vamos y empezamos, podemos crear nuestra división y será grupo de entrada. Y dentro de nuestra división, podemos crear nuestro primer insumo. Y los tres sean de tipo texto. controlará la clase para o control de forma como de costumbre. Y el placeholder será sencillo. Sólo busca cualquier cosa. Y ahora si vuelvo y aumento el tamaño, podemos ver que tenemos nuestra entrada de búsqueda. Ahora podemos agregar el botón para generar la búsqueda. Añádalo aquí mismo después de nuestra entrada. Entonces esta es la división, y podemos agregar una nueva división dentro de la antigua. Y D2 será texto de grupo de entrada. Por lo que ahora podemos crear nuestro botón. Se tipo será botón. Como de costumbre. La clase será simple, solo btn. Y dentro de este botón, podemos agregar nuestra búsqueda. Yo puedo conseguir, podemos conseguir de Font. Impresionante. Entonces si vuelvo atrás y busco el icono de búsqueda, como podemos ver, esto es oleaje y presiono enter. Vamos a conseguir esta búsqueda. Vamos a presionarlo. Y este es el icono de búsqueda. Si queremos usarlo, simplemente escribimos F a S de una búsqueda. Por lo que dentro de nuestro botón, necesitamos crear el icono. Las clases serán una a como búsqueda. Y vamos a darle un color del texto silenciado. Y si volvemos, Aumenta el tamaño, vamos a conseguir esta búsqueda. Entonces esto es básicamente, esta es nuestra barra de navegación, nuestro primer elemento de nuestra página web. En el siguiente video, vamos a seguir construyendo los siguientes elementos, formas, y tratando de fusionar las cosas para llegar a un sitio web de bootstrap completo. Entonces nos vemos en el siguiente video. 18. Inicio y misión: Bienvenido de nuevo. Y en este video vamos a empezar a crear nuestro hogar y misión. Por lo que el hogar es lo primero que el usuario va a ver cada vez que entre a nuestro sitio web. Y estoy pensando en algo muy sencillo, esa es una carta de bienvenida. Y hagamos eso simplemente saliendo de la barra de navegación, creando el hogar, especie de hogar y, y hogar. Por lo que dentro de nuestro hogar, necesitamos crear toda una nueva sección. Dentro de la sección tenemos el fluido contenedor de división. Entonces líquido contenedor. Dentro de esta división, tenemos nuestra primera fila. Entonces la fila será, vamos a sumar algunas clases para lanzar. El primero es justificar Benton Center. Es decir simplemente agregar todo el contenido en el centro de nuestra página web y alinear elementos, centros. Y esto para alinear los artículos en el centro. Y vamos a darle una altura de un 100. Creo que va a ser bueno. Y ahora empecemos con nuestra división. Entonces lo primero que vamos a crear es la columna diez. Y dentro de esta columna vamos a crear el encabezado de exhibición de clase también. Y por supuesto, el impuesto debe ser capitalizado. Entonces voy a utilizar el impuesto capitalizar. Y dentro de nuestro rumbo tenemos nuestro lapso. Y permítanme añadir. Hola y bienvenidos a mi página web. Si presiono guardar, va a generar algo como esto. Entonces como podemos ver, esta es la Bienvenida a nuestra página web. No obstante, podemos modificarlo un poco. Por lo que dentro de nuestro lapso, en realidad podemos agregar la clase. Y ese es el texto. A lo mejor probemos la oscuridad. Y esta es la oscuridad. Entonces tal vez preguntándose, ya que estamos usando el amarillo aquí, tal vez lo use aquí. Entonces textos advirtiendo, creo que se ve bien. Ahora, después de la advertencia de texto, podemos agregar el después del encabezado, podemos agregar el texto. Entonces párrafo. Dentro de este párrafo, vamos a escribir aquí algunas Lauren y algunas clases. La primera clase va a ser texto. El texto Clyde? No. Entonces creo que la oscuridad es buena. Entonces gracias. Doug. Y creo que esto es demasiado amplio. A lo mejor añadir la diapositiva de texto. Y es lo mismo en realidad, pero si puedes notar, le dará un poco de oscuridad. Es más entre el blanco y el gris. Y esto es básicamente por la bienvenida por esto es muy simple. Puedes seguir adelante y modificarlo y trabajar con él. Pero en realidad sólo voy a mantenerlo sencillo para que puedas seguir conmigo. Y luego cada vez que tuviste oportunidad, solo modificar y mejorar. Y esto. Entonces en realidad este es un hogar 20. Adelante y empecemos a crear nuestra misión. Entonces después del hogar, tenemos la misión. Y luego el fin de esta misión y misión. Y ahora empecemos. Entonces lo primero que tenemos que hacer es crear nuestra sección. Y esta sección será una misión de clase de sección más Michigan. Y déjenme empezar por crear nuestra primera división. Y ese es el fluido contenedor. Añadamos los textos de clase secundarios solo para verlo y visualizarlo. Y sumemos algunas líneas aquí. Por lo que BR veces diez, refresca. Y este es el segundo. De aquí. Déjame añadir el, lo siento aquí necesitamos añadir el fondo. Por lo que BG secundaria. Y si refresco guardar, voy a conseguir este gris aquí. Y esto indica el fluido contenedor o la sección de nuestra misión. Así que empecemos aquí, eliminemos todo esto, y empecemos con la creación de la primera fila. Y este será nuestro título en realidad. Entonces permítanme simplemente decir que tenemos aquí el título y, y título dentro de nuestro título. Podemos crear la fila. Y déjame simplemente ajustar esto. Dentro de nuestra fila. Podemos crear la columna. Y por supuesto dentro de esta columna tenemos la misión. Y como podemos ver, aquí tenemos nuestra misión, pero necesitamos ajustarla. Por lo que dentro de nuestra clase aquí tenemos el display. Y por supuesto, necesitamos que el texto sea blanco. Por lo que impuestos Blanco y centro de texto para estar en el centro que podemos ver nos reunimos aquí. Ahora podemos elegir el color gris o tal vez el color oscuro. Probemos la oscuridad y luego veremos si necesitamos cambiar. Entonces para hacer eso, simplemente agregamos aquí. Y en lugar de secundaria. El texto oscuro. Y aquí vamos. Tenemos nuestro texto ahora y el fondo, que está oscuro. Ahora terminando con nuestra división. Y tal vez podamos agregar algo de relleno aquí o margen. Entonces el módulo tres, creo que será bueno. Y después de terminar la primera división, podemos sumar nuestra segunda. Y este sería el párrafo. Entonces dentro de esta división, tenemos el párrafo que es de plomo de vidrio y será básicamente Lauren 25. Noto que esto es mucho de Lorin, pero creo que va a hacer que se vea bien. Y esto es básicamente por el título, tenemos nuestra misión y luego seguida de alguna información al respecto. Y esto es todo. Si aumento el tamaño, creo que se quedará bien. Y ahora sigamos adelante y sigamos creando lo mejor de nuestra misión. Entonces este es el final de nuestro título y el inicio de nuestra misión. Entonces lo primero que vamos a crear la fila, dentro de esta fila, tenemos la columna tal vez después del medio se luche y texto centrado de goles. Esto, vamos a crear nuestro primer icono. Y, y no voy a ir y venir de Font Awesome y a copiar el icono, así que ajústalo, los preparé antes. Por lo que el primero será FACS un envío rápido. A 5X para hacer un 105 veces más grande, detecta será peligro o tal vez querer. A ver. El margen inferior será para. Ahora si volvemos y tenemos este envío. Ahora después de terminar de esto, tal vez añada algo de texto aquí. Por lo que H uno será de vidrio. Déjenme darle algún margen que el botón, y será entrega rápida. Y algún párrafo ocho. Y si vuelvo al párrafo, agreguemos el texto de clase silenciado. Y vamos a ver, ¿podemos ver que tenemos nuestra primera. Ahora, el segundo sería lo mismo. Entonces déjame copiar esto y pegarlo. Por lo que 12. Y por supuesto necesitamos cambiar los iconos y los encabezamientos. Por lo que el primer artículo que puedo escuchar es MAS, una mano sosteniendo el USD. Entonces aquí F a, S, F a y sosteniendo USD. Y en lugar de entrega rápida, vamos a cambiarlo a los mejores precios. Y luego finalmente, el último será FAR FAA flecha alfa, sube y de máxima calidad. Entonces esto es básicamente, y como pueden ver, esta es nuestra misión. Si seguimos adelante y lo hacemos más grande, conseguimos nuestros tres iconos y tres párrafos en la misma línea. Y tenemos la misión y el párrafo hablando de ello ante ellos. Y como puedes ver, no estamos viendo la entrega rápida, los mejores precios y la máxima calidad. A lo mejor necesitamos hacer algo al respecto. Entonces vuelve aquí y vamos a ver. Entonces este es nuestro H1, tal vez hacerlo texto blanco. Y esto es entrega rápida. Y haremos lo mismo por el otro subtexto, Blanco y Blanco. Ahora vuelve atrás, hazlo más grande. Y como podemos ver, conseguimos nuestra misión. Y estos son nuestros tres iconos. Como se puede ver aquí, hay poco espacio entre los iconos y este párrafo. Entonces ajustémonos simplemente yendo al párrafo que acabamos de crear y simplemente añadamos el POR restante. Y si vuelvo, creo que es mejor, pero es buena idea hacerlos más grandes cinco. Y ahora creo que estamos bien. Y esto es básicamente, tenemos nuestro párrafo de misión, entrega rápida, mejores precios y máxima calidad. Entonces esto es todo para la misión y la Página Principal. Y con eso dicho, este es el final de este video. Nos vemos en el siguiente. 19. Productos: Ahora que hemos terminado con nuestra sección de hogar y misión, podemos seguir adelante y comenzar con nuestra sección de productos. Entonces, antes que nada, déjame ir todo el camino hacia abajo. Y este es el fin de nuestra misión. Podemos empezar con la creación de un comentario. Y el comentario simplemente dirá que esta es la sección de productos. Y luego lo terminaremos con otro gobierno y de producto. Y ahora podemos empezar con la creación de nuestra sesión. Entonces esta es la sección con el cristal, pero acolchado cinco. Y dentro de la sección, como de costumbre, comenzamos por crear nuestro contenedor, y este es el fluido continuo. Y dentro de esta división, podemos empezar por crear nuestro arco. Y echemos un vistazo a este sitio web. Quiero que mi sección se divida en cuatro columnas, y tengo cuatro productos por ejemplo. Entonces este es el primero 1, segundo, tercero, cuarto. Entonces para hacer eso, volvamos. Y dentro de nuestro sorteo, podemos empezar por crear, en primer lugar, vamos a empezar por crear el título y alguna información, después dividirlo en cuatro columnas. Por lo que dentro de la primera fila tenemos el polen. Y por supuesto quiero que mi texto esté centrado, así que usaremos el texto centrado y el margen inferior tres. Entonces ahora dentro de nuestro patrón, vamos a crear nuestro rumbo. Como de costumbre. la clase del rubro. Las etiquetas pueden ser de advertencia. Vamos a ver ahora. Y ese es el espíritu también. ¿ Verdad? Productos. Y ahora volvamos a ver. Por lo que este es nuestros productos aprietan. Y como de costumbre, si quieres algún párrafo, siempre podemos escribir algunos cargarlos. A lo mejor 15. Y la clase será plomo, texto y tal vez secundaria. Echemos un vistazo. Y si ahorramos, como podemos ver, se ve bien. Entonces ahora, después de crear la primera parte, que es el título y el párrafo, sigamos adelante y creamos la segunda parte que contendrá nuestros productos reales. Entonces ahora esto es para el ETO. Podemos empezar por crear otra fila aquí. Y esta fila se dividirá en realidad en cuatro productos. Entonces eso son cuatro columnas. Y en este caso, simplemente agrego tres. que ya dijimos que nuestra página web consta de 12. Y si queremos cuatro partes, podemos dividir 12 por cuatro. Vamos a conseguir tres. Es por ello que aquí tenemos este número tres. Dentro de esto, vamos a utilizar las imágenes de imágenes. Tomemos primero BEC. Y la alternativa sería proyecto o producto uno. Y estas no son imágenes de productos reales. Productos. Ya tenemos algunas fotos aquí para Getz y algunas fotos aleatorias. Entonces los voy a usar. Pero por ahora, esto es por ahora si quieres crear este proyecto real, necesitas cambiar estas imágenes. Entonces esto es en cuanto a la imagen, permítanme agregar algunas clases. La primera clase estará en la miniatura de la imagen. Y yo quería ser redondeado. Y ahora si empiezo con nuestro párrafo, puedo elegir las clases. Eligamos la clase de texto silenciado. Y algunos aprenden, aprenden Sx igual. Bien. Ahora, retrocede y como podemos ver, tenemos nuestra imagen aquí con la de abajo. No obstante, como podemos ver, esta imagen se ve muy pequeña y se ve bien cuando abrimos la página, cuando tenemos una página completa. No obstante, si estamos usando un dispositivo, un dispositivo móvil, se verá así y se ve pequeño. Por lo que tenemos que lidiar con esto. Una forma de lidiar con ello es precisar que cada vez que estamos usando una pantalla pequeña, sólo necesitamos dos imágenes en la misma línea. Y una forma de hacerlo es simplemente especificar que la columna tres sólo será para pantallas grandes. Y siempre que tengamos un pequeño, vamos a usar una columna SpaceX. Y esto indica que sólo queremos un cuadro encendido, en DES. Y si vuelvo a medio, puede caber dos cuadros. Y siempre que vaya a grande, va a caber para las fotos. Entonces esto es todo. Ahora, vamos a copiar esto cuatro veces. Entonces esta es 1234. Cambia las imágenes. Entonces aquí tenemos segundo, tercero. Y ICANN. Elige la imagen como la primera. Otra vez. De esta manera podemos ver aquí tenemos nuestras cuatro fotos. Y si hice la imagen o la pantalla más grande, ellos tendremos dos cuadros en la misma línea. Y luego si lo hago a pantalla completa, estaremos teniendo imágenes por defecto o guías por defecto en la misma línea. Entonces como podemos ver, creamos página web completa hasta ahora. Contamos con nuestros productos de casa Michigan y contacto. Esta es la página de inicio, esta es la misión. Y tenemos estos productos. Puedes cambiar estas fotos como dijiste, a lo que quieras. Y en el siguiente video vamos a crear el Contáctenos. Y por supuesto podríamos agregar algunas otras cosas que te ayudarán a crear un mejor sitio web. Y ten en cuenta que todos estos son puros bootstrap puede estar al final, agregaremos algunas modificaciones y usando CSS o JavaScript. Entonces ya veremos, pero por ahora, vamos a construir todo nuestro sitio web a partir de bootstrap. Entonces básicamente para este video, nos vemos en el siguiente. 20. Marcas: Hola y bienvenidos de nuevo. Y en el último video, terminamos de crear nuestra sección de productos. Y estaba pensando que ya que tenemos algunos productos, ¿por qué crear, por qué no crear la parte de la marca? Y en esta parte de marca vamos a crear algunas tarjetas. Y sigamos adelante y empecemos a calificarlos. Entonces empezaré por escribir el comentario, que es marca. Y por supuesto, y Rand. Y ahora empezamos con crear nuestra sección. Y le daremos algunas clases. Hagámoslo oscuro por el momento. Por lo que VGA oscuro y algo de relleno y el eje y. Ahora ábrela, empieza con nuestro líquido contenedor. Como de costumbre. Dentro de esta división, empecemos por crear el título. Entonces este es nuestro título. Y este es E y título. Y por supuesto dentro de este título tenemos un retirado. Y vamos, ya que oscurecimos nuestro fondo, hagamos blanco nuestro texto. Y por supuesto, el título debe estar centrado dentro de esto. Vamos a crear nuestra columna y algún margen. Y por supuesto, este es nuestro encabezado de pantalla de vidrio para y luego algún margen en el botón. Ahora podemos escribir cualquier cosa en esas marcas que algún párrafo. Y dentro de este párrafo, crearé la división y colocaré este párrafo dentro de la división. Y la división estará teniendo d m antes y las clases subyacentes. El párrafo será de vidrio, plomo y Sundaram. Ahora si volvemos atrás, como podemos ver, tenemos nuestras marcas y algunos párrafos que describen cuáles son las marcas que tenemos. Y por supuesto, después de terminar con el título, podemos empezar con la creación de nuestras tarjetas reales que sostendrán nuestras marcas. Entonces por ahora, vamos a crear la fila y luego crear la columna. Y como dijimos, si queremos que nuestras columnas sean responsivas, necesitamos especificar para las pantallas grandes, pantallas lo que va a suceder. Entonces estaba pensando en tener tres cartas cuando tenemos pantalla grande. Entonces si tenemos esta pantalla grande, tenemos 3123. Y en total Día serán seis tarjetas. En este caso tenemos dos columnas y cada columna, lo siento, dos filas y cada fila tenemos tres columnas. Y siempre que tengamos la pantalla y tamaño mediano, vamos a tener tres filas. Y en cada fila vamos a estar teniendo dos columnas como esta. Entonces sigamos adelante y empecemos con Harlem. En general, serán cuatro y en medio y más grande que pequeño para ser sexo. Entonces MI F5, y creo que tenemos por ahora dentro de esta división, vamos a crear nuestra división va a estar sosteniendo nuestras tarjetas. Entonces corte. Añadiré la sombra actual de clase. Y por supuesto, no quiero ningún borde, así que el puntero será 0. Entonces sigamos adelante y creemos. Nuestra primera imagen será de imágenes adultas elegir la misma imagen para todas las tarjetas, pero puedes cambiarla por supuesto. Por lo que esta es la primera clase de imagen como de costumbre, imagen o dimensión actual. Y luego cada vez que creamos nuestra imagen y queremos algún texto sobre esta imagen, necesitamos usar la clase de superposición. Por lo que nuestra nueva división será la superposición de imagen de tarjeta. Y luego coloque aquí nuestro párrafo. Entonces voy a usar el sumar cinco. A la clase se le gravará Blanco y texto en mayúsculas. Y tal vez algún brote. Y creo que estamos bien. Entonces esta es la primera marca. A lo mejor simplemente escribiré primero Rand. Y por supuesto, si voy aquí, como podemos ver, tenemos nuestra primera marca. No obstante, no es tan visual, por lo que aquí podemos añadir el fondo. Podemos agregar para el rubro, un fondo de secundaria. Y como podemos ver, ahora es un más claro. Y por supuesto, cada vez que terminemos, podemos copiar esto. Esta es nuestra guía y necesitamos copiar todas nuestras columnas. Entonces esta es la columna 123. Ahora esto es segundo y éste es tercero. Y como podemos ver, cada vez que tenemos una pantalla de tamaño mediano, tenemos un dos en la misma línea. Y si lo hago más grande, voy a tener tres al mismo tiempo. Y por supuesto, si tengo una pantalla de tamaño pequeño, voy a tener sólo 11 tarjeta. Y ahora sigamos adelante y copiemos esto un par de veces. Entonces esto es y creo que estamos bien. Este es el cuarto, quinto, sexto. Y ahora yo pero a pantalla completa, podemos ver que tenemos nuestras seis tarjetas. Y estas representan las seis marcas que vendemos o que tenemos. Y por supuesto, puedes cambiar las fotos y tal vez cambiar el costado de la tarjeta. El párrafo, cómo detecta secundaria, lo siento, los antecedentes. Y puedes hacer muchas cosas y modificar lo que quieras en estas tarjetas. 21. Clientes: Ahora que hemos terminado con nuestro producto, podemos comenzar con nuestra sección de clientes y la sección que vamos a escribir algunos clientes deben ver. Entonces sigamos adelante y anexemos aquí un nuevo comentario. Clientes y, y clientes. Por lo que dentro de estos comentarios, dentro de estos comentarios, podemos empezar por crear nuestra sección de clientes. Y otra vez, simplemente ábrela como división. Y clientes. También tenemos algo de relleno, por lo que p5. Y dentro de la sección de este cliente, podemos empezar por crear la carga del contenedor. Y como de costumbre, tenemos nuestro título. Y esto será, déjame sólo abrir una nueva frontera y título. Como de costumbre, empezamos por conseguir nuestra fila dentro de la DO, déjame que sea un texto blanco. Y por supuesto, x, centro y división anexada. Dentro de esta división, vamos a crear la columna y algún margen. Por supuesto, dentro de esta división, comenzamos por crear la clase, pero nuestro encabezado muestra para el margen inferior cuatro. Y estos son los clientes. Y tal vez añadir algo de texto. Entonces clase y bajarlos. A lo mejor 14. Creo que estamos bien. Si vuelvo ahora, como podemos ver, tenemos nuestra sección de clientes, sin embargo, es amplia y no podemos ver nada ya que agregamos el texto de ancho. Entonces déjame lidiar con eso simplemente aplicando la oscuridad aquí que podemos ver que nuestra sección de clientes. Ahora no se ve muy bonito después de esta tercera sección, sección, ya que ambos son Doug. Entonces tal vez podamos cambiar el texto oscuro y mantenerlo en blanco si quieres. Pero por ahora, trabajaré con él tan oscuro ya que esta página sólo estará al final. Y lo más probable es descartar la página uno B en la misma página de ésta. Por lo que esta es toda la página web. Puedes mover algunos de los elementos o algunas de las secciones que creamos y a otras páginas. Por ejemplo, si hago clic en la misión o en los productos, debería llevarme a la misión, toda la sección de productos. Pero por ahora, los tenemos a todos en la misma página. Si sientes que puedes crear. Y cada uno de ellos en la diferente Página y luego enlazarlos juntos. Eso también está bien. Entonces esto es básicamente por el título. Volvamos aquí. Y ahora vamos a crear nuestro carrusel que llevará a cabo la revisión de nuestros clientes. Entonces lo primero que vamos a hacer es crear los indicadores. Y por supuesto, empecemos realmente a crear la fila y la columna como columna habitual y estos sexo. Y yo quería en el medio. Entonces estoy usando el auto umax. Y luego abramos. Por supuesto, necesitamos crear el carrusel. Entonces antes que nada, Teresa y yo necesitábamos deslizarnos. Y por supuesto, necesito datos, traté de ser igual a carácter. Y ya implementamos esto antes. Pero es agradable sólo recordarlo. Le daré una identificación de aerosol o cliente. Ahí lo hay. Y creo que estamos bien. Podemos empezar con la creación de nuestra propia lista de indicadores. Entonces esto es, y le vamos a dar algunas clases. Y estos son los indicadores del carrusel. Y por supuesto, el ítem de lista será el objetivo de esto. Sería carrusel del cliente. Hizo eso que le dimos a esto. Entonces déjame simplemente muy rápido. Y le dimos personajes elenco. Entonces vamos a escribir hashtag. Y luego necesitamos datos diapositiva dos. Y esto se deslizará a 0. Siempre que lo presionamos. Y le voy a dar un vaso de activo. Y creo que estamos bien. Entonces déjame copiar esto y pegarlo un par de veces. Por lo que 123. ¿ Qué pasó? Entonces déjame volver. Entonces tenemos uno, tenemos el segundo y el tercero. Y por supuesto necesito cambiar algunos necesito hacer algunos ajustes para que vea L12 y el segundo tercio no necesita que no necesitamos hacerlos tan activos. Y creo que ahora estamos bien. Contamos con nuestros indicadores. Entonces volvamos atrás y empecemos con nuestro aerosol enter. Por lo que entra carrusel. Dentro de esto, vamos a crear nuestro artículo carrusel y el primer ítem estará como de costumbre activo. Por lo que carrusel artículo que activo y será. Gracias centro. Entonces esto es todo. Ahora tenemos nuestro artículo. Dentro de este artículo, voy a publicar una imagen sencilla y se redondeará. Por lo que ya tengo algunas imágenes sobre algunos bebés. Yo los uso para que la imagen sea imágenes, es una. Y las clases se imaginarán fluidas. Y por supuesto que redondeamos círculo. Y el margen será de cinco. Y voy a añadir el ancho para ser un 150 pixeles. Ahora, volvamos aquí y veamos. Como podemos ver aquí, tenemos a nuestros clientes, el párrafo y la imagen con los indicadores. No obstante, aún no tenemos ninguna imagen siguiente o anterior. Entonces esperemos. Y por supuesto necesitamos escribir la entrevista real. Y lo pondré en un código de bloque. Por lo que el código de bloque estaría teniendo el código de blog de clase. Y por supuesto en los textos va a ser blanco arriba y tenemos la clase y le damos un margen, abajo cinco y algún abogado cordero, lomo, 20 tal vez. Ahora creo que tenemos algo de texto y la imagen. Y ahora volvamos aquí y copiemos esta división y peguemos un par de veces. Entonces aquí tenemos nuestra división. O tal vez antes de copiarlo, tal vez agregando algunos estilos aquí para que se vea mejor. Entonces para hacer eso, simplemente escribimos el nombre de la persona y seguido por el noviazgo. Por lo que simplemente agregó aquí, tal vez a y H para la clase serán textos luz. A ver, X, mayúscula ya que es el nombre. Y margin-bottom tres, será, digamos. Y ahora vamos a crear nuestra lista desordenada. Y será una lista de clases y línea ya que necesitamos que nuestros alumnos estén en la misma línea. Entonces lista en línea y algún margen. Ahora tendrá que crear nuestro elemento de lista, lista, elemento, lista y línea de pedido. Y por supuesto, aquí tenemos nuestros iconos. Y el ícono de nuestra estrella es COMO inicio, y será una estrella amarilla. Entonces vamos a usar la advertencia de texto. Y ahora pienso, bien, bien. Entonces esperemos y tenemos nuestro nombre, Hadi y una estrella. Entonces déjame copiar esto cuatro veces. Entonces esto es lo siento. Déjame solo copiarlo y pegarlo. 1234. Ahora ahorita, como puedes ver, tenemos aquí nuestras 5 estrellas, mi nombre, ¿y qué escribí? Entonces esto no es básicamente para nuestra primera revisión. Ahora necesitamos copiar todo esto y pegar dos veces más. Entonces este es nuestro carrusel entrar. Vamos a copiarlo hasta que me deje sólo revisar. Entonces esto es para el auto, tal vez esto ahora vuelve atrás. Esta es la división que necesitamos copiar. Entonces lo pegué tres veces. Y éste es el uno. Yo consigo dos y tres. Y esto es, esto ahora se está ejecutando. Y como pueden ver, cinco presionan en el escritorio. Automáticamente me tomará dos días llegar al cliente o al dos. Y este es el tercer cliente. Y si lo guardo en reproducción automática, se encenderá y seguirá automáticamente hasta que acepte mi sitio web. Entonces esto es básicamente para nuestra sombrilla y la sección de clientes. Con eso dicho, este es el final de este apartado. Nos vemos el siguiente video. 22. Contact y pie de pie: Hola y bienvenidos de nuevo. En este video, vamos a seguir construyendo nuestra página web y vamos a construir nuestra sección de contactos. Entonces para hacer eso, déjame seguir adelante e iniciar una nueva sección. Y este es el contacto. Contacto. Y, y contacto. Por supuesto, empezamos por crear nuestra sección. Y dentro de esta sección de la clase estará relleno cinco y le gustará. Por lo que el fondo será principalmente ligero. Por supuesto, comenzamos por crear nuestro fluido contenedor. Y como de costumbre, d rho dentro de la fila, tenemos la columna. Y necesitamos que nuestro texto esté centrado. Entonces vamos a usar el centro tecnológico. Y así margen en el botón. Ahora, después de crear nuestra columna, podemos empezar por crear nuestro título. Eso es contacto como. Por lo que la clase sería gravada. Advertencia y exhibición serían dos. Y simplemente diremos que contacte con nosotros. Por supuesto que tenemos algún párrafo y será plomo y textos secundarios. Por lo que ya conocemos la mayoría de estas clases, por lo que no hay necesidad de parar en todas y cada una de ellas. Simplemente los escribiré como lo estoy haciendo ahora mismo. Y este es nuestro párrafo. Ahora si volvemos aquí, tenemos nuestro contacto, tenemos algún párrafo y terminamos con el título. Ya podemos iniciar una nueva división. Por lo que esta división será después de la columna. Entonces esta es la columna y ahora, o tal vez puedas iniciarla después del rol también. Entonces esta es una nueva fila. Y por supuesto, quiero que el contenido se centre por lo que lo uso centro de contacto justificado. Tenemos una columna y será para sexo grande y para medio. El tanto ocho como para diez pequeños. Entonces déjame abrirla y tenemos la división que tomará un centro de texto y a veces secundaria anexar. Por lo que se tendrán preguntas a los rubros. Y entonces tal vez párrafo. Por ejemplo. Pregúntanos. Y ahora después de crear esta división, podemos empezar por crear nuestro teléfono que incluirá las entradas del usuario. Por lo que el teléfono será de texto silenciado tipo arpanet. Y ahora no tenemos acción. Ahora dentro de nuestros cuatro, podemos empezar con la creación de la etiqueta. Y la etiqueta será para nuestro nombre. Perdón, por el nombre de usuario. Y la entrada será de tipo texto para control y nombre de id. Ahora, después de crear esto, estos son nuestra etiqueta y entrada. No obstante, nos olvidamos de añadirlos a una división. Por lo que la división será de clase para grupo. Y estas etiquetas y entrada, podría simplemente copiarlas y pegarlas dentro de esto. Y ahora estamos bien. Esta es nuestra división para grupo y tenemos nuestro nombre y la entrada. Y por supuesto, entonces creamos otro form-grupo. Y esto contendrá el correo electrónico, así etiquetado para correo electrónico. Y en realidad incluirá el correo electrónico del usuario, entrada, texto, formulario, control, y correo de identificación. Ahora tenemos, todavía tenemos la última división y como de costumbre para grupo, y esto será por el mensaje y mensaje. Y ahora no necesitamos una entrada, necesitamos un área de texto. Entonces voy a usar el área de texto. Se va a nombrar, no necesito el nombre. El ID sería el mensaje. Los tiros de Bélgica. Realmente no los necesito. Simplemente dales y la clase sería para el control. Y aquí tenemos nuestro área de texto. Al ser un financiamiento de esta división, necesitamos agregar el botón de Envío para que la clase sea btn. Btn. El esbozo de esto sería la advertencia y BTN suerte. Y creo que ahora todavía tenemos que hacer los tipos de met y presentar. Ahora si vuelvo aquí y como pueden ver, creamos nuestros cuatro, tenemos preguntas. Pregúntanos, el usuario puede ingresar este nombre y luego es correo electrónico seguido del mensaje. Y entonces se debe realizar esta patente que presentar cada vez que presione este botón y acción. Pero ya que no conocemos ningún JavaScript ni atrás y nos vamos a quedar con el conocimiento que conocemos hasta ahora. Entonces esto es básicamente para el. Sección de contacto, que aún tienen la última sección que es el pie de página. Entonces sigamos adelante y hagámoslo ahora. Entonces vamos a anexar pie de página. Y así para crear un pie de página, realidad tenemos la etiqueta de pie en HTML. Y necesitamos agregar algunas clases desde bootstrap para que el fondo se deba cavar y tenemos algo de relleno. En el eje x. Podemos crear nuestro fluido contenedor. Y luego empezar con la creación de nuestra fila. Y el impuesto estaría en realidad a la luz con algún relleno en el eje y. Ahora dentro de esto podemos crear nuestra columna. Y esto será para, para grande y seis para pequeño y superior. Dentro de esto va a escribir nuestro rubro. Y será sobre o tal vez sobre nosotros. Creo que es bueno. Esta es la primera parte de nuestro pie de página y el texto será pequeño. Tan pequeño. Y algunos Lauren, Lauren 20. Creo que podríamos F Ahora, si nos desplazamos hacia abajo, podemos ver que tenemos la sección sobre nosotros. Y si lo hago más grande, estará aquí. Ahora, volvamos atrás. Creo que aquí tenemos tantos textos. Déjame simplemente hacerlo más pequeño. Y ahora iremos a la primera parte de nuestra división o a nuestro pie de página. Ahora, desde que terminamos nuestra primera columna, podemos empezar con la segunda. Y quiero que esto sea a la fecha sólo dos de cada 12. Esto tomó cuatro. Haré esta cinta demasiado grande también. Y para este pequeño, será el mismo problema que m seis. Ábrelo por dentro. Este será el primero que se estaría dirigiendo y la sarga diga, visítenos. Y entonces tenemos una lista desordenada. Y la clase será lista sin estilo. De esta manera para ser movidos los puntos de bala. Y ahora tenemos el ítem de lista. Dentro del ítem de lista tendrá un enlace. Señala en el mapeo. La clase será enlace de pie de página. Y luego tenemos casa. Vamos a copiar esto. Y tal vez simplemente crearé una vez más. Y la clase será enlace de pie de página. Y tenemos la misión. Y por último, permítanme añadir uno más de esos. Y contendrá los, quizá los productos. Entonces el enlace de pie de página y los productos. Ahora bien, si me desplazo hacia abajo, puedo encontrar productos de máquinas de Visitador's Home. Si lo hago más grande, lo tenemos así. Y ahora todavía tenemos como la mitad de la playa desde que consumimos papel de aluminio. Aquí. Y dos aquí. Entonces volvamos a bajar. Y ahora vamos a crear la sección de ayuda. Y tomará también poner columna en grande también y en pequeñas seis de extremo abierto H5. Y esto no se necesitaría ayuda. Entonces necesito ayuda. Y entonces podemos empezar con la creación de nuestra lista desordenada. La clase debe ser como de costumbre, lista sin estilo, sin estilo. Y entonces podemos crear nuestro elemento de lista como antes. Tenemos nuestro enlace de pie de página de referencia y detects serán en realidad mayúsculas. Y esta es la atención al cliente. Y luego vamos a copiar esto y basarlo un par de veces. Por lo que contamos con la atención al cliente, tenemos el soporte, y contamos con conductancia E. Creo que ahora nos pondríamos, si nos desplazamos hacia abajo, tenemos todos estos. Y como pueden ver, tenemos el sobre nosotros visitarnos, necesitamos ayuda. Ahora hagamos un poco más pequeños y volvamos a la última sección. Y en esta sección, vamos a pedir al usuario que ingrese su correo electrónico para mantenerse conectado. Por lo que anexa una nueva división. Y esto llevaría la última lámina. Por lo que LNG FOLDOC para pequeña herramienta diciendo seis arpanet H5. Manténgase conectado. Y por supuesto, el pequeño párrafo. Dentro de este párrafo, hemos ingresado tu correo electrónico para mantenerte conectado con nosotros. Y entonces podemos crear nuestro próximo teléfono. Y de esta forma, vamos a ser un grupo de entrada D. Por lo que sin ninguna acción, la clase será el margen inferior tres. Y por supuesto tenemos nuestra división, que es un grupo de entrada. Dentro de esta división. Contamos con el texto de tipo de entrada. Después tenemos la clase para el control y el correo electrónico del titular del lugar. Y entonces tenemos otra división que contendrá el grupo de entrada plus append. Y entonces tenemos el botón. Y el tipo será botón. Las clases serían Button BT, peligro y detecta también sería blanco. Y ahora podemos agregar dentro de este botón, vemos o a mí o algo así. Entonces nos vemos. Y ahora si vuelvo, como podemos ver, tenemos nuestro botón aquí. Y esto es básicamente que tenemos sobre nosotros con la tarea necesitan ayuda, mantente conectado. Y el usuario puede entrar es correo electrónico aquí y presionar, y se mantendrá conectado con nosotros. También podemos agregar algunos enlaces o algunos iconos para la página de Facebook o la página de Instagram, incluso YouTube. que puedas buscarlos en el ícono, Font, Iconos Impresionantes, y puedes usarlos. A lo mejor después del correo justo aquí. A lo mejor agréguelas aquí, y luego estás bien. Entonces esto es básicamente para nuestro proyecto. Espero que te guste. Y te animo a ir a comprobarlo por ti mismo y tal vez modificar o trabajar en ello. Con eso dicho, este es el final de este video. Nos vemos. 23. Proyecto: Hola y bienvenidos a la sección de proyectos. Y ya implementamos tantas de las formas y componentes que están disponibles para nosotros en bootstrap. Y tu proyecto será en realidad construir otros proyectos similares a éste, puedes usar cualquier componente Bootstrap o cualquier clase bootstrap que puedas encontrar útil y por supuesto, rápido abajo. En la sección de proyectos, te voy a proporcionar esto. Y esta será en realidad la plantilla, la plantilla de inicio con algunos enlaces de metas. No obstante, este enlace no estará disponible ya que cada uno de ustedes debe tener su propio bien. Y este es el enlace para Font Awesome. Como dijimos, debes ir a inscribirte gratis, luego conseguir esto, obtén, úsalo en tu página web. Entonces esto es que básicamente deberías poder hacer la mayoría de estos por tu cuenta. obstante, si no sientes, si sientes que te pierdes algo, siempre puedes volver a las videoconferencias y volver a comprobarlas. Entonces esto es básicamente, espero que hayan disfrutado de esta sección. Y por supuesto, buena suerte en tu proyecto. Y que no se olvide de agregar a la sección de proyectos que pueda echarle un vistazo y darle mi opinión. Entonces esto es todo. Espero que hayas disfrutado de toda la clase y te veo.