Menu

Curso de Bootstrap

Lecciones del Curso Gratuito

Introducción

Hola bienvenido el curso de bootstrap en este curso vamos a aprender completamente de cero este framework de css el framework más popular de css de hecho antes de empezar vamos a tener unas cuantas consideraciones este curso está hecho para personas que no tienen ningún conocimiento previo de algunas versiones antiguas de bus trap es decir han escuchado mucho del framework pero no saben de qué va entonces este este curso es perfecto para esas personas que quieren empezar desde cero con el framework los únicos requerimientos que voy a tener para ti en este caso van a ser que ya conozcas html básico y css básico si ya dominan estas dos tecnologías o estos dos lenguajes para crear sitios web será muy sencillo entender este curso ahora buscar también tiene unas cuantas funcionalidades de javascript pero no es necesario que conozcas javascript digamos a detalle con que conozco es algo muy básico te va a servir entonces con estas consideraciones empecemos primero que es buscar a bus trap como te decía es el framework más popular de css el framework más popular de front end es decir te ayuda a crear sitios web aplicaciones web.

Instalación de Bootstrap

Ya hemos conocido algo superficial de bootstrap y ya tenemos una idea de qué es pero aún no sabemos cómo utilizarlo así que vamos a preparar nuestras herramientas y nuestro entorno para empezar a trabajar con buscar la primera opción es descargarlo así que vamos a ir a su página oficial en get bustra puntocom y vamos a esta sección donde dice download de hecho tan sólo vamos a dar un clic en este botón y me redirecciona a la página oficial de bustra de hecho aquí vamos a ver unas cuantas opciones que buscan en su documentación oficial ya que esta es la documentación donde vas a poder obtener ayuda en caso tengas algunas dudas o el caso haya alguna actualización pero en este caso vamos a hablar de cómo descargarlo y en su propia documentación nos comentan las formas la forma más común es utilizando un css javascript compilado esto quiere decir que vamos a descargar los archivos y vamos a subirlo junto con nuestros html y poder utilizarlos la otra opción es descargar los archivos fuente esto es muy similar a la primera opción en la que vamos a descargar los archivos esta segunda opción también vamos a descargar los archivos pero vamos a descargar cómo ha sido desarrollado booster vamos a descargar el code y que han utilizado para desarrollar booster up y otras herramientas como por ejemplo lips as o rubí sas en realidad vamos a descargar todos estos proyectos si queremos tan solo cambiar los estilos por defectos o el comportamiento y características por defecto de bus trap eso sería algo ya mucho más adelantado que vamos a tocar también en el curso pero mucho más adelante vamos primero paso a paso la tercera opción es muy utilizada también y es de hecho la más fácil es utilizando un content delivery network cdn tan solo vamos a copiar estos enlaces lo vamos a pegar en nuestro html al igual que como lo haríamos con cualquier otro archivo de css javascript y vamos a tener booster dentro de nuestro proyecto así de sencillo la opción última o la cuarta opción es utilizando administradores de paquetes esto es muy similar a la segunda opción en la que descargamos todos los archivos fuente pero esto sería perfecto si trabajamos con entornos como programas en now 10 programas en rubí programación punto net o en php porque utilizan un administrador de paquetes de estos lenguajes de programación si ya conoces estos conceptos puedes utilizarlos pero si aún no los conoces tampoco es un problema.

Textos y Tipografías

En esta clase vamos a empezar a conocer las tipografías de bootstrap de hecho es una de las cosas más simples y de hecho vamos a empezar por aquí así que vamos a crear unos cuantos encabezados de html vamos a decir que un encabezado dice hola bus trap y si nosotros guardamos esto observa de que ya tiene un estilo por defecto y no solo para hola bus trap sino también podemos empezar a utilizarlo con otros tipos de encabezados como el h 2 y por ejemplo si nosotros guardamos esto observa de que ya tiene un estilo por defecto y podemos hacerlo para el resto de tipos de encabezados recuerda que son seis tipos de encabezados entonces vamos a tener para los seis tipos vamos a guardarlos y observa como ya hay estilos por defecto el hecho es de que nosotros sí queremos luego tener un párrafo el cual queremos darle un estilo similar a un encabezado de tipo 1 podemos utilizarlo con una clase de búsqueda entonces vamos a crear por ejemplo de nuevo un h6 y vamos a darle un digamos una línea vr de html vamos a guardarla para tener una línea invisible bueno de hecho no es un verde sino es un hr vamos a guardarlo y muy bien tenemos una línea y aquí tenemos un h 6 qué pasa si queremos hacer que esté hc y luzca como un h 1 muy simple vamos a darle una clase a la cual vamos a decirle h 1 y observa cómo está etc ahora luce como un h 1 y podemos hacer esta jugada para distintos tipos de encabezados o párrafos entonces puedo tener luego un h 5 que luzca como un h 6 o bueno que luzca como un h 2 por ejemplo y observa que este es un h 5 que luce como un h 2 y esto puedes utilizarlo para cualquier cosa de hecho para un párrafo como te mencionaba vamos a escribir un párrafo vamos a decir que tenga un texto por ejemplo vamos a colocarle un texto de ejemplo nada más y vamos a colocar le vamos a guardarlo sin una clase es un párrafo normal pero si le agregamos un h uno tiene un estilo de un h uno de un h cinco y así vamos a estar jugando con los estilos de bus trap de hecho ustedes pueden alterarlo como ustedes quieran de hecho pueden tener como les decía tener un h 41 h 3 un h 2 y un 81 y pues luego tan solo le pueden cambiar los estilos un h1 h2 h3 84 y un h 5 de esta manera observen cómo estamos jugando con los estilos predefinidos de las clases de booster así que de esta manera hemos empezado a utilizar los encabezados pero hay muchos más estilos para las tipografías.

