¿Qué es Bootstrap? Guía directo al punto para principiantes

Quien visita un sitio web ya diseñado, quizá no sepa el trabajo que implica su creación: líneas de códigos escritas por programadores o desarrolladores web, que permiten que el sitio web funcione, interactúe con el usuario y genere lo que este busca.

No es algo tan sencillo de hacer. Sin embargo, este trabajo se vuelve más fácil con Bootstrap. El usuario lego puede no saberlo, pero muchos códigos que permiten que un sitio web funcione ya están creados para ser usados por el desarrollador en frameworks como Bootstrap. Es decir, la estructura está hecha, lo que se necesita es pegar y usar.

Esos frameworks suelen ser creados por la propia comunidad de desarrolladores o por empresas de tecnología para facilitar la construcción de páginas web y estandarizar algunos elementos.

Por lo tanto, si eres un desarrollador principiante o solo estás interesado en el tema, debes saber que no necesitas comenzar un sitio web desde cero, ¡existen códigos que están listos para que los uses!

Ahora bien, esta guía te ayudará a entender qué es Bootstrap y cómo esta herramienta facilita el trabajo de un programador. Conocerás las características principales de este framework y cómo dar los primeros pasos. ¡Sigue leyendo para que te empapes de todo!

• ¿Qué es Bootstrap?
• ¿Para qué sirve Bootstrap?
• ¿Quién creó Bootstrap?
• ¿Quién usa Bootstrap actualmente?
• ¿Cuáles son las ventajas de usar Bootstrap?
• ¿Y las desventajas de usar Bootstrap?
• ¿Cómo se implementa Bootstrap? ¿Por qué facilita la vida del programador?
• Ejemplos de Bootstrap: ¿Qué se puede hacer?
• ¿Cuáles son los tres archivos primarios de Bootstrap?
• ¿Cuáles son los otros componentes de Bootstrap?
• ¿Cómo comenzar a usar Bootstrap?
• ¿Cómo aprender rápido sobre Bootstrap? Cursos para ponerse manos a la obra.
• ¿Cuáles son las alternativas de Bootstrap?
• ¿Vale la pena usar Bootstrap?
• Preguntas frecuentes

¿Qué es Bootstrap?

Bootstrap es un framework de código abierto utilizado en el desarrollo de sitios web y aplicaciones web. Bootstrap combina CSS y JavaScript para estilizar los elementos de páginas escritas en HTML. Es uno de los frameworks más populares del mundo y ofrece un conjunto de códigos listos para agilizar el desarrollo web.

Elementos como menús, formularios, paginación, validación de datos y patrones de seguridad, que son comunes en muchos sitios web, están disponibles para cualquier profesional que quiera utilizarlos, gracias a la comunidad de desarrolladores.

El framework se usa para el desarrollo front-end (la interfaz de usuario) de sitios web. Además, aporta una ventaja, ya que ofrece componentes adaptativos, es decir, que se adaptan a cualquier tamaño de la pantalla.

Por consiguiente, los sitios web que utilizan su estructura proporcionan a los usuarios de dispositivos móviles una experiencia optimizada de navegación.

¿Qué es el framework?

Para entender lo que es Bootstrap, se debe conocer el concepto de framework en el desarrollo web. Un framework es una estructura genérica de códigos que permite resolver demandas repetitivas, sin que el desarrollador tenga que programar todo desde cero. Igualmente, proporciona más productividad y agilidad al trabajo mediante una serie de funcionalidades, comandos y estructuras listas que se repiten en diferentes proyectos.

Muchos frameworks, como el Bootstrap, se consiguen en comunidades de desarrolladores y pueden utilizarse gratuitamente, ya que la mayoría de las veces los propios profesionales desarrollan y ponen a disposición sus paquetes de códigos.

Tú también puedes contribuir en el desarrollo de los frameworks, si tienes los conocimientos para hacerlo, solo debes seguir las directrices de la comunidad.

¿Para qué sirve Bootstrap?

Bootstrap sirve para facilitar el desarrollo de sitios web. Esta herramienta ayuda a implementar elementos comunes a los sitios web de manera más rápida y con una interfaz amigable. Todo lo que el desarrollador necesita hacer, es bajar el código fuente y personalizar los componentes y layouts para sus proyectos.

