Bootstrap

¿Qué es Bootstrap?

Bootstrap es un framework CSS desarrollado por Twitter en 2010, para estandarizar las herramientas de la compañía.

Inicialmente, se llamó Twitter Blueprint y, un poco más tarde, en 2011, se transformó en código abierto y su nombre cambió para Bootstrap. Desde entonces fue actualizado varias veces y ya se encuentra en la versión 4.4.

El framework combina CSS y JavaScript para estilizar los elementos de una página HTML. Permite mucho más que, simplemente, cambiar el color de los botones y los enlaces.

Esta es una herramienta que proporciona interactividad en la página, por lo que ofrece una serie de componentes que facilitan la comunicación con el usuario, como menús de navegación, controles de página, barras de progreso y más.

Además de todas las características que ofrece el framework, su principal objetivo es permitir la construcción de sitios web responsive para dispositivos móviles.

Esto significa que las páginas están diseñadas para funcionar en desktop, tablets y smartphones, de una manera muy simple y organizada.

       ¿Cómo funciona Bootstrap?

Bootstrap está constituido por una serie de archivos CSS y JavaScript responsables de asignar características específicas a los elementos de la página.

Hay un archivo principal llamado bootstrap.css, que contiene una definición para todos los estilos utilizados. Básicamente, la estructura del framework se compone de dos directorios:

• css: contiene los archivos necesarios para la estilización de los elementos y una alternativa al tema original;
• js: contiene la parte posterior del archivo bootstrap.js (original y minificado), responsable de la ejecución de aplicaciones de estilo que requieren manipulación interactiva.

Para asignarle una característica a un elemento, simplemente debemos informar la clase correspondiente en la propiedad “class” del elemento que será estilizado, como mostramos e el siguiente ejemplo:

En este ejemplo, fue asignado el contenido "rounded-sm" para una propiedad de imagen. Es un estilo que agrega bordes redondeados y no un elemento.

Por lo tanto, al cargar la imagen, se aplicarán al elemento las características que se refieren a esta clase.

Funciones básicas de Bootstrap

El objetivo principal de Bootstrap es crear sitios web responsivos y orientados a los dispositivos móviles. El framework garantiza que todos los elementos de la interfaz de un sitio web funcionen de forma óptima en todos los tamaños de pantalla.

Bootstrap está disponible en dos variantes: precompilada y basada en código fuente. Los desarrolladores experimentados prefieren esta última, ya que les permite personalizar los estilos para adaptarlos a sus proyectos.

Por ejemplo, la versión «código fuente» de Bootstrap permite acceder al puerto Sass. Esto significa que crea una hoja de estilos personalizada que importa Bootstrap, permitiéndote modificar y ampliar la herramienta según tus necesidades.

También puedes instalar Bootstrap con un gestor de paquetes, una herramienta que gestiona y actualiza frameworks, librerías y activos.

Algunos de los gestores de paquetes más populares son npm, Composer y Bower. Npm gestiona las dependencias del lado del servidor, mientras que Composer se centra en el front-end. Si trabajas en proyectos basados en PHP, considera usar Bower en su lugar.

Debido a su popularidad, cada vez surgen más comunidades de Bootstrap. Estos son excelentes lugares para que los desarrolladores y diseñadores web compartan conocimientos y discutan las últimas versiones de los parches de Bootstrap.

¿Por qué deberías usar Bootstrap?

Algunos de los componentes de la interfaz de Bootstrap incluyen barras de navegación, sistemas de cuadrícula, carruseles de imágenes y botones.

Si todavía no te convence si vale la pena probar Bootstrap, aquí tienes las ventajas de usarlo en comparación con otros frameworks de desarrollo web.

Facilidad de uso

En primer lugar, Bootstrap es fácil de aprender. Debido a su popularidad, hay un montón de tutoriales y foros en línea para ayudarte a empezar.

Una de las razones por las que Bootstrap es tan popular entre los desarrolladores y diseñadores web es que tiene una estructura de archivos sencilla. Sus archivos están compilados para facilitar el acceso y sólo se requieren conocimientos básicos de HTML, CSS y JS para modificarlos.

