Scribd
Cargar
51 vistas41 páginas

Clase - Bootstrap

Dentro del div agregar: <div class="row"> <div class="col-md-4"> <div class="card"> Contenido de la card 1 </div> </div> <div class="col-md-4"> <div class="card"> Contenido de la card 2 </div> </div> <div class="col-md-4"> <div class="card"> Contenido de la card 3 </div> </div> </div> Revisar los cambios en el navegador. /* Reconocer qué son los framework CSS y las

Cargado por

Orlando Soto
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
51 vistas41 páginas

Clase - Bootstrap

Dentro del div agregar: <div class="row"> <div class="col-md-4"> <div class="card"> Contenido de la card 1 </div> </div> <div class="col-md-4"> <div class="card"> Contenido de la card 2 </div> </div> <div class="col-md-4"> <div class="card"> Contenido de la card 3 </div> </div> </div> Revisar los cambios en el navegador. /* Reconocer qué son los framework CSS y las

Cargado por

Orlando Soto
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 41

Bootstrap

Activen las cámaras los que puedan y


pasemos asistencia
● Unidad 1: Introducción a HTML.
Construir una interfaz web ● Unidad 2: Introducción a CSS
responsiva utilizando
componentes de la ● Unidad 3: Alineando contenido con
biblioteca Bootstrap para flex
dar solución a un problema ● Unidad 4: Bootstrap Te encuentras aquí
planteado.
● Unidad 5: Terminal, Git y Github

● Unidad 6: Trabajo colaborativo y


Github Pages
Inicio Desarrollo Cierre

● Objetivo de la ● Conceptualización ● Reflexión


sesión ● Ejercitación
● Activación de
conceptos
Inicio
/* Reconocer qué son los framework CSS y las ventajas del
uso de Bootstrap para el desarrollo web. */

/* Aplica las clases de Bootstrap a través de los componentes


card y formularios, utilizando la documentación disponible. */

/* Implementar el sistema de grillas de Bootstrap,


distribuyendo el contenido adecuadamente, para hacer una
página web adaptable a distintos dispositivos. */ Objetivo
Activación de conceptos
Contesta la pregunta correctamente y gana un punto

Instrucciones:

● Se realizará una pregunta, el primero en escribir “YO” por


el chat, dará su respuesta al resto de la clase.
● El docente validará la respuesta.
● En caso de que no sea correcta, dará la oportunidad a la
segunda persona que dijo “Yo”.
● Cada estudiante podrá participar un máximo de 2 veces.
● Al final, el/la docente indicará el 1º, 2º y 3º lugar.
● Esta actividad no es calificada, es solo una dinámica
para recordar los conceptos clave para abordar esta
sesión.
Activación de conceptos

¿Qué utilidad tiene Flexbox en el desarrollo


web?
Activación de conceptos

¿Para qué es la propiedad display?


Activación de conceptos

¿Para qué sirve la propiedad justify-content?


Activación de conceptos

¿Cuáles son las principales propiedades de Flexbox y cómo se utilizan


para controlar la distribución y alineación de elementos en una página?
Activación de conceptos

Primer lugar:
______________

Segundo lugar: Tercer lugar:


______________ ______________
Desarrollo
Indicaciones generales
¿Qué vamos a lograr?

Durante la clase incorporaremos bootstrap en una


página web nueva. Al final de la clase, integrando
las componentes de bootstrap, lograremos algo
similar a la imagen.
¿Qué es un framework CSS?

Los frameworks son conjunto de conceptos, prácticas y criterios enfocados en solventar una
problemática particular y común a los desarrolladores.
Algunos frameworks conocidos:

Fuente: Bootstrap
Fuente: Logo-Foundation Fuente: Bulma

Fuente: Semantic UI Fuente: UI kit


¿Ventajas de Bootstrap?

● Fácil de integrar.
● Sistema de grillas.
● Estilos en la mayoría de los elementos HTML.
● Una gran lista de componentes.
● Gran documentación.
Ejemplos de sitios realizados con bootstrap
¡¡Veamos de qué tratan!!

Fuente: licornpublishing.com Fuente: thisisneat.com Fuente: kingdomrush.com


Trabajaremos con la versión 5.1

Podemos utilizar cualquier versión de


bootstrap, pero a la hora de revisar la
documentación es importante que la
versión sea consistente con la del
framework o nos toparemos con muchos
problemas.
Integrando bootstrap
Copiar el link desde la documentación oficial

https://getbootstrap.com/docs/5.1/getting-started/download/
Probando bootstrap
Crear una estructura básica, dentro un <h1> y un <p> con un poco de texto

Al abrir la página, deberíamos ver que la tipografía


y el color de los textos ha cambiado.

Con el inspector de elementos deberíamos poder


ver las reglas de bootstrap definidas.
/* Reconocer qué son los framework CSS y las ventajas del
uso de Bootstrap para el desarrollo web. */

