Como hacer un menú con Bootstrap 5 para tu sitio web
HTML-код
- Опубликовано: 27 сен 2021
- Hola Tecnoemprendedores bienvenidos en este nuevo video vamos a aprender como incorporar un menu responsivo a nuestra pagina web, que sea adaptable a dispositivos móviles, para esto usaremos Bootstrap 5.
🟢 NUEVO GRUPO DE TELEGRAM: t.me/joinchat/OETaya7uYF8wNjhh
Pagina de Bootstrap: getbootstrap.com/
Crear slider con bootstrap: • 💻Crear slider o carrus...
🔴🎁 𝘼𝙮𝙪𝙙𝙖 𝙖𝙡 𝙘𝙖𝙣𝙖𝙡 desde paypal: bit.ly/TE-Donaciones
🔴🎁 𝘼𝙮𝙪𝙙𝙖 𝙖𝙡 𝙘𝙖𝙣𝙖𝙡 desde MercadoPago: ceneka.net/tecnoemprendedores
En este video aprenderemos a:
👉Instalar bootstrap 5
👉Agregar menu responsive a nuestra web
👉Personalizar el navbar de bootstrap
Seguinos en nuestras redes
❤️Facebook: / tecno-emprendedores-34...
💙Twitter: / tecnoemprended1
💜 Instagram: / tecnoemprendedores
#bootstrap #diseño #navbar
🟢 NUEVO GRUPO DE TELEGRAM: t.me/joinchat/OETaya7uYF8wNjhh
🟢 Crear pagina web con CHAT GPT: ruclips.net/video/6-9Q5FfT_pk/видео.html
🔴🎁 𝘼𝙮𝙪𝙙𝙖 𝙖𝙡 𝙘𝙖𝙣𝙖𝙡 desde paypal: bit.ly/TE-Donaciones
🔴🎁 𝘼𝙮𝙪𝙙𝙖 𝙖𝙡 𝙘𝙖𝙣𝙖𝙡 desde MercadoPago: ceneka.net/tecnoemprendedores
Hola che, me salvaste el día, el curso de programación, mi portafolio, TODO. Al fin pude hacer un menú con Bootstrap. Ahora sólo me queda utilizar el responsive en lo restante de la página pero esto es un paso importante. Gracias❤❤
Me alegro mucho! te esperamos pronto por el canal
Holaaaa como estas? Estoy en tu lugar ahora y no sé cómo empezar con el portfolio
El mejor tutorial, sin tanto enredo, directo al punto.
Gracias Ricardo
Excelente, da gusto ver tutoriales como este.
Gracias Jose, saludos
Excelente contenido edutuber me encanto el video🎥 gracias por compartir 👌
Gracias y saludos
Hola compa, me sirvio bastante el video, se puede profundizar o recalcar mas algunas cosas pero esta re bien, like, suscribo y tdod, gracias
Buen video, excelente explicación. Muchas gracias 👍👍
Gracias por comentar
Gracias, esto ha sido de gran utilidad 👍
Gracias a ti!
Muy bueno el tutorial!! Muchas gracias!!!!
Gracias por comentar
Crack, corto y muy claro!
Gracias
Excelente papa..... sos un capo.... gracias y saludos.
Gracias a ti Cesar!
it worked! thank you so much!!
Excelente! Muchas gracias
Gracias por comentar
Buena intro! gracias por la info
Gracias!
That was great. Thank you.
Gracias por comentar
Aqui apoyando, los amigos del washap 👍
GRACIAS hno! un abrazo
Mas videos asi porfa , dejo like y sub
gracias por el sub, ya estoy preparando mas videos , estate atento pronto
@@TecnoCodigo Muchas gracias :D
Lo bueno seria que expliques como aplicarle estilos propios (no de bs) a un elemento de bs
Ok voy a preparar un video con ese tema , gracias por el aporte
una ayuda es para una tarea, como podría ajustar este menú para que sea vertical y desplegable?
Hola! Una consulta, mi navbar funciona perfecto con el menú hamburguesa y todo pero quiero los items estén a la derecha, ya probé con la clase ml-auto pero no funcionó y no encontré otra forma de solucionarlo desde las clases de bootstrap 🤔 sabrás como hacerlo? Muy bueno el vídeo 👍 Saludos!!
hola Macarena, si lo que puedes hacer es en tu propia hoja de estilos sobreescribes la clase de bootstrap llamada . sidebar , y le pones rigth: 0 ; left: auto
Buenas como hiciste para k salga el logo a mi no me sale porfavor gracias
una consulta ,al tener un menu de hamburguesa con bootstrap 5 ,tengo el siguiente problema ,en pantallas chicas se muestra y todo pero al clickear fuera de el (contenido de la página) no se cierra automaticamente ,como le hago para que al pinchar afuera se cierre?
Hola Cristian, hasta donde se se puede hacer pero usando javascript
Hola Amigo, Excelente video, podrías compartir el código ??
Me encantó el video!!!! Muchísimas gracias!!!! :D Solo tengo un problemita, no me funciona el link del dropdown. Los href de la lista del submenú sí, el href del dropdown de la lista del menú no :( saben por qué será??
Hola, no sé si ya lo solucionaste, pero te dire la solución.
Sucede que en Bootstrap 5 se cambio el uso de los atributos data-*, lo que debes haer, es dentro del menú que copias y pegas, a todos los data-* agregale el -bs, es decir, si tienes data-toggle ahora lo debes poner como data-bs-toggle, y así con los demás 😁😁 saludos!
Hola dentro de productos esta el submenu, como se podria agregar un subsubmenu ? en limpieza que tenga adentro otro menu
hola, puedes ir anidando , deberis insertar otra etiqueta que contenga la clase dropdown dentro del submenu nuevo
Hola! Una consulta, después de poner la referencia .HTML, cómo hago para colocar la página que quiero que aparezca?
en los elementos a, encontraras un atributo href, ahi debes colocar la pagina con la que quieres vincular el link, te dejo un video donde explico mas sobre enlaces: ruclips.net/video/aJ2sBr9OWMc/видео.html
Tengo una sección en mi página que está en el body y hace la función de un navbar pero es una lista de imágenes como haría?
puedes hacer asi...
Tengo una duda, a la hora de hacer responsivo para movil al momento de darle click al boton para abrir el menu no hace la accion de desplegar las opciones tengo ese problema
pudiste resolver ese problema ?
Una pregunta, yo utilizo Bloc de Notas para hacer mi pagina (no se si tenga algo que ver), queria saber como publicar la pagina web o si directamente se publica.
Hola , si se puede publicar, te dejo dos videos que te van a servir para publicar un sitio
ruclips.net/video/v9DvgfB47d8/видео.html
ruclips.net/video/7W6-jSOFMgM/видео.html
@@TecnoCodigo Muchas gracias amigo, eso era lo que me faltaba
Hola como andas?? Muy bueno el video, pero se puede además lograr que cuando se scrollee el NavBar cambie de color?
Si se puede, peor es complicado podrias usar JS
buen video amigo. puse un logo que hice con Canva pero el menu se hizo muy grande . sabes como cambiar el tamaño del menu, osea el navbar ?
seria mejor si la imagen del logo es mas pequeña para que no quede tan grande, quizas eso ayude
Hola genio, una consulta, cuando achicas la pantalla y todo el menu se va al boton desplegable, cuando despliega, aparece todo a la izquierda abajo de la foto, hay alguna manera de que lo haga abajo del boton desplegable? Muchas gracias !!
Hola Alexis, perdon la demora, si se puede , en tu hoja de estilo tienes que crear una clase, que pise la clase por defecto de bootstrap, la clase se llama: .navbar-nav y dentro debes colocar: align-items: flex-end; , osea te quedaria asi: .navbar-nav {align-items: flex-end;}
Y otra cosa recuerda que la hoja de estilos tuya debe estar importada por debajo de la hoja de estilos de bootstrap, espero te sirva, saludos
@@TecnoCodigo GRACIAS !
Hola amigo, sabes que en la parte del menú desplegable no me aparecen las opciones para abajo, eso se debe a que?
le agregaste la parte del codigo de JavaScript?
Hola, buen video, cuando lo intente poner en mi codigo fue que cuando cambio a modo celular o una pantalla chica, las tres rayas que se forman al lado derecho se salio de la pantalla quedando solo la mitad a la vista, si me puedes ayudar con eso. Gracias
Puedes unirte al grupo de telegram o enviar los archivos al mail tecnoemprendedoresyt@gmail.com y vemos que puede ser
Holaa, una consulta.
Veo que en el video, el sitio automaticmente se hizo responsive al primer momento que copiaste y pegaste el link del navbar.
A mi no me pasa eso. Me aparece el navbar pero al achicar la ventana no se muestra responsive :(
Asegurate de tener agregado también el enlace al archivo del javascript que va al final de la pagina
Hola estimado. Es increible como esta libreria te simplifica todo. Te ahorra choclos de codigo de CSS. Me viene bien por que tengo que armar para mi universidad una pagina web que es como la tesis final, en este caso de servicios y no sabia por donde empezar. Tenes otro video donde armes algun proyecto mas completo o que me puedas recomendar? Muy buen laburo, te ganaste otro suscriptor!
Gracias Diego , no tengo videos de proyectos completos, pero quizás estás plantillas te sirven , están basadas en bootstrap y son gratuitas
bootstrapmade.com/
@@TecnoCodigo mil gracias!!!
No se si sea solo yo pero a la hora de poner todo el codigo como el la barra desplegable no funciona alguna solucion
recorda agregar las lineas de codigo del javascrip, sino no funciona
Buenas, hoy estuve tratando de hacer un menu hamburguesa con CSS y la verdad no pude hacerlo. Sin embargo sé CSS para hacer cosas más fáciles, ahora una pregunta, es realmente necesario saber estas cosas, como el menu hamburguesa o un menu despeglable? si hay frameworks como bootstrap que lo hacen por su cuenta?
Hola Mariano , yo trabajo como desarrollador hace 4 años , y en la mayoría de los proyectos usamos frameworks o librerías que ya resuelven esas cuestiones como el menú. Sin embargo si tu idea es ser un crack del frontend te lo recomiendo
@@TecnoCodigo Gracias por responder!! Seguimos en la lucha entonces.
Hacerlo d forma vertical
tecno una pregunta, hice lo mismo pero cuando voy a otra PAGINA del sitio web no se abre la hamburguesa. que puede estar pasando?
esa otra pagina también tiene que tener el código del javascript para que funcione
@@TecnoCodigo ME PUEDES PASAR EL CODIGO
Hola amigo tengo un código pero al momento de presionar el menú de las 3 líneas no se despliega :c estoy re frustrado y he probado todo y nada
no te olvides de agregar el codigo del javascript que va al final del body
@@TecnoCodigo efectivamente era eso mi bro, muchas gracias por tomarte el tiempo de responder. Ganas nuevo sub y mg a tu video
Puedes pasarme el código de las 3 Líneas?:(
Ocupó ese código en mi navbar
@@carlosmiguel8848 te lo envío a tu correo?
Hola! una duda, cuando pongo la imagen para el logo el primer item se baja, sabes como se arregla? Gracias por la ayuda!!
hola, chequea q la imagen del logo no sea demasiado ancha
I’m trying
pasen el codigo escrito plis
Pronto comenzare a subirlos
Podrías compartir el código?
pronto voy a hacer un repo con todos estos codigos
Que groso, nada de vueltas y bien explicado
Muchas gracias Kevin!
jajajaja pero sin copy paste :(