Blog
¿Qué es Bootstrap?
En la actualidad, los sitios web han evolucionado mucho, y a su vez, el proceso de desarrollo web se ha vuelto más complejo. Gracias a esto han aparecido numerosos frameworks que hacen este proceso más sencillo. Bootstrap es un framework diseñado para ayudar con el diseño de sitios web de forma más rápida y sencilla.
Fue creado para ser utilizado en Twitter con el nombre de Blueprint y luego fue publicado como un proyecto de código abierto en GitHub. En los meses siguientes, con el apoyo de la comunidad, llego a ser ” el framework de HTML, CSS y JS más popular para el desarrollo adaptable en la red” como lo indica su sitio web.
Bootstrap además de ser compatible con preprocesadores como Less y Sass, ofrece herramientas para que los sitios web tengan buena apariencia en toda clase de dispositivos, lo cual ahorra el trabajo de tener que rediseñar los sitios web.
Bootstrap cuenta con características súper importantes que lo han convertido en la primera opción de los desarrolladores web a la hora de darle estilo a sus páginas:
- Soporte: Ofrece una compatibilidad extraordinaria con HTML5 y CC3, de forma que los usuarios pueden utilizarlo con mucha flexibilidad, obteniendo resultados sorprendentes.
- Sencillez: Su sistema permite realizar un diseño utilizando 12 columnas para insertar contenido, de forma que la creación de sitios web es mucho más sencilla e intuitiva.
- Manejo de Imágenes: Bootstrap permite insertar imágenes en el sitio web de forma sencilla. Al utilizar la etiqueta <img-responsive>, se agregará la imagen a la página, y esta se adaptará de forma adecuada a la pantalla del dispositivo en donde sea visualizada.
¿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.
Para asignarle una característica a un elemento, simplemente debemos informar la clase correspondiente en la propiedad “class” del elemento que será estilizado.
¿Por qué usar Bootstrap?
Responsive Design
El responsive design, diseño responsive, o diseño adaptable es una filosofía de diseño y desarrollo cuyo objetivo es adaptar la apariencia de las páginas web al dispositivo que se esté utilizando para visitarlas.
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, sean PCs, tablets, smartphones, consolas, entre otros.
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.
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. Se pueden configurar alertas para transmitir mensajes importantes, barras de navegación para facilitar la búsqueda de contenido en la página, etc.
¿Cómo utilizar Bootstrap?
Existen diferentes maneras para utilizar Bootstrap en un proyecto, ya sea agregando su código CDN al código HTML para usarlo de forma remota, descargándolo de su página web o utilizando alguna de las otras opciones que muestra la página de descarga.
Descargar Bootstrap
Para la opción de descargar Bootstrap, se deben descomprimir y agregar las carpetas al proyecto para que funcione, además de enlazar los archivos de Bootstrap y Jquery para que los plugins funcionen correctamente.
La cabecera del archivo del proyecto debería quedar similar a lo siguiente:
<!DOCTYPE html> <html> <head> <title>Hola Mundo</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> </head> <body> <h1>Hola Mundo</h1> <!-- Hay que incluir los plugins compilados o archivos individuales segun sea necesario --> <script type="text/javascript" src="js/bootstrap.min.js"></script> </body> </html>
Con esto ya podremos comenzar a trabajar con Bootstrap.
Bootstrap CDN
En caso de querer utilizar el CDN, debemos dirigirnos a la sección adecuada de la página de Bootstrap.
Solo haría falta copiar los enlaces a las fuentes de Bootstrap a nuestro archivo base.
<!DOCTYPE html> <html> <head> <title>Hola Mundo</title> <!-- CSS only --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <!-- JS, Popper.js, and jQuery --> <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/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.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> </head> <body> <h1>Hola Mundo</h1> </body> </html>
Luego de esto, Bootstrap estará instalado en el proyecto y listo para ser utilizado para darle un estilo genial a nuestro sitio web.