Booststrap Básico
con ATOM
Agenda y preparación del día
1. Inicio
Objetivo de la sesión
Repaso de la sesión anterior
2. Desarrollo
Explicación del tema
Ejemplos
3. Cierre
Dinámica final
Pregunta de investigación
Antecedentes para la siguiente sesión
¿Que es Bootstrap?
¿Qué es Bootstrap?
Bootstrap es un framework CSS que te permitirá crear sitios web y aplicaciones
web totalmente responsive.
Bootstrap es una excelente herramienta para crear interfaces de usuario
limpias y totalmente adaptables a todo tipo de dispositivos y pantallas, sea cual
sea su tamaño. Además, Bootstrap ofrece las herramientas necesarias para
crear cualquier tipo de sitio web utilizando los estilos y elementos de sus
librerías.
Cómo funciona
Cómo funciona
Los diseños creados con Bootstrap son simples, limpios e intuitivos, esto les da
agilidad a la hora de cargar y al adaptarse a otros dispositivos.
El Framework trae varios elementos con estilos predefinidos fáciles de configurar:
Botones, Menús desplegables, Formularios incluyendo todos sus elementos e
integración jQuery para ofrecer ventanas y tooltips dinámicos.
En Resumen: Tiene los elementos prefabricados de un sitio web o una
aplicación, que podemos usar de forma gratuita en nuestro propio sitio, con la
opción de poderlos editar a nuestro gusto.
Cómo integrar
Cómo Integrar a nuestro proyecto
Sus librerías CSS y JS se pueden integrar fácilmente a nuestro proyecto, de dos
maneras diferentes:
[Link] conexión mediante CDN:
La abreviatura CDN significa Content Delivery Network; básicamente es una red
que proporciona contenido a la página web. El principio es que los archivos no se
almacenan en nuestro propio servidor, sino que se distribuyen a través de una
red de servidores en todo el mundo donde son recuperadas por los usuarios.
Quiere decir que conectamos nuestro sitio web mediante links a las librerías de
CSS y JS que utiliza los servidores de Bootstrap.
Cómo integrar
El inconveniente de trabajar así es que no podemos realizar cambios a estas
librerías, tampoco podemos trabajar offline, debido a que las librerías se
encuentran en servidores de internet.
Cómo integrar
2. Por descarga de Librerías:
Descargamos las librerías y las usamos
en nuestras carpetas del proyecto. El
inconveniente es la cantidad de
archivos y carpetas que debemos
crear y organizar en nuestro proyecto,
sin embargo, es la forma más
profesional de hacerlo aunque
demande más tiempo y recursos de
nuestro sistema.
Proyecto Quick Start
Proyecto Quick Start
1. Vamos a integrar Booststrap de forma rápida a una página web de
inicio que contenga un menú horizontal (NavBar) que al verse en un
dispositivo móvil se adapte y se presente como un botón tipo
“hamburguesa”.
2. Realizaremos un banner tipo slide que muestre fotos panorámicas al
ancho del dispositivo y se desplacen automáticamente o mediante
controladores, suena complejo, pero tranquilos que esto es
super fácil!!
Proyecto Quick Start
Inicializamos Atom o cualquier editor de código que tengamos y creamos
un proyecto nuevo, con una solo página que será nuestra [Link] pero
sin ningún código.
Proyecto Quick Start
Ingresamos a [Link] y damos click en Get started para iniciar
Proyecto Quick Start
Clic aquí
Vamos a la sección Starter template que contiene una página ya lista para
copiar y pegar, está configurada para conectarse bajo CDN, que es el sistema
que usaremos en este ejemplo.
Proyecto Quick Start
Pegamos el contenido en nuestro [Link] y ya tenemos Bootstrap en
nuestro proyecto, ahora buscamos los elementos que queremos que vaya en la
página, pues esta vacía y solo tiene los links a las librerías. Solo basta con
identificar lo que hay dentro de la etiqueta <body>.
Proyecto Quick Start
[Link]
En Bootstrap navegamos hasta el elemento navbar que queremos, copiamos el
código y lo pegamos en nuestro [Link]
Proyecto Quick Start
El código debe ser pegado dentro de la etiqueta <body> y sería muy
recomendable comentar nuestro código, como en este ejemplo, para saber
donde empieza cada elemento o los cambios que hagamos.
Proyecto Quick Start
Ya tenemos nuestro menú de navegación, es este caso le cambié un atributo de
color para que se viera oscuro (dentro del [Link]):
Original:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
Modificado:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
Hay más colores, solo es buscar en la paleta de colores que nos provee
Bootstrap.
Ahora vamos a traer nuestro banner…
Proyecto Quick Start
[Link]
Proyecto Quick Start
Preparo las imágenes que quiero que vayan en el banner:
Proyecto Quick Start
Pego el código en la posición deseada y debo editar para que las imágenes
queden insertadas en el banner, como veremos en la próxima diapositiva:
Proyecto Quick Start
Agregamos la ruta de nuestras imágenes <img src=“imagenes/[Link]…> esto es
porque se creo una carpeta: imágenes, donde colocamos las fotos en la
resolución deseada.
Proyecto Quick Start
Así quedo listo el banner, tipo carrusel, que cambia automáticamente o tiene
unos controles a los lados…
Proyecto Quick Start
Este es un ejemplo muy sencillo de como se puede implementar elementos a
nuestro proyecto web.
Proyecto Quick Start
Este framework es especial para adaptarse a los dispositivos móviles, como en
este ejemplo donde se ve el menú como una hamburguesa.
