Тёмный

💜Cómo PERSONALIZAR los estilos CSS de Bootstrap 5 con SASS 😱 (PASO a PASO) 

Подписаться
Просмотров 44 тыс.
% 1 131

En este vídeo te enseñaremos a personalizar BOOTSTRAP 5 usando SASS, de una forma rápida y sencilla.
Bootstrap 5 nos facilita la personalización de sus colores, estilos, tamaños y espaciados proporcionándonos VARIABLES SASS, de tal manera que podemos obligar al framework a devolver el código CSS exacto que necesitamos. También aprenderás algo de SASS, el uso correcto de variables y muchas cosas más.
🔥 Si deseas dominar Bootstrap y crear mejores sitios web Responsive, te invito a visitar la escuela del Aulaideal:
www.aulaideal.com/categoria/bootstrap/
Si te gusta esta temática, te dejo aquí algunos vídeos más sobre ello:
🎥 Como DESCARGAR e INSTALAR BOOTSTRAP 5: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-rIEoF6B_GNY.html
🎥 Aprende a integrar 🔥BOOTSTRAP ICONS🔥: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-FIW0w58jpYI.html
**********************************
ÍNDICE DEL VIDEO::
✅00:00 ¿Qué aprenderemos hoy?.
✅00:20 La Intro.
✅00:27 Las variables SASS de Bootstrap 5.
✅02:08 ¿Qué es SASS?
✅04:20 Descargando Bootstrap 5.
✅05:07 Compilando Bootstrap 5 con Live Sass Compiler.
✅10:58 Personalizando Bootstrap definiendo VARIABLES.
✅19:20 Conclusiones Finales.
**********************************

Опубликовано:

 

