💻 Bootstrap: ¿qué es y para qué sirve? [2020] | Crehana
Conoce Bootstrap: ¡programar jamás fue tan fácil!

Conoce Bootstrap: ¡programar jamás fue tan fácil!

Última actualización 4 de Agosto del 2020Tiempo de lectura: 7 min.

María Alejandra López

Si no tienes muchos conocimientos de programación y quieres saber qué es Bootstrap porque has oído hablar de este framework, aquí te explicamos paso a paso todo lo que debes saber sobre esta herramienta creada por Twitter en 2010.

Primero, empezaremos por lo básico y te explicaremos qué es un framework para que puedas ingresar de lleno a esta apasionante aplicación para crear interfaces. Sin embargo, si ya conoces qué es un framework, ¡haz clic al segundo punto del índice! 

Índice:

  1. ¿Qué es un framework?
  2. ¿Qué es Bootstrap?
  3. ¿Cómo usar Bootstrap?
  4. Algunas características de Bootstrap para sacarle el jugo 

 

¿Qué es un framework?

 

Qué es framework

Imagen: Cristopher Gower (Unsplash)

Para explicarlo de manera sencilla, podemos decir que un framework es como un lienzo que simplifica el trabajo de un programador web. Y es que podría resumirse como un entorno o marco de trabajo que hace más sencillo el trabajo de programación. ¿Por qué vale la pena?

Es ideal para no tener que repetir el código una y otra vez

Si te preguntas qué es un framework web, lo más importante que debes saber es que evita tener que repetir el código de ciertas partes una y otra vez. Como explica el portal Orix, la mayoría de proyectos tienen partes comunes que son necesarias como “acceso a base de datos, validación de formularios o seguridad”. El framework simplifica todo el proceso. 

Te simplifica el trabajo

El tiempo vale oro y eso es una realidad cuando utilizas un framework, ya que te sirve para escribir código de una manera más sencilla. Así, podrás trabajar con más productividad e, incluso, minimizar tus horas de trabajo. ¿Para qué sirve un framework? “Desarrollar una aplicación con un framework nos permite hacerlo más rápido, más limpio y más seguro”, explica Orix.

¡Vas a poder realizar cosas más avanzadas!

Hay un aspecto que seguramente te convencerá de trabajar con un framework y eso es todo lo que vas a poder lograr. Una clara ventaja es que, al automatizar procesos, podrás hacer cosas de una manera más fácil y segura. Poco a poco, te animaras a añadir cosas más especializadas.

¿Te interesa el universo del diseño web? ¡Descubre los cursos que tenemos para ofrecerte!

Ahora que ya sabes qué es un framework, vamos a explicarte qué es Bootstrap y qué tipo de framework es.

 

¿Qué es Bootstrap?

 Qué es Bootstrap

Imagen: Glenn Carstens-Peters (Unsplash)

Bootstrap es una herramienta desarrollada por Twitter en 2010 bajo el nombre “Twitter Blueprint” para mejorar sus procesos de programación. Al año siguiente, se transformó en código abierto y cambió de nombre a Bootstrap.

Actualmente es considerada una biblioteca multiplataforma muy popular; incluso la utilizan empresas digitales como Spotify, Twitter y Linkedin para programar. Aunque quizás no lo sepas, ¡muchísimas páginas webs a las que ingresas diariamente están creadas con Bootstrap! Y es que simplifica muchísimo los procesos.  

Lo segundo que debes saber es que Bootstrap es un framework que combina CSS y JavaScript para estilizar los elementos de HTML. “(Bootstrap) tiene varios recursos para configurar los estilos de los elementos de la página de una manera simple y eficiente, además de facilitar la construcción de páginas que, al mismo tiempo, están adaptadas para la web y sitios móviles”, explica Pedro Guajardo de Rock Content.

Hoy en día, teniendo en cuenta que muchísimas personas ingresan a páginas webs desde sitios móviles, es muy importante desarrollar portales que sean amigables con todo tipo de dispositivos. Es decir, que sean ‘responsive’. Justamente, una de las características de Bootstrap es lograr que las páginas se adapten a diversos dispositivos.

