BootStrap: Uso, Ventajas e Instalación

Si quieres dedicarte al tema del diseño web, creo que sería bastante recomendable que conocieras un poco el funcionamiento de BootStrap, ya que puede serte de mucha utilidad para la futura creación de proyectos webs.

Por empezar, Bootstrap es un framework que tiene la utilidad de dar un estilo a una página o a una aplicación, o para que sea más entendible, son unos ficheros que te ayudarán a darle diseño a tu propio website.

Para instalarlo hay 2 formas, ambas de una manera totalmente similar a como instalamos FontAwesome en posts anteriores.

Como añadir iconos a tu página de WordPress

  1. Descargamos bootstrap desde su página oficial, lo insertamos dentro de nuestra web y lo vinculamos mediante sus respectivas etiquetas <link> y <script>
  2. Copiamos desde el cdn los archivos css y js que vamos a necesitar (en su página www.bootstrapcdn.com) y los pegamos en nuestra página oficial dentro de nuestras etiquetas <head>

BootStrap es bastante común en el uso de varias páginas, ya sea una web diseñada desde 0 como poder implementarla en tu propio WordPress o PrestaShop, es una gran ventaja que obtienes, si añadimos también que cuenta con un sistema Grid muy útil para poder estructurar distintos elementos a la misma altura, a la vez que poder crear un diseño adaptable para dispositvos móviles y tablets.

Este sistema Grid funciona mediante una estructuración de 12 columnas, mediante el numero de columnas que quieras que ocupe un elemento, esta te lo estructura y te lo adapta mediante el uso de la siguientes clases:

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6

No todas las clases son col-md, de hecho, esta está dedicada para dispositivos medianos, pero en una misma etiqueta puedes poner distintas clases que afecten a distintas anchuras. Para que se entienda mejor, estas son las respectivas nomenglaturas que deberías de utilizar de cada clase:

 
Dispositivos muy pequeños Teléfonos (<768px)
Dispositivos pequeños Tablets (≥768px)
Dispositivos medianos Ordenadores (≥992px)
Dispositivos grandes Ordenadores (≥1200px)
Prefijo de las clases CSS
.col-xs- *
.col-sm-
.col-md-
.col-lg-

* A partir de BootStrap 4.0, las clases col-xs se cambian por las clases col a secas (col-6, col-12, ...)

Sabiendo ahora esto, tu puedes crear una capa que tenga una clase col-md-6 y a la vez, que sea col-xs-12. Esto lo que hace que a un tamaño de dispositivo mediano te ponga esa capa a una anchura del 50% mientras que en un dispositivo muy pequeño, te cambia la anchura al 100%. Es una de las grandes utilidades que te puede ofrecer este framework.

Si quieres investigar más acerca de BootStrap puedes ver más cosas dentro de su página y si tienes cualquier duda, no dudes en preguntarme.

Leave a comment



Copyright © 2023 All Rights Reserved