También puedes utilizar los temas de los sistemas de gestión de contenidos más populares como herramientas de aprendizaje. Por ejemplo, la mayoría de los temas de WordPress se han desarrollado con Bootstrap, a los que puede acceder cualquier desarrollador web principiante.

Para reducir el tiempo de carga de la página del sitio, Bootstrap minifica los archivos CSS y JavaScript. Además, Bootstrap mantiene la coherencia de la sintaxis entre los sitios web y los desarrolladores, lo que es ideal para los proyectos en equipo.

Rejilla responsive

Bootstrap viene con un sistema de rejilla predefinido, lo que te ahorra crear uno desde cero. El sistema de rejilla consta de filas y columnas, lo que permite crear una cuadrícula dentro de la existente en lugar de introducir media queries en el archivo CSS.

Además, el sistema de rejilla de Bootstrap hace que el proceso de ingreso de datos sea más sencillo. Contiene muchas media queries, lo que te permite definir los breakpoints personalizados de cada columna en función de las necesidades de tu proyecto web.

La configuración por defecto suele ser más que suficiente. Después de crear una rejilla, sólo tienes que añadir contenido a los contenedores.

El sistema de rejilla de Bootstrap tiene dos clases de contenedores para adaptarse mejor a los proyectos de escritorio y móviles: un contenedor fijo (.container) y un contenedor fluido (.container-fluid).

La primera clase de contenedor proporciona un contenedor de ancho fijo, mientras que la segunda ofrece un contenedor de ancho completo capaz de ajustar tu proyecto a todos los tamaños de pantalla.

Compatibilidad con los navegadores

Hacer que tu sitio web sea accesible a través de diferentes navegadores ayuda a reducir la tasa de rebote y a posicionarse mejor en los resultados de búsqueda. Bootstrap cumple este requisito al ser compatible con las últimas versiones de los navegadores más populares.

A pesar de no ser compatible con navegadores menos conocidos como WebKit, los sitios web con Bootstrap deberían funcionar correctamente también en ellos. Sin embargo, puede haber limitaciones en cuanto a los modales y los desplegables en las pantallas más pequeñas.

Sistema de imágenes de Bootstrap

Bootstrap gestiona la visualización de imágenes y la capacidad de respuesta con sus reglas HTML y CSS predefinidas.

Al añadir la clase .img-responsive, las imágenes se redimensionarán automáticamente en función del tamaño de la pantalla de los usuarios. Esto beneficiará el rendimiento de tu sitio web, ya que la reducción del tamaño de las imágenes forma parte del proceso de optimización del sitio.

Bootstrap también proporciona clases adicionales como .img-circle y .img-rounded, que ayudan a modificar la forma de las imágenes.

Documentación de Bootstrap

Bootstrap proporciona documentación para los desarrolladores que quieran aprender a utilizar este framework por primera vez. Aquí hay varios temas que puedes encontrar en la página de documentación de Bootstrap:

• Contenido: cubre el código fuente precompilado de Bootstrap.
• Navegadores y dispositivos: enumera todos los navegadores web y móviles compatibles y los componentes basados en móviles.
• JavaScript: desglosa varios plugins JS construidos sobre jQuery.
• Tematización: explica las variables Sass incorporadas para facilitar la personalización.
• Herramientas: te enseña a utilizar los scripts npm de Bootstrap para diversas acciones.
• Accesibilidad: cubre las características y limitaciones de Bootstrap con respecto al marcado estructural, los componentes, el contraste de colores, la visibilidad del contenido y los efectos de transición.

La documentación también incluye ejemplos de código para las prácticas básicas. Incluso puedes copiar y modificar los ejemplos de código para tus proyectos, ahorrando tiempo de tener que codificar desde cero.

Por qué no usar Bootstrap

A pesar de sus ventajas, Bootstrap tiene ciertas limitaciones que no son adecuadas para determinados tipos de proyectos.

Dado que Bootstrap tiene un estilo visual consistente, necesita una fuerte personalización y sustitución de estilos para hacer que un proyecto sea diferente de otro. De lo contrario, todos los sitios web construidos con este framework tendrán los mismos componentes de navegación, estructura y diseño, lo que les dará un aspecto poco profesional.

