¿Qué es y para qué sirve Bootstrap?

Hoy nos adentramos en el mundo del código. Hablaremos de qué es Bootstrap y para qué nos puede servir en nuestros desarrollos. Pero antes de nada veamos cuál es su origen y quién comenzó con su desarrollo. Pues bien, allá por 2011 surgen unos nuevos aparatos electrónicos con la capacidad de conectarse a internet y que comienzan a ocupar nuestros bolsillos. Sí hablamos de los teléfonos móviles.

Con el auge de estos dispositivos, los desarrolladores se ven en la necesidad de adaptar los contenidos a los distintos tipos de tamaño de las pantallas. Con esta motivación un pequeño grupo dentro de Twitter se reunen para crear un método de trabajo que unifique el diseño y permita crear distribuciones de páginas más rápidamente. Tras unos meses de desarrollo surge la primera versión que deciden publicar en un repositorio de Git bajo licencia MIT. Desde aquel entonces se han desarrollado ya cuatro versiones.

Uno de los objetivos, como hemos comentado, es la creación de contenido adaptable y para ello Bootstrap divide nuestro espacio en una rejilla con 12 columnas donde poder distribuir el contenido. Mediante el uso de etiquetas CSS y HTML es capaz de adaptar las páginas al tamaño correspondiente del dispositivo con el que visitamos el sitio web. Pero también incluye distintas librerías que nos proporcionan estilos y animaciones para botones, formularios, listas y demás elementos que puede contener una página.

¿Cómo utilizarlo?

Lo primero que debemos hacer para comenzar a utilizarlo es enlazar tanto los css como los js que forman su librería, podemos encontrarlos en este enlace.

Lo siguiente que debemos entender es su forma de distribuir el contenido, y es que Bootstrap divide la página en una serie de columnas como vemos en la siguiente imagen. También permite la creación de contenidos adaptables a los distintos dispositivos con el uso de etiquetas preestablecidas, además redimensiona imágenes simplemente añadiendo la etiqueta “img-responsive”.

¿Cómo ayuda en el desarrollo de una página web?

El uso de esta librería está muy extendido siendo el segundo repositorio de Git más popular, por tanto podemos encontrar gran variedad de contenidos que utilizan Bootstrap como base para su desarrollo. Tanto plantillas para distintos CMS como plantillas para páginas corporativas lo utilizan, haciendo así imprescindible su uso para cualquier desarrollo.

😎 Por cierto, ¿Sabes que podemos posicionar tu web o tienda y atraer contactos? Click aquí para saber más >>

¿Pero qué aporta?

El hecho que hace tan útil su uso es por permitir que el desarrollo de una web sea mucho menor a la hora de crear los distintos diseños dentro de una página web. Y una vez creados estos diseños, el ser capaz de adaptarlos a las distintas pantallas de los dispositivos desde los que se pueden visualizar los contenidos que hemos creado.

Pero, ¿es difícil de utilizar?

Te voy a dejar un ejemplo de una página sencilla creada con Bootstrap, verás que tan solo es necesario añadir unas clases que son las encargadas de realizar todo el trabajo, de nuestra parte solo resta tener en cuenta cuando conviene añadir cada tipo de clase:

Apúntate gratis a las ventas online 👇👇👇

Aprende gratis el proceso para aumentar tus ventas con internet

Enviando sabes que aceptas nuestra política de privacidad.

<!DOCTYPE html>
<html lang=”es”>
<head>
<title>Mi primera página con Bootstrap</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js”></script>
</head>
<body>

<div class=”jumbotron text-center”>
<h1>Mi primera página con Bootstrap</h1>
<p>Prueba a redimensionar!</p>
</div>

<div class=”container”>
<div class=”row”>
<div class=”col-sm-4″>
<h3>columna 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris…</p>
</div>
<div class=”col-sm-4″>
<h3>columna 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris…</p>
</div>
<div class=”col-sm-4″>
<h3>columna 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris…</p>
</div>
</div>
</div>

</body>
</html>

Como puedes ver, crear lo que llamaríamos el esqueleto de una página es mucho más sencillo y nos permite por tanto acelerar el desarrollo de los distintos proyectos además de crear una base para los distintos dispositivos que luego la visitarán.

El periodo de aprendizaje para poder utilizarlo es sencillo siendo su curvatura muy liviana. Pero deberemos familiarizarnos con las estructuras y nomenclatura propias. Y en desarrollos muy personalizados adaptar los tamaños de los distintos elementos puede ser complejo, además de que dificulta el mantenimiento de actualización a una nueva versión ya que hemos modificado el “core”. Por último, en caso de querer añadir elementos a nuestra página que no existen debemos crearlos nosotros mismos prestando atención al diseño y la adaptabilidad cuidando el responsive. Pero estos son pequeñas desventajas que podemos encontrar en cualquier librería que implementemos.

¿Sabes que hacemos software cloud a medida?

➝ Click para saber más sobre software cloud a medida
0/5 (0 Reviews)

¡Dale caña y haz que se enteren!