En sus actualizaciones, Bootstrap comenzó a incorporar elementos adaptativos y a considerar el desarrollo para dispositivos móviles como prioridad (mobile-first design). Por esta razón, en la actualidad este framework sirve especialmente para desarrollar sitios web adaptativos, una tendencia consolidada en Internet.

¿Quién creó Bootstrap?

Bootstrap fue creado por Mark Otto y Jacob Thornton para desarrollar Twitter. Inicialmente, cuando se lanzó a mediados de 2010, el framework se conocía con el nombre de Twitter Blueprint, hasta que se realizó su lanzamiento público en 2011 y se transformó en código abierto.

La intención de los desarrolladores era estandarizar las herramientas internas, debido a que en los proyectos anteriores se utilizaron diferentes bibliotecas, que generaron inconsistencias entre los códigos y los gastos de mantenimiento. Con la construcción de Bootstrap, sus creadores pudieron documentar y compartir los patrones de diseño comunes dentro de la empresa.

Este framework lleva más de 20 actualizaciones, que se han centrado principalmente en el diseño adaptativo. Hoy día, se encuentra en la versión 4.1 y lo mantiene la comunidad de desarrolladores de GitHub, plataforma que hospeda códigos fuentes de proyectos privados y de código abierto.

Ejemplos de Bootstrap: ¿Qué se puede hacer?

¿Quieres entender mejor qué tipo de componentes puedes usar para desarrollar un sitio web con Bootstrap? Se puede incluir:

Álbum

Tabla de precios

Formularios de checkout

Blog

Carrusel

Página de inicio de sesión

Layout en grid

Barra de navegación

¡Y muchos otros componentes! Trajimos algunos ejemplos para que los veas. Es necesario entender que siempre que descargues un paquete completo de Bootstrap, puedes personalizar el layout para que el sitio web tenga su identidad, por ejemplo, puedes alterar colores y fuentes.

¿Quién usa Bootstrap actualmente?

Muchas empresas y profesionales que quieren ganar escalabilidad en el desarrollo web usan Bootstrap, ya que permite realizar más proyecto en menor tiempo. Por su facilidad de uso y mejora de la eficiencia, el framework es adoptado por miles de empresas en todo el mundo, entre pequeñas y grandes marcas.

Dejamos aquí algunos sitios web que pueden servir de inspiración y que fueron desarrollados con Bootstrap, de ese modo verás lo que se puede hacer. Si quieres ver otras páginas para inspirarte, echa un vistazo a la selección que realizó Awwwards.

696NYC

BLEND Digital Agency

Hyde + Hyde Architects

Dang Foods

¿Cuáles son las ventajas de usar Bootstrap?

Bootstrap no es uno de los frameworks más populares del mundo por casualidad, sino porque este conjunto de códigos ofrece muchas facilidades a los desarrolladores. A continuación, conoce cuáles son sus ventajas:

a) Eficiencia

Comienzas un proyecto con los elementos básicos del sitio web ya creados, no necesitas romperte la cabeza para desarrollarlos, por lo que puedes dedicarte a otros puntos importantes del diseño. Con eso, el proyecto reduce costos y suma eficiencia. Además, Bootstrap tiene una aplicación simple, lo que te permitirá lograr todo con agilidad.

b) Estandarización

El uso de frameworks, como Bootstrap, sirve también para aplicar los estándares reconocidos en la web. Los iconos, menús y botones, por ejemplo, tienen comportamientos similares en cualquier página. De esa forma, el sitio web gana usabilidad, ya que el usuario no necesita pensar para navegar por las páginas.

c) Seguridad

Los códigos de Bootstrap se desarrollan de acuerdo con los patrones de seguridad de la web. Si construyes un sitio web sin la ayuda de un framework, es posible que pases por alto fallas de seguridad, que pueden perjudicar a tu cliente o a los usuarios del sitio web.

d) Mobile-first design

Bootstrap adopta el patrón de mobile-first design, en otras palabras, los elementos están diseñados considerando primero la experiencia de navegación en dispositivos móviles (y después en escritorios), lo que garantiza la eficiencia en la creación de sitios web adaptativos, y móvil.