El hecho de tener un gran número de funciones implica que los archivos son de gran tamaño. El uso de Bootstrap en tu proyecto puede ralentizar el tiempo de carga del sitio web y sobrecargar tu servidor. Para evitar este problema, asegúrate de añadir sólo las clases que necesites y utiliza la versión minificada de los archivos.

Aunque Bootstrap es compatible con la última versión de los navegadores más populares, no ocurre lo mismo con las versiones más antiguas. Esto significa que el aspecto de tu sitio web dependerá totalmente de la voluntad de los usuarios de actualizar sus navegadores.

Otro inconveniente es que los estilos de Bootstrap son relativamente voluminosos. Esto puede dar lugar a una salida de HTML innecesaria, que desperdicia recursos de la unidad central de procesamiento.

Aunque es fácil de usar, Bootstrap tiene una pequeña curva de aprendizaje al principio. Se necesita tiempo para aprender las clases y componentes disponibles, lo que puede resultar complicado para alguien sin conocimientos técnicos.

3 Archivos primarios de Bootstrap

Bootstrap consiste en una colección de sintaxis compilada en tres archivos principales: Bootstrap.css, Bootstrap.js y Glyphicons. Hay que tener en cuenta que Bootstrap requiere una librería JS llamada jQuery para ejecutar plugins y componentes JS.

Estos son los tres archivos principales del framework que gestionan la interfaz de usuario y la funcionalidad de un sitio web.

Bootstrap.css

Bootstrap.css es un framework CSS que organiza y gestiona el diseño de un sitio web. Mientras que HTML gestiona el contenido y la estructura de una página web, CSS se ocupa del diseño del sitio. Por esa razón, ambas estructuras deben coexistir para realizar una acción en particular.

Bootstrap.css y sus funciones le permiten al desarrollador crear una apariencia uniforme en tantas páginas web como desee. Por lo tanto, no tendrá que dedicar horas a la edición manual.

En lugar de programar desde cero, todo lo que tienes que hacer es referir una página web al archivo CSS. Cualquier alteración necesaria se puede hacer en ese único archivo.

Las funciones de CSS no se limitan solo a los estilos de texto, ya que pueden usarse para dar formato a otros aspectos de la página web, como tablas y diseños de imágenes.

Dado que CSS tiene muchas declaraciones y selectores, memorizarlos todos puede llevar algo de tiempo. Puedes ver nuestra hoja de trucos CSS para facilitar el proceso de aprendizaje.

Bootstrap.js

Este archivo es la parte principal de Bootstrap. Consiste en archivos JavaScript que son responsables de la interactividad del sitio web.

Para ahorrar tiempo escribiendo sintaxis de JavaScript muchas veces, los desarrolladores tienden a usar jQuery, una popular librería de JavaScript multiplataforma de código abierto.

Aquí hay algunos ejemplos de lo que puede hacer jQuery:

• Realizar solicitudes de AJAX, como restar datos de otra ubicación de forma dinámica.
• Crear widgets usando una colección de complementos de JavaScript.
• Crear animaciones personalizadas usando propiedades CSS.
• Agregar dinamismo al contenido del sitio web.

Si bien un Bootstrap con propiedades CSS y elementos HTML puede funcionar bien, necesita jQuery para crear un diseño responsive. De lo contrario, solo puedes usar las partes estáticas de CSS.

Por lo tanto, todo ingeniero de software debería aprender sobre jQuery, ya que es una parte esencial del desarrollo web.

Glyphicons

Los íconos son una parte integral del frontend de un sitio web, ya que suelen desplegar acciones y datos dentro de la interfaz de usuario.

Bootstrap usa íconos llamados Glyphicons, que incluyen el set Glyphicons Halflings. Aunque el diseño es básico, cumplen sus funciones esenciales y su uso es gratuito.

Si quieres encontrar íconos más elegantes, Glyphicons vende varios sets premium para sitios web de nichos específicos.

También puedes descargar íconos individuales y específicos por tema de forma gratuita en varios sitios web como Flaticon, GlyphSearch e Icons8.

Para cambiar el tamaño de los Glyphicons, es necesario anular el estilo por defecto con la propiedad CSS font-size.