PSD a Bootstrap 4: convierte tu diseño web en una página web | Luke Fabish | Skillshare
Menú
Buscar

Velocidad de reproducción


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

PSD a Bootstrap 4: convierte tu diseño web en una página web

teacher avatar Luke Fabish, Let's get coding!!

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 a la clase.

      1:20

    • 2.

      ¿A quién está dirigida esta clase?

      1:04

    • 3.

      Lo que aprenderás en esta clase.

      3:16

    • 4.

      ¿Qué es Bootstrap?

      2:26

    • 5.

      Conceptos de Bootstrap de

      8:21

    • 6.

      Cómo implementar la navegación de Bootstrap de navegación.

      10:40

    • 7.

      Cómo hacer que Bootstrap sea de la navegación de

      10:23

    • 8.

      Cómo añadir un menú de acceso de Bootstrap

      11:44

    • 9.

      Crea un diseño con containers, filas y columnas.

      14:57

    • 10.

      Columnas de Bootstrap en detalles.

      7:02

    • 11.

      Añade una tabla de datos con pequeñas columnas.

      9:40

    • 12.

      Crear controles de entrada de Bootstrap.

      5:40

    • 13.

      Cómo crear un pie de página en Bootstrap.

      4:08

    • 14.

      Cómo personalizar una página de Bootstrap web.

      25:00

    • 15.

      Revisión de la clase.

      0:42

  • --
  • 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.

1490

Estudiantes

1

Proyectos

Acerca de esta clase

Este es donde aprendas a convertir un diseño web en una página web con Bootstrap 4.

Bootstrap es la forma más de crear una página web que es responde y se muestra perfectamente en toda parte.

Esta clase enseña los conceptos y técnicas que puedes utilizar para crear páginas de Bootstrap de web.

Además de conceptos fundamentos, te inspirarás cómo:

  • Crea una navegación perfecta en dispositivos grandes y pequeños.
  • Aplicar diseños dinámicos usando estilos de cuadrícula de Bootstrap.
  • Cómo puedes personalizar tu página de Bootstrap para que sea realmente la misma.
  • Esta clase utiliza una variedad de ejemplos prácticos para asegurarte de aprender a usar Bootstrap con confianza.

Estaré contigo en cada paso del curso, así que si necesitas cualquier ayuda, ¡¡así que you

Conoce a tu profesor(a)

Teacher Profile Image

Luke Fabish

Let's get coding!!

Profesor(a)

I'm a great believer in empowerment through learning, and that's what I believe teaching on Skillshare is all about.

As a professional software engineer I've benefited massively from educational resources on the Internet.

Especially, I want my Skillshare classes to be an entry point for anyone who wants to learn about programming from the very beginning, and to start a journey into the world of professional software development.

There are a lot of misconceptions about what kind of person you need to be to be a programmer.

Good at maths? Obsessed with computers? High-IQ?

None of that is required.

If you're ready to learn, and willing to work through a problem, you've got what it takes.