Alineación de Textos

En esta clase vamos a aprender a utilizar los textos alineados como alinear los textos de hecho vamos a crear un párrafo y vamos a crear un texto dentro vamos a guardarlo y aquí lo vemos en pantalla es un texto vamos a agregarle una clase para justificar el texto porque como ves no está justificado así que vamos a decir class y vamos a decirle que este texto es decir el text guión justify vamos a guardarlo y observa que ahora ya tiene un estilo justificado ahora qué pasa si yo luego quiero tener un texto que es en línea a la derecha a la izquierda al centro pues muy sencillo vamos a agregar otro párrafo que diga por ejemplo hello world y este párrafo de hecho vamos a colocarla tres veces vamos a guardarlo aquí lo tenemos de hecho vamos a agregar una línea divisora con un hr y dentro del primer párrafo vamos a agregar lo siguiente vamos a crear una clase a la cual vamos a decirle text guión left para que sea línea a la izquierda luego vamos a crear otra clase en el segundo párrafo que se alinea al centro text guión centre y como ves se colocan el centro mientras que el otro por defecto ya está a la izquierda así que como que no tiene mucha notoriedad pero vamos a agregar el último texto guión right vamos a abordarlo y observa que se coloca a la derecha entonces de esta manera podemos alinear los textos ahora qué pasa luego si nosotros queremos tener distintos textos que se adapten de acuerdo al tamaño de pantalla.

Floats y Posiciones Fijas

En esta clase vamos a aprender de los elementos flotantes y las posiciones fijas vamos a crear unos cuantos días el primer día por ejemplo vamos a decir que tenga un texto hello y los días por defecto son elementos en bloque entonces uno está debajo del otro lo que vamos a hacer es de que vamos a hacer que el primer día flote de la izquierda entonces vamos a decirle float una clase de bustra para que flote se la izquierda y lo podemos comprobar porque el segundo elemento está justo al lado es debido a que el primero está flotando de hecho al segundo le puedo decir que no flote flote no pero no pasa nada vamos a decirle que flote sea la derecha y como ves se va hacia la derecha mientras que el tercero le puedo agregar la clase por defecto float nombre y como ves es exactamente lo mismo ahora lo que hacemos es poder digamos tratar de definir las digamos cómo queremos que flote los elementos pero vamos a agregar algo más por ejemplo vamos a crear unos cuantos br aquí debajo unos cuantos brett unos cuantos retornos de carro lo que vamos a hacer aquí es colocar unos cuantos dif el primero que contenga una especie de digamos texto que diga a hello the world hoy vamos a crear la world nada más y vamos a hacer que flote y de acuerdo al tamaño de pantalla es decir el primero le decimos flota hacia la derecha pero antes decirle que flote la derecha vamos a darle el tamaño de pantalla es decir que si es un tamaño pequeño sm small que flote hacia la derecha y de hecho vamos a colocarlo de esta manera para que puedas verlo todo en una sola línea si es pequeño que fue la de la derecha si es mediano que flote es de la derecha pero como no es mediano es de tamaño de pantalla pues como ves está hacia la izquierda pero si nosotros ensanchamos un poco la pantalla de hecho vamos a hacer lo que se quede por ejemplo de esta manera en tamaño pequeño el primero tan sólo esa desde la derecha en tamaño mediano también se coloca el segundo hacia la derecha pero si no pues vuelve a la izquierda y muy bien vamos a hacer lo mismo para también en otros tamaños de pantalla porque al igual como lo ya habíamos conocido también tenemos el tamaño a parte del mediano el largo el arq o el grande en realidad y vamos a decirle que el otro tamaño es extra large o extra grande y vamos a comprobarlo en tamaño pequeño tan sólo el primero va hacia la derecha y en tamaño en tamaño mediano el segundo en tamaño grande el tercero y en extra large o en tamaño grande pues observa que también el cuarto muy bien y de esta manera pues también vamos a jugar con las orientaciones hacia la izquierda y al centro.

Colores de Texto y Fondos