5 май 2021

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 55   
@aulaideal
@aulaideal 3 года назад
Si te gusta esta temática, te dejo aquí algunos vídeos más sobre ello: 🎥 Como DESCARGAR e INSTALAR BOOTSTRAP 5: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-rIEoF6B_GNY.html​ 🎥 Aprende a integrar 🔥BOOTSTRAP ICONS🔥: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-FIW0w58jpYI.html
@Henry_Nunez
@Henry_Nunez Год назад
Excelente 👍🔔 muchas gracias
@ivnpck2911
@ivnpck2911 2 года назад
ni en ingles habia encontrado un video asi, directo sin tanta vuelta y actualizado. gracias,
@emilianocoria5521
@emilianocoria5521 3 года назад
Sos un genio. Me salvaste de una entrega que me estaba quemando la cabeza. Muchas gracias por compartir. ¡Me suscribo! ☺
@virtualpyshop_py2603
@virtualpyshop_py2603 6 месяцев назад
Excelente tuto. Muchas gracias
@miguelgil2172
@miguelgil2172 Год назад
muchas gracias !
@danielMs694
@danielMs694 Год назад
De verdad no cambies, muy pero muy buena explicacion y diste en el clavo a la hora de explicar me mire 6 videos antes que este y todos mostraban algo , pero ninguno daba en el clavo, solo tu explicaste como era, muchisimas gracias bro ;)
@jlopezg
@jlopezg Год назад
Vaya para excelente explicación amigo, te felicito!!, gracias por compartir.
@gabrieluac9313
@gabrieluac9313 2 года назад
tu explicación vale oro 🤙
@810BYTE
@810BYTE 2 года назад
Gracias hermano, siempre tus videos, muy bien explicados. Dios te Bendiga.
@anafernandez9433
@anafernandez9433 2 года назад
Me acabas de salvar la vida!
@mgedier
@mgedier 2 года назад
Qué video tan excelente. Muy bueno, muchas gracias. Otra opción para tener en cuenta
@MarianaMincarelli
@MarianaMincarelli 2 года назад
Gracias por el tutorial, es fantástico. Súper claro y conciso... Estoy practicando y me encantó aprender esto.
@Ing.CandidoHernandezMartin
@Ing.CandidoHernandezMartin 9 месяцев назад
Saludos ¡Crack!. Llegue aquí para poder hacer la implementación en un proyecto angular ya que no me tomaba los valores que colocaba en mi hoja de estilos. Gracias a tu explicación detalla pude darme cuenta de un error que estaba cometiendo en el archivo Angular.json . La buena noticia es que si se soluciono.
@ingmario7
@ingmario7 3 года назад
Excelente la manera como explica, muy claro y conciso. Felicitaciones.
@kbe0
@kbe0 3 года назад
El video está muy bien explicado. Y aunque no es para nada lo que estaba buscando, desde luego que es un vídeo muy recomendable para aquellas personas que están aprendiendo a usar SASS + Bootstrap 5. Sería interesante, de ser posible, un vídeo relacionado a hacer lo mismo, pero con archivos .sass (sintaxis de indentado) usando @use en lugar de @import, ya que este último será descontinuado y no hay garantías de que librerías todavía mantenidas, tales como dart-sass, den soporte a dichas at-rules tal cual como funcionan ahora. Y ya que LibSass y node-sass están descontinuadas, a medida que pasa el tiempo , se hace más importante el uso de estas características, sobre todo para aplicaciones nuevas y/o migraciones enfocadas en la actualización. Un saludo y gracias
@felipediogo351
@felipediogo351 2 года назад
Obrigado! Gracias! rs
@luisdavidtorrestrejo8693
@luisdavidtorrestrejo8693 3 года назад
Buena explicación en poco tiempo. Excelente
@sergiomateocerda797
@sergiomateocerda797 3 года назад
Muy bueno, felicitaciones!!!
@alvaroo503
@alvaroo503 2 года назад
Excelente vídeo
@leooramone
@leooramone 2 года назад
Buen bueno amigo, simple y sencillo
@nixonfabianpatinopacheco3065
@nixonfabianpatinopacheco3065 3 года назад
Esta muy bueno el video, y muy bien estructurado, sobre todo porque vas al grano directamente sin tanto rodeos. Tengo una pregunta, si quisiera conservar todo el bootstrap , pero añadiendo mas colores personalizados, es posible?, ejemplo: tengo el color $principal: #152f72, Y cuando este esquematizando en el html5 y quisiera usarlo en un boton asi Enviar, o en los textos asi este es mi texto principal Aulaideal!! esto se podria hacer?
@nixonfabianpatinopacheco3065
@nixonfabianpatinopacheco3065 3 года назад
Ya encontre la manera, gracias!!!
@aulaideal
@aulaideal 3 года назад
Genial, efectivamente si se puede, pero ten en cuenta que esto genera muchas clases adicionales, incrementando el tamaño del archivo final. Yo normalmente modifico el Primary y Secondary. Inclusive si no utilizo el success o danger, también los quito. Saludos
@nixonfabianpatinopacheco3065
@nixonfabianpatinopacheco3065 3 года назад
@@aulaideal gracias!!
@sonnestar8894
@sonnestar8894 3 года назад
Es nesesario descargar bootstrap dentro del proyecto? yo lo uso con cdn..
@aulaideal
@aulaideal 3 года назад
Si es necesario descargarlo. Los CDN utilizan los archivos YA compilados de BOOTSTRAP y su personalización se realiza de otra forma: "Sobreescribiendo los estilos CSS con nuestra propia hoja de estilos".
@elpity6454
@elpity6454 3 года назад
idolooo, me ayudaste una bandaaa
@antoniovalderrama7080
@antoniovalderrama7080 3 года назад
👏🙏👍 Bien Erick Mines.
@alexdavidhurtadoyeneris7116
@alexdavidhurtadoyeneris7116 3 года назад
Hola, excelente video, quiero saber dos cosas del curso, no tiene caducida o a cierto tiempo pierdo el acceso?
@aulaideal
@aulaideal 3 года назад
Acceso para siempre.
@gerardoamozurrutia8592
@gerardoamozurrutia8592 3 года назад
Excelente tutorial! logro hacer esto, pero mi duda es cómo meter otros estilos de sass? los guardas como otro .scss y compilas igual?
@olzerbmob
@olzerbmob 2 года назад
Y si solo quisiera cambiar los colores, tendría que quedarme con todos sos archivos que no necesito? o que archivos son los necesarios para que funcionan los colores? Buen video.
@arrimarelbochin3056
@arrimarelbochin3056 3 года назад
Gracias por tus videos! Seria genial si pudieras subir uno donde expliques cómo modificar el tamaño de los videos + cómo ponerlos uno al lado de otro y que mantenga el responsive... Vi tu otro video donde explicas el responsive en videos, pero me falta entender estos detalles que menciono aquí arriba. Gracias! Suscripción mega-activada!!
@Uri.Sab.
@Uri.Sab. Год назад
Good
@estebanmena3690
@estebanmena3690 3 года назад
si quisiera modificar algún componente diferente al botón seria los mismo? excelente video tenga su like
@aulaideal
@aulaideal 3 года назад
Mismo procedimiento. Desde la documentación, vas al componente en cuestión y te diriges a la sección de SASS y analizas las variables disponibles. Saludos
@gonzaloagustinacosta6462
@gonzaloagustinacosta6462 2 года назад
Hola un vconsulta. Pude modificar el color, pero el sistema no me reconoce las animaciones de javascript no se como importarlo al proyecto
@arturoo_o3591
@arturoo_o3591 2 года назад
La carpeta "lib" al momento de subir el proyecto a un Host se debe eliminar lo que no se esta ocupando?
@aulaideal
@aulaideal 2 года назад
Si eres estricto no lo subas. Yo suelo subirlo todo. De esa forma me queda un copia en els servidor de los archivos fuentes (SASS). Saludos
@arturoo_o3591
@arturoo_o3591 2 года назад
@@aulaideal Va, muchas gracias profe
@salvadordejesusespindola1425
@salvadordejesusespindola1425 3 года назад
Excelente
@ux.rubenlopez
@ux.rubenlopez 2 года назад
Muy buen tutorial. Como tendría que hacer si deseo crear mis propios componentes, por ejemplo un botón redondo y evitar que el archivo .scss sea infinito. Sobre todo para que todo sea mucho más ordenado y organizado.
@ithielragnaros
@ithielragnaros 3 года назад
gracias , como no me dejaba cambiar el color de link con css sospeche que debia ser en boostrap y de hecho ni siquiera llegue a sass pues botstrp ya tiene una clase para eso
@jorgeavila7276
@jorgeavila7276 2 года назад
el .json 7:01 no me aparece igual que en el video, hay que que configurarlo?
@arturoo_o3591
@arturoo_o3591 2 года назад
debes de darle en copy en el setting que quieres modificar y después pegarlo en donde a el le aparece en el video y ya comenzar a editarlo.
@brianguzman1213
@brianguzman1213 2 года назад
Me aparece diferente tambien, lo pudiste solucionar?
@gabrielLlanesMX
@gabrielLlanesMX 2 года назад
Se pueden personalizar las clases?, porque todos los videos hablan de las variables y los colores, pero nadie habla de como personalizar las clases, ejemplo la clase navbar la clase btn agregar clases a la media querys, ósea editar, no crear clases nuevas ya que al poner clases e agregan a la parte de abajo del css haciendo crecer de manera innecesaria el código css
@aulaideal
@aulaideal 2 года назад
Buena pregunta. La respuesta concreta es NO. Y son muchas las razones. Bootstrap es como un nuevo standart para escribir aplicaciones. Si conoces las clases para usar un componente, el navbar por ejemplo, al trabajar en equipo, es mucho más sencillo entender la funcionalidad de tus clases. Lo que si puedes hacer es personalizarlas con tus propios estilos CSS. Saludos
@gabrielLlanesMX
@gabrielLlanesMX 2 года назад
@@aulaideal Gracias por tu respuesta, conozco boostrap de pies a cabeza desde la version 3, casi puedo hacer lo que yo quiera con él, solo quería aprender a personalizarlo con sass, Saludos y gracias por tu espuesta nuevamente
@yeisonvalois6556
@yeisonvalois6556 2 года назад
alguien sabe como se hace en react¿?
@raulgabrielhacho9231
@raulgabrielhacho9231 2 года назад
No genera el archivo css
@toxyspam3360
@toxyspam3360 3 года назад
Se me compilan todos los css de bootstrap:C
@javierminei
@javierminei Год назад
No me funciono :(
@agentsmith2189
@agentsmith2189 2 года назад
un ejemplo de como usar @use y @forward