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.

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:

Botones disponibles en varios colores y tamaños, a los que les agregamos el atributo click, para poder cargar direcciones URL que se abren en una nueva pestaña del navegador, mediante JavaScript.Paneles que son los cuadros con el fondo de varios colores, para enfatizar y destacar mensajes.Carrusel, efecto que permite ver una secuencia de fotos o imágenes.Grupo de listas. Usado para listar estas funcionalidades.Tooltip o descripción emergente. Es un cuadro con información adicional, que se muestra al situar el cursor del mouse encima de una palabra que usa esta función.



 

¿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.

¡Ojo!
El archivo de estilo CSS predeterminado (bootstrap.min.css) mide 119 KB, un tamaño algo exagerado, porque incluye instrucciones para una gran cantidad de elementos.
Con la herramienta Customize (Personalizar) podemos seleccionar los elementos marcando y desmarcando casillas, para finalmente descargar el paquete con los archivos CSS y JS, que incluyen solo las funcionalidades que vamos emplear en nuestro proyecto.
Esta herramienta esta disponible en: http://getbootstrap.com/customize/



 

¿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.

Bootstrap plantilla simple

Probando Bootstrap

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

 


¡Solicite presupuesto!