En bootstrap tenemos disponible una serie de colores por defectos que son colores que vienen ya por defecto en el tema de búsqueda que nosotros podemos cambiar pero primero vamos a conocer los colores por defecto que tenemos accesibles estos colores sirven para poder utilizarlo en cualquier etiqueta html etiquetas p encabezados cualquier etiqueta que se te venga a la mente de hecho vamos a comprobar primero con los párrafos por ejemplo vamos a agregar un párrafo un laurent y vamos a ver colocar una clase dentro de este párrafo pero específicamente vamos a utilizar un color para los textos entonces vamos a decirle text guión y vamos a decirle que queremos un color azul pero en bus trap él tiene una serie de digamos en nombres clave para cada color por ejemplo podemos colocarle un color azul con colocándole texto primer y la clase texto en primer y también podemos colocarle text guión success para tener un color verde text guión info para tener un color amarillo bueno un color azul medio tenue el color amarillo es en realidad warning también podemos colocarle un color rojo con danger y observa como tenemos una serie de colores ya predefinidos de hecho también tenemos otro color llamado dark otro tipo de color que es un tema oscuro como lo ves y también text guión white para tener un color blanco pero como ves aquí no se no se ve no se ve el color aunque aquí lo tenemos como lo podría haber bueno colocándole un background de otro color por suerte también podemos colocarle digamos colores de fondo utilizando una clase también de bustra llamada vejez entonces vamos a decirle background o vejez guión y el color que queremos y podemos utilizar las mismas combinaciones que hemos aprendido de g prime ar y bg success vejez info vamos a ver colocarle un color como es blanco vamos a colocar un color oscuro vejez guión dar es decir igual que la anterior y observa como tenemos un fondo oscuro y el color blanco de hecho vamos a conocer de muy bien estos colores de background así que vamos a tratar de agregar otro p sobre etiqueta p en la cual contenga de hecho vamos a crear un día sería mucho mejor vamos a ver un hr luego un dip en ticket a día y vamos a agregarle adentro vamos a agregar también un loren pero cada dif vamos a hacer que tenga un color digamos por defecto por ejemplo vamos a decirle que este pg o background este día va a ser un color prime ari y de hecho vamos a colocarlo todo en una sola línea porque de esa manera se entiende un poco mejor y exactamente lo mismo vamos a hacer para los distintos colores entonces de esta manera pues tenemos en una sola línea del color bg prime air y observa que al igual como fue con el background dark vamos a guardarlo vamos a bajar y tenemos ahora una especie de color azul de hecho podemos cambiar el texto al igual que como lo hicimos anteriormente detection white y tenemos un fondo con un fondo azul con color blanco de los textos y podemos probar como te decía las distintas combinaciones de ge info para tener un color amarillo bueno un color de nuevo azul tenue vamos a agregar un bg warning que es el color amarillo vamos a grabar un peje success para un color verde vamos a darle un vejete en jr y para un color rojo y vamos a agregarle el vegetal de hecho estos colores sirven muy bien para representar estados de nuestra aplicación.

Padding, Márgenes y Espaciados

En este vídeo vamos a estar aprendiendo de los espaciados en bootstrap éstos espaciados hacen referencias al padre y al margen de los elementos de hecho podemos agregarlos a cualquier elemento de html pero vamos a empezar a ver cómo funciona para empezar si tenemos un margen y un padding nosotros podemos alterar los con css pero bus terapia nos da unas clases pre creadas para poder utilizarlas y evitarnos este trabajo las principales de ellas podemos encontrarlas con la letra m para hacer referencia a los márgenes y la letra p para hacer referencia a los padding estas clases las vamos a combinar con otras más es decir vamos a combinarlas con otras clases llamada t para top b para botón o para abajo y mientras que la tele hace referencia de hacia arriba l de izquierda o left r d wright o derecha x para hacer referencia al eje de las x es decir vamos a poder agregar espaciado al eje de las x es decir a la izquierda y a la derecha al mismo tiempo y también vamos a poder agregar espaciado al eje de la aie es decir arriba y hacia abajo al mismo tiempo pero también vamos a poder combinarlos con digamos un espaciado por defecto que nos da a buscar esto digamos que podemos colocarle un elemento margen de 0 diciendo que es m 0 o podemos hacerle un para de 0 para decir que tiene un padding de 0 pero ya viene con unos espaciados por defectos esos espaciados ya vienen cuando nosotros descargamos booster si nosotros queremos alterar estos espaciados vamos a poder hacerlo desde los archivos de fuente o los archivos de origen pero la mayor parte del tiempo con lo que nos viene por defecto nos va a servir en la mayoría de casos por ahora al menos vamos a aprender de qué se tratan estas clases de una manera práctica vamos a crear por ejemplo una serie de h1 de hecho vamos a ir a nuestra nuestro html y vamos a crear una serie de h1 ahora nosotros vamos a crear una clase de nuestra llamada background success guión success y tenemos un background el h1 lo voy a agregar de esta manera para poder ver los espaciados de hecho vamos a comprarle unas cuantas veces tengo unos 6 h nos vamos a agregarle un espaciado observo que cada uno ya tiene una especie de margen pero vamos a empezar por conocer los en primero vamos a empezar a conocer los digamos el margen entonces vamos a decir m para decirle que es un margen luego vamos a decirle en la segunda clase para decirle hacia dónde lo quiero vamos a empezar con el margen top mt es como decirle martín top guión y la cantidad de espaciado que quiero supongamos que yo quiero un espaciado número 5 un margen número 5 observa que en la primera h 1 ahora tiene un margen número 5 vamos a agregarle también el segundo elemento un margen top de 4 y observa que el margen es un poco menor y de la misma manera vamos a agregarle para los otros elementos es decir un margen 3 un margen 2 es exactamente igual que ya viene un margen 1 y vamos a agregarle al último un margin top de 0 observa que ya a partir de aquí se queda con las mismas clases que vienen por defecto así que se ven y no se ven afectadas.

Tamaños de Anchos y Altos

