Tema 5. Diseño Web con Bootstrap

Vista previa del material en texto

DISEÑO DE PÁGINAS WEB
Unidad II. Estilos con CSS
Tema 5: Diseño web con Bootstrap
1
Diseño Web con Bootstrap
• ¿Qué es Bootstrap?
• Ventajas de Bootstrap
• Grid System
• Grid Offset
• Visible o Hidden
• Bibliografía
2
Índice
Diseño Web con Bootstrap
Es un Framework CSS con clases pre-creadas que facilitan el trabajo con
CSS3.
• Originalmente fue desarrollado por Twitter. Actualmente es un
framework opensource independiente.
• Actualmente está en la versión Bootstrap 5.
Este incluye diversos components que permiten trabajar con
Typography, Forms Controls, Tables, Navigations, Dropdowns, Alerts,
Tabs, Carousel and many other
3
¿Qué es Bootstrap?
Diseño Web con Bootstrap
1. Ahorro de tiempo.
2. Responsive. 
3. Diseño consistente. 
4. Fácil uso.
5. Compatible con navegadorews modernos
6. Open Source.
4
Ventajas de Bootstrap
Diseño Web con Bootstrap
➢ Bootstrap permite crear layout 
Responsive con mucho menos
esfuerzo.
➢Un diseño Responsive cambia los 
layout de la página para adaptarse a 
los diferentes tamaños de 
dispositivos.
5
Diseño Responsive
Diseño Web con Bootstrap
• Las filas simples utilizan la clase row. Todas las columnas deben formar parte de 
una fila (row) y se le aplican estilos con las clases col-xx-y. Donde xx es el 
tamaño (xs, sm, md, lg), y y es la cantidad de columnas a fusionar (1 a 12)
6
Grid System
<div class="container">
<!--Row with two equal columns-->
<div class="row">
<div class="col-md-6"><!--Column left--></div>
<div class="col-md-6"><!--Column right--></div>
</div>
<!--Row with two columns divided in 1:2 ratio-->
<div class="row">
<div class="col-md-4"><!--Column left--></div>
<div class="col-md-8"><!--Column right--></div>
</div>
Diseño Web con Bootstrap
El Bootstrap grid system trabaja con 4 screen size clases:
1. xs: for phones
2. sm: for tablets
3. md: for desktops
4. lg: for larger desktops
7
Grid System
xs sm md lg
Column Size Extra small devices
Phones (<768px)
Small devices
Tablets (>=768px)
Medium devices
Desktops (>=992px)
Large devices
Desktops (>=1200px)
Container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
Column width Auto ~62px ~81px ~97px
Diseño Web con Bootstrap
• Crea un espacio entre columnas utilizando un offset
• Desplaza columnas a la derecha usando .col-md-offset-* classes. Esta
clase incrementa el margen derecho de la columna por * posiciones.
8
Grid Offset
<div class="row">
<div class="col-md-6 col1">.col-md-6</div>
<div class="col-md-5 offset-md-1">.col-md-5 and offset-1</div>
</div>
Diseño Web con Bootstrap
• Es possible especificar en que tamaños de dispositivos un element 
es visible.
• Para ello empleamos la clase visible-xx o hidden-xx en un 
div. 
• Ejemplo: El img sólo se muestra en resoluciones medias y largas.
9
Visible o Hidden
<div class='visible-md visible-lg’>
<img src='images/blast.png' alt='Blasting Off' />
</div>
Diseño Web con Bootstrap
1. Bootstrap: https://getbootstrap.com/docs/5.1/getting-
started/introduction/
2. Curso HTML: 
https://www.youtube.com/watch?v=rpPUQ2qVFYw&list=PLv6CkzbbGAlXld2
3oW5eTzoSrtHkV6i99
10
Referencias