¿Qué es Bootstrap?

Probablemente estés familiarizado con la funcionalidad de los frameworks. Su colección de sintaxis para tareas específicas permite a los desarrolladores crear sitios web mucho más rápido, ya que no necesitan preocuparse por los comandos y funciones básicas.

Aun así, hubo una falta de coherencia debido al uso extensivo de bibliotecas que exigió un cambio. Bootstrap respondió a la llamada.

Pero, ¿Qué es bootstrap? Es un framework de interfaz de usuario, de código abierto, creado para un desarrollo web más rápido y sencillo. Mark Otto y Jacob Thornton fueron los creadores iniciales.

Contiene todo tipo de plantillas de diseño basadas en HTML y CSS para diversas funciones y componentes, como navegación, sistema de cuadrícula, carruseles de imágenes y botones.

Si bien Bootstrap ahorra tiempo al desarrollador de tener que administrar las plantillas repetidamente, su objetivo principal es crear sitios responsive. Permite que la interfaz de usuario de un sitio web funcione de manera óptima en todos los tamaños de pantalla, ya sea en teléfonos de pantalla pequeña o en dispositivos de escritorio de pantalla grande.

Por lo tanto, los desarrolladores no necesitan crear sitios específicos para dispositivos y limitar su rango de audiencia.

Debido a su popularidad, surgen cada vez más comunidades Bootstrap. Estos son grandes lugares para que los desarrolladores y diseñadores intercambien conocimientos y discutan las últimas versiones del framework.

¿Cómo implementar Bootstrap en una web ?

Para esto puedes hacerlo de dos formas o métodos distintos de integrar esta librería en tu página web:

Primera forma : por descarga
Segunda forma: por CDN

Primera forma: Descargar e instalar desde la web oficial de Bootstrap

La primera tenemos que entrar a la página misma de Bootstrap y descargar los archivos necesarios (bootstrap.css, Bootstrap.js y el jquery). La url oficial de Bootstrap es la siguiente: Bootstrap

Y luego de descargar los archivos procedes a importarlos a tu proyecto con las etiquetas html que sean necesarias. Ojo Jquery debes descargarlo de su página web oficial o la CDN de Google.

<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

Estos tags deben ir dentro de la etiqueta <head> …</head>, fijate que también debes incluir Jquery antes de bootstrap.min.js pues hasta la versión 4.5 aún necesita Jquery para algunas funcionalidades. Probablemente a partir de la versión 5 de Bootstrap ya no incluirá o necesitará a Jquery.

Segunda forma: A través de la CDN de Bootstrap

Otra forma que tenemos y la más conveniente sería el llamado a la misma página de los creadores, mediante la cual se hará una petición a sus servidores para usar los archivos CSS y JS necesarios, los cuales no estarán almacenados en su página web y aumenten el tamaño de este, como se sabe al estar dentro del proyecto hacen que ocupe un poco de espacio adicional en todo tu proyecto.

Forma de maquetar tu estructura en HTML:

<!doctype html>
<html lang="es">
  <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.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 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.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

Todo estos ejemplos y mas, si deseas extenderlo puedes visitar la pagina oficial del framework que te da pequeños tutoriales de como usar al 100% esta increibre herramienta.

Finalmente ¿Cuál forma de integrar Bootstrap conviene?

Pues, depende. Depende de que requerimientos tiene tu proyecto web, es decir si va a diseñar una página web sencilla lo más recomendable es usar la CDN de Bootstrap. Ahora si vas a personalizar el sitio web con diferentes colores, texto, etc sería recomendable implementar bootstrap en tu propio proyecto descargando los recursos en un directorio de tu sitio web.

Archivos primarios de Bootstrap

Ya sabemos qué es Bootstrap; consiste en una colección de sintaxis que realizan funciones específicas. Debido a esto, tiene sentido que el marco tenga solo tres diferentes tipos de archivos. A continuación, detallamos los tres archivos principales que administran esta 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.

Debido a sus funciones, CSS te permite crear una apariencia uniforme en tantas páginas web como desees. Podrás decirle adiós a las horas de edición manual solo para cambiar el ancho de un borde.

Con CSS, todo lo que necesitas hacer es referir las páginas 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.

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 en numerosas ocasiones, los desarrolladores tienden a usar jQuery. Es una popular biblioteca de JavaScript multiplataforma de código abierto que permite agregar varias funciones a un sitio web.

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 receptivo. De lo contrario, solo puede usar las partes estáticas y desnudas de CSS.

Glyphicons

Los iconos son una parte integral de la interfaz de un sitio web. A menudo se asocian con determinadas acciones y datos dentro de la interfaz de usuario. Bootstrap usa Glyphicons para satisfacer esa necesidad.

Bootstrap incluye un conjunto Glyphicons Halflings que se ha desbloqueado para uso gratuito. La versión gratuita tiene un aspecto estándar pero es adecuada para funciones esenciales.

Si deseas encontrar íconos más elegantes, Glyphicons vende varios conjuntos premium que, sin duda, se verán mejor en sitios web específicos de nichos.

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

Algunos iconos pueden verse afectados por CSS para cambiar su apariencia mientras que otros están como predeterminados. Utiliza los iconos que mejor se adapten a las necesidades de tu sitio.

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>

Explicación de código en etiqueta Head

<meta charset="utf-8"/>

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

<meta http-equiv="X-UA-Compatible"/>

Determina la versión de Internet Explorer que debe representar 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.

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

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.

<script src="js/bootstrap.min.js"></script>

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.

Conclusión

Bootstrap es un framework front-end gratuito que se está volviendo cada vez más popular entre los desarrolladores front-end ya que es fácil de usar y ahorra a los desarrolladores mucho tiempo al no tener que escribir sintaxis manualmente una y otra vez.

¿Qué es Bootstrap?