En bootstrap tenemos una manera de agregar los anchos de los elementos y tener que alterar los con css vamos a conocer los anchos vamos a escribir un día que tenga un texto por ejemplo que diga with o ancho 25% si nosotros lo guardamos no tenemos nada del otro mundo tan solo un texto pero vamos a agregarle una clase bg stukes para tener un background verde y vamos a decirle que vamos a agregar un pad y un pelín guión 3 y observa que ella tiene un espaciado lo que vamos a hacer es agregarle también una clase que le permite definir el ancho de toda la pantalla es decir de esta pantalla yo quiero que ocupe tan sólo el 25% de ancho entonces le digo w guión 25 with 25 o with 25% yo quiero que algo agregar a la clase que ocupa tan sólo el 25 por ciento de hecho si nosotros agregamos otros div en realidad va a ocupar lo mismo pero recuerda de que los división en bloques por eso de que uno está debajo del otro ya habíamos conocido un poco de los elementos en línea pero vamos a conocer también el segundo div vamos a cambiar el ancho vamos a colocarle ahora un ancho del 50% y observa que este mide 50% al tercero vamos a colocar el 75% y al último vamos a colocarle del 100% para que ocupe el al 100% del ancho y de esta manera pues tenemos nuestros ranchos definidos de hecho no solamente tenemos los anchos porque también tenemos una manera de definir los altos pero para hacer eso vamos a primero luego del dif vamos a crear primero una especie de línea luego de la línea vamos a crear un día con una clase del eje success para tener un color y luego vamos a decirle que vamos a colocarle una línea pero aquí vamos a colocarle todo el espectro de decir dentro de este 10 vamos a colocar otros 10 más entonces vamos a decir dir y vamos a decirle elemento 1 y vamos a conectar una serie de elementos unos cuatro de nuevo vamos a guardarlo y no tenemos nada nuevo es un un tip que contiene 4 10 24 10 no tienen ninguna clase vamos a hacer lo siguiente es tvg success que está dentro del primer día que contiene a los otros vamos a agregarle una clase que le permita definir el ancho entonces para no escribir un estilo css por separado vamos a agregarle a través de la etiqueta state y vamos a decirle que va a tener un border de un píxel solid y vamos a decirle que va a tener un color pero para poder notarlo y además vamos a hacer lo siguiente vamos a agregarle un alto g de 300 píxeles vamos a guardarlo observa que ahora ya tiene este primer disc que contiene el resto tiene una especie de borde y también tiene un alto predefinido.

Breakpoints

En esta clase vamos a aprender los break points demostrar que es una manera en la cual buscar a partir de un tamaño de pantalla nosotros podemos cambiar los estilos css y esto lo podemos hacer a través de media cohetes de hecho para agregar un estilo por separado vamos a colocar dentro del heat una etiqueta style esta etiqueta está en accidente lo vamos a agregar unas cuantas media cuerdas de css digamos que el tamaño de pantalla el cual toma muestra el tamaño de pantalla mínimo es para los smartphones o para los smartphones de tamaño de un tamaño de pantalla muy pequeño vamos a agregar un estilo el cual vamos a decirle a través de un media query de hecho tan sólo en ratón escribimos media y el auto completa lo que vamos a hacer es colocar un min which un ancho mínimo y dentro vamos a colocarle de 576 en realidad este es el mínimo de pantalla pequeño industrial y adentro vamos a decirle que cuando sea este tamaño de pantalla vamos a director de un background de color otro sólo vamos a decirle un background rojo por ejemplo red vamos a guardarlo y observa que si vamos a nuestra pantalla vamos a ver lo rojo porque estamos en el tamaño de pantalla para mostrar pero vamos a copiar esta medida de cuadri de aquí y vamos a cambiar ahora el ancho para el tamaño de pantalla medio es decir cuando estamos en tablets entonces vamos a decirle que el ancho de pantalla será ahora de 768 píxeles y el color vamos a cambiarle a azul vamos a guardarlo vamos a seguir a nuestro navegador y seguimos en rojo porque estamos en el tamaño de pantalla en medio pero vamos a agregarlo ahora en el tamaño de pantalla perdón el tamaño de pantalla pequeño estamos en rojo el tamaño de pantalla medio es el azul y de esta manera estamos interactuando con los distintos tamaños de pantalla vamos ahora a agregar uno más vamos a agregar el tamaño de pantalla largo porque recuerden de que busto tiene estos cuatro tamaños de pantalla ya vamos tres este tercero tiene un tamaño de pantalla de 992 píxeles y vamos a colocarle un color verde vamos a guardarlo y para no repetir el proceso vamos a agregar el último que estamos tamaño de pantalla digamos extra grandes entonces vamos a decirle de 1200 píxeles y el color vamos a colocarle amarillo hielo entonces vamos a abordarlo y vamos a ir a nuestra pantalla cuando es el tamaño de pantalla pequeño rojo cuando es medio azul cuando es grande verde y cuando es extra grande amarillo de esta manera estamos interactuando con el 200 tamaños de pantalla industria ahora también podemos tener el proceso inverso el cual nosotros empezamos definiendo digamos vamos a eliminar estos estilos de aquí vamos a quedarnos no sólo con el primero y el primero vamos a decirle que es un año de pantalla de 1200 píxeles pero ya no vamos a decirle que es el mínimo sino que es por todo lo contrario el máximo entonces vamos a decirle cuando el tamaño de pantalla sea máximo 1200 y observa que ahora tenemos un color rojo predefinido vamos a guardarlo derecho y es exactamente lo mismo pero lo que vamos a hacer aquí es tratar de jugar con los otros estilos es decir vamos a colocarle también lo mismo vamos a poder tener lo que ya habíamos escrito previamente con los distintos tamaños de pantalla es decir el de 1200 el de 992 el de vamos a colocarle 768 y finalmente el de 575 y vamos a cambiar los colores entonces vamos a colocar el último hielo el anterior green y el segundo blue vamos a guardarlo y si vamos a nuestra pantalla estamos en el tamaño de pantalla de 575 o el tamaño de pantalla mínimo y observa de que estamos en verde vamos vamos a ver un poco menos y observa que estamos en amarillo porque estamos en este tamaño de pantalla vamos a ir al tamaño de pantalla de 768 estamos en verde al comas de digamos aumentándola 992 y finalmente el tamaño de pantalla grande el rojo y el derecho de esta manera vamos a estar interactuando con los distintos tamaños de pantalla.