Person... Ver perfil completo

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 a la clase.: Oigan a todos. Mi nombre es Luke Fetish. Yo blogueo en lukefetish.com. Soy desarrollador de software profesional desde 1999. Pero la clase de hoy se trata de cómo podemos convertir nuestro diseño web en una página web usando Bootstrap 4. Si no estás familiarizado con Bootstrap. Bootstrap fue desarrollado originalmente por la gente en Twitter para construir páginas web responsivas súper rápido. Por responsive, me refiero a páginas web que se ven muy bien en un dispositivo de cualquier tamaño. Durante esta clase, cubriremos los conceptos básicos de Bootstrap. Aprenderemos a incluir Bootstrap en nuestra página web. Aprenderemos todo sobre los fundamentos de Bootstrap como la cuadrícula y cómo puedes usarlo para diseñar tu diseño web para convertirlo en una página web. No te preocupes si no tienes un diseño web propio. Estaré suministrando uno durante la clase. Por último, aprenderemos cómo podemos personalizar el aspecto y la sensación de Bootstrap para asegurarnos de que nuestra página web realmente se sienta como nuestra. Si tiene alguna pregunta o inquietud, por favor no dude en ponerse en contacto. Estoy aquí para estar con ustedes y listo para ayudar en cada paso del camino durante esta clase. Estoy súper feliz de que estés aquí y no puedo esperar para empezar y ver qué construyes con Bootstrap 4. 2. ¿A quién está dirigida esta clase?: Entonces, ¿para quién es esta clase? Bueno, esta clase es para todo aquel que quiera convertir un diseño de página web en una página web en funcionamiento real, en funcionamiento. Vamos a estar usando Bootstrap 4 para esto. Bootstrap es mucho más bajo nivel que los constructores de sitios web gráficos como Wix, y Weebly , y herramientas como esa, pero sí proporciona un gran compromiso entre construir páginas web rápidamente y tener la flexibilidad de escribir código personalizado. Pero esto sí significa que vas a hacer alguna codificación durante esta clase. Asumo que estás un poco familiarizado con HTML con CSS, y con el uso de un editor de texto. Ahora, si no estás familiarizado con esas cosas, entonces no te preocupes porque estamos aquí en Skillshare, y aquí hay un montón de clases impresionantes que puedes usar para aprender esas cosas. Los profesores son fantásticos y estarás al tanto en poco tiempo. Entonces si estás listo, siéntate bien para la próxima conferencia donde repasaremos a detalle lo que aprenderás durante esta clase. 3. Lo que aprenderás en esta clase.: Hola a todos y bienvenidos al video. Vamos a estar revisando lo que realmente vas a aprender en esta clase. ¿ Qué cosas vamos a cubrir? Bueno, lo primero que mejor miramos, es mejor que averguremos qué es realmente bootstrap de todos modos, quiero decir, ¿es un framework o una biblioteca? Descubriremos de dónde vino, veremos qué problemas resuelve, por qué a todo el mundo le gustaba tanto usarlo, y no introduce ningún problema. alerón aún no poco, pero no tanto que no quisiéramos usarlo. Entonces vamos a pasar a conceptos fundamentales de bootstrap. Ya veremos cómo maneja la navegación, nos enteraremos de la cuadrícula bootstrap, también veremos cómo funcionan los contenedores, filas y columnas. Después de eso, pasaremos a implementar alguna navegación bootstrap, veremos cómo funcionan juntas las clases de navegación de bootstrap. Aquí es donde se llega a empezar a trabajar en su proyecto también porque se puede empezar a implementar este tramo de distancia. Ya veremos cómo podemos hacer que la navegación sea receptiva. La navegación interior es, por supuesto, el menú que pondrías en tu sitio web para llevarte a diferentes partes de tu sitio web. Ya veremos cómo podemos asegurarnos de que las pantallas se muestren bien en pantallas de diferentes tamaños como en tu laptop o tu computadora de escritorio, o en tu dispositivo móvil, y luego veremos cómo funcionan también los menús desplegables. Esto es otra cosa que podemos implementar de inmediato en nuestro proyecto. Después de eso, se estará moviendo a la cuadrícula bootstrap. Ahora la cuadrícula es algo que se utiliza para diseñar una página web. Poner las cosas en una cuadrícula, que es decir en como filas y columnas, hace que todo se alinee bien, y también hace que sea más fácil manejarlas a medida que cambiamos el tamaño de nuestra pantalla o incluso simplemente nuestro navegador. Ya veremos, como acabo de decir, cómo funcionan los tamaños de pantalla. Veremos qué son los puntos de ruptura y cómo afectan el diseño de tu página web, veremos cómo podemos usar la codicia en diferentes contextos también. Cómo afecta la cuadrícula a diferentes trabajos como diseñar el documento general, cómo pueden usarlo para estructurar y dar formato a una tabla de datos. También cómo podemos usarlo para implementar el pie de página. Esa es la parte inferior de nuestra página web que quizá vuelva a tener navegación, tal vez tenga tus datos de contacto, tal vez tenga como tus iconos de redes sociales, estas cosas. Ya veremos cómo la grilla puede ayudarnos en estos diferentes lugares. Después de eso, pasaremos a usar componentes de entrada bootstrap. Ya veremos cómo podemos usar formularios y controles y esta forma como una entrada de texto o botones. Veremos cómo podemos personalizar bootstrap para asegurarnos nuestro sitio web o diseño web que fuera como el nuestro. Vamos a usar reglas CSS individuales para hacer eso. Usaré algunos estilos bootstrap también. Pero sobre todo, estaremos explorando cómo podemos usar nuestro propio CSS para cambiar la forma en que se ve una página. Siéntate bien para la próxima conferencia. Cuando nos pondremos en introducir bootstrap, averiguaremos qué es, cómo funciona donde queremos usarlo. 4. ¿Qué es Bootstrap?: Hola a todos. Bienvenido a nuestra siguiente lección sobre convertir un diseño web en una página web con Bootstrap 4. Ahora antes de ir más lejos, deberíamos tener una charla sobre lo que realmente es Bootstrap. Bueno, ¿qué es de todos modos? Bootstrap es una colección de CSS y JavaScript. Eso fue desarrollado originalmente por Twitter para proporcionar un comportamiento consistente en todos los dispositivos y navegadores. Lo que estamos diciendo aquí es que tenemos Bootstrap. Nos ayuda a hacer páginas web que tengan el mismo aspecto y se comporten igual todo el tiempo. Porque si pensamos en cómo la gente mira la web en este momento tenemos teléfonos y tabletas, laptops, y luego computadoras de escritorio. Sabes que cada uno de esos podría estar usando un navegador diferente. Potencialmente personas que usan más de un navegador en el mismo dispositivo. Cada uno de esos navegadores va a mostrar tu página web un poco diferente en esos diferentes dispositivos y hacer que tu página web todas partes es complicado y consume mucho tiempo. Este es el problema que resuelve Bootstrap. ¿ De dónde viene Bootstrap? GetBootstrap.com. Si vamos allá, esto es lo que encontramos. Esta es la primera página de Bootstrap. Puedes descargarlo aquí y tienes instrucciones aquí abajo sobre las otras formas en que puedes usarlo también. Te mostraré cómo puedes usarlo cuando empecemos a construir nuestro proyecto. Pero, ¿Bootstrap tiene algún inconveniente caída? Sí. Una pareja. Típicamente 100K -200K cuando lo incluyes. Cuando incluyes la totalidad de Bootstrap en tu página web. Eso es algo muy pequeño para descargar cada vez. Bootstrap, a pesar de que es menos ubicuo de lo que solía ser, sigue siendo súper popular y hay un montón de sitios web con aspecto de Bootstrappy. Pero como dije antes, vamos a asegurarnos de que podamos personalizar nuestro sitio web que realmente no se vea como cualquier otro sitio web que esté usando Bootstrap. Ahora que hemos tenido un poco de introducción a Bootstrap y qué es. En la siguiente lección, repasaremos los conceptos fundamentales de Bootstrap. Aprenderemos sobre los bloques de construcción de Bootstrap que podemos usar para hacer nuestras interfaces. 5. Conceptos de Bootstrap de: Todos, bienvenidos a nuestra siguiente lección de convertir un diseño web en una página web con Bootstrap. Esta vez vamos a estar revisando algunos conceptos fundamentales de Bootstrap y así estos son los bloques de construcción que vamos a utilizar para armar nuestra página web y realmente hay dos categorías principales que vamos a estar buscando al durante esta clase. El primero es la navegación, y el segundo es la cuadrícula Bootstrap y la cuadrícula está compuesta por contenedores, filas y columnas. Entonces vamos a revisar esos con un poco más de detalle ahora. Por lo que en la navegación. Imaginemos que esto es como una página web, página web muy aburrida. A páginas web van a tener un menú en la parte superior de la misma, o generalmente en la parte superior, veremos algunas otras opciones en un momento y cuando tengamos estos menús, nos referimos a estos como la navegación. Esto es lo que usa un usuario para navegar su camino por nuestro sitio web y a menudo tendrán cosas difíciles como el hogar y la página sobre y yo voy a enlazar a la página de contacto y tal vez si estás usando un sitio en el que inicias sesión hay un para hacer click en algo que esté relacionado contigo como usuario. Ese menú puede aparecer en la parte inferior de la página o en el lateral, realmente no importa, esto es toda navegación. Una de las cosas que nos da la navegación Bootstrap son los menús desplegables. Entonces cuando haces clic en tal vez tu menú de usuario, obtienes un desplegable donde llegar a hacer cosas con tu cuenta o juguetear con la configuración de la forma en que funciona la página web o el sitio web, o simplemente cerrar sesión. La navegación Bootstrap también es receptiva. Cuando miras una página web en un dispositivo pequeño como un teléfono verás una de estas cositas en la parte superior derecha de la pantalla, generalmente está en la parte superior derecha a menudo llamada hamburguesa y cuando haces clic en eso, entonces obtienes otro tipo de menú cayendo desde ahí y esta es una forma de ahorrar espacio en la pantalla de un teléfono móvil. Por lo que aún tenemos nuestra navegación, pero la mayoría de las veces está oculta hasta que el usuario la necesite. Simplemente esperamos que el usuario adivina para qué es esa cosa de la hamburguesa en realidad. Creo que la mayoría de la gente ya está acostumbrada a eso. Por lo que hemos hablado de cómo funciona la navegación. Ahora vamos a echar un vistazo a los contenedores de rejilla Bootstrap. Un contenedor es algo que sorprende, contiene otros componentes de la rejilla Bootstrap y lo importante a tener en cuenta aquí es que otras partes de la cuadrícula no funcionarán muy bien a menos que estén dentro de un contenedor y este es uno de los compromisos que obtenemos con el uso Bootstrap es que a veces puede ser un poco difícil escoger y elegir qué partes del mismo queremos usar. Algunos de los componentes, no todos ellos, pero algunos de ellos definitivamente son interdependientes y así que si queremos usar uno de ellos, vamos a estar usando, bueno, más de uno. En fin, tenemos un contenedor, es algo de lo que podemos meter cosas dentro y luego la siguiente parte de la cuadrícula es una fila. Una fila es, como cabría esperar, una disposición horizontal de otros componentes y así podemos poner múltiples filas dentro de un contenedor. Entonces una vez que tengamos nuestras filas en su lugar, podemos agregar columnas y columnas en Bootstrap están diseñadas para tener un tamaño específico. Siempre se dividen en grupos de 12. puedas tener una columna que ocupe todo el ancho de la cuadrícula o puedes tener una que ocupe una doceava parte de la cuadrícula y veremos un poco de demo de trabajo de eso ahora mismo, pero lo importante a recordar es que cuando usamos la rejilla Bootstrap, vamos a estar poniendo cosas dentro de un contenedor. En ese contenedor, probablemente tendremos filas dentro de esas filas tendrán columnas. Podemos especificar el tamaño de esas columnas, y veamos cómo se comportan ahora mismo. Entonces aquí hay una pequeña página web armada solo para demostrar cómo funciona la cuadrícula. Podemos ver que tengo un tipo especial de contenedor que en realidad es un ancho fijo, no ocupa todo el espacio de la pantalla, y dentro de ahí no se pueden ver las filas porque las filas están completamente ocupadas por las columnas y tú recuerda cómo mencioné que las columnas se dividen en porciones de 12. Entonces tenemos este col-12 aquí y he usado este nombre col dash 12 intencionalmente porque así es como se refieren las columnas en Bootstrap. Entonces esta es una pequeña introducción a los estilos Bootstraping y la forma en que nombraron, y así tenemos un col-12 que significa que tiene 12 columnas de ancho, es decir que ocupa todo el espacio. Próximamente en la siguiente fila, tenemos col-6, que es sorpresa la mitad del ancho de nuestro col-12 y luego debajo de eso, tenemos 1, 2, 3, 4 filas más y están ocupadas por estos diferentes tipos de col para columnas y todas se ven lo mismo en este momento. Pero se puede ver que algunos de ellos tienen sm en el nombre, algunos tienen md en el nombre, algunos tienen lg en el nombre y esto es parte del enfoque receptivo de Bootstrap para tratar con la grilla. Lo que eso significa es que cuando tenemos un col dash para columna, lo que eso está diciendo es que esto siempre será una columna. Pero si hacemos que esta página sea un poco más estrecha, puede ver que nuestro contenedor se está encogiendo, cuando un contenedor se encoge, las filas se encogen y así nuestros cols, bueno, se encoge para ocupar su contenedor más pequeño, pero una vez que pasemos un cierto tamaño, se puede ver que algo ha pasado aquí. ¿ Qué está pasando? Podemos ver que estos col-lg-4 lo que antes eran columnas, todos se han apilado uno encima del otro y así es como Bootstrap acomoda tamaños de pantalla más pequeños y dice, bueno, tal vez en tu diseño, quieres que estas cosas sean columnas cuando estás en una pantalla grande, un monitor grande de algún tipo, pero cuando llegamos a una pantalla más pequeña o a un monitor más pequeño o simplemente a una ventana más pequeña del navegador porque simplemente lo estoy reduciendo manualmente aquí. Ya no queremos que estén uno al lado del otro porque van a estar todos desordenados y así los vamos a pegar uno encima del otro. Entonces eso es para col grande. Con col-md, que significa medium, va a hacer exactamente lo mismo, pero no hasta que lleguemos a una ventana de navegador de tamaño mediano. Se puede estar preguntando en este punto, bueno, ¿qué cuenta es medio, qué cuenta es grande? Esto se basa en tamaños reales de píxel y tendremos una mirada cercana más adelante en la clase a los tamaños de píxel exactos que usa Bootstrap para decidir si estamos en una pantalla grande, mediana o pequeña o en una ventana pequeña del navegador. Una vez más, una vez que los aprieto un poco más, puede ver que nuestro col-lg está apilado uno sobre el otro, nuestras columnas medianas se han apilado unas sobre otras y ahora estamos abajo a nuestras pequeñas columnas. Vamos de nuevo, llegamos un poco más lejos y se apilan uno encima del otro también y ahora que Bootstrap ha decidido que estamos en una pantalla o ventana de navegador genuinamente pequeña, y ya no necesitamos esos márgenes de lado. Se puede ver que ocupa un 100 por ciento del ancho de nuestra ventana del navegador y luego finalmente lo aplastamos todo el camino hacia arriba y estas columnas col-4 porque no tienen un tamaño de pantalla. No tienen sm, md o lg a su nombre. Siempre son columnas y por lo que nunca se apilarán entre sí. Entonces esa es una introducción súper rápida a la navegación y la cuadrícula de Bootstrap. Con esto se pretende darte una visión general de alto nivel para ver cómo funcionan estas cosas. A continuación, vamos a seguir implementando alguna navegación real y aquí es donde vas a iniciar tu proyecto. 6. Cómo implementar la navegación de Bootstrap de navegación.: Oigan a todos. Bienvenido de nuevo. En esta lección, en realidad vamos a empezar a construir algo. Vamos a implementar la navegación para nuestro proyecto. Ahora, el proyecto en el que, bueno, vamos a estar trabajando o en el que voy a estar trabajando de todos modos, está construyendo una pequeña parte de esta interfaz de administración. Ahora si tienes un diseño propio, quieres implementar, impresionante. Pero el punto principal es que, tiene todos los elementos que nos interesan explorar durante esta clase y que tenemos algo de navegación arriba. Tenemos nuestro pie de página abajo. Nuestra navegación tiene un pequeño menú desplegable ahí desde nuestro pequeño icono de usuario. Incluso en el lado lejano, tenemos algo de disposición general aquí a la izquierda, tenemos la marca y algún texto de relleno ahí. la derecha está la siguiente sección mayor de la página web, tenemos una mesa pequeña. Tenemos algunos insumos también. Estas son cosas que podemos usar para explorar usando bootstrap para implementar nuestro diseño de página web. Si tu diseño no tiene todos estos elementos, aún puedes ponerlos temporalmente solo para explorar los conceptos y para asegurarte de sacar el máximo provecho de hacer esta clase. Siempre se pueden quitar después. Por supuesto, si no tienes un diseño propio, estoy suministrando éste en la sección de recursos para tu proyecto para que puedas trabajar conmigo y construir esta misma página web. Como dije antes, la sección de hoy se trata de empezar a implementar la navegación por lo que Bootstrap navigation. navegación en Bootstrap se implementa asignando algunas clases de CSS de Bootstrap a elementos HTML, que pueden parecer belabortando lo obvio ahí, pero esto es más o menos cómo vamos a hacer todo. En Bootstrap, creamos algunos elementos HTML, les aplicamos clases Bootstrap y luego obtenemos todos los beneficios de usar el sistema Bootstrap. Esta es la estructura básica de navegación en Bootstrap. Empezaremos con un elemento de navegación envolviendo y después tenemos una lista desordenada. Aquí está la apertura de la lista desordenada, cierre de la misma, y estos los artículos en el medio. El modo en que convertimos eso en alguna navegación Bootstrap real es asignando estas clases a estos elementos en particular. Elementos de navegación consigue navbar, navbar-luz, navbar-toggleable-md. Este, además de ser bocado, es un poco ambiguo en cuanto a lo que podría significar. Esto es para que nuestra navegación sea receptiva. En Bootstrap 4 o tienes navegación responsive o no tienes navegación en absoluto, no funciona de otra manera. Tal vez estés pensando, bueno, ¿cómo recuerdo estos nombres de clase? No tienen mucho sentido para mí. Tengo que estar de acuerdo en que en Bootstrap, las clases de navegación no parecen ser súper coherentes o fáciles de recordar así que por eso voy a suministrar nuestra navegación completada como plantilla para que lo uses que también estará en sus recursos. Puedes usar eso como plantilla para tus futuros diseños. Porque sé que sin duda tengo garantizado olvidar algún tiempo vital de clase que impide que mi navegación funcione. Yo trabajo con una plantilla también. De todos modos, empezamos aplicando estas clases CSS, navbar, navbar-light, navbar-toggleable-md a nuestro otro componente nav entonces para nuestra lista desordenada, decimos que es el navbar-nav. Lo que tenemos aquí, el elemento nav en el exterior. Esa es nuestra barra de navegación así lo contenemos para nuestra navegación y estamos diciendo esta lista desordenada, esta ul, esta es la navegación que va dentro de la barra de navegación. Entonces, por fin, decimos que estos tipos son artículos de navegación. Los asignamos más artículo nav a los ítems de la lista. Hagámoslo en algún código. Este es el archivo esqueleto que se suministra en los recursos para su proyecto. En realidad es solo un archivo HTML básico que tiene un montón de enlaces CDN de red de entrega de contenido a Bootstrap y archivo jQuery. Aquí es de donde sacamos todo nuestro CSS y JavaScript. No lo estamos usando todo de inmediato. Pero estoy trabajando desde este archivo esqueleto con todo incluido al principio para que no tengamos que seguir agregándole cosas a medida que pasemos. El único tema no relacionado con bootstrap que estamos incluyendo aquí es esta fuente de iconos de material. Estoy usando eso para los iconos que están en la aplicación, por eso está ahí. Pensé que necesitamos empezar a construir nuestra carrera de navegación. Vamos a empezar con algunas etiquetas de navegación. Simplemente voy a implementar estos sin ninguna clase al principio. Simplemente encuentro que mucho más fácil de hacer al principio, tiene más sentido para mí. Tengo una lista desordenada, lista desordenada otra vez, cierra eso y luego tendremos nuestros elementos li. Necesito ir a revisar nuestro diseño para ver cuántas cosas tenemos en nuestra navegación. Ahora lo complicado aquí es que tenemos 1, 2, 3, 4, 5, aquí, y luego tenemos a estos otros del otro lado aquí. Estaremos explorando los de una o dos lecciones. Pero el punto es que estos son dos grupos separados de navegación y en este momento vamos a hacer el primero, precios sobre FAQ, Blog, contacto, por lo que es un precio sobre FAQ, blog y contacto. Claramente lo siguiente que tenemos que hacer es echar un vistazo a la increíble navegación en un navegador. Aquí está nuestro archivo en el navegador. Como se puede ver, se ve exactamente como una lista desordenada. Por supuesto que esto se espera. Todavía no hemos aplicado ningún estilo a estos elementos así que diremos que clase es igual a navbar y luego navbar-light. Navbar-light es sólo para el color. ¿ De qué color queremos que sea ese archivo? Va a ser de color claro. Entonces tenemos nuestro excelente navbar-toggleable-md, md es para medium, md es para medium, lo que significa que queremos un tener un comportamiento receptivo para patear en un navegador de tamaño mediano. Entonces tenemos clase igual a navbar-nav. Por último, podemos tener, en realidad no es del todo finalmente, pero vamos a fingir que es finalmente por ahora, nav-item. Yo sólo voy a meter esos ahí para estos tipos. A ver cómo se ve eso, sé cómo se va a ver. Bueno, eso no es como cualquier navegación en absoluto. Es un poco mejor porque ahora se han espaciado horizontalmente, o están dispuestos horizontalmente en lugar de verticalmente. Pero aún así, eso es asqueroso. El caso es que queremos que estos sean clicables por lo que necesitamos ponerlos en algún elemento clicky. El asunto es en la navegación Bootstrap, usamos un ancla y estableceremos el href a hash pricing. Eso es lo que haremos por ahora. Tan solo termina eso. Además de nuestras etiquetas 'a'. Ahora, eso aún no te va a quedar genial. Vuelve aquí podemos ver que se han convertido en cosas clichosas, pero están todas agrupadas y eso es porque necesitamos otra clase. Entonces decimos que clase es igual a nav link. Recargamos eso y finalmente, nuestro pequeño menú se transforma mágicamente en navegación estilo Bootstrap. Aquí va a pasar algo interesante. Si aplasto este navegador hacia arriba, puedes ver que caen de un costado ahí y verticalmente otra vez. Ahora este es el comportamiento receptivo. El comportamiento de respuesta predeterminado de Bootstrap. Se quiere reorganizar nuestro menú en un menú vertical es tan pronto como nuestro navegador se vuelve más pequeño que el tamaño mediano. Como dije, exploraremos lo que significan estas designaciones medianas y pequeñas y grandes más adelante. Pero si cambio eso a sm y luego vuelvo aquí y recarga la página. Puedo hacerme un poco más pequeño con la pantalla ahora antes de que empiece a saltar. Pero cambiaremos eso de nuevo efectivamente. Pero lo que hemos hecho aquí es implementar nuestro primer bit de navegación. Ahora sería un excelente momento para que pruebes eso en tu propio proyecto. Recuerda si te has topado con algún problema, por favor avísame. Estaré realmente súper feliz de ayudarte. Mientras tanto, cuelgue apretado para la próxima conferencia donde haremos que nuestra navegación responsive sea un poco más sensata y veamos si podemos evitar tener este menú vertical por defecto. 7. Cómo hacer que Bootstrap sea de la navegación de: Oigan todos, bienvenidos de nuevo. En la lección de hoy, vamos a estar revisando cómo hacemos que nuestra navegación Bootstrap responda. Bueno, ¿cómo vamos a hacerlo más receptivo? Porque, ya está respondiendo ahora. Responderá al tamaño del dispositivo que estamos mirando de borde. Pero en realidad no es lo mejor ahora porque si lo miramos, aquí está, tenemos nuestro pequeño menú en la parte superior aquí y si hacemos este navegador más pequeño, puedes ver que tengo el código en segundo plano. Si lo haces más pequeño y respondes al tamaño de nuestro navegador, obtiene una actualización del navegador y cambia a ser vertical en lugar de horizontal, eso es genial. Pero si estamos encendidos como un teléfono móvil y nuestra pantalla es más que este tipo de formato, entonces nuestro menú está ocupando una enorme cantidad de espacio en la parte superior de la pantalla y no queremos eso. Lo que queremos hacer en su lugar es darle al usuario una opción de hacer que el menú se expanda y colapse. Para ello vamos a tener que usar algún JavaScript y no vamos a escribir ningún JavaScript. Solo tenemos que incluir las bibliotecas JavaScript en nuestro código fuente y como dije en una lección anterior, el archivo que he estado trabajando, el archivo esqueleto ya tiene estas cosas incluidas solo por simplicidad, pero si acabas de seguir adelante con tu propio archivo y acabas de incluir el CSS Bootstrap, ahora es el momento de ir e incluir estos otros archivos JavaScript. Puede que te estés preguntando, bueno, ¿cómo hago eso? ¿ Cómo sé lo que necesito y de dónde lo saco? La forma más fácil de hacer eso es dirigirse a obtener bootstrap.com. Entonces dirígete a la página de Bootstrap. Simplemente puedes escribir Bootstap en el Google que obtienes aquí, ir a empezar, y en Inicio Rápido, puedes ver que muy comúnmente proporcionan una opción de copiar y pegar si haces clic en la pequeña copia a mi portapapeles. Esto es para el CSS, pero estamos interesados en el JavaScript y aquí está el JavaScript aquí mismo está firmado para ti. Haga clic en “Copiar al Portapapeles” y luego simplemente puede ir y pegarlo en su código. Veamos la forma fácil de incluir estos archivos. Una vez más necesitamos jQuery, Popper, y Bootstrap JavaScript. Necesitamos los tres porque el JavaScript de Bootstrap usa jQuery y Popper. También vamos a agregar un botón a nuestro menú, para que podamos hacer clic en el botón y hacer que el menú se expanda y colapse. Entonces finalmente vamos a envolver nuestro<ul en a<div, y todavía tendremos algunas clases y sobre todo valor de identidad o ID que le dirá al JavaScript, hey, esto es lo que hay que expandir y colapsar. Seguro que te has topado con este escenario antes. Si estás mirando la web en un pequeño dispositivo de algún tipo, a menudo te toparás con uno de estos pequeños aquí arriba en la parte superior derecha de esta pantalla, a menudo referido de forma desmesurada como el ícono de la hamburguesa porque algunas personas piensan que se ve como una hamburguesa. A mí me parece más mirar hacia abajo una tostadora. Pero de todos modos, esto es lo que hacíamos click y luego nuestro menú se expande y usuario tiene la opción de ocultar el menú hasta que lo necesiten y lo amplíen, haga clic en él y listo. Esta es la estructura de nuestro HTML de navegación en este momento, tenemos nuestro elemento nav y luego tenemos una lista desordenada, escucha elementos de lista dentro de ella. Ahora lo que vamos a hacer es, como mencioné, añadir un botón que vendrá inmediatamente después de nuestro elemento nav. Tendrá un lapso dentro, y luego tendremos este div. Comienza justo por encima de nuestro elemento de lista desordenado y termina justo debajo de él para envolver nuestra lista, que es decir que es una navegación envolvente alrededor MenuContent y estos son los cambios al HTML que vamos a hacer. Lo que haremos es empezar agregando nuestro botón y es elemento span a nuestro código. Si estás codificando junto conmigo trabajando en tu proyecto, este sería un momento increíble para abrir eso y conseguir la codificación también. Vamos a hacer esto en pedacitos ya que vamos sólo para hacer los cambios más pequeños y más manejables. Aquí estoy en mi código y aquí es donde tenemos nuestra navegación. Entonces aquí está nuestro elemento nav, lista desordenada, o si se cierra, y entonces enumeraré elementos por dentro. Ahora lo primero que vamos a hacer, como dije, es que vamos a añadir un botón. Los sonidos pueden agregar botón aquí y dentro ese botón vamos a tener un lapso que va a estar vacío. Que nuestros mejores esfuerzos cambien hecho, ¿qué viene después? Ahora vamos a tener que agregar algunas clases y algunos otros atributos a nuestro botón, para que haga algo interesante o configurarlo para que pueda hacer algo interesante. Se puede notar que aquí no tenemos ningún rol o atributo aria. Creo que voy a incluir un atributo de rol más adelante en algún lugar de nuestro código pero la cosa es que me estoy perdiendo muchos datos de accesibilidad o atributos para nuestro mackup aquí. Eso no es porque quiera que mi código sea inaccesible, solo quiero mantenerlo lo más limpio y mínimo posible con el propósito de enseñar cómo funciona Bootstrap. Si estás acostumbrado a trabajar con atributos de accesibilidad como esos, por favor no vayas pensando que estoy abogando por no usarlos y ciertamente no es el caso en absoluto. Pero volviendo a nuestro código tenemos botón de salida aquí, Se necesita algunas clases nav bar toggle, porque su trabajo es llegar a estar alterando nuestra barra de navegación abierta y cerrada, y navbar-toggler derecha. Que es una clase a decir, debe estar en el lado derecho de la navegación. Es un botón. Tiene este atributo de toggle de datos llamado colapso y data target hash o libra NavBarnavDropdown. Estas dos son las cosas que le dirán al JavaScript que estamos incluyendo para Bootstrap. Ah, este botón tiene un papel especial que jugar y va a ser lo que expanda colapsa nuestro menú y lo que quiere expandirse y colapsar, tendrá una ID, este es un selector de CSS aquí de hash o libra barra de navegación Dropdown. El otro cambio que queremos hacer aquí es agregar el icono de navbar-toggle a este lapso. No tuvimos que poner nada dentro del lapso nosotros mismos, si le damos esta clase, el CSS Bootstrap nos llenará un pequeño ícono. Empecemos a añadir eso ahora. Aquí tenemos, no puedo codificar de nuevo y navbar-toggle icon. Si guardamos eso y luego le echamos un vistazo en nuestro navegador, acabo de hacer una recarga y podemos ver una diferencia. Si lo aplico, podemos ver que tenemos aquí nuestro botón que nuestro menú no se está ocultando todavía sólo porque hemos hecho la mitad de los cambios que necesitamos hacer. Si voy y le doy clic, no pasa nada. Volvamos a ver qué otros cambios necesitamos hacer a ese código para expandir y ocultar nuestro menú. Siguiente cosa que tenemos que hacer. Bueno, tenemos que envolver nuestra lista desordenada en un div. Haré eso antes de hacer otra cosa. Aquí está nuestra lista desordenada, cerrando div y luego abre el div ahí dentro. Puedes oírme de repente haciendo las matemáticas sobre cuántas líneas necesitan ser sangradas. Eso son demasiados [inaudibles]. Tienes este div envolviendo nuestro elemento de lista desordenado. Ahora vamos a tener que poner algunas clases en nuestro div. Voy a tener que darle una identificación. Ahora este ID de NavBarnavDropdown se opone a lo que le dijimos a nuestro botón. Esta es la forma en que identificamos el elemento que necesita ser expandido y colapsado. El clase es que le damos colapso y navbar colapso. Contraer y el ID debe ser NavBarnavDropdown y decir ahora deberías ver algo un poco más interesante. Voy a refrescar mi navegador y mirar nuestra barra de navegación ha desaparecido porque tenemos nuestro navegador contratado un poco de la mina. Si vuelvo a tirar del navegador, podemos ver nuestro menú, nuestro nav aparece y desaparece y nuestro botón aparece y desaparece y si vamos y hacemos clic en nuestro botón y nuestra navegación se expande y pueden colapsarlo de nuevo. Es así como podemos implementar una navegación más receptiva en Bootstrap usando un botón para expandirse y contraer o para mostrar y ocultar nuestra navegación. 8. Cómo añadir un menú de acceso de Bootstrap: Hola de nuevo y bienvenidos de nuevo a nuestra clase PSD a Bootstrap 4. En esta lección, vamos a aprender sobre la implementación de un menú desplegable Navegación. Tan solo para hacer una actualización rápida, un menú desplegable para una navegación o para un menú de sitio web es donde tenemos un menú regular como este y luego lo uso clics en uno de los elementos del menú. Tenemos otro submenú pequeño que sale de la parte inferior de ese elemento del menú en el que hicimos clic. Aquí está lo que es más importante recordar en que estos menús desplegables, solo otro li o elemento de lista en nuestra navegación normal. Aquí está nuestra vista simplificada de cómo es nuestra navegación, expresada igual que elementos HTML. Sé que hemos envuelto esto en un div y pones un botón en la parte superior. Pero esta es la estructura fundamental de la navegación en Bootstrap. Lo que podemos hacer cuando queremos un menú desplegable desde una de nuestras opciones de navegación o una de nuestras opciones de menú es agregar un nuevo elemento de lista con clase igual desplegable. Aquí está la cosa, cuando miramos la maqueta que estoy usando personalmente para implementar el proyecto que estoy haciendo para esta clase en particular, podemos ver que tengo un menú desplegable en el lado derecho aquí y cae fuera de este pequeño icono de usuario, pero pertenece a este otro grupo de opciones y lo que tenemos aquí son dos piezas separadas de navegación. Tenemos precios sobre si un contacto de blogging de cola y luego tenemos esta otra actualización de grupo y luego una campana para alertas y un poco de icono de ayuda y luego este menú de usuario. Se trata de dos piezas de navegación separada y cuando queremos piezas de navegación separada en Bootstrap, vamos a tener dos listas separadas desordenadas. Hacemos esta segunda lista desordenada prácticamente de la misma manera que hicimos la primera lista desordenada con el fin de implementar nuestra segunda pieza de navegación. Si estás codificando solo también ahora sería un buen momento para agregar una segunda fase de navegación si estás trabajando fuera de la misma maqueta que IM. Una vez más, si tu proyecto no requiere una segunda fase de navegación, entonces simplemente iría y editaría de todos modos, solo digo que tienes una práctica en ello y ver cómo funciona y cómo es. Voy a implementar esto más o menos exactamente de la misma manera que implementé la primera. Acabo de tener un implementado ese segundo menú lo más rápido posible. Eso lo he acelerado para que no tengas que pasar demasiado tiempo viéndome tipear las cosas. Lo que hay que saber aquí es que básicamente es lo mismo que la primera navegación que implementamos, aquí está la primera aquí arriba, donde tenemos ul, navbar-nav, li clase igual nav-item, li clase es igual a nav-link y luego algunas cosas por dentro un elemento. La única diferencia real hasta ahora es que si bien uno de ellos sigue exactamente el mismo patrón, tiene actualización en él. Los tres siguientes no tienen texto dentro de ellos, tienen un elemento i con iconos de material de clase y luego el texto para el ícono que queremos entre las etiquetas i. Ahora es así como funciona la fuente de iconos de material de Google. Esto es solo para mí, una forma realmente conveniente de meter fácilmente iconos en la aplicación. Pero el que realmente nos interesa está abajo aquí que no son notificaciones, es persona. Si realmente echamos un vistazo a esto en un navegador antes de hacer otra cosa, solo para saber cómo en dónde. Este es nuestro nav como era y aquí está ahora, aquí está nuestra personita, nuestra ayuda, nuestras notificaciones, actualización. Ahora, que se puede ver que está aplastado contra la otra navegación no se ve muy separado y queremos separarlo para indicar que tiene un propósito diferente porque esta una nueva navegación. Todo esto se trata del usuario, se trata de cosas que hacen que están relacionadas específicamente con ellos o acciones que pueden escribir. En tanto que a la izquierda aquí tenemos cosas azules. la izquierda aquí tenemos cosas que se relacionan con el sitio web Precios y Acerca, FAQ y Blog, Contacto, cosas como esta y queremos algo de separación entre esos. Lo que podemos hacer aquí es que vamos a poner otra clase contra nuestro ul, uto, ml-auto, ¿qué significa eso? Esto es parte de alguna taquigrafía que Bootstrap ha adoptado para mover las cosas en la pantalla. lo que esto realmente significa es margen izquierdo auto, así que ml-auto. Esto significa simplemente barajar el espacio disponible que tenemos en el lado izquierdo de este elemento de navegación y luego lo empujaré todo el camino a través de la derecha de la pantalla. Si guardamos eso y salimos y miramos nuestro navegador, recargar, ahí vamos. Pero lo que tenemos que hacer ahora es en realidad colgar como un submenú de nuestro pequeño ícono de usuario. Para ello, vamos a agregar una clase dos i, inferior más li, o inferior más lista clase de ítem igual a desplegable. Eso lo haré a continuación, aquí agregamos nuestra pequeña clase li igual desplegable, luego volvemos a nuestra presentación. Entonces dentro l último desplegable, o nuestro último elemento de lista donde vamos a dirigirnos a bajar. Esta es la estructura que queremos tener. Vamos a tener encased buddy li o encerrado buddy li que es nuestro menú desplegable, que acabamos de dar el desplegable más dos. Entonces tenemos lo habitual como tenemos todos los demás y un elemento, esta es la parte clickable del mismo. Acabamos de añadirle un icono de usuario. Entonces nuestro sub menú está en realidad encerrado dentro de un div. Va a ser un div que encierra una serie de elementos, y así un elemento comprenderá nuestro menú desplegable. Lo que voy a hacer es ir a poner div y unos elementos ahí antes de hacer otra cosa, <div> además </div>, vamos a tener seis opciones ahí dentro. Ahora, vamos a agregar algunas clases extra a cada una de estas cosas. Ya hemos dado a nuestro ítem de lista una clase desplegable. Nuestro elemento i, además de la clase de enlace nav habitual que damos a todos nuestros enlaces de navegación. También necesita un atributo de toggle de datos establecido en desplegable. Una vez más, esto es algo para que nuestro JavaScript Bootstrap se enganche y sepa que esto va a tener una función especial. A continuación queremos salir div y cerrar nuestro menú desplegable para tener el menú desplegable de clase, y luego cada uno de nuestros elementos dentro nuestro menú desplegable div va a tener una clase de elemento desplegable. Vayamos a ponerlos ahora mismo. En realidad lo primero que voy a hacer es poner algo de contenido en estas cosas. Pero hay algunas otras cosas que tenemos que hacer aquí, y es un atributo llamado data-toggle equal dropdown. Entonces nuestro div es menú desplegable de clase. Hay algo más que tenemos que hacer a ese menú desplegable, pero sólo me gustaría echarle un vistazo en el navegador ahora. Sólo porque me parece bastante útil ver, ayudar a ver cómo funcionan las cosas. Porque de esa manera sé qué clase está haciendo qué trabajo. Se puede ver que nuestro menú desplegable se ve bastante miserable en este momento. Soy lista porque está desapareciendo fuera de la página, eso es porque están por defecto, alineados a la izquierda de la cosa de la que cayeron, alineados a la derecha de nuestro pequeño ícono de usuario. Porque está en el extremo derecho de la página y hay una clase que podríamos usar para hacer eso, menú desplegable. Echemos un vistazo a esa recarga, aquí está nuestro pequeño menú desplegable. Tiene unas cuantas cosas que claramente están bastante mal en ello. No menos importante que fuera, opciones de menú desplegable como sólo se extendió a través del menú desplegable y no todo en una bonita fila vertical. Eso se debe a que necesitamos hacer esos enlaces adecuados y darles una clase que le dirá a Bootstrap que agregan elementos de menú desplegable. Por supuesto que necesitamos agregar una clase, solo pondré esos en súper rápido. Si miramos eso en el navegador ahora, podemos ver que todos están dispuestos verticalmente y bien estilizados en una lista desplegable. Hay un par de cosas más que tenemos que hacer sin embargo. Si echamos un vistazo a nuestro diseño, podemos decir que nuestro nombre de usuario está en negrita, nuestro nombre de plan está en cursiva y tenemos un par de divisores aquí, solo dividiendo las opciones en el menú desplegable, por lo que añadiremos esas a nuestro código ahora. Bootstrap nos da una clase distinta de cero, podemos usarla, el desplegable divisor de clase div. Solo necesitamos tener un div vacío para eso. Yo puedo meter eso ahí, eso sólo va a hacer un pequeño elemento con un borde en la parte inferior de la misma. Eso lo guardamos, echa un vistazo en el navegador. Ya puedes ver tenemos divisores añadidos ahora muy bonitos. Lo último que necesitamos hacer es darle estilo a nuestro nombre de usuario y nombre del plan. Podemos simplemente usar elementos HTML viejos regulares para eso. Vamos a tener fuerte y em. Una vez más revisaremos nuestro navegador, recargaremos, ahí vamos. Aquí está nuestro nombre de usuario, nuestro nombre de plan, y luego tenemos muchas opciones en su lugar como esperábamos. Por supuesto, nuestra navegación es receptiva. Si anotamos hoja arriba de ella hasta llegar a un ícono de hamburguesa y abrimos eso, puedes ver que podemos meternos en nuestro pequeño ícono de usuario y nuestro desplegable aún funciona como esperaríamos que lo hiciera, y por supuesto, si abrimos eso de nuevo, podemos ver que mantiene su estado y se mantiene en la posición desplegable. Es así como podemos implementar un menú desplegable responsive usando la navegación de Bootstrap. 9. Crea un diseño con containers, filas y columnas.: Oigan a todos, bienvenidos de nuevo. En esta lección vamos a estar revisando cómo podemos usar cuadrícula Bootstraps para crear nuestro diseño de página web. Del mismo modo de actualización súper rápida. Hablé de la grilla. Está realmente dividida en contenedores o en como un contenedor general. Entonces en ese contenedor podemos tener filas y luego en esas filas podemos tener columnas. Ponemos el contenido de nuestro sitio web en esas columnas para que Bootstrap los pueda reorganizar para nosotros dependiendo del tamaño de nuestro navegador o del dispositivo en el que estamos viendo la página web. hoy vamos a estar revisando cómo podemos usar estas columnas para crear un diseño general para nuestra página web. Este es el contenido principal de nuestra página web. Me falta lo [inaudible] al de esta captura de pantalla solo por claridad. Pero tenemos estas dos columnas de cosas en nuestra página realmente. Tenemos el de la izquierda con alguna identidad de marca y algún texto debajo de ella. Entonces a la derecha, tenemos nuestros principales datos. Supongo que tenemos nuestro encabezado, tenemos una entrada para buscar con un botón para agregar un nuevo elemento de datos. Esto está mostrando información sobre formularios de sitios web, por cierto e información sobre esos formularios. Cada elemento de datos es una forma específica e individual que podría mostrarse en un sitio web. En una pequeña mesa se muestra información sobre esos formularios. Vamos a estar explorando cómo podemos usar Grid de Bootstrap para implementar este diseño general. A un nivel alto, lo que eso va a parecer es una gran gran banda de divs. Pero lo que tenemos es un div externo justo aquí, que es nuestro contenedor y luego div dentro de ahí, que va a ser un papel. Entonces tenemos a estos otros dos divs. Cada uno de esos va a ser una columna, una para el lado izquierdo, otra para el derecho. Lo que creo que voy a hacer es meterlo en el código ahora mismo. Entonces podemos ir y poner los estilos de Bootstrap apropiados en esos regalos para que funcionen como contenedores, filas y columnas. Si estás cortando para hacer tu propio proyecto, ya sea que estés usando los simulacros aplicados en esta clase o uno de los tuyos. Ahora es un buen momento para empezar a trabajar en eso de nuevo. Por favor, no olvides publicar tus proyectos en el espacio del proyecto de clase para que podamos ver cómo vas, puedes obtener algunos comentarios sobre el trabajo que estás haciendo. O si ya tienes 20 problemas, esa es una gran oportunidad para conseguirlos. Aquí estamos código de entrada y salida y se puede ver que tenemos nuestra navegación implementada aquí. Lo que vamos a hacer es bajar al fondo de esa navegación, cerrarlos. Like line ahi y aquí es donde hacemos todos nuestros divs. Tendremos un div para nuestro contenedor y otro para nuestra fila. Entonces dentro de ahí, tendremos la columna uno, la columna número dos y podremos digitalizar. Este es el diseño fundamental del contenido principal de nuestra página web. Yo sólo voy a poner un pequeño comentario contenido principal. Entonces una pequeña al final ahí solo para decir que aquí es donde eso termina. No obstante, el mirar eso en el navegador, porque realmente no es totalmente nada que ver todavía. Esto es lo que tenemos en nuestro código abajo. Ahora vamos a empezar a poner en algunas clases, vamos a tener un contenedor, fila, col-md-4 y luego col-md-8. Voy a poner eso como en la tarjeta ahora mismo. Clase es igual a contenedor. Sólo voy a copiar eso un par de veces y cambiarlo a remar luego col-md-4 y luego col-md-8. Lo que tenemos aquí es nuestro contenedor general que contiene nuestra fila y fila es que tiene dos columnas en él. Tenemos una columna que ocupa cuatro espacios y otra que ocupa ocho. Recuerda de la lección anterior donde estaba hablando de cómo tenemos 12 espacios de columnas realmente me gusta en total en Bootstrap. Esta es una forma de decir, bueno, columna de izquierda va a ocupar un tercio de la página y nuestra columna de la derecha va a ocupar dos tercios. En la siguiente lección, estaré mirando las columnas con más detalle para poder hablar más sobre cómo funcionan estos anchos de columna y más sobre cómo estas designaciones como md, que significa medio como en una pantalla de tamaño mediano. Hablaremos de cómo funcionan esos también. Pero para esta lección, solo sigue adelante y podrás ver un ejemplo de cómo funcionan en la práctica. Ahora vamos a trabajar en la columna de la izquierda. De lo que vamos a hacer, columna de izquierda, ves lo tengo resaltado aquí abajo en la parte inferior. De lo que vamos a sacarlo, esa columna 10 que se llama md-4. Simplemente rellenamos eso ya que vamos a tener otro div, que será otra fila y luego otro div que será una columna. Entonces tendremos una imagen ahí dentro. Eso es identidad pasiva, pero un branding y su logo. Entonces en nuestro próximo div tendrá otra fila, que tendrá otra columna. Entonces esto, etc, significa el texto. Esto es importante por ley así sucesivamente. Lo que haremos es poner todos estos divs al revés col-md-4, que está fuera columna de la izquierda. Aquí está col-md-4. Yo también voy a poner un pequeño comentario sobre eso. Columna. Parece eso y di eso. Esa es la columna correcta. Simplemente poniendo algo de espaciado y algunos comentarios aquí, esto se pone un poco lleno todos estos divs y columnas y qué tenemos flotando por ahí. Sólo para que podamos verlos de manera individual y clara, así que lo que vamos a tener dentro de nuestras vacaciones hacia adelante, vamos a tener un div que representará una fila. De verdad tenemos dos filas, así que tendremos dos de estos divs externos. Entonces dentro de cada uno de esos tenemos una columna, que será otro div. Entonces dentro de éste, tenemos nuestra imagen. Dentro de aquí vamos a tener algún texto. Ahora tengo mi imagen pre-preparada. Si estás trabajando fuera del ejemplo que he proporcionado, el código esqueleto proviene de mi carpeta, que también tiene una imagen proporcionada en ella, en el directorio de imágenes. Ahí dentro tenemos imagen y se llama dopaje de entidad. Voy a poner un atributo en que equivale al 100 por ciento. Esto es un stop gap siendo que estoy haciendo aquí. Porque realmente lo que queremos hacer es darle estilo a esto con algún CSS personalizado individual para nuestro sitio web. Pero no estoy haciendo ningún CSS por el momento. Voy a dejar todo eso hasta el final cuando personalicemos el look de nuestra página web, para que no todo sea como caer estilos bootstrap. Pero por el momento, solo quiero quedarme con el 100 por ciento bootstrap solo para que podamos ver cómo funciona y realmente no logremos las aguas con sus propias estrellas. En la última lección de video de esta clase, ahí es donde veremos el CSS que podemos aplicar a nuestro sitio web para que se vea menos bootstrappy y más ¿cómo propio? Por ahora, para evitar que la imagen se apodere de toda la pantalla, sólo voy a poner este atributo de ancho en ella. Voy a pasar a la siguiente parte de contenido. Sé que esto es una fila aquí, y esto va a ser una columna. Esto va a ser una fila. Esto también va a ser una columna. Sé que por dentro hay que tener algún contenido. H2, esto es importante. Yo sólo voy a llenar eso rápidamente. Pero este es simplemente básicamente el contenido que necesitamos tener en la columna de la izquierda de nuestra página. Esto es obviamente antes de que lo hayamos empezado a peinar con los estilos de bootstrap. Echemos un vistazo rápidamente a nuestro navegador web para ver cómo se ve. Ahí está, conseguimos nuestra marca y luego nuestro texto. Ya se ve bastante de la forma en que nos gustaría que se viera. Simplemente vamos a agregar algunas filas, y columnas a nuestro DBS, solo la restricción en un poco, y ayudará con nuestro estilo de la misma más adelante también. Podemos ver que todo está siendo limitado en una sola página, que es nuestra columna de la izquierda. Pero, ¿qué estilos le vamos a dar? Vamos a empezar el segundo conteniendo div como fila. Entonces el div que sostiene la imagen como medio frío 10. Ahora tal vez ligeramente contra-intuitivo tener llamando al diez dentro de un Col MD 4. 10 parecería ser más grande que los cuatro, por lo que pregunta cómo encajar eso. Una vez más, esto es algo que vamos a echar un vistazo de cerca en nuestra próxima lección. Nos movemos y definimos nuestra siguiente fila, agregamos otro Col MD 10. Esto es bastante sencillo de hacer en nuestra clase de código es igual a fila. Clase igual. Si recuerdo cómo escribir código, en realidad MD 10. Por supuesto que esta va a ser la misma clase igual a K. Eso es un 100 por ciento del estilo que necesitamos aplicar para columna de mano izquierda. Si vamos y refrescamos eso en nuestro navegador, podemos ver que está aplastado literalmente. Una vez más, hablaremos más sobre cómo funciona esto en la siguiente lección sin columnas, y dimensionamiento. Ya que hemos implementado esto como una columna para una pantalla de tamaño mediano en cuanto aplastamos esto. B en el tamaño de una pantalla de tamaño mediano, podemos ver que de repente se expanden para ocupar un 100 por ciento del ancho, que es lo que esperamos. Cuando ya no hay espacio suficiente para mostrarlas como columnas individuales, todas se apilan una encima de la otra para asegurarse de que son legibles, que se pueden leer fácilmente y todavía están dispuestas lo suficientemente bien como para ser navegar cómodamente en un dispositivo pequeño. Esa es nuestra columna de izquierda atendida por ahora. Pero también tenemos que seguir y hacer la mitad correcta de la página o los dos tercios correctos de la página, lo siento, también. Una vez más, tenemos un diseño bastante sencillo. Div y un H1 dentro de ahí, que dice falso. No me voy a molestar en aplicar estos divs, y el estilo por separado en el código esta vez, porque no hay nada ni súper impactante. Este div externo es nuestro col MD 8 que creamos al inicio mismo de esta lección. Dentro de ahí tenemos una fila, luego una col MD 4 que contendrá nuestras formas H1. Se puede ver que hay un montón de otros contenidos en el lado derecho o en la columna derecha. Pero vamos a implementar eso en lecciones posteriores cuando nos fijamos en tratar con entradas de formulario y controles, y luego implementar una tabla de datos usando bootstrap también. Pongamos esta implementación inicial de nuestra columna derecha en nuestro código. Ahí hay una columna derecha muy solitaria, vacía. Vamos a tener una clase div igual a habitación, luego tenemos un div igual col MD 4, formas H1, y terminaremos nuestro div. Creo que estamos hechos, debajo de eso en nuestro navegador y sorpresa, sorpresa, ahí están nuestras formas. Ahora, lo que hemos hecho aquí se implementan dos columnas. Al igual que cuando aplastamos un poco la página, podemos ver que se apilan uno encima del otro, que es el estilo receptivo que queremos. Podemos ir y dar click a nuestro menú de navegación. Podemos ver que se abre y se expande, luego empuja todo el contenido principal por la pantalla. Pero la cosa es que nuestra navegación, y nuestro contenido principal están sobreviviendo juntos. Viendo muy bien como un formato de página grande [inaudible]. En nuestra siguiente lección, veremos las columnas con mucho más detalle. Veremos cómo se definen las columnas tienen diferentes anchuras y también cómo Bootstrap trata las columnas para diferentes tamaños de pantalla. 10. Columnas de Bootstrap en detalles.: Bienvenido de nuevo. En esta lección vamos a ver las columnas de Bootstrap con un poco más de detalle. Hay algunas cosas que realmente no hemos cubierto súper cuidadosamente hasta ahora, que es como podemos tener columnas grandes como col-10 dentro columnas más pequeñas como col-four y la definición de pantallas grandes, medianas y pequeñas. Eso está usando como lg y md y sm para grandes, medianas y pequeñas. Realmente no hemos mirado ni explicado esos. Aquí es cuando aclaramos esas cosas. Lo que voy a correr ahora es cómo se definen las columnas en Bootstrap, como col dash number, digamos col-one por ejemplo. Si tienes un vistazo a en el CSS Bootstrap, verías que col-one se define como 8.33333 por ciento. Si entonces vamos y miramos col-dos es 16.66667 por ciento el doble que el de col-uno y luego si pasamos a col-tres, vemos que es 25 por ciento. El punto aquí no es realmente que recordemos estos porcentajes sino que notemos que son porcentajes y aumentan en ocho y un tercio por cada número. Lo que eso nos da en general son 12 columnas aumentando en ocho y un tercio, igual tamaño, hasta el 100 por ciento. Lo más importante aquí, como dije, es que son porcentajes, no son anchos duros. Si definimos algo como frío-uno, sabemos que va a tener ocho y un tercio por ciento de ancho de lo que sea que lo contenga. Echemos un vistazo a un pequeño ejemplo. Digamos que tenemos un div y le hemos dado la clase col-cuatro. Si miramos el col-cuatro, sabemos que va a ser como el 33 y un tercio por ciento de lo que lo contenga. Imaginemos que eso sale a 100 píxeles. Porque a pesar de que estos estilos se definen como porcentajes cuando llegan a ser renderizados dentro del navegador, van a terminar con un ancho de píxel real dependiendo del tamaño de la cosa que contenían dentro de y el tamaño de la página del navegador. Eso va a cambiar cada vez que cambiemos el tamaño de la página del navegador. Si lo haces muy ancho, tal vez van a ser 200 píxeles. Si lo haces muy estrecho, tal vez van a ser como 50 píxeles. El punto es que sabemos que es un col-cuatro, va a ser 33 y un tercio de lo que sea que esté sentado dentro. Ahora, si vamos y ponemos otra columna dentro de nuestro col-four div, y le damos una clase de col- nueve. Ahora, si vamos a mirar al col-nueve y podemos ver que es 75 por ciento. Esto significa que el col-nueve va a ser lo que va a ocupar 75 por ciento del col-cuatro. Si col-four es un 100 píxeles, eso significa que col-nueve tendrá 75 píxeles de ancho. Por eso es válido, pero tal vez un poco confuso ver columnas con números grandes, dentro de columnas con pequeños números. Lo que estamos diciendo es que va a ocupar un cierto porcentaje de lo que lo está conteniendo. Lo siguiente que debemos considerar son los tamaños de pantalla de Bootstrap. Ahora, ya ves corriendo por la parte superior derecha de la pantalla aquí tenemos col-tres, col sm tres, col-md-tres, col-lg tres, y col-xl- tres. Estos sm, md, lg y xl todos representan para pequeños, medianos, grandes, y extra grandes respectivamente. Cualquier pantalla que tenga menos de 576 píxeles de ancho, será tratada como una pantalla extra pequeña. Eso significa que un col-tres, por ejemplo, he usado tres como ejemplo conveniente porque tiene un buen número redondo, 25 por ciento. Sabemos que col-tres siempre tendrá 25 por ciento de ancho en una pantalla extra pequeña. Pero para pantallas pequeñas, para pantallas medianas, para pantallas grandes y para pantallas extra grandes, eso no será tratado como columna cero. Eso será tratado como columnas de 100 por ciento de ancho o columnas con un ancho del 100 por ciento. Si nos fijamos en las siguientes pantallas, cada pantalla que esté por encima de 576 píxeles, entonces col-tres, que es extra pequeña, seguirá siendo tratada como una columna, col sm tres, pequeña. Seguirá siendo tratada como una columna también, todavía obtiene 25 por ciento de ancho. No obstante, las columnas medianas, grandes y extra grandes se tratarán como columnas de ancho del 100 por ciento, lo que significa que cuando aparezcan como columnas, se apilarán una encima de la otra. Pero si subimos otro tamaño, podemos decir que nuestro tamaño de pantalla ahora es de 768 píxeles. Cualquier cosa que sea 768 píxeles o más ancha, la columna extra pequeña sería tratada como 25 por ciento de ancho. La columna pequeña será tratada al 25 por ciento de ancho y la columna mediana será tratada al 25 por ciento de ancho, pero las columnas grandes y extra grandes no lo serán. Entonces podemos seguir subiendo así. Tenemos una pantalla grande definida como 992 píxeles y luego una pantalla extra grande definida como 1,200 píxeles. Una vez más, no es realmente el punto de recordar estos valores duros definidos en el CSS de Bootstrap. El punto es que tenemos estos mnemoónicos prácticos, sm, md, lg y xl que podemos usar para decir; bueno en pantallas grandes quiero que aparezcan estas columnas, pero en cualquier cosa pequeña, solo quiero que se apilen encima de cada otro. Entonces abajo por pantallas extra pequeñas, podemos decir, bueno, voy a usar este col- tres porque quiero que siempre sea una columna pase lo que pase. Sé que esto es como una diapositiva bastante complicada para estar mirando muchos números y puede que no te parezca súper intuitivo, pero está aquí para deletrear realmente la forma en que funcionan diferentes tamaños de pantalla y diferentes definiciones de columnas . En la próxima lección, vamos a estar viendo cómo podemos usar columnas para diferentes tamaños de pantalla para cambiar el aspecto de las cosas al ver nuestro contenido en navegadores de diferentes tamaños. Vamos a tener una demostración práctica de cómo funciona esto a continuación. 11. Añade una tabla de datos con pequeñas columnas.: Hola y bienvenidos de nuevo en la lección de video de hoy, vamos a ver cómo podemos usar Bootstrap 4 para implementar una tabla de datos en nuestro PSD diseñado en nuestro primer diseño de esta página web. Lo que vamos a estar haciendo es implementar esta mesita que está en el lado derecho de la página. Está más en el medio a la derecha. Tiene cinco columnas en total, pero cuatro columnas de datos, los encabezados y nombre, impresiones, respuestas y conversión, y luego en la quinta columna tenemos algunos pequeños iconos con hacer cosas para agregar filas de datos. En la lección de hoy, no estamos introduciendo nuevos conceptos o ideas de bootstrap, sólo vamos a estar poniendo en práctica las cosas que ya hemos cubierto. El primero que queremos hacer es implementar algunos encabezados para nuestra pequeña tabla de datos. Realmente eso solo va a ser un div externo, que será una fila que contiene cuatro div s para nuestros encabezados. Voy a meter esos en nuestro código ahora mismo, y luego volver y aplicarles nuestros estilos. Aquí estamos retrocediendo códigos, puedes ver nuestra implementación inicial de nuestra columna derecha aquí, y tiene justo esta H 1 formas dentro de ella. Vamos a empezar lo que va a estar en tu fila una vez que lo apliquemos en algunos estilos con este div aquí y dentro de ese div tendremos cuatro div s más, para nuestros encabezados de columna. Dentro de cada uno de esos sólo pondremos el nombre de nuestras columnas. Tenemos nombre, impresiones, respuestas, y conversión. Ahora puedes mirar en el navegador y puedes ver nuestros encabezados de columna se muestran como div s normales exactamente como esperábamos. Regresando a la presentación, podemos ver vamos a asignar una clase de fila al aditivo, y luego aquí podemos ver estamos combinando dos estilos de columnas al primer div, así que ese es el nombre y para el resto de ellos les daremos un llamar también. Tenemos otro estilo ahí llamado texto derecho. Se trata de un estilo definido por Bootstrap que simplemente se alinea sin enviar mensajes de texto en este div particular a la derecha, y esa es la práctica estándar para tablas de datos que tienen valores numéricos, los alinearemos a lo largo de la derecha de la columna. Pero volviendo a nuestro primer div, con llamada col md- 3 col- 2. ¿Qué significa esto? Bueno, eso significa en una pantalla media que esta columna va a ocupar tres columnas espacios, pero en una pantalla extra pequeña llamada dash dos, entonces sólo ocupará dos espacios de columnas. Aquí es donde entra la flexibilidad de los estilos de columna de Bootstrap porque podemos aplicar una serie de anchuras diferentes a la columna una y eso ha cambiado dependiendo del tamaño de nuestra pantalla. Iré y aplicaré los estilos a nuestros encabezados de columna ahora mismo, y ahí salimos de esta corrida y los aplicamos rápidamente. Podemos volver a mirar nuestro navegador, darle una actualización, y ahí están cómo las columnas espacian a través de la pantalla como esperamos. Si empezamos a igualar esto, puedes ver que tenemos un pequeño problema aquí donde se están encontrando entre sí, eso no es genial. Esta es otra de esas cosas que vamos a arreglar cuando lleguemos a aplicar un estilo personalizado, pero se puede ver lo que ha pasado aquí es que el nombre está ahora bien por abajo aquí se puede ver nombre está ocupando mucho este espacio de lo que era anteriormente. Está ocupando una cantidad igual de espacio en todo el ancho de esa tabla que las otras columnas. En tanto que una vez que es un poco más grande, obtiene relativamente más espacio. Esta es nuestra columna tres versus columna dos estilo pateando. Todo lo que tenemos que hacer es ir y definir algunas entradas para los datos en nuestra tabla. Así se va a ver una fila de datos en nuestra tabla. Vamos a tener un externo que contenga div y luego cuatro div s para nuestros datos. Se alinearán con esos encabezados de columna, y luego un div extra para nuestros iconos y solo correré directo y miraré las clases que les aplicarán en este momento. Se puede ver el primer div va a ser una fila y que los otros div s después de eso, y van a ser lo mismo que nuestros encabezados porque queremos que esos datos se alineen debajo del encabezamiento por lo que aplicamos los mismos estilos. De hecho voy a pasar y hacer esos ahora mismo antes de meternos en nuestros iconos. De verdad, todo lo que necesito hacer es tomar esta parte, hacer una copia de ella, y luego poner algunos datos y decir cualquier LP 1 y ha tenido 2034 impresiones y 1017 respuestas lo que va a salir a un 50 por ciento tasa de conversión comenzó a hacer las cosas fáciles para mí mismo. No me quieres ver aquí sentado aquí y tratar de trabajar a una tasa de conversión del 34 por ciento a partir 2034 impresiones Si vamos y comprobamos cómo se ve eso en un navegador ahora, dale una recarga y como puedes ver, tenemos LP 1, 2034 impresiones, 1017 respuestas, tasa de conversión del 50 por ciento y todo se está alineando muy bien. Se ve más o menos como esperaríamos, y si apretamos esto un poco más, se puede ver nuestro texto corriendo. Se necesitan textos de cabeza que se toquen entre sí, pero podemos ver que nuestras columnas se están alineando muy bien todavía. ¿ Qué vamos a hacer con los iconos? Siempre van a ser una columna tres, por lo que pueden ocupar tres anchos de columna todo el tiempo. Yo también voy a ir popup en el código. Es hora de poner nuestros iconos en nuestro código para quién y aquí están. Hemos agregado una columna más a nuestra fila, y esto es bastante similar a lo que hemos hecho en la navegación. Entonces tenemos una serie de etiquetas H que contienen una etiqueta I para iconos de material, y estamos usando el material Nombre de icono que sea apropiado para esa acción. ¿ Cómo se ve eso en el navegador? Tenemos nuestros iconos ahí dentro colgando del final de nuestra mesita. Aquí hay un par de cosas que tener en cuenta. Una es que no esperábamos mostrar todos estos a la vez. Este pequeño punto está ahí para decir, oye, espera, hay más, ven a echar un vistazo y así cuando vayas y pases por encima de esa cosa o haz clic en ella o algo así, aparecerán las otras cosas. De verdad, queremos que aparezcan cuando ratonemos todo. Esta es una de esas cosas de estilo personalizado que vamos a agregar hacia el final de la clase, y la otra cosa a tener en cuenta es que esta es como una forma súper artificial mostrar estos datos porque nunca lo harías lo enseñó en para entonces este obviamente datos en vivo. Esto es parte de una página web, por lo que se llenaría con datos de un servidor en algún lugar, pero forma de implementarlo ahora como HTML, sólo porque esto es algo genial para que practiquemos y aprendamos. Esta es a menudo la forma en que haríamos este trabajo de todos modos con implementado como un tipo HTML de Prototipo, luego agarrar los bits de datos fuera del medio del HTML e implementar eso en el lado del servidor. En realidad no es tan loco después de todo. Permítanme poner algunas filas más de datos en nuestra tabla para que se vea un poco más como una tabla de datos. Ahí vamos, he ido y publicado en un montón de cosas que guardé antes. De nuevo, si revisamos esto en nuestro navegador, ahí vamos. Aquí te dejamos una pequeña tabla de datos sin iconos y fuera de varias piezas de datos. En nuestra siguiente lección, vamos a estar agregando nuestros pequeños controles de entrada junto a espumas aquí arriba. Agregamos estos búsqueda y agregamos un nuevo formulario. Controles que están en nuestro diseño de página web. 12. Crear controles de entrada de Bootstrap.: Hola otra vez. En esta lección de video, vamos a ver cómo podemos definir algunos controles de entrada usando Bootstrap 4. Entonces aquí hay un poco de diseño de página web y junto a nuestro encabezado Formularios, se puede ver que tenemos una entrada con una lupa poco en ella, que es para la búsqueda, y un botón llamado Añadir nuevo formulario, que adivinaríamos es por agregando un nuevo formulario. Entonces ya veremos cómo podemos implementar esos dos en este momento. En primer lugar, aquí está nuestra maqueta HTML para implementar un poco de controles de entrada. Cuando pones uno de ellos dentro de un formulario, porque realmente en una situación como esta, ese botón Agregar nuevo formulario no va a enviar nada a un servidor. Simplemente va a abrir un pequeño pop-up o una nueva página para que pongamos las cosas en un formulario y luego lo enviemos a un servidor. Por lo que solo está ahí para mostrar un HTML similar. Pero tal entrada que, va a enviar una consulta al servidor lo más probable, y luego el servidor va a enviar de vuelta algunos resultados. Entonces queremos poner eso dentro de un formulario. Nuevamente sólo estamos implementando como un prototipo HTML hoy. Entonces no vamos a estar implementando ninguna funcionalidad de búsqueda, pero así es como quisiéramos organizar nuestro HTML que podamos enchufar esa funcionalidad de búsqueda. Entonces lo siguiente que voy a hacer es poner nuestra maqueta HTML en nuestro código fuente, y luego después de eso le aplicaremos algunos estilos. Entonces aquí estamos en nuestro código y estoy mirando nuestro encabezado Formularios, que es como lo primero que vemos en nuestra columna derecha. Todo esto va en la misma fila. Por lo que lo pondré dentro de la fila div inmediatamente después de nuestra columna Formularios. Entonces lo primero que vamos a tener es nuestro Formulario. Esto podría parecer contrario a intuitivo. Pero esta es la forma en que va a tener que funcionar, y así es como funcionan los estilos Bootstrap en este momento. Ya verás de qué hablo en un momento. Di Input, entonces obviamente [inaudible]. Entonces después de nuestro Formulario tenemos otro div. Aquí es donde va nuestro botón, Añadir Nueva Forma. Sólo déjame revisar nuestra maqueta. Sí, usé Title case para eso. Entonces déjame cambiar eso. Volvamos a nuestra presentación y veamos qué tipo de estilos podemos aplicar a nuestro Formulario y a nuestros insumos. En primer lugar, vamos a dar nuestro Formulario, la clase en línea de formulario. Si no recuerdas, en HTML, todos nuestros elementos son elementos en bloque o en línea. Los elementos en línea se alinean horizontalmente, de lado a lado. Los elementos de bloque se alinean verticalmente, de arriba a abajo. Pero queremos que nuestra Forma se comporte como un elemento en línea porque queremos que aparezca en la misma línea que nuestras otras entradas y como la h1 al lado. Entonces le daremos el form-inline plus entonces tendrá un form-group seguido de una columna div. A mí esto me parece al revés. Creo que nuestra columna debe ser como el elemento que contiene y la forma debe estar dentro de ella. Pero créanme, los estilos no funcionan muy bien si lo hacemos de esa manera, y es así actualmente como los docs de Bootstrap recomiendan trabajar con Forms. Hemos puesto columna dentro del formulario y después tenemos nuestro elemento de entrada. Después de eso, tenemos nuestro div conteniendo para nuestro botón, que solo va a ser una columna de ancho tres para pantallas pequeñas. Entonces vamos a poner esos en nuestro HTML y ya veremos qué obtenemos. Entonces nuestro formulario es clase on inline, y div va a ser form-group y luego tenemos una clase de tres columnas en una pantalla pequeña. Entonces tendremos lo mismo para este tipo. Entonces iremos a cargar eso en nuestro navegador. Recarga, y luego se puede ver lo que conseguimos esa forma, y se puede ver lo que se revela por todo el lugar una vez más, pero quién arregló eso sin estilizar. Entonces eso es más o menos todo lo que hay para implementar nuestros controles de entrada. En nuestra siguiente lección, implementaremos el pie de página y luego terminaremos con nuestra parte bootstrap de la implementación de la página, y luego pasaremos a nuestro CSS personalizado para que coincida con el diseño que iniciamos con. 13. Cómo crear un pie de página en Bootstrap.: Hola otra vez a todos. En esta lección vamos a estar viendo cómo podemos usar Bootstrap para implementar un pie de página en nuestra página web. Ahora esta es otra de esas conferencias. No vamos a estar explorando ningún nuevo concepto de Bootstrap, pero vamos a estar viendo cómo podemos usarlo para implementar nuestro pie de página que es esa parte en la parte inferior de la página Web justo ahí. Ahora si solo va a repetir nuestra navegación principal por la página web, y tendrá un pequeño aviso de copyright en la parte inferior. Veamos cómo se ve eso en nuestro HTML. Aquí lo tenemos. Empezamos con una etiqueta de pie de página que encierra, la etiqueta HTML de cinco pies de página. Entonces tenemos un div encerrado, que va a tener una clase de fluido contenedor. Ahora en bootstrap, tenemos dos tipos de contenedores. Tenemos contenedor por sí mismo, que es un ancho fijo, y luego fluido contenedor que es el ancho completo de la página. Queremos que nuestro pie de página sea el ancho completo de la página en este caso. Después de eso vamos a tener una fila y luego una columna que también le hemos asignado, que es una forma de decir queremos que nuestros márgenes tengan un valor de auto, que es una forma de centrarlos. Después de eso tendremos otra fila luego otro div centrado, y ya terminamos. Pongamos eso justo en nuestro código ahora mismo. Pondremos eso debajo de nuestro contenedor que contiene todas las demás columnas que imagina ese texto que forma la tabla de datos. Todas esas cosas y empezaremos con nuestro pie de página aquí mismo. Si puedo perdonarnos a todos mis errores tipográficos. [ inaudible] equivale a contenedor para el plomo. Cuando también tenía nuestra raíz, y luego tendremos nuestra clase igual a mx-auto. Entonces cerraremos ese div. Entonces vamos a repetir esa misma estructura exacta otra vez. Para nuestra siguiente fila pondré eso ahí mismo. Esta es básicamente esta estructura que necesitamos para nuestro pie de página. Ahora, ¿qué vamos a poner dentro de ella?. En realidad, es sólo una repetición de nuestra navegación principal. Tenemos 1, 2, 3, 4, 5 enlaces. Precios sobre FAQ blog y contacto y HRF para librar valores. Precios que como un blog cubo contacta en el día del mundo real estarían filtrándose a otras páginas de nuestro sitio. Pero para nuestro prototipo nos quedaremos con estos. Entonces tenemos que poner en nuestro aviso de copyright, que van a ser dos spans.Uno con el símbolo de copyright el otro con nuestra marca, Copyright 2017. Si echamos un vistazo a cómo se ve eso en nuestro navegador, y ahí vamos. Tenemos nuestro pasarlo que si bloqueas el contacto y luego la marca 2017, por supuesto esto no se parece a nuestra maqueta, pero en la siguiente lección vamos a ir y aplicar algo de CSS a esta implementación para asegurarnos de que coincida con nuestro diseño original. 14. Cómo personalizar una página de Bootstrap web.: Bienvenidos de vuelta a todos. En esta lección final, vamos a repasar los estilos personalizados que podemos aplicar a nuestra página web para que coincida con nuestro diseño web de tema, como puedes ver, tenemos un poco de trabajo que hacer, pero no tardará demasiado. Voy a estar corriendo por estos cambios con bastante rapidez. Hay algunos de ellos, pero en su mayoría son bastante pequeños. No tienes que preocuparte por tomar notas ni nada por el estilo porque estaré proporcionando el archivo CSS final como parte de los recursos del proyecto. Se puede referir de nuevo a ella más adelante. Aquí estamos con el código. Hasta ahora, tengo mi archivo index.html del lado izquierdo aquí, y del lado derecho tengo un código de archivo form-admin.css, que está vacío por el momento, aquí es donde va a ir nuestro CSS personalizado. Ahora he creado un sub directorio CSS en mi carpeta de proyecto, y nos referiremos al nuevo archivo CSS aunque no tenga nada en él de nuestro archivo HTML índice. Ese es el primer cambio que voy a hacer. En lugar de HTTP como fuentes de Google, etc. Solo voy a poner nuestro form-admin.css ahí mismo y guardar eso. Lo primero que voy a hacer es empujar un poco la navegación de nuestro sitio y en realidad usaré una clase bootstrap para hacer entonces y esta es una de las clases que no hemos cubierto antes. Se llama offset-md-4. Esto funciona igual que una columna excepto que no es algo en lo que ponemos las cosas, lo usamos para empujar las cosas a través de un cierto número de espacios de columna. En este caso, queremos que nuestra barra de navegación sea empujada a través de cuatro espacios desde la izquierda. Pondré eso ahí dentro y luego veré cómo se ve eso en el código para asegurarme de que está teniendo el efecto que queremos. Aquí estamos, esa página web, guárdelo y recargarlo más bien, y podemos ver que nuestra navegación por el sitio ha sido empujada a través, que es lo que queremos y lo siguiente que queremos hacer es agregar algunos cambios a la fuente usando para la página web en nuestro diseño, estamos usando una fuente llamada última, y tienes tres o último. No estoy seguro de cómo pronunciar eso con ellos. Tenemos tres maneras diferentes para ello. Entiendo que en esto desde las fuentes de Google, y luego lo configuramos en nuestro cuerpo y configuramos el tamaño de la fuente del cuerpo. Una vez más, lo revisaré en el navegador solo para asegurarme de que haya algún cambio, y ahí podemos ver que he encontrado ha cambiado, y lo siguiente que queremos hacer es finalmente meternos en color a esta barra de navegación en este momento, tiene un aspecto muy pálido y nuestro diseño, como puedes ver, utiliza este color de fondo azul, verde claro. Será mejor que pongamos eso también. Ahí está. ¿Qué tenemos aquí? Bueno, lo primero que estamos haciendo es en realidad establecer el font-weight para la navegación porque en realidad es un poco más grande que el texto del cuerpo. Después de eso, en realidad nos estamos metiendo en configurar nuestro color de fondo para nuestra navegación. Estoy definiendo una nueva clase llamada navbar-brand-bg o navbar-brand-background y configurando el color de fondo a este valor verde azul, y después de eso, decimos cualquier enlace de navegación que esté dentro de barra de navegación que está dentro de navbar-brand-bg configurarlo en blanco. Entonces tenemos una regla similar para cuando los elementos de la barra de navegación están siendo colocados sobre ellos o nuestros enlaces han flotado. Después los colocamos en azul oscuro, color verde. Tan solo para darle un poco de feedback al usuario que algo sucederá cuando haga clic en ellos. Pero todo esto referenciar a esta nueva clase significa que tenemos que agregarla a nuestro HTML. Aquí estamos, y sólo voy a agregar esa clase a navbar, y será navbar-brand-bg. Echaremos un vistazo a eso en nuestro navegador, nuevamente recargar y, no es tan emocionante. Por último, un fondo colorido. Pero si cierro mi navegador, creo que nos vamos a tropezar con algunos problemas. Cuando cambiamos a nuestra navegación sí, receptiva. Mira eso. Tenemos a esta peculiar banda azul pasando por ahí arriba, y todo lo demás parece ser un orden que es bueno. Feliz de decir que sin embargo, queremos hacer algo con esta banda verde azul que va por la parte superior allá. En nuestro modo de navegación responsive. Entonces necesito hacer algo solo un poco poco no obvio aquí, que es clase aditiva igual a la marca navbar-, y luego poner un espacio vacío ahí dentro y cerrar eso, y realmente lo que estamos haciendo es aprovechar Clases de Bootstrap que están todas configuradas para trabajar juntas muy bien, por lo que nuestro botón de alternar está configurado para tener una cierta altura y esta clase de marca navbar está configurada para que sea una cierta altura, y sin que vaya y codifice a mano ese valor de altura en nuestro CSS personalizado, puedo aprovechar la marca navbar y dejar que lo haga por nosotros. Haga clic en recargar, y ahí vamos. Por lo que la navegación se ve un poco más saludable ahora, y hermosa. Me siento mejor por la forma en que las cosas ya se ven. Entonces lo siguiente que queremos hacer. Es si le echas un vistazo a nuestro pequeño ícono de usuario aquí, sentado ahí luciendo perfectamente feliz con el resto de esos íconos. Pero si revisas nuestro diseño web, podemos ver que tenemos este pequeño círculo detrás del ícono. Entonces voy a poner algo para eso ahora mismo, y a casa aquí vamos. Por lo que aquí suceden un par de cosas. Una es que estamos definiendo un ícono de usuario de clase, configurando el color de fondo para ello, enviando un color de primer plano para ello. Establecer el radio del borde en 50 por ciento es básicamente hacer un pequeño círculo redondo y establecer manualmente el ancho, desplazarlo un poco más ancho y más alto en la implementación web que en el diseño. Sólo porque eso va a necesitar trabajar un poco mejor para nuestros estilos responsivos y compensar algún relleno que queda en él también para asegurarnos de que nuestro pequeño ícono de usuario esté centrado en el fondo y hemos temido importante después de eso. Sólo porque hay algunos estilos más específicos enganchándose a nuestro icono, anulando nuestro relleno a la izquierda. En lugar de hacer una regla CSS artificialmente específica para nuestro icono de usuario, usaré la palabra clave importante allí, estableciendo una portada de fondo para el hubbub, y finalmente, en realidad solo necesitamos estos relleno si estamos en nuestro modo responsive . Es decir, si nuestras páginas se ven en un dispositivo más pequeño, entonces necesitamos este relleno extra. Pero si estamos en un dispositivo grande, uno que sea 768 píxeles o más ancho, entonces no necesitamos ningún relleno extra. Entonces tengo esta pequeña consulta de medios aquí mismo, solo para apagar la clavija del lado izquierdo, y todo lo que tenemos que hacer ahora es aplicar nuestro nuevo icono de usuario de clase. Entonces lo vamos a aplicar a una etiqueta, a la vista, pero ver el icono de un usuario de etiqueta. Guarda eso, vuelve al navegador, y ya me relacioné para que lo veas ahí ahora, y si cerramos eso, acércate a nuestra navegación responsive. Podemos decir que también está funcionando ahí dentro. ¿ Es esto lo que queremos? A continuación, es hora de agregar solo un poco de espacio para respirar a nuestro diseño. Las cosas se ven aplastadas, y ahora página web por el momento, y creo que si aplicamos algún espaciado a nuestra clase de filas, entonces esto se verá mucho mejor. Entonces un puntería, diré que probablemente sea demasiado. Ahora creo que eso es bueno. Entonces vamos a aplicar un objetivo de Head-Space a nuestras filas. Entonces en nuestro CSS, voy a, realmente no encaja en ninguna categoría agradable. Yo sólo lo voy a poner en la parte superior aquí, digamos punto. No me gusta ahí porque los está mezclando en los elementos HTML. Crear más espacio en el diseño, fila. Por lo que la mitad de un em. Guarda eso, vuelve al navegador. Recargar. No lo sé, dije que voy a hacer un em lleno, ¿no? Sí, creo que un em lleno será mejor. Uno em. Ahí vamos. Estoy mucho más feliz con eso. Está bien. Mira, estoy feliz de que estemos consiguiendo un poco más de espacio en nuestro layout. El navegación se ve mucho más bonito. Ahora es el momento de lidiar con nuestro pie de página, creo. Está flotando en el espacio ahí, no tiene un color de fondo. Es hora de arreglar eso ahora. Lo primero que voy a hacer es ajustar el estilo para nuestro cuerpo, ahí está. ¿ Qué estamos haciendo aquí? Estamos estableciendo un mínimo de altura a 100 vh. Vh es una unidad de altura vertical. Se trata de 100 de ellos lo que básicamente está diciendo que la altura mínima de nuestra página web será la altura de la pantalla de nuestro navegador. Entonces estamos configurando display para flexionarlos y para flex-dirección a columna. Todo esto es de ayuda para que nuestro pie de página se adhiera a la parte inferior de, no se pegue a la parte inferior de la página, no será pegajoso pero se colocará en la parte inferior de la página aunque el contenido de la página no sea suficiente para llenar todo el altura de nuestro navegador. Eso está todo bien y bien pero ahora necesitamos tener algo para nuestro pie de página. Pongámoslo aquí porque es un elemento HTML. Diremos “margin-top: auto”. Está bien. Veamos cómo funciona eso. Ahí vamos. Está siendo empujado, derribado al fondo. Está un poco demasiado cerca de la parte inferior ahora realmente y necesita su color de fondo y otro estilo también. Suena lo suficientemente grande, lo pondré un poco solo para estar por debajo de nuestro nav, estilo HTML, pie de página, si eso no es demasiado obvio. Además de darle un margen superior, he reducido el font-weight a 300 para que ese texto en la parte inferior se vea un poco más elegante. He introducido el color de fondo, una altura mínima de 100 pixel, acolchado un poco. He puesto el color a blanco y he añadido un poco de relleno a nuestros enlaces solo para que no se vea tan lleno, he insertado la parte inferior. He introducido un par de estilos, nuestro texto de marca y derechos de autor. Entonces nuestro texto de marca es esa cosita que dice “The Brand”, lo estoy haciendo bastante pesado. El derecho de autor es para el símbolo de los derechos de autor o el todo. En realidad texto de copyright, quiero que sea un poco más pequeño que el resto del mismo. En realidad tenemos que usar esto con éxito. Voy a tener que reorganizar un poco nuestro pie de página que es sólo para anidar estos tramos juntos. Así que así como eso. Podría simplemente poner todo el asunto en una línea ahí sólo para que podamos ver con bastante facilidad cómo se ve eso. Voy a guardar eso, volver al navegador. Yo lo he guardado. Ahora recargo y ahí está nuestro pie de página web. Eso es genial. Lo siguiente que quiero abordar es esta imagen, The Brand. Si nos ven asomando el otro día, sí desarrollamos nuestras herramientas. Los cerraré ahora. Se puede ver que tenemos esta imagen, The Brand, y siento que es un poco demasiado grande. No me interesa ese tamaño súper masivo de nuestro logo principal. Entonces sólo voy a poner una restricción al tamaño máximo de eso. Creo que donde se sienta como ahí, eso es bueno. Voy a inspeccionar eso otra vez. Puedo ver que eso es como 286 por 298 píxeles. Ahora vuelve al código y voy a bajar al fondo aquí. Creo que lo llamaré imagen de identificación. Tenemos identificación para eso porque sólo hay si va a ser uno de ellos, digo yo, max-width: 297px. Está bien. Sí, finalmente podemos deshacernos de este ancho 100 por ciento y decir, id es igual a “id-img”. ID es abreviatura de identidad ya que en esto está la identidad de marca. Volvamos al navegador, recarguemos, y ahí vamos. No es del todo un tamaño tan abrumador pero mira eso. Ahora quiere encontrarse con nuestra tabla de datos. Qué grande tiene que ser antes de que eso no suceda. Tengo curiosidad por eso. Sí, creo que eso servirá, 245 píxeles. Eso nos servirá bien. He hecho una recarga rápida ahí. Aquí está nuestra pequeña imagen de marca comportándose muy bien todo el camino. Fantástico. Ahora lo siguiente que queremos hacer es tener estos insumos bajo control. Hablo de estos tipos. Por el momento, se ven como un desastre absoluto. Ahora voy a tener que reorganizarlos un poco y voy a mover ese botón dentro del formulario con la entrada de texto. Eso no es lo más grande del mundo porque no es realmente, como dije, con la forma cada vez que someto ese formulario. Pero por el bien de evitar poner mucho estilo muy específico en ese botón luego apagarlo en la línea, aprovecharé los estilos definidos libres en nuestra forma. También voy a añadir algunos estilos para que ese botón sea un poco menos bruto y para que coincida con el resto de nuestro diseño de todos modos con las esquinas redondeadas. Lo primero que voy a hacer es bajar de cabeza a la forma. Yo tampoco creo que queramos este grupo de formulario. Voy a poner eso ahí, debería entrar aquí. Estos tipos vuelven un poco. Ese es uno de mis mejores. Ese es el final de una fila. Veamos cómo nos vemos ahora. Terrible. Probablemente necesitamos hacer esto un poco más grande. Ahí vamos, ahora está funcionando. Ya nos vemos mejor. ¿ Qué pasa cuando aplastamos esto? Sí, eso es bueno, todavía bueno, y días felices. Eso es un poco irregular. Los anchos de esas cosas, pero lo resolveremos en un momento. Ahora necesitamos agregar un poco de estilo solo para que nuestras entradas se vean un poco más bonitas. ¿Qué tenemos aquí? Tanto para entrada como para botón, estamos configurando el margen a auto. Estamos ajustando el radio del borde a 25 píxeles lo que les dará un bonito borde redondo en cualquiera de los extremos, y el relleno a cinco píxeles para darles un poco de espacio dentro de la entrada. Además, estamos configurando nuestras sombras de caja a ninguna dándoles un bonito borde gris claro muy fino, y ajustando el ancho al 100 por ciento para que ocupen el espacio disponible. Por último, he hecho una regla de ID de botón add form donde tenemos el borde establecido a cero con 100 por ciento, sin imagen de fondo, color de fondo que es un color azulado más claro, verde. Entonces por fin tenemos texto blanco. Voy a seguir adelante y aplicar eso al botón. Recargar, y nuestros insumos se ven mucho más bonitos ahora. Ahora falta una cosa, que es esta lupa de aquí. Queremos que se siente dentro de las entradas de texto. Como puedes ver, no está ahí, así que mejor vayamos y hagamos eso ahora. Una cosa que voy a hacer es agregar esta regla de estilo CSS grande y peluda llamada control de búsqueda. Básicamente lo que hace es un montón de cosas para posicionar esa lupa dentro de la entrada de texto. Lo que tenemos que hacer antes de que eso funcione es en realidad agregar un pequeño icono a esto por los iconos del material de formulario, y luego buscar el control. Eso no ha funcionado en absoluto. ¿ Guardé el CSS? No. Claramente, no estoy calificado para conducir más de una ventana de editor a la vez. Recargar. Ahí vamos. Por último. Si no cubro eso, voy a arreglarlo. Lo que estoy haciendo es que estoy haciendo un inicio de una pista de herramienta, color ajustado a dadadada. Ahí vamos. Eso se ve un poco mejor. Usaré eso en nuestro pequeño ícono de búsqueda, sugerencia de herramienta, echa un vistazo en el navegador. Genial. Ahora es el color correcto. Por lo que nuestros insumos esta vez se ven mucho mejor. Simplemente comprobando el pequeño ícono de búsqueda se está comportando, y está en todo. Fantástico. Ahora lo siguiente que falta es bastante sencillo, sólo un pequeño borde, una pequeña línea corriendo debajo de los encabezados de nuestra tabla de datos. Queremos algo de separación en una línea debajo de Nombre, Impresiones, Respuestas, y Conversión. conseguimos en territorio de tabla de datos ahora así que marcaré eso, y he creado un estilo llamado lo border, que tiene un poco de relleno y un borde en la parte inferior que es sólo otro gris claro. Para usar eso, lo voy a meter aquí abajo. clase Div es igual a col md 11 y lo border, y eso solo puede ser un div vacío. Fantástico. Hay una línea que separa nuestros encabezados de columna de nuestros datos de columna. Ahora lo siguiente que necesitamos buscar son estos iconos por aquí. Se ven no del todo bien. Se supone que están escondidos. Se supone que este pequeño punto-punto es una indicación de que hay más iconos para ver como mencioné antes en la clase. Por lo que será mejor que sigamos con escondernos y mostrando estos iconos. Lo que he hecho es que he agregado algunos estilos más que se relacionarán con estos iconos y les voy a llamar herramientas de administración. El primero que hacemos es agregarles un poco de color y establecer display a ninguno, que es decir los ocultamos, pero cuando estamos flotando sobre algo llamado fila de datos y nuestra herramienta de administración se va a convertir en bloque de visualización en línea. Esta es una forma de decir que estas cosas están escondidas hasta que se cierren sobre ellas, luego se las mostramos. No obstante, tenemos esta pequeña pista que tres pequeños puntos horizontales que están ahí para decirnos que hay más por ver, pero cuando pasamos por encima de nuestra línea, queremos que eso se oculte, por lo que ponemos display a ninguno. Entonces por fin establecemos algunos colores alternativos para nuestros iconos de herramientas de administración, un gris más claro y luego un gris más oscuro cuando pasamos sobre ellos. Antes de hacer algo más, tendremos que poner en acción estas cosas asignando realmente estas clases a nuestros iconos, entonces lo que vamos a tener nuestra herramienta de administración. Haré uno a uno para empezar, solo para asegurarme de que todo esté funcionando y luego los trabajaré para el resto de ellos. Esto va a ser una pista de herramientas, como nuestra lupa pequeña. Además, nuestra fila también debe ser una fila de datos para que podamos seleccionar con precisión nuestros iconos. Daremos esa alerta y miraremos, podemos ver ese pequeño conjunto de iconos desapareció y cuando vamos y pasamos por encima de ellos, podemos ver los otros íconos ahí. Aparecen y un poco más de ícono ha desaparecido. Ahí vamos. Esto es lo que queremos. Por lo que rápidamente aplicaré eso al resto de nuestras filas de datos. Por último, estoy seguro de que ahora va a funcionar. Fantástico. Si aplastamos esto, ¿seguimos trabajando? Sí. Ahí vamos. Estamos prácticamente terminados con nuestro estilo personalizado para la página. Si aún no lo has hecho, por favor haz publicar tu proyecto en la galería de proyectos. Me encantaría verlo como siempre y apuesto todos los demás involucrados en la clase les encantaría verlo también. Es una gran oportunidad para comparar notas, obtener comentarios y obtener ayuda si la necesitas. Tengo muchas ganas de ver en qué has estado trabajando. 15. Revisión de la clase.: Entonces hemos llegado al final de la clase. Ha sido súper divertido para mí y espero que lo hayan disfrutado y lo hayan encontrado realmente útil también. Durante esta clase, hemos cubierto lo que es Bootstrap, cómo incluirlo en una página web regular, cómo funcionan los contenedores de navegación, filas y columnas de Bootstrap , cómo podemos combinar esos componentes juntos para crear un página web. Ahora si aún no lo has hecho, por favor no olvides publicar tu proyecto. Se puede obtener retroalimentación al respecto y realmente no puedo esperar a verlo. Recuerda también, siempre estoy disponible para ayudar; si te encuentras con algún problema, solo avísame. Una vez más, realmente espero que hayas disfrutado la clase y espero verte de nuevo en el futuro.