¿Qué es Bootstrap? – Una guía para principiantes

Bootstrap es un framework de desarrollo web gratuito y de código abierto. Está diseñado para facilitar el proceso de desarrollo de los sitios web responsivos y orientados a los dispositivos móviles, proporcionando una colección de sintaxis para diseños de plantillas.

En otras palabras, Bootstrap ayuda a los desarrolladores a construir sitios web más rápidamente, ya que no tienen que preocuparse por los comandos y funciones básicos. Consta de scripts basados en HTML, CSS y JS para diversas funciones y componentes relacionados con el diseño web.

En este artículo, veremos las ventajas de utilizar Bootstrap y explicaremos los diferentes tipos de archivos que utiliza. Al final, sabrás si Bootstrap puede beneficiar a tu flujo de trabajo.

Descarga Glosario Completo de Desarrollo Web

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.

Cómo usar Bootstrap

Para tener una mejor idea de qué es bootstrap y cómo usarlo, echa un vistazo al siguiente ejemplo.

<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> 
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Explicaremos algunas de las líneas en más detalle.

meta charset = "utf-8"

Indica el conjunto de caracteres que se utiliza para escribir el sitio web. En este caso, UTF-8 se refiere a Unicode.

meta http-equiv="X-UA-Compatible"

Determina la versión de Internet Explorer que debe renderizar la página. Al usar el modo Edge, está configurado para usar el modo más alto disponible.

meta name="viewport"

Garantiza que la página tenga una relación de 1:1 con el tamaño de la ventana gráfica.

link href="css/bootstrap.min.css"
rel="stylesheet"

Esta es la parte donde agregamos el CSS central de Bootstrap.

src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"

Carga jQuery a través de Google CDN. Es mejor cargarlo desde la CDN a través de HTTP, ya que los archivos se pueden almacenar en caché durante un año.

src="js/bootstrap.min.js

Agrega el JavaScript principal de Bootstrap. Esta sintaxis siempre debe estar por debajo de la sintaxis de jQuery para funcionar correctamente. El proceso de adición se puede realizar a través de la URL de Google o mediante una descarga manual.

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

Bootstrap proporciona un paquete de JavaScript para simplificar el proceso. Sin embargo, bootstrap.bundle.js y bootstrap.bundle.min.js incluyen Popper en lugar de jQuery. Popper es un motor de posicionamiento para calcular la posición de los elementos.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#">Disabled</a>
    </div>
  </div>
</nav>

Un ejemplo de cómo utilizar los enlaces de navegación de la barra de Bootstrap para crear los menús de los sitios.

Conclusión

Bootstrap es un framework front-end popular entre los desarrolladores hoy, en particular aquellos que trabajan en el mundo del diseño. Es fácil de usar y ahorra a los desarrolladores tener que escribir código HTML, CSS y JavaScript manualmente.

El framework es muy flexible y puede adaptarse a casi todas las necesidades de desarrollo web front-end. Su mejor característica es las plantillas de diseño que hacen que las páginas web funcionen de forma óptima en todos los tamaños de pantalla.

A pesar de tener una ligera curva de aprendizaje, viene con un montón de recursos para ayudarte a empezar. Algunas de las mejores plataformas de aprendizaje son la página de documentación de Bootstrap y los foros centrados en IT como Stack Overflow.

Esperamos que este artículo haya respondido a la pregunta de qué es Bootstrap y te haya ayudado a comprender las ventajas de utilizarlo en el desarrollo y el diseño web.