e) Comunidad activa

Por ser un proyecto de código abierto y bastante popular, Bootstrap ofrece una amplia documentación para la persona que quiera usarlo, sin costo alguno. La gran comunidad de colaboradores mantiene el framework en constante evolución y proporciona varios materiales y tutoriales (incluso en español) en Internet.

f) Validación

La comunidad activa en torno al framework también ayuda a validar su calidad. Las posibilidades de descargar códigos con fallos son bajísimas, ya que estos han sido probados muchas veces por miles de desarrolladores.

¿Y las desventajas de usar Bootstrap?

Bootstrap ofrece una serie de ventajas, sin embargo, puede que no responda a las exigencias de tu proyecto por algunos motivos. Conoce algunas de las razones por las que tal vez no desees usar este framework:

a) Estandarización

Si bien la estandarización de los elementos facilita la navegación del usuario, al mismo tiempo puede perjudicar la identidad visual del sitio web. Por ser muy usado en todo el mundo, los componentes y layouts se repiten en varias páginas web, aunque estas puedan personalizarse. Así que, quizá no sirva para proyectos que busquen un estilo único y distintivo.

b) Lentitud

Uno de los problemas relatados por algunos desarrolladores es que Bootstrap genera muchos códigos que no se utilizan, lo que disminuye la velocidad de carga del sitio web. Por tal motivo, muchas veces los desarrolladores terminan creando el código desde cero, que da más trabajo, pero permite usar solo los componentes necesarios para construir la página.

¿Cómo se implementa Bootstrap? ¿Por qué facilita la vida del programador?

Implementar Bootstrap es muy sencillo (para las personas que poseen algún conocimiento sobre programación). Lo primero que hay que hacer, es bajar los archivos de la página de Bootstrap. Cuando descomprimas el paquete, tendrás una estructura de códigos parecida a esta:

Cada carpeta de esa estructura corresponde a los archivos que ofrece Bootstrap. Así que, para usarlos, basta con crear una página HTML y vincular los archivos dentro de la etiqueta.

¿Te das cuenta como la implementación de Bootstrap facilita el trabajo del programador? Y es que, en vez de escribir cientos de líneas de código, solo hay que insertar fragmentos que conducen a la biblioteca de Bootstrap.

Es importante resaltar que los elementos ya son adaptativos. Por lo tanto, cuando vincules los archivos de Bootstrap, estos se adaptarán a la pantalla del usuario sin necesidad de configurar la adaptabilidad.

¿Cuáles son los tres archivos primarios de Bootstrap?

Bootstrap es una colección de sintaxis que realizan tareas específicas. Ese conjunto está formado por tres tipos de archivos primarios, que administran la interfaz con el usuario y la funcionalidad de un sitio web. Estos archivos solo ejecutan acciones cuando están en conjunto. A continuación, entenderás mejor para qué sirve cada uno de ellos:

Bootstrap.css

Bootstrap.css es el archivo que da forma visual al sitio web. Permite crear un ambiente uniforme a lo largo de todas las páginas, por ejemplo, con la configuración de los estilos del texto, disposición de elementos y colores.

Bootstrap.js

Bootstrap.js es el conjunto de archivos JavaScript, que es el responsable de la interactividad de un sitio web. Puede que una página web con CSS y HTML funcione bien, pero con el uso de JavaScript resulta más dinámico.

Glyphicons

Este es el tipo de archivo responsable de los iconos del front-end . Bootstrap usa la biblioteca de Glyphicons, que ofrece varias opciones gratis, aunque también tiene paquetes pagos de iconos prémium.

¿Cuáles son los otros componentes de Bootstrap?

Además de los archivos primarios, Bootstrap también utiliza funcionalidades de otras bibliotecas. jQuery y Popper.js son ejemplos de bibliotecas usadas en los componentes JavaScript para ejecutar determinados elementos, como modales, listas despegables y barras de navegación. Así que, esas bibliotecas también necesitan ser importadas con los archivos primarios.

¿Cómo comenzar a usar Bootstrap?