Botones

En bootstrap 4 tenemos una manera de agregar estilos a nuestros botones y que combinen con los temas predefinidos de buster app y agregarlos es muy sencillo a través de clases css ya creadas con el framework de bus trap así que para entender de qué va vamos a crear unos cuantos botones de hecho voy a crear tan sólo un botón simple de html y lo único que voy a necesitar al menos para este ejemplo es colocarle un texto dentro para que tenga un texto de prueba por ejemplo lo puedo decir prueba guardo y es un botón sencillo aquí lo vemos ahora que tiene esto de especial bueno en realidad nada porque vamos a agregarle la clase de bus trabajo ahora si agregamos una clase llamada btn dentro de la clase de bus trap dentro este botón observa de que ahora el botón ha cambiado pero en realidad es un estilo que prepara digamos bustra para agregarle luego los colores estos colores lo que vamos a hacer es luego de agregar esta clase de tn vamos a agregar otra llamada vete en guión para emery por ejemplo si nosotros guardamos observa de que el botón ahora ha cambiado azul esto es debido a que buscar a pie tiene unos cuantos colores predefinidos es decir nosotros combinamos la clase de mtn con otra clase de mazda bt en spray mares para empezar a agregar colores y de hecho no son los únicos colores que hay porque hay múltiples colores en buscar cuatro de hecho vamos a copiar este botón y vamos a colocar el otro color llamado secondary que es si nosotros guardamos y vamos a nuestra aplicación verán que es un botón y gris y observen de que ya tienen efectos como hover por ejemplo el cual cuando me posiciono el digamos el magos encima del botón pues ya cambian de colores o de estados muy bien vamos a probar el resto de colores porque tenemos muchos de hecho y hay otro color verde llamado success y voy a escribirlos todos para explicarlo de una manera más rápida también voy a agregar otro botón llamado info también hay otro de color rojo llamado warning también hay otro color llamado danger que es para el color rojo bueno warning es color amarillo para decir advertencia danger es rojo para decir peligro el light es un color blanco y negro dar es un color más oscuro o quizás un color inverso vamos a verlos dentro de unos segundos un botón link que simula un enlace vamos a guardarlos y vamos a ir a nuestra interfaz y observa de que tenemos el botón prime ar y el secundario tenemos el botón success when el equino no ha grabado el estilo porque me equivocado que le colocado 13 tan sólo son 12 success y observa de que ahora es un color verde de sucs es un color info un color warning danger este color que es un light que es un color ligero por así decirlo un color dark oscuro y el color que simula un enlace llamado btn y un link de esta manera ya tenemos nuestros botones estos colores son los que ustedes pueden combinar con el resto de colores predefinidos de los temas de booster 4 pero vamos a empezar a conocer otros botones que también los de abós trap de hecho los botones con digamos que con estos colores simples no son la única manera de utilizarlos vamos a hacer lo siguiente vamos a agregar un hr y tenemos cuatro maneras de digamos a estilizar los botones en html porque uno es el botón como les mostraba uno es un botón pero también tenemos otros estilos es decir podemos utilizar otras etiquetas html por ejemplo en lugar de utilizar un botón podríamos utilizar una etiqueta por ejemplo vamos a decirle enlace y si nosotros vamos a nuestro html observen que es un enlace pero nosotros podemos utilizarlos para que se asemeje un botón entonces vamos a agregarle a este a esta etiqueta una clase llamada btn btn y podemos agregarle de hecho las clases que ya hemos creado previamente.

List groups, Badges y Breadcrumbs

