¿Qué es Bootstrap?
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.
¿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.
¿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/popper.js@1.16.0/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>
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.
¿Quién creo bootstrap?
Bootstrap fue desarrollado por Mark Otto (@mdo) y Jacob Thornton (@fat) desarrolladores del famosísimo Twitter, proveedor de servicios de microblogueo.
¿Pero quiénes son Mark Otto y Jacob Thornton?
Mark Otto es un diseñador viviendo y trabajando en San Francisco, trabajó como freelance durante la secundaria y la universidad, antes de mudarse a California para trabajar en la empresa de diseño ZURB, en 2007.
Durante su estancia en ZURB diseñó y desarrolló docenas de proyectos con grandes y pequeños clientes, incluido un sitio web para Britney Spears -¡Cool! – .
Después de un periodo de dos años y medio en ZURB, renunció para comenzar a trabajar en Twitter como diseñador de productos.
En Twitter trabajó en numerosos proyectos y varias herramientas internas, ahí fue donde creó el popular kit de herramientas para front-end de código abierto Bootstrap con ayuda del buen Jacob Thornton.
Bootstrap nació en Twitter como un medio para crear mejores herramientas internas, comenzó como algo simple de HTML/CSS, luego Jacob construyó complementos encima y así es como comenzó “Bootstrap de Twitter” llamado así originalmente.
Hasta la fecha Otto y Jacob han puesto más de 1000 horas en Bootstrap, sino es que más. Semanalmente trabajan de tiempo completo en sus respectivos empleos, pero suelen realizar esfuerzos durante algunas horas por la noche y más los fines de semana, esto quiere decir que ellos no trabajan de tiempo completo en Bootstrap.
Actualmente Otto se desempeña como Director Principal de Diseño en GitHub, administra un equipo de aproximadamente 25 diseñadores web, ingenieros y artistas.
Por su parte Jacob Thornton es cofundador de Bumpers (aplicación de podcasting). Trabajó en Medium y Twitter, dondé junto a Otto creó Bootstrap.
Jacob hace un tiempo solía mantener un blog, donde escribía una serie de artículos de filosofía, sociología, teoría crítica y tecnología, donde abordó diferentes temas “con los que estaba luchando en ese momento”.
Jacob en particular tiene ideas que dan vueltas en su cabeza como ¿los robots o la inteligencia artificial se volverán demasiado inteligentes y tomarán el control? ¿ya vivimos en una realidad virtual? y cuestiones como “necesitamos colonizar Marte, o de lo contrario nos vamos a extinguir” y temas por las que la gente como él está obsesionada.