Agregar Bootstrap a un proyecto web

Uno de los framework más utilizados por los desarrolladores web por su fácil implementación, veamos como agregar Bootstrap a un proyecto web.

Bootstrap es un proyecto que fue creado por los desarrolladores de Twitter por el año 2010, como un proyecto open source.

Agregar el framework a u proyecto web sencillo de HTML, css y JavaScript no es tan complicado, veamos cómo hacerlo.

Descargar Bootstrap

Para utilizar Bootstrap es necesario descargar los archivos, que posteriormente colocaremos en el proyecto.

Podría interesarte Agregar Bootstrap en ASP.NET  

Vamos a la página principal del proyecto, en el sitio encontraras varias versiones, en esta ocasión descargaremos la última versión estable.

Descargar Bootstrap de la web

Se descarga un comprimido, al descomprimirlo encontramos dos capetas (js y css).

Archivos de Bootstrap

Dentro de la carpeta css encontramos las hojas de estilo necesarias para el diseño del sitio web.

No agregaremos todos los archivos al proyecto, únicamente los archivos con terminación .min.css.

CSS de Bootstrap

Los demás archivos son para desarrollador (no están comprimidos) y archivos de mapeo creados al comprimir los css.

En la carpeta js encontraremos los archivos JavaScript utilizadas para las operaciones en el cliente (mensajes, eventos, etc.).

Los archivos necesarios para el proyecto web serán los que tienen la terminación .min.js.

JS de Bootstrap

El resto de los archivos son los no comprimidos para desarrollo y archivos de mapeo.

Podría interesarte Agregar JQuery a un proyecto web  

Agregar Bootstrap al proyecto

En una carpeta donde ya tengamos un archivo HTML, agregamos las carpetas css y js con los archivos indicados arriba.

Por lo tanto, tu proyecto ahora quedara con el siguiente contenido (excepto los archivos script.js y jquery.js).

Bootstrap en sitio web

Con saben, con el simple hecho de agregar las carpetas en el mismo lugar no significa que ya se utilicen por un HTML.

Necesitamos agregar las referencias a los archivos de Bootstrap en el archivo HTML, el código quedaría como sigue.

Agregar Bootstrap a un proyecto web

Como puedes observar las referencias agregadas es igual para todos los css y JavaScript.

Ya tenemos todo listo, nuestro proyecto ya tiene implementado el framework Bootstrap para utilizarlo.

Agreguemos unas líneas de código en el cuerpo del archivo HTML, por ejemplo, algunas columnas y dar color.

Agregar class Bootstrap en web

Ejecutemos el archivo HTML e el explorador para ver el resultado.

Bootstrap en la web

Por ahora solo utilizamos las hojas de estilo de Bootstrap, para que utilices los JavaScript necesitas ejecutar el proyecto en un servidor web.

Podría interesarte Live server en Visual Studio Code  

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *