💜 Cómo Instalar BOOTSTRAP 5 en un proyecto [uso Visual Studio Code]
Вставка
- Опубліковано 8 вер 2024
- ¿Quieres aprender Bootstrap 5 de la mejor forma posible?
👇👇 ACCEDE al CURSO de BOOTSTRAP GRATIS
bit.ly/3gUx4bP
🎁 GUIA GRATIS: 5 Técnicas de ChatGPT para Desarrolladores 👉 crz.dev/tecnic...
📚 Recursos de programación 👉 crz.dev/sub
👨💻 Formación de IA para Desarrolladores:
crz.dev/ia-star
👨💻 Todos mis cursos gratis:
kiko.pro/cursos
📚 Puedes ver todos mis libros aquí:
kiko.pro/libros
📘 MI LIBRO "No todo es programar":
notodoesprogra...
🦊 100 Fábulas para Programadores
kiko.pro/100fa...
📙 Libro: Aprende HTML
kiko.pro/libro...
👁️ Puedes encontrar cosas más interesantes en:
kiko.pro/
🖱️ Si quieres ver el mi setup completo 👉 kiko.pro/setup
🎉 Continua la fiesta en mis otras redes sociales:
Discord: kiko.pro/discord
Instagram: kiko.pro/insta...
Twitter: kiko.pro/twitter
TikTok: kiko.pro/tiktok
GitHub: kiko.pro/github
kikopalomares....
Algunos de los enlaces son enlaces de afiliados, por lo que quizás reciba alguna pequeña comisión por compras a través de esos enlaces.
CURSO de BOOTSTRAP GRATIS 👉 bit.ly/3gUx4bP
IMPECABLE EL TUTORIAL, MUCHAS GRACIAS! Para los que recién empezamos en programación, cabe aclarar que en el minuto 0:31 cuando Kiko inicia el npm en la terminal, a ese npm primero hay que instalarlo en Visual Studio Code, yo tengo instalado dos: npm de Egamma y npm de Florian Knop.
de donde puedo descargar ese npm? ayuda por favor. el resto entendí toito, crack kiko
@@BABADECARACOL09 hola Hugo, en el mismo Visual Studio Code, tenes una sección en el lateral izquierdo, en la que descargas los plugins, abrís esa sección, buscas npm con la lupa y te aparecen varias opciones, yo tengo esos dos que mencioné. Si necesitas que sea más especifica avisame
@Ricardo Gonzales
1.- Entra a Visual Studio Code.
2.- Haz clic en el icono "Extensions" del menú lateral izquierdo
3.- En la barra del buscador escribe "NPM" + selecciona uno + instalar. listo.
@@fabianancardozo instale dos y me sale este error npm : El término 'npm' no se reconoce como nombre de un cmdlet, función, archivo de script o programa ejecutable. Compruebe si escribió correctamente el nombre o, si
incluyó una ruta de acceso, compruebe que dicha ruta es correcta e inténtelo de nuevo.
En línea: 1 Carácter: 1
+ npm init -y
+ ~~~
+ CategoryInfo : ObjectNotFound: (npm:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException
@@jaas.0404 a mi tambien me sale lo mismo y no se qué hacer
que vayas al punto y no des rodeos es lo mejor de tu estilo de enseñanza. Gracias.
muchas gracias tengo 12 y ya voy aprendiendo Boostrap
Muchas muchas gracias.
Había intentado instalar Boostrap descomprimiendo la carpeta zip de Boostrap y copiar las dos carpetas (CSS y JS) en mí archivo index, pero para probar si jalaba Boostrap ni si quiera cambiaba el h1 de "Hola estoy probado Boostrap" :(
Pero usando la instalación por terminal como lo hizo funcionó perfecto, gracias, esto me animará a empezar el curso de HTML y CSS desde cero con usted. :D!
me fascinó tus tutoriales, te sigo ahora mismo. ETERNAMENTE AGRADECIDO
genial!! bienvenido!! 😁
Gracias 👍🏻
Muchas gracias amigo, la verdad que me estas ayudando muchisimo en esto. saludos
5 minutos para convencerme a suscribirme, genial
Gracias Kiko.... Sigo atentamente todos los videos... 👌
ahí ahí! así me gusta!
buenisimo, instalé todo tal cual pero solo funcionó la parte con style.css y la parte con js intenté varias veces y nada, tal vez la proxima, saludos
Genial video como siempre...
muchas gracias! =D
Buenísimo video Kiko te agradezco mucho por haberlo subido y tengo una pregunta ¿por qué crear el package.json al principio? Todo lo demás lo entendí
gracias !!!! muchisimas gracias !!!!!
muchas gracias, muy bien explicado, tienes algun video donde expliques que es lo que se carga cuando instalamos bootstrap , por ejemplo node_modules para que sirve tendrás un video por favor
Que buen video. Muchas Gracias!!!! nuevo suscriptor
Vi que en otro video al inicar el proyecto utilizas npm init en vez de install, y tambien el js completo en vez del min, luego todo sigue igual en ambos casos, por qué?
Muchas gracias! Super claro y con buena dinamica en la didáctica!
El init es para crear el proyecto, una vez creado el proyecto o mejor dicho el package.json ya puedes usar el install. En cuanto a la diferencia entre el js min y no min, realmente los dos archivos son iguales, contienen el mismo codigo solo que el min esta minificado, es decir sin espacios o saltos de lineas para que el archivo ocupe menos y cargue más rapido, por eso para aplicaciones de producción siempre se recomienda usar los min
@@kikopalomares gracias por tan rápida respuesta!, ahora me quedó claro. Una pregunta mas: puedo a éste proyecto ahora instalarle angular encima, desde npm?
@@emanuelpanetta9027 sí que puedes claro
@@kikopalomares Muchas gracias de nuevo!
Genial!
Genioooo
GENIAL !!!!!!! Superútil, muchas gracias y un saludo desde Colombia bro
Muy bueno los videos
Muchas Gracias por el Video, me re sirvió! saludos
saludos desde colombia fiel seguidor, que buen contenido y como maestro super bueno, deberias estar en udemy o cualquier plataforma de pago tu conocimiento es validoso.
muchas gracias por tu comentario! Ya tengo mi propia academia de cursos! los puedes ver y acceder desde mi web: www.kikopalomares.com/
Un buen video saludos desde mexico
Gracias !
Buenardo.
Nuevo videooo :D
weeeee!!
bUEN VIDEO bRO
Hola Kiko, new sub
bienvenido!!
Una pregunta....... todos esos pasos los tienes que hacer siempre que empiezes un proyecto con Bootstrap?. Por cierto genial tu video. Un Saludo
pues sí... 😅 tampoco son tantos, y crear el proyecto, el package, el node_modules ten en cuenta que todo eso es para cualquier proyecto lleve bootstrap o cualquier otras librerías, que no son pasos que exclusivamente vayas a tener que hacer para bootstrap
@@kikopalomares No es por la cantidad, pensaba que algunos pasos no hacia falta repetirlos. muchas gracias por contestar. esperando ya el proximo video.
Que vídeo incrível, muito obrigado.
Hola Kiko!
necesito un concejo. Estoy creando un sitio web con python en VSC con boostrap5. me surge un problema con las imagenes, no las logro divisar en el sitio.
alguna sugerencia de que puedo estar haciendo mal.
rapido facil y sencillo, gracias
Hola Kiko, que tal? Mi duda es, al momento de subir un proyecto que utiliza bootstrap instalado con npm a un servidor. De todos los archivos que se generan, cuales tengo que subir? Se suben todos? Gracias por tus videos!
queria preguntar porque en live server se ve bien el proyecto,pero cuando lo abro el html desde la carpeta no se ven los estilos...gracias
¿qué importancia tiene inicializar con html5? y ¿qué hago si no me funciona el npm install bootstrap@next solo sin el @next?
bro , muy buen tutorial , muchas gracias
Seguí los pasos, pero no funciona el modal. ¿Cómo instalo el Popper JS, sin utilizar el CDN?
Este verano empezaré a hacer webs (como freelancer ), que me recomiendas para maquetarlas Grid o Flex?
Los dos combinados
Muy buen video, tengo una pregunta después de ejecutar la extensión live sass y de abrir el archivo styles.css no me aparecen las clases de bootstrap, solo me aparece lo siguiente: /* No CSS *//*# sourceMappingURL=styles.css.map */
comprueba en la terminal que no te esté saliendo ningún error
npm : El término 'npm' no se reconoce como nombre de un cmdlet, función, archivo de script o programa ejecutable. Compruebe si
escribió correctamente el nombre o, si incluyó una ruta de acceso, compruebe que dicha ruta es correcta e inténtelo de nuevo.
En línea: 1 Carácter: 1
+ npm init -y
+ ~~~
help?
chequea si tenes instalado npm en tu computadora
Muchas gracias por la explicación, pero tengo una duda. ¿Instalar Bootstrap de esta forma es como incluir toda la librería dentro del proyecto? Es decir, si comparto la carpeta del proyecto con alguien, ese alguien descargará todo y se almacenará de forma local en su equipo, a diferencia de si usara CDN, que sólo funcionaría con conexión a internet, ¿no?
efectivamente, tal y como has dicho
Muchas gracias por el video.
Me gustaría saber si también debemos vincular el popperjs?
Saludos de Colombia
yo creo que si porque hice un dropdown y no lo toma :C
una consulta cuando hago el cambio de archivo scss el live sass compiler no me crear los archivos css simplemente hago los cambios y no sucede nada ayuda por fa
Gracias, tengo una pregunta hice todo conforme al video pero cuando escrbo esto
no me autocompleta porque por favor si me puedes ayudar
muchas gracias
Genial video!! Cual es la diferencia de instalarlo de esta forma o de utilizar los cdn?
pues que desde el CDN no tienes los ficheros en tu proyecto, por lo que dependes de un servidor que no controlas, que pasa si borran el archivo de su servidor? o se cae? que tu web se va a la mi...
Si quisiera implementarlo con LARAVEL como seria?
coloco todo en bootstrap pero al momento de guardar el SCSS me indica que no encuentra el directorio del bootstrap.scss
Buen día.
Una vez instalado bootstrap de esta manera, cuando hago el deploy del website en netlify, el javascript no parece funcionar. ¿Habrá una razón para esto? Lo linkee en el script tag al final justo como en el video
muy buen video. A mi me creo el archivo y dice quue compila sin errores pero me aparece solo @import "//node_modules/bootstrap/scss/bootstrap.scss"; en el archivo .css tras compilar el scss no me sale todo el codigo bootstrap.
Excelente curso, me aparee este error cuando entro a styles.css /* No CSS *//*# sourceMappingURL=styles.css.map */ y no puedo resolverlo
Hola Max, tuve el mismo error, en consola me aparecía lo siguiente:
Error: File "c:
ode_modules\bootstrap\scss\bootstrap.scss" not found
on line 9 ...
En mi caso el archivo "bootstrap.scss" estaba en una carpeta 2 niveles arriba de donde había creado el "styles.scss".
Lo solucione haciendo un correcto uso de rutas de archivo:
"../" Subes 1 nivel.
"../../" Subes 2 niveles.
"./" Buscas en mismo nivel.
Al final quedo:
@import "../../node_modules/bootstrap/scss/bootstrap.scss";
Un saludo.
Por qué no me sale.
Ala hora de buscar la carpeta cuando importamos. @import ""
Yo le tengo que poner 2 puntos.. tu solo uno..
Y cuando me crea la carpeta.
Me marca más de 9 herrores.
Y aún que no tenga vinculada el link href: style.css..
Mis archivos mearca herrores en las etiquetas. Del HTML.
podrías explicar esto en sublime text 4? o como hago, no es lo mismo
me sale este error: npm : El término 'npm' no se reconoce como nombre de un cmdlet, función, archivo de script o programa ejecutable. Compruebe si
escribió correctamente el nombre o, si incluyó una ruta de acceso, compruebe que dicha ruta es correcta e inténtelo de nuevo.
En línea: 1 Carácter: 1
+ npm init -y
Sera que podrias enseñar otra forma como utilizarlo?
lo que no entiendo es porque en el momento de guardar el archivo sscc y que se compile para crear un nuevo css no se me crea, como puedo solucionar esto ? en el minuto 3:50 dices que has instalado algo mas, que es eso que has hecho para que se compile bien el archivo ?
Me ha pasado lo mismo
No me compila el archivo y no se me generan los archivos necesarios, si encontraran la solución y la pudieran compartir, se les agradecería muchisimo
Yo tengo un problema y es que al momento de coopilar me aparece un error en la linea 2278
"unknown property: 'color-adjust'" es el mensaje que me sale en el archibo style.css y no se como resolverlo, es para un proyecto de mi especialidad y ya no se que hacer☹
Una pregunta porque al agregar bootstrap a una pagina que ya estaba haciendo se me modifica toda la pagina y no puedo editarla?
Hola Kiko muy buenos tus videos me voy a suscribir. al instalar bootstrap , me da un error en la terminal y no me crea el archivo styles.css
el ultimo paso de javaScript no me funciona en la pagina sigo viedo lo mismo de antes y no me aparece el modal, sera js se tiene q instalar??
osea ni siquiera me hace el modal en la pag
hola, me dice que el termino rpm no se reconoce
al darle npm init -y me crea un archivo packaje.json pero no los node modulos, alguien sabe por que?
En el archivo Styles.css no me aparece la librería
Buenas! lindo video, una sola consulta cuando hago deploy a netlify por ejemplo con un proyecto hecho en bootstrap5 algunos comportamientos de componentes como slider x ejemplo no me funcionan :(
Método de la solicitud: GET
Código de estado: 404
Hay un error con el archivo bootstrap.min.js
Creo que es porque Netlify. o genera de nuevo el node _modules por lo que la librería de JS no está. Una opción sería copiar el archivo de uso en tu proyecto.
Hola Kiko, al seguir todos tus pasos y probar con un dropdown-menu, este no despliega el submenu, y en consola muestra este error Uncaught TypeError: i.createPopper is not a function, como lo puedo solucionar? muchas gracias!
en el script reemplace bootstrap.min.js por bootstrap.bundle.min.js y ahora funciona, pero será esta la solución?
A mi no me da :(( me sale el término npm no se reconoce
Amigo, haciendolo de esta manera no me descarga el popper. ¿Sabes que debo hacer?
1:18 cuando trato de instalarlo me sale:
+-- UNMET PEER DEPENDENCY @popperjs/core@^2.10.2
`-- bootstrap@5.1.3
npm WARN bootstrap@5.1.3 requires a peer of @popperjs/core@^2.10.2 but none was installed.
npm WARN BootstrapOtro@1.0.0 No description
npm WARN BootstrapOtro@1.0.0 No repository field.
Y no me crea exactamente las carpetas que salen en el video. Puedo seguir así o tengo que arreglar eso?
Has sabido como instalar bootstrap con npm? A mi me sale ese error y no se que hacer
al hacer compilar el sass me crea el styles.csss pero vacio
me he perdido no sé que has echo y de repente han aparecido más archivos css
alguien mas le paso al compilar main.scss "sass" no se reconoce como un comando interno o externo,
programa o archivo por lotes ejecutable. : ( (AYUDAAA
)
lo solucionaste ?para que des una mano por favor
no me sale lo de los comandos del bootstrap :(
las carpetas de css me aparecen vacias
npm init -y no me funciona
Con esto tengo el autocompletado de clases?? Saludos buen video !!
No, eso suelen ser extensiones del porpio VS Code ♥
@@moisesmiranda2818 genial !! me recomiendas alguna??
que es el package.json?
Cuando compilo el Watch sass me crea el styles.css vacio :c
246 like- Reportandose
Vernon completo
hablas y haces las cosas muy rápido como si solo estuvieras comentando