¿Quieres dar los primeros pasos con Bootstrap? Vamos a mostrarte lo que necesitas para comenzar.

Antes de descargar cualquier archivo, debes entender un poco de HTML, CSS y JavaScript. El framework, aunque es fácil de usar, requiere un conocimiento mínimo de programación. Quizá sea necesario que realices ajustes puntuales, incluso en los códigos completos, que exigen dominio de esos lenguajes.

Por lo tanto, si no estás familiarizado con esos lenguajes, el primer paso es que aprendas sobre ellos. Existen varios cursos en línea que te pueden servir. Aprovecha y usa el buscador de cursos de Classpert para conseguir la mejor opción.

Además, es importante que leas la documentación de Bootstrap disponible en la página oficial y conozcas todas las funcionalidades del framework. Asimismo, si quieres iniciar en este campo, es bueno que interactúes con la comunidad de desarrolladores.

Te sugerimos también que tomes cursos sobre Bootstrap. Insistimos en que, a pesar de ser fácil de manejar, puedes sacarle más provecho al framework si conoces a fondo los componentes y los recursos del sistema. A continuación, te presentamos los cursos que recomendamos.

¿Cómo aprender rápido sobre Bootstrap? Cursos para ponerse manos a la obra

Es evidente que puedes aprender mucho sobre Bootstrap con solo manejar los códigos y buscar información por tu cuenta. Sin embargo, los cursos aceleran la curva de aprendizaje con un plan de lecciones estructurado, desde el básico al avanzado.

Así que, con ese conocimiento, podrás usar los recursos de Bootstrap con mucho más dominio y explorar todas sus posibilidades. Conoce algunos cursos de Bootstrap en línea que puedes tomar:

Bootstrap 4- El Curso Completo, Práctico y Desde Cero

Este curso promete un programa completo para aquellos que quieren comenzar a usar Bootstrap. Las clases van desde el concepto de framework en el desarrollo web, cómo instalar Bootstrap, hasta la aplicación práctica en el desarrollo de un tablero, un sitio web institucional y plantillas personalizadas. El curso tiene una calificación de 4.7 en Udemy y cuenta con más de 8.190 estudiantes.

Desarrollo Web con HMTL, CSS y Bootstrap 4 Curso desde cero

Este es un curso rápido para comenzar a usar Bootstrap. Aprende a crear sitios web adaptativos, editar códigos, utilizar la documentación de framework y desarrollar un proyecto real de un sitio web. Este curso incluye clases introductorias de HTML y CSS, para quienes no conocen ese lenguaje. El curso tiene una calificación de 4.7 en Udemy y cuenta con más de 25.600 estudiantes.

Master en Bootstrap 4: Crea páginas web responsive desde 0

Curso básico y rápido para comprender las principales funcionalidades, estilizaciones, comandos y elementos que pueden aplicarse con Bootstrap. Son clases cortas para aprender a usar columnas adaptativas, tablas, formularios, botones, imágenes, menús, pestañas de navegación y otros elementos más. Se necesita tener nociones básicas sobre desarrollo. El curso tiene una calificación de 4.6 en Udemy y cuenta con más de 4.620 estudiantes.

Diseño y Desarrollo Web con Bootstrap 4 Incluye 8 Proyectos

Este curso va directo al punto con clases teóricas mezcladas con prácticas, que se aplican en un proyecto de un sitio web real. Este curso cuenta con unos 2.040 estudiantes inscritos y su calificación es de 4.5 en Udemy.

Bootstrap 4 | TODO sobre diseño web con BOOTSTRAP

Para el que quiera ponerse manos a la obra le gustará este curso. Son más de 11 horas de videoclases en la que aprenderá a utilizar los componentes de Bootstrap, usar el grid de Bootstrap, crear menús y muchas cosas más. Es necesario tener nociones sobre HTML y CSS. El curso tiene una calificación de 4.5 en Udemy y cuenta con más de 8.470 estudiantes.

Diseño Web Profesional El Curso Completo, Práctico y desde 0