Hola en este vídeo vamos a aprender otro de los componentes de bootstrap que son los leads group los leads group son tan sólo una manera de poder estilizar las listas propias de html pero para ello vamos a utilizar las clases de bus trap que vienen bien porque los estilicen de una manera bastante sencilla y que lucen bastante bien entonces vamos a utilizarlas para agregar una una lista o un list group vamos a colocar a un l una lista llamada con la clase li xiong group y dentro de cada libro cada lista tendrá el elemento de cada lista tendrá una clase llamada list group guión haití pnh de esta manera pues vamos a colocarle aquí por ejemplo tan sólo un lawrence gibson de 3 y de hecho vamos a guardarlo y ver qué es lo que obtenemos de este este punto observa de que estoy obteniendo una especie de y tengo aquí de hecho para verlo mejor vamos a agregarle una clase de bustra al cuerpo del digamos del html llamado container para tan solo centrar el contenido ya más adelante voy a explicar esto de la grid de bustra por ahora observa de que tenemos ahora una especie de ítem pero si nosotros agregamos otros ellis adentro de esta lista observa de que ya todos están estilizados y de esta manera sencilla pues ya estamos conociendo las list los leads group pero también tenemos otras funcionalidades voy a agregar un hr aquí para tener una línea separadora y vamos a conocer otro evento de los leads group que son básicamente también podemos no solamente podemos tener una lista de elementos l y sino también podemos tener o podemos utilizar las etiquetas a es decir podemos tener múltiples etiquetas a como si fuera una especie de lista de enlaces entonces aquí podríamos tener enlace 1 y recuerda que cada enlace o cada ítem de la lista pues tiene que empezar la lista con la clase ellis group una vez tengamos esto pues cada enlace también le podemos colocar la digamos la clase list group maitén pero si no le agregamos observa lo que pasa vamos a ir a nuestra aplicación y si nosotros agregamos más enlaces pues ninguno tiene una digamos un estilo predefinido pero nosotros podemos agregarles a todos estos enlaces una clase propia de bus tram exactamente igual como lo haríamos con los ley es decir list group y aún hay ten guardamos y observa de que ahora todos los enlaces tienen un estilo por defecto pero recuerda que son enlaces entonces también podemos utilizar los vamos a agregar otra línea separadora con hr y vamos a conocer ahora ya no solamente para estilizar los ítems y los enlaces sino también para estilizar a través de colores entonces debajo de este hr lo que vamos a hacer es crear una lista huele y vamos a colocarle la clase list group y dentro de esta clase list group vamos a probar los colores que podemos colocarle a cada item de esta lista por ejemplo de nuevo podemos intentarlo con las etiquetas a de hecho aquí vamos a colocarle en la c1 y como te decía nosotros necesitamos agregarles en la clase ellis group hay ten pero si nosotros agregamos tan sólo la clase pues nos va a colocar un color por defecto como ya lo habíamos visto previamente este color de aquí pero si nosotros queremos agregarle un color de background y nosotros poder tener digamos más colores de una manera sencilla pues podemos hacer lo siguiente copiamos esto de aquí y tan solo le agregamos una clase más para agregarle el color de fondo entonces nosotros podemos decir liszt group ay tent y el color que quiero por ejemplo al igual que como los botones podría agregarle el color prime ar y guardamos y si vemos nuestra en nuestro enlace observa de que ahora tiene un color azul.

Navegación

Hola en este vídeo vamos a aprender cómo utilizar las navegaciones de bootstrap las navegaciones es el componente más importante de toda aplicación porque es la manera en la que el usuario va a intercambiar entre las distintas rutas de nuestra aplicación así que vamos a aprender cómo utilizarlas con bus trap por lo general cuando escribimos una navegación utilizamos la etiqueta now dentro de la etiqueta now tenemos un mueble o una lista desordenada que está compuesta por un montón de ítems por ejemplo puede ser el ítem de home pero recuerda de que este ítem por lo general está enlazado o tiene un enlace entonces dentro vamos a colocar una etiqueta a entonces la etiqueta hazle que va a contener en el enlace bueno el nombre del enlace y aquí es donde vamos a utilizarlo porque podríamos tener múltiples enlaces por ejemplo uno para el home otro para el haba out y otro por ejemplo para el contacto y puedes tener muchos más podrían tener otros para el servicio por ejemplo entonces de esta manera pues tenemos una navegación ver si nosotros guardamos no luce nada bien porque eso no solo enlaces entonces vamos a utilizarlo con booster que ya tiene clases predefinidas y la clase más importante es que dentro de la etiqueta nada vamos a escribirle una clase llamada nadbank después de la etiqueta o la clase en add bar necesitamos decirme en qué tamaño de pantalla va a expandirse todos estos enlaces es decir vamos a tener una navegación con un ítem al lado del otro en el tamaño de pantalla medio ese es el tamaño de pantalla medio si lo ves entonces vamos a ver cómo agregar esa clase la clase se llama de hecho nada vaart guión expand guión md entonces es como decirle que en el tamaño de pantalla medio que se expanda y luego le agregamos el color hay una combinación de colores bastante simple por ejemplo podríamos decirle nadbank guión light y luego nadb art bueno pg guión light es como para decirle de que la navegación tendrá un color ligero y el color de fondo será un color ligero vamos a ver luego unos cuantos temas de la navegación y observa de que ahora tenemos una navegación con un fondo pero los sistemas no se ven nada bien deberían estar uno al lado del otro y es lo que vamos a hacer por ejemplo la navegación vamos a decirle al vélez que es el que contiene los ítems que vamos a agregar una clase nat vaart que es para decirle que es la navegación entonces decimos nada y a partir de allí pues le vamos a colocar dentro de cada ítem pues los el digamos que los las clases de hecho al al enlace no sino al cada elemento l y entonces vamos a decirle que por cada elemento de ley vamos a agregarle una clase que se llama map guión ítem entonces mientras en el eden de la senad barnow cada elemento tiene la clase united y si vemos en bootstrap observa de que ahora cada uno está al lado del otro pero porque se ven todos juntos bueno porque tenemos que separar también los enlaces entonces vamos a agregarle una clase a todas las etiquetas a también entonces a todas las etiquetas a también vamos a agregarle una clase llamada map link y de esta manera lo que vamos a obtener es que nuestros enlaces también estén estilizados en una especie de recuadros.