/* Aplica las clases de Bootstrap a través de los componentes


card y formularios, utilizando la documentación disponible. */

/* Implementar el sistema de grillas de Bootstrap,


distribuyendo el contenido adecuadamente, para hacer una
página web adaptable a distintos dispositivos. */ Objetivo
Probando Bootstrap

1. Crear un archivo index.html. Ejercicio


2. Da una estructura base. ¡Manos al teclado!
3. Integra bootstrap desde
https://getbootstrap.com copiando el link del
cdn en el head.

4. Agrega un titular y un párrafo.

5. Revisa los cambios en el navegador.


Bootstrap
Dentro de bootstrap encontraremos:
Componentes
Las componentes las podemos copiar y pegar

Por ejemplo, vamos a ‘componentes’ > botones, y agreguemos botones al sitio

Para cambiar los colores de un botón debemos ocupar las clases btn btn-variante1

Por ejemplo, podemos crear un botón <a class="btn btn-primary"> Botón </a>
Pensando en sistemas de diseño
Podemos ocupar cualquier color, pero no es la idea

Los colores, al igual que las tipografías y tamaños


de letra son pistas visuales.
En un buen diseño debería haber coherencia visual
entre acciones del mismo tipo, de esta forma
todas las acciones primarias (ejemplo: enviar un
formulario) deberían tener el mismo color mientras
que otras como borrar también deberían tener un
color específico.
Es por eso mismo que tenemos que pensar más en
acciones que en colores.
Componentes
Barra de navegación

Podemos copiar y pegar la barra de navegación y utilizar el inspector de elementos para


encontrar los elementos a modificar:
Componentes
cards
Los cards (tarjetas) son
contenedores multipropósito.

<div class="card" style="width: 18rem;">


<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Some quick example
text to build on the card title and make up the
bulk of the card's content.</p>
</div>
</div>
Agregando componentes

Ejercicio
En el archivo donde integraste bootstrap:
¡Manos al teclado!
● Agrega una barra de navegación.

● Agrega un card que contenga un botón.

● Modifica el color del botón de la card


cambiando btn-primary por btn-warning.

● Revisa los cambios en el navegador.


Utilities

Las clases de utilities (servicio) nos ayudan a


personalizar las componentes.

Por ejemplo, podemos cambiar los colores de fondo de


la barra de navegación. También podemos tener un div
con estos colores de fondo.

Ej: <div class="bg-primary"> lorem … </div>


Utilities
Colores y Texto

Ejemplo:
<div class="bg-dark text-white">
lorem … </div>
Utilities
Spacing

Con las propiedades de spacing


podemos agregar de forma sencilla
margin y padding utilizando clases:

1 = 0.25 em
2 = 0.5 em
…
5 = 3 em

Ejemplo: <div class="bg-dark


text-white p-5 mt-2"> lorem … </div>
/* Reconocer qué son los framework CSS y las ventajas del
uso de Bootstrap para el desarrollo web. */

/* Aplica las clases de Bootstrap a través de los componentes


card y formularios, utilizando la documentación disponible. */

/* Implementar el sistema de grillas de Bootstrap,


distribuyendo el contenido adecuadamente, para hacer una
página web adaptable a distintos dispositivos. */ Objetivo
Footer
Dentro de la página que estamos trabajando crearemos un
footer al final. Ejercicio
En el archivo donde integraste bootstrap:
● Agrega un div (o sección o footer) y dentro un ¡Manos al teclado!
<h2> footer </h2> y un párrafo con lorem ipsum.
● Agrega la clase bg-dark al div.
● Agrega la clase text-white al div.
● Agrega la clase .mt-5 para darle margen hacia
arriba.
● Agrega la clase .p-5 para darle padding al
contenido anterior.
Grid
O Grilla

La grilla de bootstrap nos permite crear


layouts complejos de forma sencilla, por
lo que ya no necesitaremos utilizar
inline-blocks para agregar contenido al
lado de otro.
Grid
Implementamos una grilla con cards
Agregar contenido

En la página que creamos dentro del div (o sección o


Ejercicio
footer):
● Agregar un <div class="row">
¡Manos al teclado!
● Agregar 2 <div class="col">
● Agregar contenido dentro de las columnas.
/* Reconocer qué son los framework CSS y las ventajas del
uso de Bootstrap para el desarrollo web. */

/* Aplica las clases de Bootstrap a través de los componentes


card y formularios, utilizando la documentación disponible. */

/* Implementar el sistema de grillas de Bootstrap,


distribuyendo el contenido adecuadamente, para hacer una
página web adaptable a distintos dispositivos. */ Objetivo
Cierre
¿Existe algún concepto que no
Reflexionemos
hayas comprendido?
● Revisar la guía que trabajarán de forma
autónoma.
● Revisar en conjunto el desafío.
¿Qué sigue?
www.desafiolatam.com

/DesafioLatam /DesafioLatam /DesafioLatam /DesafioLatam 41

También podría gustarte