Curso para principiantes en desarrollo web. No es indispensable poseer conocimientos previos, solo necesitas saber usar una computadora. Aprenderás desde lo básico sobre HTML, CSS, Bootstrap y WordPress, hasta la creación de sitios web adaptativos con esos lenguajes y herramientas. Este curso es uno de los que en Udemy está mejor calificado, con 4.7 y cuenta con más de 26.600 estudiantes.

Bootstrap 4 desde 0 - La guía definitiva

Este curso contiene más de nueve horas de videoclases, que muestran cómo elevar tu nivel de conocimiento en desarrollo web con Bootstrap y crear proyectos profesionales. El programa de enseñanza también presenta una serie de retos para poner en práctica los conocimientos. Este curso tiene una calificación de 4.4 en Udemy y más de 570 estudiantes inscritos.

Bootstrap 4! De 0 a Experto! Curso completo + Forms con PHP

Este curso se centra no solo en la creación de sitios web con Bootstrap, sino también en la creación de formularios PHP, jQuery y Ajax. También promete el desarrollo de un sitio web corporativo. El curso tiene una calificación de 4.7 en Udemy y cuenta con más de 1.060 estudiantes.

¿Cuáles son las alternativas de Bootstrap?

Bootstrap es reconocido en la comunidad de desarrolladores en todo el mundo y vale la pena usarlo en una variedad de proyectos. Sin embargo, es posible que no te sientas identificado con ese framework. Si deseas conocer algunas alternativas a Bootstrap, te invitamos a revisar la lista a continuación:

1. Foundation

Foundation es considerado uno de los frameworks front-end más completos. Esta herramienta ofrece todo lo que necesitas para crear apps, emails, sitios web adaptativos, junto con una infinidad de posibilidades de personalización. Aunque es más compleja que Bootstrap, algunos profesionales ven Foundacion como una alternativa más provechosa.

• Ventaja: framework dedicado a emails
• Desventaja: curva de aprendizaje abrupta
• GitHub: github.com/foundation/foundation-sites
• Popularidad: muy popular (28.700 estrellas)
• Calidad de mantenimiento: mantenimiento activo.

2. Bulma

Bulma es un framework CSS altamente inspirado en Bootstrap, pero no cuenta con el paquete de plugins de JavaScript, aunque ofrece todos los elementos front-end de Bootstrap, como layout adaptativo, temas personalizados, menús, modales, etc. Además, se basa en la tecnología flexbox, que se usa para proyectar layouts lineales (unidimensionales).

• Ventaja: sistema de grid simplificado
• Desventaja: no incluye plugins JavaScript
• GitHub: github.com/jgthms/bulma
• Popularidad: muy popular (40.600 estrellas)
• Calidad de mantenimiento: mantenimiento activo

3. Tailwind CSS

Tailwind CSS es un framework altamente personalizable que se basa en clases útiles, las cuales permiten mezclar y combinar propiedades CSS sin tener que recurrir a estilos inline (en línea). Tailwind es totalmente adaptativo, aunque no ofrece componentes comunes, como botones o formularios, por lo que necesitarías crear tus propios componentes o buscarlos en sitios web complementarios.

• Ventaja: altamente personalizable y adaptativo
• Desventaja: no incluye componentes básicos
• GitHub: github.com/tailwindlabs/tailwindcss
• Popularidad: muy popular (25.700 estrellas)
• Calidad de mantenimiento: mantenimiento activo

4. HTML5 Boilerplate

HTML5 Boilerplate no es un framework, sino una plantilla front-end que está basada en HTML5, CSS3 y JavaScript. Esta plantilla se usa en el desarrollo de sitios web sencillos o complejos, rápidos, robustos y adaptativos. Sin embargo, no incluye componentes o módulos de layout, por lo que toda la personalización depende enteramente del usuario.

• Ventaja: HTLM5 ya creado
• Desventaja: personalización limitada
• GitHub: github.com/h5bp/html5-boilerplate
• Popularidad: muy popular (46.500 estrellas)
• Calidad de mantenimiento: mantenimiento activo

5. Material UI

Material UI es un framework de componentes que se basa en React UI, con conceptos de Material Design, un sistema respaldado por los especialistas de Design de Google. Toda la personalización se realiza en un entorno JavaScript, incluso en los estilos (con el uso de un enfoque CSS-in-JS).

