¬Ņ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”.

Leones Digitales 2.0

La formaci√≥n que lanza empresas de 0 a millones ‚ā¨ gracias a internet. 

‚ėÖ‚ėÖ‚ėÖ Totalmente gratis - Plazas limitadas ‚ėÖ‚ėÖ‚ėÖ

¬Ņ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.

¬Ņ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:

<!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.

0/5 (0 Reviews)

¡Vamos, cuéntaselo a todos!

¡Déjanos tus comentarios!