Practica 4

Aplicaciones Móviles Para Internet.
Profesor: Carlos López Barrios
PRÁCTICA 4.
¿Qué es Bootstrap?
Bootstrap es un framework de CSS que nos facilita y estandariza el desarrollo de sitios web.
Esta pensando para que se adapte tanto a las pantallas de equipos de escritorio como a
móviles y tablets.
Bootstrap es desarrollado y mantenido por la empresa Twitter y la ha liberado como un

producto Open Source.
Tiene una filosofía muy intuitiva para el maquetado de sitios web que puede ser
rápidamente aprendida por desarrolladores que no vienen del mundo del diseño web.
La versión estable actual es la 4.x
El corazón de este framework es un archivo CSS que lo podemos descargar del sitio
http://getbootstrap.com.
Luego debemos enlazar a nuestra página con el archivo boottrap.min.css y ya podemos

utilizar esta librería.
La primera clase que podemos probar es class="container" (esta muestra todo el contenido
del div centrado), además el framework ya define estilos por defecto para una gran cantidad
de elementos HTML de la página, por ejemplo define la tipografía de tipo Helvética.
El código mínimo de nuestra página es:
<!DOCTYPE html>
<html>
<head>
<title>Prueba de Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-
fit=no">
<link href="css/bootstrap.min.css" rel="stylesheet">
Carlos López Barrios

</head>
<body>
<div class="container" style="background-color:#ccc">
<h1>Titulo</h1>
<p>Esto es una prueba de bootstrap 4.</p>
</div>
</body>
</html>
Emplear un CDN para cargar

Bootstrap 4
En el concepto anterior vimos que para trabajar con el framework Bootstrap 4 debemos
descargarlo del sitio http://getbootstrap.com.
Hay una segunda forma de trabajar con Bootstrap sin tener que descargar el framework y
consiste en utilizar un servidor donde se alojan todos los archivos de Bootstrap.
Si vamos a utilizar un CDN (Content Delivery Network - red de entrega de contenidos) luego
nuestro esqueleto de página html tendrá una estructura similar a esta:
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-
to-fit=no">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0
/css/bootstrap.min.css" integrity="sha384-
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="a
nonymous">
<title>Hola Mundo</title>
</head>
<body>
<div class="container" style="background-color:#ccc">
<h1>Hola Mundo!</h1>
</div>

<!-
- Si utilizamos componentes de Bootstrap que requieran Javascript agregar estos
tres archivos -->
<script src="https://code.jquery.com/jquery-
3.2.1.slim.min.js" integrity="sha384-
KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="a
nonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/pop
per.min.js" integrity="sha384-
ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="a
nonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.mi
n.js" integrity="sha384-
JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="a
nonymous"></script>
</body>
</html>
Las ventajas de utilizar esta forma de cargar el framework Bootstrap 4 es:
Reduce la carga de nuestros servidores (importante si utilizamos un hosting compartido con

recursos limitado)
Facilita que Bootstap 4 quede en caché del navegador y se vuelva a cargar cada vez que se
visita una web que lo utilice.
Reduce la latencia.
Reducción de costos de nuestros servidores por requerir menor ancho de banda y tráfico.
Como desventaja podríamos decir:
Está la posibilidad que el servidor donde se aloja Bootstrap 4 se caiga, si bien es mucho más
probable que nuestro servidor sobre todo si es un hosting compartido es el que tenga
problemas.
No podemos probar en forma local nuestro sitio web si no se encuentra conectado a

internet.
Sistema de grillas de Bootstrap 4

3

Lo más importante de entender en un principio es el sistema de grillas que plantea la librería
Bootstrap.
Debemos pensar para armar nuestro esquema de la página que tenemos la posibilidad de
definir filas y en cada fila definir de 1 hasta 12 columnas. Cada columna con un ancho relativo
a ese número 12.
Luego Bootstrap se encarga de colapsar las columnas cuando se accede al sitio desde un
dispositivo con una capacidad limitada en cuanto al ancho en píxeles (esto permite una
experiencia más placentera al visitante que accede a nuestra página desde un celular con
capacidades limitadas)
Para ver y entender como creamos las columnas en cada fila y como colapsan según el ancho
del dispositivo podemos analizar el siguiente código:
<!doctype html>
<html>
<head>
<title>Prueba de Bootstrap 4</title>
fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/c
ss/bootstrap.min.css" integrity="sha384-
nonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xl-4" style="background-color:#aaa">
<h1>Columna 1</h1>
<p>Esto es una prueba de bootstrap.</p>
</div>
<div class="col-xl-4" style="background-color:#bbb">
<h1>Columna 2</h1>
</div>
<div class="col-xl-4" style="background-color:#ccc">
<h1>Columna 3</h1>