• Ventaja: basado en Material Design
• Desventaja: limitado a aplicaciones basadas en React
• GitHub: github.com/mui-org/material-ui
• Popularidad: muy popular (59.700 estrellas)
• Calidad de mantenimiento: mantenimiento activo

6. Metro UI

Metro UI es un framework front-end que lleva el lenguaje de design Metro desde Windows hacia la web. Esta herramienta incluye más de 100 componentes de interfaz de usuario para crear cualquier tipo de sitio web. Además, guarda similitud con Bootstrap y ofrece casi los mismos recursos, aunque utiliza un lenguaje sustituto para jQuery, llamado M4Q.

• Ventaja: muy parecido a Bootstrap
• Desventaja: lenguaje de design limitado (énfasis en la tipografía)
• GitHub: github.com/olton/Metro-UI-CSS
• Popularidad: muy popular (6.600 estrellas)
• Calidad de mantenimiento: mantenimiento activo

7. UIKit

UIKit es un framework front-end creado para ser liviano y fácil de usar en el desarrollo de páginas web para móviles y de escritorio. Esta herramienta ofrece una variedad de componentes de interfaz como Bootstrap, que se pueden conectar con etiquetas HTML o códigos JavaScript.

• Ventaja: biblioteca de iconos propios
• Desventaja: muchos problemas no resueltos en GitHub
• GitHub: github.com/uikit/uikit
• Popularidad: muy popular (16.100 estrellas)
• Calidad de mantenimiento: mantenimiento activo, aunque con muchos problemas no resueltos.

8. Materialize

Materialize es otro framework CSS para crear sitios web adaptativos basado en Material Design de Google. Esta herramienta ofrece los componentes de interfaz de Bootstrap, incluyendo plugins JavaScript, que son aún más livianos y sencillos, lo que hace que la experiencia sea más agradable. De igual manera, puedes usar plugins para corregir problemas comunes de UX en teléfonos móviles.

• Ventaja: experiencia de usuario con Material Design
• Desventaja: muchos problemas no resueltos en GitHub
• GitHub: github.com/Dogfalo/materialize
• Popularidad: muy popular (37.900 estrellas)
• Calidad de mantenimiento: mantenimiento activo, aunque con muchos problemas no resueltos

9. Element UI

Element UI es un framework para sitios web basado en Vue.js. Todos los elementos de los proyectos deben ser componentes Vue.js, incluso layouts y grids. La personalización de estilos se realiza a través de SASS o CSS.

• Ventaja: temas personalizados
• Desventaja: se utiliza solo en entornos Vue.js
• GitHub: github.com/ElemeFE/element
• Popularidad: muy popular (46.500 estrellas)
• Calidad de mantenimiento: mantenimiento activo, aunque con muchos problemas no resueltos

10. Onsen UI

Onsen UI es un framework para aplicaciones móviles que permite desarrollar apps mediante tecnologías, como CSS HTML y JavaScript, así como todos los componentes de interfaz que necesitan las aplicaciones móviles.

• Ventaja: amplia gama de componentes para apps móviles
• Desventaja: limitado a aplicaciones para dispositivos móviles
• GitHub: github.com/OnsenUI/OnsenUI
• Popularidad: muy popular (8.000 estrellas)
• Calidad de mantenimiento: mantenimiento activo

11. Material UI (MUI)

Material UI (MUI) también es un framework front-end que se basa en Material Design de Google, el cual permite crear sitios web rápidos y fáciles de utilizar. Esta herramienta se personaliza mediante SASS y no depende externamente de CSS y JavaScript. Además, ofrece una interoperabilidad con React.

• Ventaja: tamaño (hasta 10 KB para toda la estructura)
• Desventaja: no sigue el patrón Mobile First
• GitHub: github.com/muicss/mui
• Popularidad: nicho (4.400 estrellas)
• Calidad de mantenimiento: mantenimiento activo

12. Cirrus

Cirrus es un framework CSS de código abierto compuesto de una estructura sencilla y un diseño atractivo. Puedes integrar Cirrus a un design que ya tengas o puedes crear un proyecto nuevo. Esta herramienta ofrece dos alternativas de desarrollo de layout: flexbox y grid.

