lunes, 27 de marzo de 2017

Bootstrap

¡Buenas tardes diseñoadictos¡

Hace días que no os escribo, ya que he estado preparando unos temas bastante interesantes sobre los que hablaros.
En esta primera entrada de hoy, hablaremos sobre Bootstrap. Os preguntareis de que se trata. Pues bien, se trata de una herramienta con la que crear interfaces web con CSS y JavaScript. Tiene la peculiaridad de adoptar la interfaz del sitio web al tamaño del dispositivo en el que se visualice.
Si seguís los siguientes pasos, podréis comprobar la funcionalidad de esta herramienta.
1.   Acceder a la página web de Bootstratp. Este es el enlace:
2.   Doble click en “Download Bootstrap”.
3.   Nos redirige a una nueva página en la que volvemos a dar doble click en “Download Boortstrap”.
4.   Posteriormente obtenemos un archivo zip. El cual debemos descomprimir y obtendremos tres carpetas:
a.   Css
b.   Font
c.    Js
5.   Sin movernos de la página en la que estamos, hacemos click en la parte derecha “Examples”.  A continuación, nos muestra unas series de páginas predefinidas entre las que elegiremos una. En mi caso elijo esta:

6.   Click derecho sobre la plantilla escogida. Posteriormente “Guardar como”. La guardamos dentro de la carpeta descargada anteriormente.
a.   Tipo: Página web (completa)
7.   En mi caso, voy a incrustar una imagen en una de las esferas. Para ello, hacemos click derecho sobre una de ella. Posteriormente “Inspeccionar”.  Con ello aparecerá una ventana en la derecha de la pantalla, subrayado en azul aparecerá el texto de la esfera.
8.   Volvemos a la carpeta que descargamos en el paso 4. Abrimos la plantilla predefinida que escogimos (la abrimos con bloc de notas). Eliminamos el fragmento que hace referencia a la esfera que seleccionamos en el paso anterior.

9.   Guardamos en la carpeta la imagen que querremos que aparezca en la esfera.
10.Volvemos al bloc de notas (paso 8). En el lugar del fragmento eliminado de la esfera, escribimos (título de nuestra imagen.jpg).


11.Guardamos el archivo. Lo cerramos y lo abrimos con el navegador. Este es mi resultado.

No hay comentarios:

Publicar un comentario