</div>
</div>
<hr>
<div class="row">
<div class="col-lg-4" style="background-color:#aaa">
<h1>Columna 1</h1>
</div>
<div class="col-lg-4" style="background-color:#bbb">
<h1>Columna 2</h1>
</div>
<div class="col-lg-4" style="background-color:#ccc">
<h1>Columna 3</h1>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-4" style="background-color:#aaa">
<h1>Columna 1</h1>
</div>
<div class="col-md-4" style="background-color:#bbb">
<h1>Columna 2</h1>
</div>
<div class="col-md-4" style="background-color:#ccc">
<h1>Columna 3</h1>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-4" style="background-color:#aaa">
<h1>Columna 1</h1>

</div>
<div class="col-sm-4" style="background-color:#bbb">
<h1>Columna 2</h1>
</div>
<div class="col-sm-4" style="background-color:#ccc">
<h1>Columna 3</h1>
</div>
</div>
<hr>
<div class="row">
<div class="col-4" style="background-color:#aaa">
<h1>Columna 1</h1>
</div>
<div class="col-4" style="background-color:#bbb">
<h1>Columna 2</h1>
</div>
<div class="col-4" style="background-color:#ccc">
<h1>Columna 3</h1>
</div>
</div>
</div>
</body>
</html>
Es bueno analizar de que palabras vienen los nombres de reglas de estilo que provee
Bootstrap:
col-*
col-sm-* (sm)all
col-md-* (m)e(d)ium

col-lg-* (l)ar(g)e
col-xl-* (e)xtra (l)arge
Mú ltiples reglas a las columnas de

una fila
Si queremos que una página se muestre de forma diferente si la accedemos desde un
dispositivo con pantalla muy grande, grande, mediana, pequeña o muy pequeña podemos
asignar múltiples reglas a cada columna.
Implementemos una página que muestre los datos en dos columnas y el ancho de las
columnas dependa de la pantalla del dispositivo:
1er columna 2da columna
Pantalla muy grande: 10 unidades 2 unidades
Pantalla grande: 9 unidades 2 unidades
Pantalla mediana: 8 unidades 4 unidades
Pantalla chica: 7 unidades 5 unidades
Pantalla muy chica: 6 unidades 6 unidades
Luego el código de la página queda definido:

<!doctype html>
<html>
<head>
fit=no">
nonymous">
</head>
<body>
7

<div class="row">
<div class="col-xl-10 col-lg-9 col-md-8 col-sm-7 col-
6" style="background-color:#aaa">
<h1>Columna 1</h1>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-5 col-6" style="background-
color:#bbb">
<h1>Columna 2</h1>
</div>
</div>
</div>
</body>
</html>
Contenedor: clases container y

containter-fluid
Cuando implementamos un contenedor podemos utilizar un:
Ancho fijo centrado (Siempre hemos utilizado este estilo hasta ahora)
Ancho variable que se adapte al ancho del navegador.
Vamos a implementar una página que muestre un contenedor de ancho fijo con una fila de
tres columnas, y otro contenedor pero fluido que muestre el mismo contenido:
<!doctype html>
<html>
<head>
fit=no">
nonymous">

</head>
<body>
<div class="row">
<h1>Columna 1</h1>
</div>
<h1>Columna 2</h1>
</div>
<h1>Columna 3</h1>
</div>
</div>
</div>
<hr>
<div class="container-fluid">
<div class="row">
<h1>Columna 1</h1>
</div>
<h1>Columna 2</h1>
</div>
<h1>Columna 3</h1>
</div>
</div>
</div>
</body>
</html>
Columnas de diseñ o automá tico

9

