Bootstrap es un framework CSS utilizado en aplicaciones front-end — es decir, en la pantalla de interfaz con el usuario— para desarrollar aplicaciones que se adaptan a cualquier dispositivo.
En WordPress, por ejemplo, puede instalarse como tema o usarse para el desarrollo de plugins o, incluso, dentro de ellos para estilizar sus funciones. El propósito del framework es ofrecerle al usuario una experiencia más agradable cuando navega en un sitio.
Por esta razón, 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 para dispositivos móviles.
Lo anterior demuestra por qué es importante conocer una estructura potencial de este tipo.
Con eso en mente, elaboramos esta guía completa para principiantes. ¡Continúa leyendo!
¿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.
¿Cuál es la funcionalidad de Bootstrap?
Bootstrap ofrece una serie de características que se pueden implementar en un sitio web. A continuación hablaremos de las posibilidades de esta herramienta.
Diseño responsive
Una de las características principales de Bootstrap es permitir que la adaptación de la página se realice según el tipo de dispositivo utilizado. Para garantizar la responsividad, el framework funciona con:
- la estilización del elemento <div>;
- el uso del class container.
En la práctica, el elemento <div>, funciona para crear una serie de notas, similar a una tabla, capaz de estructurar la página de forma adaptable.
Ya hubo un intento de utilizar tablas para crear diseños responsivos, sin embargo existían limitaciones para definir la longitud de las columnas lo que hizo imposible su uso en dispositivos más pequeños, como smartphones.
El elemento <div> es más flexible, ya que permite definir y cambiar el tamaño de la longitud fácilmente.
Bootstrap le ha asignado al elemento <div> una característica de class container, que funciona para determinar las dimensiones apropiadas para los elementos insertados en ese espacio.
Básicamente, o framework funciona con tres tipos de containers:
- Container: como un conjunto con una propiedad de ancho máximo, que determina qué tamaño de tela es ideal para crear el diseño de página.
- Container-fluid: considera la longitud total de la tela del dispositivo para definir el diseño. Para esto, se considera la propiedad width —100% en todos los límites de tamaño de tela—.
- Container-{ breakpoint}: considera width —100% hasta alcanzar un cierto tamaño—.
Biblioteca de componentes
Otra interesante función de este framework es la cantidad de componentes que pueden ser usados para proporcionar una mejor interacción y perfeccionar la comunicación con el usuario.
Enseguida mencionaremos los principales.
Alertas
O Bootstrap permite una configuración simple y rápida de diferentes tipos de alertas, con colores específicos, según la situación.
Para mostrarle al usuario un alerta que indique atención, por ejemplo, simplemente debemos usar .alert-danger y aparecerá un cuadro de texto con un fondo rojo:
Carrusel
Un componente ampliamente utilizado en Bootstrap es el Carrusel, una presentación de diapositivas, es decir, una herramienta que permite la visualización de imágenes de manera receptiva.
También permite la inclusión de efectos especiales para la transición de imágenes y controles de visualización, como por ejemplo los indicadores de “siguiente” y “anterior”.
Barra de navegación
Otro poderoso componente de la estructura es la NavBar (barra de navegación), que permite la construcción de un sistema de navegación sensible.
Es posible configurar diferentes formas de presentar el menú, elegir entre posicionamiento lateral o superior y, también, definir una forma de visualización que se pueda extender o contraer.
También es posible determinar cómo mostrar los enlaces del menú, que pueden ser en forma de botón, enlace, menú suspenso, entre otras configuraciones, para facilitar la implementación de la navegación del sitio.
¿Cómo descargar Bootstrap?
Hay diferentes formas de descargar este framework. Una de ellas es descargando la versión compilada de los códigos CSS y JavaScript en la página de Bootstrap.
También hay una opción para descargar el código fuente del framework, puesto que es una herramienta de código abierto.
Aquellos que no quieran descargar los archivos pueden acceder a la estructura sin necesidad de instalarlos en el servidor. En la práctica, los archivos de instalación están en otro dominio, o sea en otro DNS.
Para eso, tan solo debemos usar los enlaces para acceder o Bootstrap CDN y, de esa forma, agregarle las referencias a los archivos necesarios para su uso.
Otra forma de descargar el framework es a través de los administradores de paquetes. Es importante decir que Bootstrap se puede usar con diferentes lenguajes de programación.
Por esta razón, puede ser descargado como npm, desde Node.js, con RubyGems, Composer o Nuget, y usarse para crear un sitio web en WordPress, en sitios desarrollados en Ruby on Rails, Asp.Net, etc.
¿Cómo configurar y usar Bootstrap?
Hay diferentes formas de configurarlo o estructurarlo para usarlo en una aplicación web. Sin embargo, para que funcione correctamente, es necesario agregar las bibliotecas JQuery y Popper.js, necesarias para la ejecución de algunos componentes de Bootstrap.
Para comenzar a usar Bootstrap en una página, es necesario agregar las referencias de los principales archivos del framework en la página principal de la aplicación.
A continuación, puedes ver el código de una página HTML con todas las referencias necesarias para que la estructura funcione:
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script></body></html>
<Fuente: Getbootstrap.com>
Es importante seguir las referencias en el orden establecido en el ejemplo. Por lo tanto, la primera referencia debe ser el archivo bootstrap.css ubicado en la etiqueta <head>.
Las referencias a los archivos JavaScript deben colocarse en la parte inferior de la página, antes de cerrar la etiqueta </body>. El valor predeterminado para los scripts debe ser: JQuery, Popper.js y Bootstrap.js.
También debemos mencionar que la forma en que Bootstrap se configura varía según el tipo de entorno en el que se encuentra. En WordPress, por ejemplo, también es posible agregar el framework cambiando el archivo functions.php de la plantilla.
Para hacer esto, lee algunos consejos sobre cómo configurar y usar o Bootstrap que te daremos a continuación.
Realiza un curso
Realizar un curso es la mejor manera de aprender a usar las tecnologías disponibles en el mercado, como Bootstrap.
Esto se debe a que contar con la ayuda de alguien en este momento es importante para entender las características del framework y aclarar las dudas que no siempre se pueden resolver en foros o buscando en Internet.
Aprende sobre plugins
Además de las funciones básicas, Bootstrap también permite el uso de plugins. En la práctica, es una serie de recursos adicionales que ayudarán a mejorar la experiencia del usuario. Existen varios plugins pagos y gratuitos en Internet que se pueden descargar y utilizar con el framework.
Ten una buena guía cerca de ti
Otra forma de mejorar o conocer el framework es consultar las guías de referencia.
El sitio web oficial de Bootstrap, por ejemplo, proporciona una amplia documentación sobre todas sus características, además de ser rico en ejemplos. También, hay varios libros y sitios de referencia que te ayudarán a aprovechar al máximo esa herramienta.
Usa la versión más nueva
Cada vez que se lanza una nueva versión, hay nuevas funciones disponibles, además de los cambio en las funciones existentes.
Por lo tanto, es importante verificar si estamos utilizando la última versión disponible del framework, ya sea para aplicarla a tu sitio web o a tu propio aprendizaje. De esta manera, te aseguras que los recursos utilizados en la página estén actualizados.
¿Cuáles son las razones para usar Bootstrap?
Según las estadísticas del sitio web de W3Techs, Bootstrap ocupa el segundo lugar como la biblioteca de JavaScript más utilizada, con un 20,6% de los sitios web que utilizan dicha tecnología.
Hay varias razones por las que vale la pena usar y aprender Bootstrap. ¡Continúa leyendo que te diremos las principales.!
Mobile-first
Bootstrap sigue el concepto de mobile first. Esto significa que la preocupación del framework es, primero, desarrollar una página que funcione perfectamente en dispositivos móviles y luego en el desktop.
La ventaja de esta estrategia es la garantía de tener un sitio web al que se pueda acceder desde cualquier dispositivo, lo cual es esencial debido a la cantidad de personas que usan smartphone.
Estándar visual
Las funciones disponibles en Bootstrap le ofrecen una experiencia muy rica al usuario. Esto se debe a que el estándar visual de estilización sigue las tendencias de diseño utilizadas en este momento. Además, hay numerosos temas de Bootstrap gratuitos o pagos que se pueden descargar de Internet.
Reutilización de código
Para desarrollar muchas de las características existentes en Bootstrap, sería necesario escribir una gran cantidad de líneas de código lo que provoca un aumento en el tamaño de los archivos y en la cantidad de datos transferidos a la carga de la página.
Estos factores pueden dificultar una buena clasificación en Google y toda una estrategia de SEO completa, ya que el tiempo para que la página se cargue es una de las razones por las que el usuario deja de esperar y abandona el sitio.
Cuando uses Bootstrap, simplemente debes vincular la clase al elemento en el que quieres aplicar el recurso. Por lo tanto, su uso elimina la necesidad de escribir muchas líneas de código y también contribuye a reducir el tamaño de los archivos.
Comunidad activa
Como framework de código abierto, Bootstrap tiene una comunidad activa de desarrolladores.
Además de contribuir con las actualizaciones de las versiones (lo que es muy importante para tener una herramienta siempre actualizada).
La comunidad también mantiene al día la documentación, administra un blog con consejos y noticias sobre la herramienta y ayuda en una página en el sitio web de Stack Overflow.
Como puedes ver en esta guía completa, Bootstrap es un framework poderoso para el desarrollo de aplicaciones front-end receptivas y ofrece numerosos componentes capaces de darle un alto estándar visual a las páginas.
Para aprender a usar todos sus recursos, invierte en un buen curso, estudia la variedad de complementos y siempre consulta una guía de referencia.
Ahora que conoces este poderoso framework para aplicaciones front-end, ¿qué te parece aprender más posibilidades para WordPress?
En este artículo hablamos sobre los principales plugins para WordPress, ¡no dejes de leerlo!
