Cómo usar BOOTSTRAP en HTML - Curso de Bootstrap v5 - bootstrapcdn

Summary

El guía ofrece una introducción a cómo integrar Boostrap en proyectos personales. Se menciona la descarga de archivos CSS y JavaScript desde la página oficial, destacando la importancia de elegir los archivos correctos según las necesidades, como 'booster.min.css' para un peso menor y 'bootstrap.min.js' para incluir la biblioteca Popper. Se ilustra cómo crear una carpeta 'instalar_bp', agregar un nuevo archivo HTML, y cómo enlazar los archivos CSS y JS. Finalmente, se demuestra cómo agregar una clase a un elemento HTML y se invita a ver el próximo video para aprender más formas de integración.

Takeaways

• 😀 El video muestra cómo agregar Bootstrap a proyectos personales.
• 🔗 Se menciona la página oficial de Bootstrap para descargar los archivos necesarios.
• 📁 Se explica que los archivos CSS y JavaScript se encuentran en carpetas separadas.
• 📝 Se describen los diferentes tipos de archivos CSS y su propósito dentro del framework.
• 🧩 Se destaca la importancia de elegir el archivo CSS que incluye todo el framework para aprender completamente.
• 🌐 Se menciona la diferencia entre archivos con extensión .css y .rtl.css para soporte de idiomas de derecha a izquierda.
• 🗂️ Se sugiere el uso de archivos minificados (.min.css) para reducir el peso del sitio web.
• 🛠️ Se detalla cómo se selecciona y se utiliza el archivo JavaScript que incluye todo el framework y la biblioteca Popper.
• 📝 Se instruye sobre cómo enlazar los archivos CSS y JavaScript en un archivo HTML para usar Bootstrap.
• 🎨 Se demuestra cómo agregar una clase de estilo a un elemento HTML para cambiar su apariencia usando Bootstrap.

Q & A

¿Dónde puedo descargar el framework Bootstrap para usarlo en mis proyectos?

Puedes descargarlo desde el botón 'Download' en la página principal de la página oficial de Bootstrap, o desde el apartado 'Company' si estás en Ángeles.

¿Qué archivos se encuentran dentro del archivo ZIP de Bootstrap que se descarga?

Al descomprimir el archivo ZIP, se obtiene una carpeta que contiene dos subcarpetas: una para CSS y otra para JavaScript.

¿Cuáles son las diferencias entre los archivos CSS que se encuentran dentro de la carpeta de Bootstrap?

Los archivos CSS tienen nombres como 'bootstrap-grid', 'bootstrap-reboot', 'bootstrap' y 'utilities', cada uno con diferentes propósitos y contenidos específicos para el diseño, componentes y utilidades.

¿Qué contiene el archivo 'bootstrap.css' en comparación con 'bootstrap.min.css'?

El archivo 'bootstrap.css' contiene el código CSS de Bootstrap con espacios y sangrías para facilitar la lectura, mientras que 'bootstrap.min.css' es una versión minificada y compacta para uso en producción.

¿Qué es 'Layout' en el contexto de Bootstrap y qué contiene el archivo relacionado?

El 'Layout' en Bootstrap se refiere a la capacidad de organizar los elementos HTML en la izquierda, centro, derecha, etc., utilizando propiedades como flexbox o CSS grid.

¿Qué es 'Content' y cómo afecta a los elementos HTML?

'Content' en Bootstrap es el código que permite agregar estilos personalizados a los elementos HTML, como encabezados, párrafos, etiquetas de texto, listas y elementos multimedia.

¿Qué son los 'Componentes' en Bootstrap y qué tipos de elementos se pueden agregar?

Los 'Componentes' son secciones de código que permiten agregar elementos interactivos como carruseles, sliders, alertas, etc., a nuestros proyectos.

¿Qué proporciona el archivo 'utilities' y cómo se utiliza en un proyecto?

El archivo 'utilities' contiene código para agregar características como colores, bordes, opacidad y sombras a los elementos HTML, mejorando la personalización del diseño.

¿Por qué existen diferentes versiones de los archivos CSS de Bootstrap (por ejemplo, 'bootstrap.rtl.css')?

Las diferentes versiones de los archivos CSS, como 'bootstrap.rtl.css', están diseñadas para adaptarse a diferentes direcciones de lectura, como la derecha a la izquierda en el caso de algunos idiomas asiáticos.

¿Qué archivo JavaScript de Bootstrap recomenda el script para usar en un proyecto y por qué?

El script recomienda usar 'bootstrap.bundle.min.js' ya que incluye el código JavaScript de Bootstrap y la biblioteca Popper, y es una versión minificada para uso en producción.

¿Cómo se integra Bootstrap en un proyecto HTML y cómo se enlazan los archivos CSS y JavaScript?

Se crea una nueva carpeta llamada 'instalar bp', se arrastran los archivos CSS y JavaScript dentro, y se enlazan en un archivo HTML mediante etiquetas de enlace y secuencias de comandos.