Vimos en conceptos anteriores que en Bootstrap disponemos de 12 unidades a ser
repartidas en una o más columnas, además de indicar a que tamaño de dispositivo está
orientado.
Si todas las columnas tendrán el mismo ancho podemos evitar disponer el valor que
indicamos donde hay un asterisco:
col-*
col-sm-*
col-md-*
col-lg-*
col-xl-*
La sintaxis en un ejemplo con filas que tienen 3 columnas con la misma cantidad de
unidades:
<!doctype html>
<html>
<head>
fit=no">
nonymous">
</head>
<body>
<div class="row">
<div class="col" style="background-color:#aaa">
<h1>Columna 1</h1>
</div>
<div class="col" style="background-color:#bbb">
<h1>Columna 2</h1>
</div>
<div class="col" style="background-color:#ccc">
10

<h1>Columna 3</h1>
</div>
</div>
<hr>
<div class="row">
<div class="col-lg" style="background-color:#aaa">
<h1>Columna 1</h1>
</div>
<div class="col-lg" style="background-color:#bbb">
<h1>Columna 2</h1>
</div>
<div class="col-lg" style="background-color:#ccc">
<h1>Columna 3</h1>
</div>
</div>
</div>
</body>
</html>
Alineamiento vertical de las

columnas
Bootstrap 4 trae como ventaja con respecto a versiones anteriores (3.x, 2.x etc.) la
posibilidad de alinear las columnas en forma vertical. Esta facilitad esta presente ya que
Bootstrap 4 utiliza todos las reglas de estilo que provee Flexbox CSS.
Si esta interesado en profundizar Flexbox puede visitar el tutorial a partir del concepto 60 en
CSS Ya.
El empleo de la tecnología propuesta por Flexbox en Bootstrap 4 trae aparejado grandes

ventajas, entre otras el alineamiento de columnas. Como desventaja podemos nombrar que
Bootstrap 4 no funciona en el navegador Internet Explorer 9.
11

Alineación de la fila completa.
Debemos agregar la clase "align-items-start" al div que define la clase "row":
<!doctype html>
<html>
<head>
fit=no">
nonymous">
</head>
<body>
<div class="row align-items-start" style="height: 300px; background-

color:#dd0">
<div class="col" style="background-color:#aaa">
<h1>Columna 1</h1>
</div>
<div class="col" style="background-color:#bbb">
<h1>Columna 2</h1>
</div>
<div class="col" style="background-color:#ccc">
<h1>Columna 3</h1>
</div>
</div>
</div>
</body>
</html>
Alineación de columnas individuales.

Podemos alinear solo una columna fijando alguna de estas clases: "align-self-
start", "align-self-center" o "align-self-end" a un div que representa la columna.
Por ejemplo la siguiente página hace una alineación distinta para cada columna:
12

<!doctype html>
<html>
<head>
fit=no">
nonymous">
</head>
<body>
<div class="row" style="height: 300px; background-color:#dd0">

<div class="col align-self-start" style="background-color:#aaa">
<h1>Columna 1</h1>
</div>
<div class="col align-self-center" style="background-color:#bbb">
<h1>Columna 2</h1>
</div>
<div class="col align-self-end" style="background-color:#ccc">
<h1>Columna 3</h1>
</div>
</div>
</div>
</body>
</html>
Alineamiento horizontal de las

columnas
Esta posibilidad de alinear las columnas se puede presentar si no utilizamos las 12 unidades a
distribuir.
Si la suma de unidades es igual a 12 luego no podemos alinear horizontalmente las columnas

ya que se encuentra toda la fila ocupada.
13

Con un ejemplo sencillo veamos cuales son las clases que ofrece Bootstrap 4 para permitir
alinear las columnas:
<!doctype html>
<html>
<head>
fit=no">
nonymous">
</head>
<body>
<div class="row justify-content-end" style="background-color:#dd0">
<h1>Columna 1</h1>
</div>
<h1>Columna 2</h1>
</div>
</div>
<hr>
<div class="row justify-content-start" style="background-color:#dd0">
<h1>Columna 1</h1>
</div>
<h1>Columna 2</h1>
</div>
</div>
<hr>
<div class="row justify-content-center" style="background-color:#dd0">
<h1>Columna 1</h1>
</div>
<h1>Columna 2</h1>
</div>
</div>
14

