Como Crear una Página Web con Bootstrap 5 – Parte 1

5 minuto(s)

Demo

Uno de los Frameworks más populares para el Desarrollo Front-end, hablo de Bootstrap  esta en constante cambio, el equipo que da soporte a esta herramienta, suele publicar cambios constantemente, algunos para parchar errores y otros para agregar nuevas características. Bootstrap es un Framework que esta en constante adaptación a las nuevas tendencias en CSS y HTML y por ello se encuentra en la versión 5 que trae nuevas características, la mejor manera de conocerlas es creando un proyecto y en esta nueva aventura aprenderemos a crear una web con Bootstrap 5, vamos con ello.

Partes

Antes de continuar te invito a leer los siguientes artículos:

Asimismo te invito a escuchar el Podcast: “Con Que Lenguaje De Programación Comenzar Para El Desarrollo Web”:

Spotify: Sound Cloud: Apple Podcasts

Bien ahora continuemos con el Post: Como Crear una Página Web con Bootstrap 5 – Parte 1. 

La página Web para este proyecto va tener 4 páginas, las cuales son Home, Nosotros, Servicios y Contacto.

Instalando Bootstrap 5

Hasta la fecha de este Post Bootstrap se encuentra en la versión 5.0.2 y para usarlo en un sitio web, debemos ir a la página oficial de Bootstrap, luego debemos hacer clic en el botón que dice Download.

Ahora nos aparecerá la página para Descargar Bootstrap 5, en ella podemos encontrar diferentes maneras de usar este Framework, podemos descargar los archivos de Bootstrap 5, podemos usar un CDN o si estamos en Node JS podemos usar un comando npm para instalarlo, lo mismo con yarn. Adicionalmente hay opciones para instalarlo como una gema de Ruby, también con Composer y NuGet.

Yo voy a descargar los archivos compilados de Bootstrap 5, es decir los archivos CSS y JavaScript, de los cuales solo usaré una sola versión, de preferencia la versión mínima para que no la carga de la web no sea tan pesada. Hago clic en el botón Download.

Luego de hacer clic en el botón Download, se me descargará un archivo llamado bootstrap-5.0.2-dist.zip (El nombre puede cambiar en futuras  versiones de Bootstrap). Abro el archivo y dentro de el hay 2 directorios uno llamado css y otro llamado js. Estos directorios los coloco en el directorio principal en donde crearé las vistas HTML de mi proyecto.

Tanto el directorio css como el directorio js,  traen varios archivos, yo usaré el archivo CSS bootstrap.min.css y el archivo JavaScript bootstrap.bundle.min.js para el sitio web.


El archivo CSS bootstrap.min.css lo debo colocar antes de cerrar la etiqueta </head> y el archivo JavaScript bootstrap.bundle.min.js lo debo colocar antes de la etiqueta de cierre </body>,  para  tener una idea, veamos el código.


Nota: Recuerda que estoy usando la versión minima de Bootstrap 5, pero si quieres usar todas las características de Bootstrap 5, debes usar los archivos bootstrap.css y bootstrap.js

Hasta aquí ya tenemos integrado Bootstrap 5 en nuestra página web.

Header y Footer

Todas las páginas del sitio web van a contener el mismo header y footer, antes de crear las páginas primero definiré estos 2 elementos.

El header va tener el logo del sitio web (Usaré el logo de Bootstrap 5, tu le puedes colocar el logo que desees) y un menú con enlaces a las páginas del mismo. Y para el footer colocaré el texto Mi Proyecto © con la fecha que se generará automáticamente con JavaScript, esto es para no tener que escribirlo manualmente año tras año.


Entonces el sitio web se debería de ver por el momento así.

Bueno hasta aquí llegamos con esta primera parte en donde hemos integrado los archivos de Bootstrap 5, asimismo hemos creado el Header que contiene el logo y el menú, creamos el Footer en donde colocamos el nombre del sitio web con el símbolo de Copyright y el año.

Ten Paciencia, lo que quiero es que conozcas bien como se crea este proyecto y no llenarte el capitulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje. 

Nota (s)

  • En la siguiente parte vamos a crear el contenido de la página Home.
  • Los pasos mencionados en este tutorial pueden cambiar en un futuro, esto no depende de mi, si no de la organización que da soporte a Bootstrap Framework, que suele cambiar el orden y las opciones de su herramienta.
  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo. 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.