• Ventaja: layout adaptativo sencillo
• Desventaja: no tiene plugins JavaScript
• GitHub: github.com/Spiderpig86/Cirrus
• Popularidad: baja (423 estrellas)
• Calidad de mantenimiento: mantenimiento activo

13. MontageJS

MontageJS es un framework que se basa en las tecnologías HTML5, CSS y JavaScript, que se enfoca en la organización de códigos y optimización. Además, ofrece componentes modulares, two-way data biding en tiempo real, la creación de seriales con DOM y otros recursos.

• Ventaja: fácil gestión del estado de la interfaz de usuario
• Desventaja: documentación escasa y confusa
• GitHub: github.com/montagejs/montage
• Popularidad: baja (1.500 estrellas)
• Calidad de mantenimiento: mantenimiento activo, aunque con un fallo en la documentación

14. Pure CSS

Pure CSS es un framework CSS desarrollado por Yahoo!, que permite desarrollar sitios web rápidos, atractivos y adaptativos con una estructura liviana y modular (cerca de 4 KB). Esta herramienta usa Normalize.css y brinda layout y estilos para componentes comunes de interfaz.

• Ventaja: estructura liviana y modular
• Desventaja: número limitado de selectores CSS
• GitHub: github.com/pure-css/pure/
• Popularidad: muy popular (21.000 estrellas)
• Calidad de mantenimiento: no se actualiza con frecuencia

Vale la pena usar Bootstrap?



Estamos hablando de uno de los frameworks de desarrollo web más utilizados en el mundo. Su popularidad demuestra que vale la pena usar Bootstrap para crear sitios web modernos, funcionales y adaptativos, especialmente cuando necesitas ganar tiempo en el proceso.

Pero también vale la pena hacer una advertencia: si quiere un sitio web totalmente personalizado y no te importa tomarte más tiempo para hacerlo, hay otras alternativas de desarrollo front-end que pueden satisfacer mejor tus exigencias.

Preguntas frecuentes

¿Qué es Bootstrap?

Bootstrap es un framework de código abierto para el desarrollo front-end de sitios web adaptativos. El framework reúne un conjunto de componentes ya creados que se repiten a menudo cuando se crean páginas web (menús, iconos, tablas, álbumes, etc.).

¿Por qué usar Bootstrap?

Bootstrap se utiliza para optimizar el trabajo del desarrollador, en especial, en proyectos de sitios web adaptativos, con códigos ya creados para elementos frecuentes. El framework tiene varias ventajas, como la facilidad de uso, la compatibilidad con diversos idiomas, la adopción de normas de seguridad y el apoyo de una amplia comunidad activa.

¿Y por qué no usarlo?

Quizás prefieras usar una alternativa a Bootstrap si quieres tener un sitio web totalmente a tu manera, con un aspecto que te diferencie y con tu propia codificación.

¿Bootstrap es buen framework?

¡Sí, Bootstrap es un buen framework! Facilita mucho tus proyectos, especialmente si eres un desarrollador principiante. Debido a que se trata de un proyecto de código abierto, también hay una gran comunidad en todo el mundo que mantiene a Bootstrap siempre actualizado y en evolución.

¿Qué puedes hacer con Bootstrap?

Bootstrap entrega códigos ya creados para elementos y acciones que aparecen en varios sitios web, tales como álbum de fotos, carrusel de imágenes, tabla de precios, formulario de checkout, estructura del blog, página de inicio de sesión, layout en grid, barras de navegación, entre otros.

¿Bootstrap es gratis?

Sí, Bootstrap es gratis. Cualquier desarrollador que quiera usarlo puede descargar los archivos en el sitio web oficial. Bootstrap se creó para Twitter, pero luego fue lanzado públicamente como un proyecto de código abierto en 2011.

¿Cómo comenzar a usar Bootstrap?

Para comenzar a usar Bootstrap, es fundamental tener conocimientos de HTML, CSS y JavaScript, ya que estos lenguajes conforman el framework. Además, un curso de Bootstrap en línea te ayudará a comprender los fundamentos del framework y cómo aprovechar todos sus recursos.