<hr>
<div class="row justify-content-between" style="background-color:#dd0">
<h1>Columna 1</h1>
</div>
<h1>Columna 2</h1>
</div>
</div>
<hr>
<div class="row justify-content-around" style="background-color:#dd0">
<h1>Columna 1</h1>
</div>
<h1>Columna 2</h1>
</div>
</div>
</div>
</body>
</html>
Las 5 formas de alineación se logran mediante las clases:
justify-content-end
justify-content-start
justify-content-center
justify-content-between
justify-content-around
Varias lı́neas en una misma fila

"row"
Con Bootstrap 4 se ha agregado la posibilidad de que en una fila definida por la clase "row"
especifique varias columnas y mediante la clase "w-100" permitir hacer un salto de línea.
Con un ejemplo debe quedar claro como podemos definir varias líneas en una misma fila:
15

<!doctype html>
<html>
<head>
fit=no">
nonymous">
</head>
<body>
<div class="row">
<h1>Columna 1 <br> Linea 1</h1>
</div>
<h1>Columna 2 <br> Linea 1</h1>
</div>
<div class="w-100"></div>
<h1>Columna 1 <br>Linea 2</h1>
</div>
<h1>Columna 2 <br>Linea 2</h1>
</div>
</div>
</div>
</body>
</html>
Reordenar las columnas en una fila

Por defecto el orden que indicamos los div de las columnas en el archivo HTML es como
aparecen luego en el navegador.
Si por algún motivo queremos que ese flujo del archivo HTML no se tenga en cuenta tenemos
una serie de clases que le asignan a las columnas el orden de visualización.
16

Veamos con un ejemplo como mostramos las columnas en el orden inverso a como las
especificamos en el archivo HTML:
<!doctype html>
<html>
<head>
fit=no">
nonymous">
</head>
<body>
<div class="row">
<div class="col order-3" style="background-color:#aaa">
<h1>Columna 1</h1>
</div>
<div class="col order-2" style="background-color:#bbb">
<h1>Columna 2</h1>
</div>
<div class="col order-1" style="background-color:#aaa">
<h1>Columna 3</h1>
</div>
</div>
</div>
</body>
</html>
El reordenamiento se puede aplicar para los distintos tamaños de pantalla, luego tenemos
las siguientes clases:
order-*
order-sm-*
order-md-*
17

order-lg-*
order-xl-*
Recuerde que el asterisco representa un valor entre 1 y 12.
Anidamiento de columnas
Otro tema perfectamente resuelto por Bootstrap 4 es el anidamiento de columnas.
Problema
Implementar una página que muestre dos columnas y dentro de la segunda columna otras
dos columnas internas.
<!doctype html>
<html>
<head>
fit=no">
nonymous">
</head>
<body>
<div class="row">
<h1>Columna 1</h1>
</div>
<h1>Columna 2</h1>
<div class="row">
<h2>Columna 2a</h2>
18

</div>
<div class="col-lg-6" style="background-color:#ddd">
<h2>Columna 2b</h2>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Offset (desplazamiento) de
columnas
Podemos dejar columnas vacías indicando un desplazamiento en el momento de crearla.
Problema
Implementar el código con Bootstrap 4 necesario para mostrar los números "uno", "dos" etc.
con el siguiente formato dentro de la página:
<!doctype html>
<html>
<head>
fit=no">
nonymous">
</head>
<body>
<div class="row">
<h1>Uno</h1>
19

</div>
<div class="col-lg-4 offset-lg-4" style="background-color:#bbb">
<h1>Dos</h1>
</div>
</div>
<div class="row">
<div class="col-lg-4 offset-lg-4" style="background-color:#aaa">
<h1>Tres</h1>
</div>
</div>
<div class="row">
<h1>Cuatro</h1>
</div>
<div class="col-lg-4 offset-lg-4" style="background-color:#bbb">
<h1>Cinco</h1>
</div>
</div>
</div>
</body>
</html>
Tener en cuenta que disponemos las siguientes clases para implementar el desplazamiento
(offset):
offset-*
offset-sm-*
offset-md-*
offset-lg-*
offset-xl-*
Recordar que el asterisco representa un valor entre 1 y 12.
Table : bá sica