Por ello, se podría decir que su principal propósito es crear sitios que se adapten a dispositivos móviles, tablets y/o desktop sin ningún problema. Sin embargo, también podemos decir que proporciona componentes para que el usuario pueda navegar de forma más sencilla por la página. En el siguiente punto, te contamos por dónde deberías empezar.

¿Sabes qué es CSS y cómo se relaciona con HTML? ¡Aquí te lo explicamos!

 

¿Cómo usar Bootstrap?

En este punto, lo primero que queremos enfatizar es que Bootstrap no es un programa para diseñar páginas webs (no, no se parece en nada a las páginas que aquí te presentamos). Tampoco es lo mismo que un Content Management System.

Por ejemplo, entre los usos de WordPress está gestionar el contenido y, al mismo tiempo, desarrollar el diseño (pero, para intervenir el tema, justamente necesitas Bootstrap).

Si ya tienes eso claro y quieres darle una oportunidad, aquí te decimos cómo usar Bootstrap y empezar. ¡Manos a la obra!  

1. Descarga Bootstrap

Puedes descargar aquí de forma totalmente gratuita el código compilado listo para usar para Bootstrap v4.3.1(la última versión) y así incluirla fácilmente en tu proyecto. ¿Qué incluye ese archivo?

  • Paquetes CSS compilados y minimizados.
  • Complementos JavaScript compilados y minificados.

Ojo: esto no incluye documentación, archivos de origen ni ninguna dependencia opcional de JavaScript (jQuery y Popper.js).

2. Configuraciones importantes

Bootstrap utiliza configuraciones globales importantes que debes tener en cuenta si vas a utilizarlo. Por ejemplo, utiliza el lenguaje HTML5, que se trata de la última versión que existe de HTML.

3. ¿Por qué Bootstrap? Tiene una interfaz sencilla

Según el diseñador gráfico y programador web Raúl Moreira, lo más sencillo es entender que Bootstrap se basa en una rejilla de 12 columnas. De hecho: si no intervienes el código y solo añades tu contenido, puedes crear un sitio web como el que te mostramos aquí.

Template para Bootstrap

Imagen: ejemplo de template para Bootstrap (Template Mag).

¿A qué nos referimos con eso? La aplicación te brinda un lienzo para empezar y las estructuras para editar, pero tú decides cómo vas a modificar tu página web con más de una docena de componentes construidos para proporcionar la iconografía, menús desplegables, grupos de entrada, navegación, alertas, entre tras opciones.

“Cubre la gran mayoría de necesidades que plantea un sitio web adaptable a dispositivos y tamaños de pantalla; Rejilla, tipografía, formularios, sliders, elementos CSS, componentes, plugings de JavaScript”, explica el diseñador y programador web Raúl Moreira.

 Construye páginas webs únicas gracias al curso Maquetación de sitios web dinámicos con Javascript y jQuery desde cero

 

Algunas características de Bootstrap para sacarle el jugo

Existen detalles que hacen de Bootstrap una biblioteca multiplataforma muy especial. ¿Ya los conoces?

Iconos Bootstrap

Para hacer tu página web lo más amigable posible, necesitas símbolos que le permitan a las personas acceder a determinadas opciones de forma sencilla. Felizmente, están los íconos de Bootstrap.

Glyphicons

Glyphicons

Imagen: Glyphicons

Y es que una de las particularidades de la herramienta es que cuenta con Glyphicons, 250 íconos basados en vectores para que tú utilices en la programación de tu página web (sí, vienen como parte de la descarga inicial y son de uso gratuito). 

Pero, ojo, si esos 250 íconos no son suficientes para ti, puedes comprar los que desees en la página de Glyphicons ya que tienen símbolos para distintos usos.

Ionicons

Uno de los componentes con íconos que también puedes utilizar es Ionicons, una fuente con 601 iconos de Ionic Framework. Es totalmente gratis y de código abierto.

Font Awesome

Según Raúl Moreira, este es uno de los mejores recursos gratis para Bootstrap. ¿Qué incluye? 585 íconos gratuitos y destaca por una colección muy útil de símbolos para redes sociales. Lo interesante es que tiene un buscador muy dinámico y organizado, por lo que si ingresas a la página web te será muy sencillo encontrar los íconos más acordes para tu proyecto. 

Octicons