Alertas y Progress Bar

Cuando trabajamos con bootstrap él también nos proporciona una manera de crear alertas en realidad las alertas son importantes en nuestra aplicación cuando queremos resaltar algún mensaje que queremos darle al usuario quizás una operación que ha hecho y eso también lo podemos hacer con booster entonces vamos a crear una clase que tenga por ejemplo una clase alert y de hecho podemos agregarle un color pero primero vamos a ver dentro por ejemplo un mensaje entonces vamos a decir una etiqueta strong por ejemplo podríamos colocar y aquí por ejemplo podríamos colocar un mensaje si guardamos esto en realidad nosotros no vamos a obtener más que un simple mensaje sin estilo pero nosotros podemos darle un color entonces podemos decirle al leer guión de nier por ejemplo este es un mensaje de advertencia y observa como tiene un color rojo pero de hecho vamos a centrarlo entonces al bold y voy a crear una clase llamada container y observa que está solo un pequeño recuadro de color rojo y el mensaje en strong combina junto con el color del fondo entonces de hecho podemos agregar un pequeño texto entonces podemos colocarlo lawrence gibson y de hecho luego nosotros podríamos colocarle un enlace es decir podemos colocar una etiqueta que diga por ejemplo clic aquí es un error entonces le podemos decir que hagan clic allí pero observa de que el enlace no combina el color con el fondo entonces vamos a decirle que el enlace también tiene una clase entonces vamos a decirle class alert guión link si guardamos observa que ahora el enlace también tiene un color que combina con el fondo es bastante sencillo y de hecho no tenemos los únicos colores tenemos muchos colores así que nosotros podemos copiar esto es decir podemos copiar este de aquí y podemos empezar a colocar distintos tipos de colores por ejemplo al leer secondary que es para tener un color secundario un color medio gris también podemos colocar un color subsedes para tener un color verde también podríamos colocar un color por ejemplo warning para tener un color amarillo también podríamos tener un color info para un para dar información que es un texto color azul bastante tenue vamos a colocar también el color para el light es un color blanco un color ligero y un color dark que es un color oscuro es un color de color negro pero no es un negro intenso si no es un negro bastante tenue y observa que kristen los colores entonces agujero que ya todos combinan entonces es mucho más sencillo de utilizarlo de esta manera además también podemos crear otros digamos efectos no solamente eso podríamos colocar un h1 aquí adentro por ejemplo copio el dark y aquí dentro podría colocarlo por ejemplo un h3 y podría por ejemplo colocarle title y observa de que él ya combina todos los estilos entonces es bastante sencillo de utilizar.

Configuración Profesional

Hey coder bienvenidos a un vídeo en el que les voy a enseñar cómo empezar a tener un proyecto de bootstrap profesional configurado cuando desarrollo es un proyecto en busca por lo general tienes que empezar a convertir los archivos luego modificar los luego tener quizás un servidor de desarrollo para que te ayude a refrescarse el navegador por sí solo y todos estos son tareas que por lo general siempre vamos a utilizar cuando queramos un sitio web desde cero utilizando bus trap entonces es por eso que en este vídeo voy a enseñarles cómo tener un entorno de desarrollo profesional utilizando gal utilizando para hacer cine y las herramientas de no 10 como sas por ejemplo para que transforme el código y de esta manera poder tener lo siguiente por ejemplo aquí tenemos una plantilla de busto frante simple y esto es lo que vemos al final pero todo el código está escrito utilizando sas entonces nosotros luego podemos alterar digamos los estilos de sas y luego lo podemos ver reflejado automáticamente en el navegador y lo mismo con el html nosotros podemos ir escribiendo código de html y a medida que nosotros vamos a escribir por ejemplo el código también vamos a ir viendo las actualizaciones de esta manera es una manera bastante digamos más sencilla de poder ver el código y cómo funciona y cómo a poder ir creando nuestro sitio web utilizando voz será entonces vamos a crear todo este proyecto de configuración desde cero pero recuerda de que cuando estás utilizando una enorme cantidad de herramientas de bus trap vas a tener que conocer algunas más por ejemplo gal know 10 browser thing y si no tienes idea de cómo utilizarlas pues en este vídeo es el mejor esfuerzo para que puedas entenderlo y si tienes algún problema recuerda que esta es la para que puedas recibir ayuda entonces vamos a empezar a crear nuestro proyecto inicial de buster 4 profesional [Música] muy bien voy a empezar comentando de todas las herramientas que vamos a utilizar para tener un proyecto configurado de booster up obviamente la herramienta principal es usted mismo pero no vamos a descargarlo como un civil y luego extraer los archivos si no vamos a descargarlos a través de otras herramientas por lo general tenemos la opción de utilizar booster up de manera local eso quiere decir que vamos a tener que descargar los archivos y utilizarlo desde nuestro propio servidor cuando lo subamos en la otra manera es utilizando una cdn que sean solo copiando un enlace y al final nuestro html pedirá ese recurso a otro servidor entonces de manera básica podríamos decir que hay dos formas una en la que nosotros mismos costeamos los archivos y otra en la que están en otro servidor por separado por lo general es recomendable utilizar nuestros propios archivos de esa manera nosotros tenemos el control o si tú quieres velocidad también puedes utilizar cdn pero en este caso voy a tener un proyecto configurado utilizando archivos locales es decir vamos a descargar buscar pero no lo vamos a descargar de nuevo como un zip si no lo vamos a descargar con una herramienta llamada now 10 no es una manera de poder ejecutar javascript fuera del navegador realidad es mucho más pero lo que nos llevan hoy es el poder instalar paquetes.