20

El elemento table de HTML nos permite mostrar datos en forma tabular. Cuando incluimos el
framework Bootstrap 4 se introducen una serie de reglas a los elementos relacionados a la
etiqueta "table".
Una tabla básica la logramos insertando la clase "table":
<!doctype html>
<html>
<head>
fit=no">
nonymous">
</head>
<body>
<table class="table">
<thead>
<tr>
<th>Titulo 1</th>
<th>Titulo 2</th>
<th>Titulo 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Elemento 1,1</td>
</tr>
<tr>
</tr>
<tr>
21

</tr>
</tbody>
</table>
</div>
</body>
</html>
Otro ejemplo
<!doctype html>
<html>
<head>
fit=no">
nonymous">
</head>
<body>
<table class="table table-dark">
<thead>
<tr>
<th>Titulo 1</th>
<th>Titulo 2</th>
<th>Titulo 3</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
<tr>
</tr>
22

<tr>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Table : con filas con colores

alternados
Una actividad común es mostrar una tabla HTML con colores que se van alternando para
facilitar la lectura de sus dato, sobre todo cuando tenemos tablas con muchas columnas y
filas.
Esta actividad se logra muy fácilmente con Bootstrap 4, solo debemos agregar la clase table-
striped a la marca table de nuestra página:
<!doctype html>
<html>
<head>
fit=no">
nonymous">
</head>
<body>
<table class="table table-striped">
<thead>
<tr>
<th>Titulo 1</th>
<th>Titulo 2</th>
23

<th>Titulo 3</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Table : con borde en cada celda.

<!doctype html>
<html>
<head>
fit=no">
24

nonymous">
</head>
<body>
<table class="table table-bordered">
<thead>
<tr>
<th>Titulo 1</th>
<th>Titulo 2</th>
<th>Titulo 3</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</tbody>
</table>
25

</div>
</body>
</html>
Table : iluminar la fila donde se

encuentra el mouse (hover)
<!doctype html>
<html>
<head>
fit=no">
nonymous">
</head>
<body>
<table class="table table-hover">
<thead>
<tr>
<th>Titulo 1</th>
<th>Titulo 2</th>
<th>Titulo 3</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
<tr>
</tr>
<tr>
26

</tr>
<tr>
</tr>
<tr>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Table : tabla condensada

<!doctype html>
<html>
<head>
fit=no">
nonymous">
</head>
<body>
<thead>
<tr>
<th>Titulo 1</th>
<th>Titulo 2</th>
<th>Titulo 3</th>
</tr>
</thead>
<tr>
27

</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
<table class="table table-sm">

<thead>
<tr>
<th>Titulo 1</th>
<th>Titulo 2</th>
<th>Titulo 3</th>
</tr>
</thead>
<tr>
</tr>
<tr>
28

</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</div>
</body>
</html>
Table: definició n de un estilo a la

cabecera de la tabla
<!doctype html>
<html>
<head>
fit=no">
nonymous">
</head>
<body>
<thead class="thead-light">
<tr>
29

<th>Titulo 1</th>
<th>Titulo 2</th>
<th>Titulo 3</th>
</tr>
</thead>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
<thead class="thead-dark">
<tr>
<th>Titulo 1</th>
<th>Titulo 2</th>
<th>Titulo 3</th>
</tr>
</thead>
<tr>
30

</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</div>
</body>
</html>
Table : clases contextuales aplicadas

a filas y celdas
<!doctype html>
<html>
<head>
fit=no">
31

nonymous">
</head>
<body>
<thead>
<tr>
<th>Titulo 1</th>
<th>Titulo 2</th>
<th>Titulo 3</th>
</tr>
</thead>
<tbody>
<tr class="table-danger">
<td>Elemento 1,1<br> (table-danger)</td>
</tr>
<tr class="table-warning">
<td>Elemento 2,1<br> (table-warning)</td>
</tr>
<tr class="table-info">
<td>Elemento 3,1 <br> (table-info)</td>
</tr>
<tr class="table-success">
<td>Elemento 4,1<br>(table-success)</td>
</tr>
<tr class="table-primary">
<td>Elemento 5,1<br>(table-primary)</td>
</tr>
<tr class="table-secondary">
<td>Elemento 6,1<br>(table-secondary)</td>
32

