INTRODUCCION AL CURSO DE DISEÑO WEB RESPONSIVO

Que es un framework y que es Bootstrap

Bootstrap es Un framework web para crear sitios y aplicaciones web es un conjunto de

herramientas trae código css y código javascript ya creados por Boostrap que fácilmente
puede reutilizar.

Tenemos otros frameworks

Regresamos a bootstrap y vamos a examples

Ingresamos a alguno de ellos y verificamos algunos layouts

Sitio web diseñado enteramente con bootstrap por ejemplo
 Descargando e instalando bootstrap

Primero: Vamos a crear un proyecto en el escritorio

Descargar Sublimetex

https://www.zdescargas.org/sublime-text-2019-version-estable-full-mega/

Ahora vamos a crear un archivo base llamado index.html

Debemos agregar plugins a sublime text para poder agregar código de una manera mas rápida:
Descargas el package control y lo guardas en la carpeta de instalación de sublime y luego instalar.

Reiniciamos sublime text

Pulsamos CTRL Shift P y buscamos package control

Le damos clic en install

Instalar el plugin enmet para escribir código mas rápido

Confirmación de packete enmet instalado

Ahora nuevamente le damos control shift p y le damos packact control install y elegimos sass

Recuerden que hay que reiniciar el editor sublime

Presiono el signo de admiración y pulso tab y me sale toda la estructura de un archivo html

Esto sucedió gracias al plugin de emet

Hacemos unas modificaciones al archivo original

Ahora vamos a instalar bootstrap

Le damos click en download

Descargamos la versión compilada

Descomprimimos las carpetas

Las copiamos y las pegamos en la carpeta de nuestro proyecto

Abrimos la carpeta css y cargamos la versión mimificada de bootstrap
Si abrimos el archivo general

Para un sitio en producción lo recomendable es usar la versión mimificada por que pesa menos

Me voy a quedar con el archivo mimificado el resto voy a borrarlo

Igual en la carpeta de java

Ahora vamos a vincularla al proyecto, primero el archivo mimificado de css

Luego el de javascript
Necesitamos dos archivos mas que deben ser descargados de sitios para tener instaldo
completamente bootstrap 4
Elegimos la primera opción la comprimida

Me va a arrojar este código

Seleccionamos y copiamos todo el código y vamos a sublime

Lo puedo cerrar y ahora vamos a vincularlo

Es necesario vincularlo antes de boostrap min js

En el pantallaso anterios se visualiza que bootstrap min no tiene extencion deben verificar que
si lo tenga cuando se haga referencia algún archivo.

Ahora es necesario descargar otro archivo llamado Popper

Ahora lo voy a vincular después de jquery

Primero jquery, Popper y bootstrap con esto ya tenemos instalado bootstrap

Recordar que mi archivo inicial sin boostrap instalado tenia este formato después de la
instalación bootstrap le añade formato al texto por ejemplo.

Nos cambió la fuente, nos quitó el margen es decir ya está tomando los estilos de bootstrap
 Layout de Bootstrap 4

Aprendiendo a usar los contenedores

Documentacion de bootstrap

Voy a crear un archivo principal de css

Vamos abrir el sidebar desde view

Pero la opción esta bloqueada esto debido a que no tenemos abierto el proyecto completo lo
único que tenem,os que hacer es arrastrar la carpeta al espacio sublime

Cerramos el index para abrirlo directamente desde el explorador

Bien dentro de css voy a crear un nuevo archivo
Vamos agregar un poco de texto después de hola mundo como párrafo
Este texto se genera gracias a emet

Dentro de bootstrap tenemos el primer elemento que son los contenedores

Para ello creamos un div con una clase de tipo container, esta clase centra el contenido
manteniéndole con un margen derecho e izquierdo para mantenerlo centrado en la pagina.

Ahora cortamos todo el contenido y lo pegamos dentro del container

Ahora tiene espacio a la derecha e izquierda por que esta dentro de un contenedor de boostrap
no la cree bostrapa la atrae ahora si reducimos el tamaño de la ventana podemos visualizar que
ahora es responsivo
Vamos a probar el contenedor fluid para ancho completo
si yo quiero inspeccionar el código

Lo cargo en la parte inferior el inspector de código