Scribd
Cargar
46 vistas33 páginas

Bootstrap

Este documento proporciona una introducción a Bootstrap 5, un popular framework de CSS. Explica que Bootstrap facilita el desarrollo de interfaces de usuario mediante el uso de clases predefinidas que establecen el estilo y comportamiento de los elementos HTML. También incluye herramientas como una cuadrícula responsive, contenedores y componentes reutilizables. El documento enfatiza la importancia de leer la documentación de Bootstrap y proporciona instrucciones para instalarlo e implementar su cuadrícula, breakpoints y otros elementos básicos en un ejercicio prá

Cargado por

Luis Alberto Torres
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
46 vistas33 páginas

Bootstrap

Este documento proporciona una introducción a Bootstrap 5, un popular framework de CSS. Explica que Bootstrap facilita el desarrollo de interfaces de usuario mediante el uso de clases predefinidas que establecen el estilo y comportamiento de los elementos HTML. También incluye herramientas como una cuadrícula responsive, contenedores y componentes reutilizables. El documento enfatiza la importancia de leer la documentación de Bootstrap y proporciona instrucciones para instalarlo e implementar su cuadrícula, breakpoints y otros elementos básicos en un ejercicio prá

Cargado por

Luis Alberto Torres
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/ 33

Bootstrap 5

Puede que pase esto


Luego vamos a ver que no, no del todo
But before
Internet no ha sido siempre tan bonito...
Frameworks CSS

Un framework CSS nos va a permitir, desarrollar una interfaz gráfica de forma rápida y con buenos resultados,

para que no estemos comenzando desde 0 cada vez que abordemos un nuevo proyecto.
Bootstrap es un framework CSS

Un framework CSS es un conjunto de

herramientas para hacer más sencillo el

trabajo de desarrollar una Interfaz de Usuario

De esa manera podremos crear nuestros

diseños/layouts de manera rápida y

consistente.

Y si incluye la parte responsive


Y cómo va a hacer eso?

Bootstrap utiliza clases para definir la apariencia o comportamiento de elementos HTML, aunque también utiliza

Javascript para elementos más elaborados.


Y utilizando estas herramientas y componentes...
Antes de comenzar
Leer documentación

La documentación técnica no siempre es


fácil de navegar, especialmente para un
desarrollador nuevo.
Pero es importante

Cuando utilizamos herramientas como Bootstrap

(y otras que vayamos a ver más adelante) va a

ser como recibir un mueble o producto nuevo.

SIEMPRE ES BUENO LEER EL MANUAL DE

INSTRUCCIONES
Algunos Tips

● Sean pacientes.

● Tomen muchas notas y consulten conceptos que les resulten “curiosos”.

http://blog.techtalentsouth.com/8-tips-to-reading-documentation-a-newbies-guide
Ahora si: Get Started
Instalar Bootstrap

Bootstrap va a utilizar una Hoja de Estilos

(CSS) para los estilos de sus

componentes.

Y un script de Javascript para algunos

componentes más dinámicos.


Que hace tan genial a Bootstrap?
Breakpoints
Los breakpoints o puntos de quiebre serán la base para la disposición de elementos en

Bootstrap. Ya que indicará cómo se mostrarán los elementos que coloquemos en diferentes

tamaños
Containers
Los container es el elemento para

diseño/disposición de elementos más

básico que existe.

La clase .container, crea un contenedor

con un ancho definido por el breakpoint.

También tenemos la clase

.container-fluid para crear un contenedor

de un ancho que abarca toda la página o

viewport.
Grids
Un grid es una cuadrícula para maquetar el contenido de tu página bajo unas guías básicas. Este

es un conjunto de un ROW y 12 columnas, en base a la cantidad de elementos que indiquemos

estos se irán disponiendo a menos que nosotros indiquemos cuantas columnas ocupará un

elemento.
GRID - Breakpoints
Componentes

Es un conjunto de código que


representa elementos reutilizables
con estilos y funciones ya integradas,
listas para utilizar.

+:
https://ajgallego.gitbook.io/bootstrap-
4/componentes-responsive/botones
Componentes Sencillos
...Algo más elaborados
...Y otros algo más
Bootstrap reemplaza al CSS?
Y ya para finalizar...
Ejercicio
Desarrollar un layout utilizando bootstrap.

Los elementos como iconos, colores, los pueden


obviar/cambiar. Lo IMPORTANTE es la estructura
y utilizar las clases.

La maquetación y los elementos es obligatoria.

1. Revisen la documentación, utilicen la grilla


que hicimos + componentes vistos.
2. Colaboren con su compañer@.
3. Preguntas Chat.
4. Hagan pedidos músicales (opcional)
5. Tiempo:30 - 40 min.
6. Resultados, Canal de Front (capturas,
código)
No se rindan

Cada vez que mejoran la siguiente vez se hace más fácil

https://medium.com/analytics-vidhya/why-you-shouldnt-quite-when-coding-or-anything-gets-ha
rd-4de543e93299
¿Preguntas y Consultas?

También podría gustarte