</tr>
<tr class="table-dark">
<td>Elemento 7,1<br>(table-dark)</td>
</tr>
<tr class="table-light">
<td>Elemento 8,1<br>(table-light)</td>
</tr>
<tr class="table-active">
<td>Elemento 9,1<br>(table-active)</td>
</tr>
<tr>
<td class="table-danger">Elemento 10,1</td>
<td class="table-warning">Elemento 10,2</td>
<td class="table-info">Elemento 10,3</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Componente : card (bá sica)

<!doctype html>
<html>
<head>
fit=no">
nonymous">
</head>
<body>
<h1>Prueba de tarjetas</h1>
33

<div class="row">
<div class="col-md">
<div class="card text-center">
<div class="card-body">
<h4 class="card-title">Titulo de la tarjeta 1</h4>
<p class="card-
text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lectus sem,
tempor vitae mattis malesuada, ornare sed er

at. Pellentesque nulla dui, congue
nec tortor sit amet, maximus mattis dui. </p
>
<a href="#" class="btn btn-primary">Entrar</a>
</div>
</div>
</div>
<p class="card-

>
</div>
</div>
</div>
<p class="card-

34

>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Componente : card (con cabecera

y/o pie de tarjeta)
<!doctype html>
<html>
<head>
fit=no">
nonymous">
</head>
<body>
<div class="row mt-3">
<div class="card-header">
Cabecera
</div>
<h4 class="card-title">Titulo de la tarjeta</h4>
<p class="card-
35

>
</div>
<div class="card-footer">
Pie de tarjeta
</div>
</div>
</div>
Cabecera
</div>
<p class="card-

>
</div>
</div>
</div>
<p class="card-

>
36

</div>
<div class="card-footer">
Pie de tarjeta
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Componente : card (pestañ as)

<!doctype html>
<html>
<head>
fit=no">
nonymous">
</head>
<body>
<div class="row justify-content-center mt-3">
<div class="col-md-8">
<div class="card text-center border-info">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link" href="#">Opcion 1</a>
</li>
</li>
<a class="nav-link active" href="#">Opcion 3</a>
37

</li>
</li>
</ul>
</div>
<p class="card-

>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Componente : modal (cuadro de

diá logo modal bá sico)
<!doctype html>
<html>
<head>
fit=no">
nonymous">
</head>
<body>
38

<button type="button" class="btn btn-primary" data-toggle="modal" data-
target="#dialogo1">Abrir ventana de diálogo</button>
<div class="modal fade" id="dialogo1">

<div class="modal-dialog">
<div class="modal-content">


<div class="modal-header">
<h4 class="modal-title">Título del diálogo</h4>
<button type="button" class="close" data-dismiss="modal">X</button>
</div>


<div class="modal-body">
Contenido del diálogo.
</div>


<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-
dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
</div>
nonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/poppe
r.min.js" integrity="sha384-
nonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.
js" integrity="sha384-
nonymous"></script>
39

</body>
</html>
Componente : navbar (contraer

menú de navegació n y mostrar
botó n de hamburguesa)
<!doctype html>
<html>
<head>
fit=no">
nonymous">
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#opciones">
<span class="navbar-toggler-icon"></span>
</button>


<a class="navbar-brand" href="#">
<img src="foto1.jpg" width="30" height="30" alt="">
</a>


<div class="collapse navbar-collapse" id="opciones">
<ul class="navbar-nav">
<a class="nav-link" href="#">Opción 1</a>
</li>
</li>
40

</li>
</li>
</ul>
</div>
</nav>
nonymous"></script>
r.min.js" integrity="sha384-
nonymous"></script>
js" integrity="sha384-
nonymous"></script>
</body>
</html>
Componente : carousel
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
ss/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"
></script>
r.min.js"></script>
js"></script>
<style>
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
41

height: 100%;
}
</style>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel">

<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="la.jpg" alt="Los Angeles" width="1100" height="500">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>We had such a great time in LA!</p>
</div>
</div>
<div class="carousel-item">
<img src="chicago.jpg" alt="Chicago" width="1100" height="500">
<h3>Chicago</h3>
<p>Thank you, Chicago!</p>
</div>
</div>
<div class="carousel-item">
<img src="ny.jpg" alt="New York" width="1100" height="500">
<h3>New York</h3>
<p>We love the Big Apple!</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
42

