Conoce Bootstrap: ¬°programar jam√°s fue tan f√°cil!

Última actualización 04 de Agosto del 2020

user

María Alejandra López

Conoce Bootstrap: ¬°programar jam√°s fue tan f√°cil! Conoce Bootstrap: ¬°programar jam√°s fue tan f√°cil!

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!

Recomendados para ti