Pero, ¿Qué es Bootstrap?
Sabes que es útil, pero ¿para qué se usa Bootstrap y cómo ayuda realmente a los desarrolladores web?
El kit de herramientas de desarrollo de aplicaciones web fue creado por los antiguos empleados de Twitter Mark Otto y Jacob Thornton.
La página web oficial de Bootstrap describe a Bootstrap como:
“El marco de trabajo más popular de HTML, CSS y JS para desarrollar primeros proyectos móviles y sensibles en la web”.
En términos simples:
Bootstrap es una gigantesca colección de prácticos y reutilizables bits de código escrito en HTML, CSS y JavaScript. También es un marco de desarrollo de primera línea que permite a los desarrolladores y diseñadores construir rápidamente sitios web totalmente receptivos.
Bootstrap te evita escribir mucho código CSS, lo que te permite dedicar más tiempo al diseño de páginas web.
También es GRATIS!
Actualmente está alojado en GitHub y puede ser descargado fácilmente desde getbootstrap.com.
¿Por qué Bootstrap es la solución para los desarrolladores web?
Vamos a dividir las ventajas en 8 partes:
1. La red de respuesta de Bootstrap
No más horas de codificación de su propia cuadrícula – ¡Bootstrap viene con su propio sistema de cuadrícula predefinido!
Ahora, puedes ir directamente a llenar tus contenedores con el contenido.
Definir puntos de ruptura personalizados para cada columna es muy fácil usando sus rupturas extra pequeñas, pequeñas, medianas, grandes y extra grandes. También puedes simplemente ceñirte a los predeterminados, ya que puede que ya satisfagan las necesidades de tu sitio.
2. Imágenes de respuesta de Bootstrap
Bootstrap viene con su propio código para redimensionar automáticamente las imágenes en función del tamaño de la pantalla actual. Sólo tienes que añadir la clase .img-responsive a tus imágenes, y las reglas CSS predefinidas se encargan del resto.
Deja que Bootstrap redimensione tus imágenes por ti!
Incluso puede cambiar la forma de tus imágenes con la adición de clases como img-circle e img-rounded, y eso sin tener que ir y venir entre el código y tu software de diseño.
3. Componentes de Bootstrap
Bootstrap viene con un barril entero de componentes que puedes añadir fácilmente a tu página web, incluyendo:
- Barras de navegación
- Descargas
- Barras de progreso
- Miniaturas
- …y más!
No sólo es fácil añadir elementos de diseño llamativos a su página web, sino que también podrá estar seguro de que cada uno de ellos se verá genial sin importar el tamaño de la pantalla o el dispositivo utilizado para verlos.
Eso es un montón de funcionalidad ya preparada al alcance de tu mano!
Para obtener una lista más completa de las funciones que se pueden añadir, consulta la documentación de los componentes.
4. Bootstrap y JavaScript
¿Todavía no hay suficientes funciones? ¡Intenta con JQuery!
Bootstrap también permite a los desarrolladores aprovechar más de una docena de plugins personalizados de JQuery.
JQuery te da aún más espacio para jugar con la interactividad, ofreciendo soluciones sencillas para popups modales, transiciones, carruseles de imágenes y -uno de mis favoritos personales- un plugin llamado scrollspy, que actualiza automáticamente tu barra de navegación a medida que te desplazas por una página.
5. Documentación de Bootstrap
La documentación de Bootstrap es una de las mejores que he visto. Cada pieza de código está descrita y explicada en detalle en su sitio web.
Las explicaciones también incluyen ejemplos de código para la implementación básica, simplificando el proceso incluso para el más principiante de los principiantes.
Todo lo que necesitas hacer es elegir un componente, copiar y pegar el código en tu página, y ajustar desde allí.
6. Personalización de Bootstrap
Una de las principales críticas cuando se trata de marcos como Bootstrap es su tamaño, el peso que lanzan puede realmente frenar su aplicación en la primera carga.
La versión actual del archivo CSS de Bootstrap, por ejemplo, es de apenas 119 KB. Aunque esto puede no parecer especialmente grande comparado con los archivos de imagen y vídeo, para un archivo CSS, ¡es enorme!
Sin embargo, lo que Bootstrap te permite hacer para combatir esto es personalizar la funcionalidad que quieres incluir en tu descarga.
Simplemente yendo a su página de personalización y descarga, puedes marcar las características que no necesitarás para tu aplicación, recortando el peso de tu archivo y ahorrando a tus usuarios el tiempo adicional de carga.
La personalización es la clave!
7. Comunidad de Bootstrap
Como con tantos proyectos de código abierto, Bootstrap tiene una gran comunidad de diseñadores y desarrolladores detrás de él.
El hecho de estar alojado en GitHub hace que sea fácil para los desarrolladores modificar y contribuir a la base de código de Bootstrap.
También facilita que la gente colabore, preste su consejo e interactúe con sus pares y compañeros de trabajo.
Bootstrap tiene una página de Twitter activa, un blog de Bootstrap, e incluso una sala de Slack dedicada.
Y eso ni siquiera entra en la riqueza de los desarrolladores dispuestos a ayudar con problemas técnicos en Stack Overflow, donde todas las preguntas se pueden encontrar bajo la etiqueta bootstrap-4.
8. Plantillas externas de Bootstrap
A medida que la popularidad de Bootstrap crecía, la gente empezó a crear plantillas basadas en Bootstrap para acelerar aún más el proceso de desarrollo de la web.
Hay muchos sitios web dedicados a compartir y comprar plantillas personalizadas basadas en Bootstrap.
¿Por qué no deberías usar Bootstrap?
A estas alturas, probablemente pienses que usar Bootstrap es algo obvio.
Pero recuerda que hay dos caras de cada moneda.
Como casi todo en la vida, incluso Bootstrap tiene sus desventajas.
Echemos un vistazo a algunas de las quejas más comunes que puedes oír sobre Bootstrap:
1. ¡La sintaxis de Bootstrap es confusa!
Antes de que te familiarices con Bootstrap, parte de su sintaxis puede ser confusa.
Por ejemplo, cuando se utiliza el sistema de cuadrículas, para hacer una columna que ocupe un tercio de la pantalla, hay que añadirle la clase .col-md-4.
4? ¡¿De dónde ha salido este 4?!
Sin duda, el cuatro podría hacerte creer que la columna ocuparía un cuarto de la pantalla, no un tercio. Aunque esta sintaxis tiene sentido (Bootstrap usa un sistema de 12 columnas, y 4 es un tercio de 12), puede ser poco intuitiva para aquellos que son nuevos en el proceso.
2. ¡Los archivos de Bootstrap son demasiado grandes!
Como se mencionó anteriormente, los archivos de Bootstrap pueden ser un poco, bueno, grandes para dar cuenta de la pura funcionalidad que ofrece su marco de trabajo.
Esto puede llevar a un aumento en los tiempos de carga de los sitios web, especialmente en las redes más lentas.
A los principiantes les puede resultar difícil identificar y solucionar este problema; sin embargo, como ya se ha mencionado, la herramienta de personalización del sitio web de Bootstrap puede ayudar a eliminar cualquier código innecesario para funciones que nunca se utilizarán.
Bootstrap, ¡hazlo a tu manera!
Simplemente elige los bits que necesitas y deja el resto. (¡Por supuesto, esta tarea se hace más fácil cuanto más sepas sobre codificación!)
3. Bootstrap me impide aprender realmente el código!
Siempre existe el riesgo de que, al usar Bootstrap, te metas en un ciclo de reciclaje del código existente sin comprenderlo realmente.
Sin embargo, si dedicas el tiempo necesario para aprender realmente lo que estás haciendo, puedes usar Bootstrap como una forma de acelerar tu aprendizaje, en lugar de dificultarlo.
Resumiendo todo
Como ya habrán notado, Bootstrap es una poderosa herramienta que permite a un desarrollador ponerse en marcha rápidamente y sin dolor.
Facilita la integración de muchas grandes características que enriquecen la interacción del usuario con la web sin tener que codificarlas desde cero.
Bootstrap es inmensamente popular y ha sido usado para construir algunos grandes sitios web. ¿No nos crees? Echa un vistazo a la página web de la NASA o incluso a FIFA.com.
¿Quieres empezar a codificar? Con nuestro Mega Curso De Bootstrap 4 Aprende De 0 A 100 – Se Un Experto, tendrás tu primer sitio web en funcionamiento al final del curso!