Finalmente, entre las opciones gratuitas de íconos para Bootstrap, también destaca Octicons, que se trata de íconos orientados a GitHub (una plataforma de desarrollo colaborativo).

Si te interesa todo lo relacionado con los íconos, el curso Diseño de íconos para marcas digitales te llevará más lejos

 

Tablas en Bootstrap

¡Crear tablas en Bootstrap no es difícil! De hecho, para crear una tabla responsive solo debes añadir un código muy básico con la clase table: <table class="table table-responsive">. 

Sin embargo, también existen componentes que te permitirán llevar tus tablas al siguiente nivel y darles muchas más particularidades. Uno de ellos es DataTables, que funciona como un plugin para librería Javascript jQuery. ¿En qué consiste?

Ejemplo de DataTables

Imagen: DataTables

Esta herramienta gratuita te permitirá crear una tabla dinámica con controles de interacción avanzadas como paginación, búsqueda instantánea y ordenación multi-columna (como los que te mostramos en este ejemplo).

Botones en Bootstrap

Para que una interfaz guíe con éxito al usuario, necesita botones óptimos correctamente implementados dentro de la página web. Como explica el programador José Aguilar en su blog, un botón puede ser un simple botón (que permita ejecutar alguna acción JavaScript) o puede ser un botón de tipo “submit” para enviar un formulario o un enlace.

Bootstrap hace el camino bastante sencillo, ya que los botones se pueden añadir con este código: <button>, <a>, <input> y, además, cuenta con 7 colores que puedes utilizar en el desarrollo de tu web y 3 tamaños pre-diseñados. Combinar estos tamaños y colores es de gran ayuda para generar una estructura visual en tu proyecto.

Botones de colores

¿Necesitas una página web? ¡Diséñala tú mismo como todo un experto!

Algo más: también puedes agregar de forma muy sencilla botones tipo bloque agregando la clase .btn-block. Aquí te mostramos un ejemplo de cómo se vería ese tipo de botón:

Botones Bootstrap

Codeply

Si buscas botones distintos y quieres jugar un poco más con Bootstrap, Codeply es una gran vía. Antes conocida como Bootply, este repositorio de código te ayudará a encontrar más de 1000 snippets de todo tipo (botones, paginación, mapas de Googles, etc). Solo debes registrarte de forma gratuita para acceder a su editor visual y descubrir distintos códigos.

Esquemas de color

Pero, si lo que realmente estás buscando es personalizar aún más tu página web, el color es un buen punto de partida. Aquí te contamos algunos recursos gratuitos para Bootstrap que te pueden ayudar.

Lavish

Sube una imagen cuyos colores te gusten y, automáticamente, recibe un esquema de color para implementar a tu página web. Este es uno de los componentes de Bootstrap más importantes, ya que el color hará que tu interfaz capture aún más al usuario.

Lavish

Imagen: Raúl Moreira

PaintStrap

Un camino más rápido para editar por completo los colores de tu página web es con un tema. Para eso la herramienta PaintStrat es muy eficaz, ya que te permite generar temas gratis con el esquema de color de Adobe Color CC. Solo debes descargar los archivos CSS y sustuirlos por lo de Boostrap para poder utilizar el tema de tu predilección.

Imágenes en Bootstrap

Quizás lo que buscas es cómo poner una imagen de fondo en Bootstrap. Antes de ponerte a buscar una fotografía increíble o armar un collage, debemos decirte que en este punto debes analizar muy bien que la imagen sea lo más responsive posible. Como explica el blog de Go Daddy, varios usuarios suelen elegir imágenes muy grandes que comprometen la carga de la página web, especialmente en dispositivos móviles.

¿Qué hacer? “Si quieres que una imagen con una resolución excesiva se visualice en dispositivos móviles, es tan simple como hacer uso de los media queries de CSS3”, explica el portal. Por ello, no pierdas de vista una imagen con un tamaño de 5500x3600px y editar tu código como se explica aquí.

Esperamos que este artículo te haya permitido entender qué es Bootstrap y cuáles son los componentes básicos para armar tu proyecto digital.

No pierdas de vista que hoy, más que nunca, los usuarios ingresan desde dispositivos celulares la gran mayoría del tiempo por lo que en tu estrategia no pueden faltar las características responsive. ¡Solo así asegurarás el éxito de tu página web!

También podría interesarte