Como crear páginas o un sitio web usando Bootstrap

Una página de ejemplo que usa una de las plantillas que ofrece este popular framework web, para mostrar su estilo, funcionalidades y usos en la práctica, para crear sitios o aplicaciones web.

Como crear páginas o un sitio web usando Bootstrap

Tratamos de demostrar con este sencillo artículo, las posibilidades que ofrece Bootstrap, para crear paginas o un sitio completo para la web.
Usamos una de las plantillas de este proyecto libre y gratis y la modificamos y personalizamos a nuestro antojo, incluyendo solo algunas de las tantas funciones disponibles.



¿Qué es Bootstrap y para que usarlo?

Bootstrap es un framework web o marco de trabajo, creado para el diseño y desarrollo de sitios y aplicaciones web.
Es software libre y uno de los proyectos más populares de los alojados en Github.
Es empleado ampliamente en muchos sitios de internet, debido al estilo moderno y usabilidad que le imprime a las páginas que lo usan.
Bootstrap está disponible en casi todos los servicios de alojamiento para crear un blog o sitio web, aunque también se pueden descargar sus archivos desde la página del proyecto para crear manualmente un pequeño sitio de páginas dinámicas o una aplicación para la web.
Es una opción muy atractiva, que recomendamos para un sitio para un negocio local o para cualquier proyecto.
Con esta sencilla página tratamos de recomendarlo a nuestros lectores y aficionados a la publicación web.



Funcionalidades que ofrece Bootstrap

Bootstrap permite crear fácilmente páginas web con un estilo moderno e incluir en ellas varias funcionalidades.
Hay disponibles varios módulos que facilitan agregar barras, menús, widgets, botones, tooltips, visores de imágenes y muchos otros elementos.
Las paginas son completamente adaptables para computadoras, inverso a lo normal, porque en su diseño se parte de la opción "mobile first" (móviles primero).
En esta página de ejemplo hemos incluido algunos de las funcionalidades, elementos y efectos que ofrece Bootstrap, son las siguientes:



¿Cómo crear páginas con Bootstrap?

Los que deseen experimentar manualmente las distintas opciones que ofrece Bootstrap, para crear un pequeño sitio de páginas estáticas o una aplicación web, pueden descargar sus archivos desde la página del proyecto.
Hay dos formas de descargar y usar Bootstrap:

Versión precompilada

Es un archivo comprimido que contiene las librerías JavaScript, los archivos de estilo CSS y las fuentes que contienen los glifos e iconos.

Código fuente

Es un archivo comprimido que contiene los mismos elementos anteriores y adicionalmente muchas plantillas de ejemplo, con el código fuente para experimentar varios diseños y estilos diferentes.
Hay plantillas para sitios corporativos, pequeñas empresas, para fotógrafos, etc.

Se recomienda descargar el segundo de los archivos, que nos permite disponer de todos los recursos de Bootstrap.



¿Cómo usar las plantillas de Bootstrap?

Las plantillas se encuentran en la carpeta "docs/examples" del paquete de distribución.
Podemos visualizar su estilo ejecutando de forma local el archivo index.html en su interior.
Podemos decidirnos por una o combinar varias copiando y pegando los bloques de contenido en un archivo base, que encontraremos en la carpeta "starter-template".
Los que busquen algo más sencillo y menos confuso, pueden usar simplemente el siguiente código para crear una página de ejemplo que funciona de forma local.
A continuación pegar en la sección CONTENIDO, todo lo que deseen probar.


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap plantilla simple</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>Probando Bootstrap</h1>
	<!-- CONTENIDO -->	
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Hay que tener en cuenta que cada plantilla posee su archivo de estilo CSS que hay que enlazar o insertar su contenido dentro de un elemento <style></style>



Carrousel de imágenes creado con Bootstrap

Un carrousel es una funcionalidad muy atractiva, para mostrar varias imágenes, las que de forma automática se van alternando.



Otros usos de Bootstrap en la práctica

Bootstrap no solo se emplea para crear sitios, su librería se puede utilizar para agregar muchas funcionalidades y efectos a las páginas, aunque no usen este framework web.
En esos casos no es necesario enlazar los archivos de estilo CSS y JS, podemos obtener el código fuente en los archivos LESS del paquete de distribución, aunque lógicamente debemos dar la atribución correspondiente.
Un ejemplo es su uso se puede comprobar en otra página de nuestro sitio, para mostrar bajo el cursor del ratón un "tooltip" que indica el huso horario de cada región en el Mapa de husos y zonas horarias del mundo.


Sigue lo que publicamos