</body>
</html>
Componente : collapse
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
ss/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"
></script>
r.min.js"></script>
js"></script>
</head>
<body>
<h2>Show Collapsible Content By Default</h2>
<p>Add the show class next to the collapse class to show the content by defaul
t.</p>
<p>Click on the button to toggle between showing and hiding content.</p>
<button type="button" class="btn btn-primary" data-toggle="collapse" data-
target="#demo">Simple collapsible</button>
<div id="demo" class="collapse show">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim a
d minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo cons
equat.
</div>
</div>
</body>
</html>
43

Realiza el siguiente ejemplo prá ctico
en el cual tendrá s que incluir nuevas
row dentro de alguna
de las columnas:
De forma parecida al anterior,

realiza el siguiente ejemplo prá ctico:
44

Galerı́a fotográ fica.
Diseña una galería fotográfica con 6 imágenes que se visualice de la siguiente forma:
• Tamaño col y col-sm: Una sola imagen por fila.
• Tamaño col-md y col-lg: Dos imágenes por fila.
• Tamaño col-xl: Tres imágenes por fila.
Utiliza las clases de imágenes img-fluid e img-thumbnail, así como bordes, paddings o
márgenes de las correspondientes utilidades de Bootstrap.
Subir todos los ejemplos comprobando su ejecución con captura de pantalla, así como los
códigos fuentes de los ejercicios propuestos.
45

Practica 4

Cargado por

Copyright:

Formatos disponibles

Practica 4

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Practica 4

Cargado por

Copyright:

Formatos disponibles

Aplicaciones Móviles Para Internet.

Profesor: Carlos López Barrios

Bootstrap es desarrollado y mantenido por la empresa Twitter y la ha liberado como un

La versión estable actual es la 4.x

Luego debemos enlazar a nuestra página con el archivo boottrap.min.css y ya podemos

El código mínimo de nuestra página es:

Carlos López Barrios

Emplear un CDN para cargar

Carlos López Barrios

Las ventajas de utilizar esta forma de cargar el framework Bootstrap 4 es:

Reduce la carga de nuestros servidores (importante si utilizamos un hosting compartido con

Como desventaja podríamos decir:

No podemos probar en forma local nuestro sitio web si no se encuentra conectado a

Sistema de grillas de Bootstrap 4

Carlos López Barrios

Carlos López Barrios

Carlos López Barrios

Carlos López Barrios

col-xl-* (e)xtra (l)arge

Mú ltiples reglas a las columnas de

1er columna 2da columna

Pantalla muy grande: 10 unidades 2 unidades

Pantalla grande: 9 unidades 2 unidades

Pantalla mediana: 8 unidades 4 unidades

Pantalla chica: 7 unidades 5 unidades

Pantalla muy chica: 6 unidades 6 unidades

Luego el código de la página queda definido:

Carlos López Barrios

Contenedor: clases container y

Ancho variable que se adapte al ancho del navegador.

Carlos López Barrios

Columnas de diseñ o automá tico

Carlos López Barrios

Carlos López Barrios

Alineamiento vertical de las

El empleo de la tecnología propuesta por Flexbox en Bootstrap 4 trae aparejado grandes

Carlos López Barrios

Debemos agregar la clase "align-items-start" al div que define la clase "row":

<div class="row align-items-start" style="height: 300px; background-

Alineación de columnas individuales.

Carlos López Barrios

<div class="row" style="height: 300px; background-color:#dd0">

Alineamiento horizontal de las

Si la suma de unidades es igual a 12 luego no podemos alinear horizontalmente las columnas

Carlos López Barrios

Carlos López Barrios

Varias lı́neas en una misma fila

Carlos López Barrios

Reordenar las columnas en una fila

Carlos López Barrios

Carlos López Barrios

Recuerde que el asterisco representa un valor entre 1 y 12.

Carlos López Barrios

Carlos López Barrios

Recordar que el asterisco representa un valor entre 1 y 12.

Table : bá sica

Carlos López Barrios

Una tabla básica la logramos insertando la clase "table":

Carlos López Barrios