Sitio Web desde cero

Hey conders bienvenidos a otro vídeo de fastweb puntocom yo soy fast y el día de hoy les traigo un vídeo en el cual les voy a enseñar cómo utilizar bootstrap 4 para desarrollar un sitio web real vamos a desarrollar el sitio web que ves aquí enfrente que está constituido por una navegación por una cabecera por una sección de un comentario de un usuario frecuente de nuestro sitio web por una sección de información por una segunda sección de información y finalmente por un formulario de contacto es un sitio web bastante sencillo pero nos va a ayudar a entender cómo funciona bus trap y también a desarrollar un sitio web real de hecho además de buscar también vamos a utilizar otras bibliotecas más por ejemplo si nosotros refrescamos nuestro sitio web vamos a poder ver animaciones que hacen lucir mejor a nuestro sitio web y todo esto lo vamos a configurar y vamos a tratar de escribir un poco de código de javascript para que funcione de la manera que has visto este es el resultado final aparte de esto también vamos a agregar un pequeño código de javascript que nos permite navegar entre distintas secciones sin que el contenido haga un cambio brusco por ejemplo esto quiero ir about y observa que el contenido se desliza de esta manera puedo navegar sin que el contenido se muestre de una manera brusca al usuario y todo esto lo vamos a desarrollar completamente desde cero te recomiendo que ya conozcas algo de booster app y de html y css así que si quieres desarrollar un sitio web real pues vamos a empezar [Música] [Aplausos] [Música] muy bien antes de empezar voy a comentarte que ya todo el código que vamos a escribir el día de hoy está subido en github github es un sitio web que te permite subir código y poder verlo incluso en el mismo sitio web para descargarlo tienes que entrar en este enlace que te voy a dejar en la descripción del vídeo y luego vas a tener que venir en este botón verde donde dice clonar o descargar aquí verás una opción que dice descargar sep y una vez que es un clic aquí para descargarte un silo descomprime y así de sencillo vas a descargar todo el proyecto en caso quieras ver el código si en caso quiere desarrollarlo tú mismo pues en dentro de unos segundos voy a mostrarte cómo hacerlo por ahora voy a comentarte también que todo el código está dentro una carpeta llamada src aquí está el html css y sobre todo las imágenes esto es importante para que tú coloques las mismas imágenes.

Sitio Web completo

Hey coders bienvenidos a otro vídeo de fastweb puntocom yo soy fast y el día de hoy les traigo un vídeo acerca de cómo crear un sitio web o un landing page utilizando buscar cuatro como framework de css para aquellas personas que ya conocen algo de buscar cuatro y quieren crear un proyecto práctico y quieren practicar con este framework pues he desarrollado este ejemplo para que puedan entender un poco más de cómo utilizar los elementos de búsqueda para crear un proyecto real esta es la página es una página que en la cual tenemos una navegación de bus trap tenemos una cabecera en donde podemos mostrar una especie de producto en este caso es un libro unos títulos un botón para leer más una sección de suscripción una sección de características del producto una sección de por qué este producto o una sección de acerca del producto y vamos a utilizar algunos elementos de búsqueda como por ejemplo un acordeón en donde puedes mostrar las preguntas frecuentes gracias a que ese tipo de elementos buscar ya nos lo da hechos aparte también podríamos tener la sección de equipo donde vamos a utilizar las tarjetas de bus trap junto con una biblioteca para colocar los iconos llamada font lo cual es bastante sencillo de utilizar finalmente vamos a tener un formulario y una sección de un fútbol donde vamos a poder colocar el copyright y también una manera de que nos puedan contactar todo esto es relacionado tan solo al diseño de buscar y cómo poder utilizar este framework para poder crear nuestros proyectos del front end así que si estás interesado en poder crear un sitio web completamente éste será utilizando booster 4 pues vamos a empezar [Música] antes de empezar con nuestro proyecto te voy a comentar que todo el código ya está subido en mi guía la razón de que lo he subido en give up es porque cualquier persona puede acceder a él y ver por ejemplo el código original ya terminado entonces si te interesa ver el código simplemente ven a este proyecto o este sitio web en donde vas a ver todo el proyecto subido incluso vas a ver un screenshot del proyecto terminado entonces si quieres ver el código aquí hay una carpeta llamada src das un clic y aquí estarán todos los archivos que vamos a crear desde cero el html los archivos css e incluso las imágenes por ejemplo si quieres ver el código del html de hace un clic y vas a ver todo el código terminado por si acaso tengas algún problema.