Diseño Web Con Bootstrap

Diseño Web con Bootstrap 4
Juan Carlos Obando Roldán

Juan Pedro Santos Fernández
1
Diseño Web con Bootstrap 4
Juan Carlos Obando Roldán

Juan Pedro Santos Fernández
2
PRESENTACION
Bootstrap es el framework HTML5, CSS3 y JavaScript más popular para crear sitios
web responsivos siguiendo el paradigma “Mobile Fisrt”.
Este texto es una guía rápida de nivel básico intermedio y puede ser utilizada por
quienes tienen conocimiento básico de tecnologías web como HTML y CSS.
El texto está dividido en 6 secciones. Cada una de estas secciones contiene temas
relacionados con ejemplos simples y útiles.
Los autores
3
PROLOGO
La naturaleza abierta de la web ofrece amplias oportunidades para los

desarrolladores que desean crear sitios web responsive. Para sacar el máximo
provecho de las capacidades de la web, necesitas saber cómo usarlas.
Bootstrap es el framework para que aquellos estudiantes con conocimientos

mínimos de informática, desean hacer páginas web en términos de eficiencia y
agilizar el desarrollo web esperando que este texto sirva como primer paso para
toda una serie de experiencias y aprendizajes.
Los autores
4
CONTENIDO
Presentación ........................................................................................................ 3
Prólogo ................................................................................................................ 4
MODULO 1: INTRODUCCION (1,2)
1.1 Configuración y uso ........................................................................... 8
1.2 Filosofía Mobile ................................................................................11
1.3 Sistema de Rejillas ............................................................................12
1.4 Casos de aplicación ..........................................................................15
MODULO 2: TIPOGRAFIAS (3,4)

2.1 Fuentes y Colores ............................................................................18
2.2 Imágenes...........................................................................................24
2.3 Tablas ...............................................................................................25
MODULO 3: NAVEGACION (6)

3.1 Barra de Navegación .........................................................................31
3.2 Pestañas ...........................................................................................35
3.3 Píldoras .............................................................................................36
MODULO 4: FORMULARIOS (7,8)

4.1 Estructura de Formulario ...................................................................40
4.2 Formulario Lineal ...............................................................................40
4.3 Elementos de Formulario ...................................................................41
4.4 Creación de Formularios ...................................................................46
MODULO 5: COMPONENTES (9)

5.1 Componentes ....................................................................................50
5.2 Iconos ................................................................................................50
5.3 Acordeón ...........................................................................................51
5.4 Carrusel .............................................................................................53
5
5.5 Paginación.........................................................................................54
5.6 Cargadores........................................................................................56
5.7 Tarjetas .............................................................................................57
5.8 Tostadas ...........................................................................................59
MODULO 6: WEB RESPONSIVE (11,12,13,14)

6.1 Diseño Responsivo............................................................................62
6.2 Diseño Responsivo. Configuración ....................................................63
Anexo 1. Test de Bootstrap ..................................................................................70

Anexo 2. Test de Diseño Web Responsivo ..........................................................74
6
Bootstrap incluye un primer
sistema de cuadrícula de
fluido móvil y receptivo que
escala adecuadamente hasta
12 columnas a medida que
aumenta el tamaño del
dispositivo o de la ventana
gráfica. Incluye clases
predefinidas para opciones de
diseño fáciles, así como
potentes mixins para generar
diseños más semánticos.
INTRODUCCION
7
1.1 CONFIGURACIÓN Y USO
Bootstrap es un framework de HTML, CSS y Javascript originalmente creado
por Twitter y su página oficial es https://getbootstrap.com/
Para el desarrollo de los ejemplos necesitamos un editor de páginas web y el

uso de un navegador web. Así mismo debemos precisar el uso de carpetas
en una página web, es decir el nombre habitual de los archivos y carpetas
como se muestra en la siguiente figura el proyecto denominado Pagina sobre
la cual se encuentra el archivo index.html y las capetas css (estilos), js (scripts)
e img (imágenes).
8
A continuación, se explica mediante una primera página las dos formas como
podemos empezar a utilizar las clases de Bootstrap
A. Mediante Uso Remoto

Mediante este método no tenemos que descargar ningún archivo, pero si
requerimos una conexión permanente a Internet. Solamente debemos indicar
en nuestra página index.html las referencias a los CDN (Red de Distribución
de Contenidos) de Bootstrap, Jquery y Popper. Dentro de la página mostrada
en la figura 1 seleccionamos la opción que dice Download el cual nos llevara
a la página de descargas y dentro de la cual se muestra la sección
BootstrapCDN de donde podemos copiar las ligas y debiendo quedar nuestro
archivo index.html de la siguiente manera:
<!DOCTYPE html><html><head><meta charset="utf‐8">

<meta name="viewport" content="width=device‐width, initial‐
scale=1.0"><title></title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.mi
n.css" integrity="sha384-
ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT
2MZw1T" crossorigin="anonymous">
</head><body>
<p>Bootstrap 4</p>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-
q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi
6jizo" crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.mi
n.js" integrity="sha384-
UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86
dIHNDz0W1" crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js
" integrity="sha384-
JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07j
RM" crossorigin="anonymous"></script>
</body></html>
El resultado en navegador será un texto formateado que diga Bootstrap 4.
9
B. Mediante Uso Local
Este método descarga los archivos lo que asegura que si no contamos con
Internet las clases de Bootstrap pueden ser consumidas localmente.
Dentro de la página mostrada en la figura anterior seleccionamos la opción
que dice Download el cual nos llevara a la página de descargas y dentro de la
cual se muestra la sección Compiled CSS and JS el cual muestra otro botón
de Download que deberá formar la siguiente liga de descarga
https://github.com/twbs/boo tstrap/releases/download/v4.3.1/bootstrap-4.3.1-
dist.zip y obtenemos bootstrap-4.3.1-dist.zip el cual lo debemos descomprimir
y nos debe genera la siguiente carpeta bootstrap-4.3.1-dist conteniendo las
subcarpetas css y js con el siguiente contenido:
css
bootstrap-grid.css
bootstrap-grid.css.map
bootstrap-grid.min.css
bootstrap-grid.min.css.map
bootstrap-reboot.css
bootstrap-reboot.css.map
bootstrap-reboot.min.css
bootstrap-reboot.min.css.map
bootstrap.css
bootstrap.css.map
bootstrap.min.css
bootstrap.min.css.map
js
bootstrap.bundle.js
bootstrap.bundle.js.map
bootstrap.bundle.min.js
bootstrap.bundle.min.js.map
bootstrap.js
bootstrap.js.map
bootstrap.min.js
bootstrap.min.js.map
Como se puede apreciar en la lista anterior de color rojo ya tenemos los dos
archivos de Bootsrtap. Nos falta los archivos de jquery y pooper. Para eso
basta con descargar directamente el código de los dos archivos escribiendo
las siguientes direcciones copiadas del método anterior:
https://code.jquery.com/jquery-3.3.1.slim.min.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js
10
Al escribir cada dirección en el navegador se mostrará el código y de cualquier
manera guardar el código con el mismo nombre de los archivos en la carpeta
JS debiendo quedar nuestro archivo index.html de la siguiente manera:
<!DOCTYPE html><html>
<head><meta charset="utf‐8"><meta name="viewport"
content="width=device‐width, initial‐scale=1.0"><title></title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<p>Bootstrap 4</p>
<script src="js/jquery-3.3.1.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body></html>
El resultado en navegador será un texto formateado que diga Bootstrap 4.
1.2 FILOSOFÍA MOBILE

¿Cuál es la resolución que manda? ¿Escritorio primero? ¿Resoluciones
pequeñas? El mobile first se asienta como la metodología de trabajo como
“los móviles primero”. Empieza por lo pequeño. Entonces comienza a crecer…
11
Básicamente se refiere a un modo de diseñar que tenga en cuenta, en primera
instancia, un dispositivo móvil. Pantallas reducidas en comparación a los
monitores que usamos normalmente con los ordenadores, y tras tener la
maqueta preparada, realizar un escalado, es decir, aumentar el tamaño y
adaptarlo a una pantalla de escritorio. Que nuestro sitio web sea responsive
no es opcional sino obligatorio, de lo contrario nuestra visibilidad y efectividad
SEO se verá reducida ya que estaremos perdiendo todas las visitas de
potenciales clientes que usen dispositivos móviles para navegar.
El objetivo principal de todo esto es que un usuario desde móvil tenga la

misma experiencia a la hora de navegar por nuestro sitio web que un usuario
desde escritorio. Todo tiene que adaptarse, los botones, los enlaces,
imágenes, etc.
1.3 SISTEMA DE REJILLAS

La rejilla o grid es la base sobre la que construiremos el layout de nuestra
página, es decir, la disposición de elementos. El sistema de rejillas asegura
que nuestra web se adaptará convenientemente a diferentes resoluciones y
pantallas. Bootstrap utiliza un modelo de rejilla basado en dos tipos de
contenedores y una rejilla de 12 columnas que resulta muy flexible que
podemos también alterar cuando nos resulte conveniente. Para entender un
poco como funciona el sistema de columnas veamos los siguientes ejemplos
con los nombres de clase:
12
De este modo en cada columna podemos introducir el contenido que
queremos, en el ejemplo de arriba la distribución sería para pantallas de
entre 767 a 971 pixeles de ancho. Si nos fijamos la suma de los valores en
cada fila es de 12, indicando en cada columna cuantos espacios debe de
ocupar, por lo que las posibilidades en nuestros diseños son enormes.
El sistema grid está pensado para ayudarnos en la disposición de los
contenidos de nuestra web y para su adaptación a los diferentes tamaños
de pantalla de forma automática. De forma automática… Es decir, que con
solo programar una vez ya no nos debemos preocupar si se ve o no en tal
o cual navegador. Pero, ¿Cómo lo hace? ¿Cómo bootstrap se adapta al
tamaño de los navegadores de forma automática? Pues gracias a líneas de
código que describen qué es lo que quieres utilizar. Utilizamos la siguiente
tabla
Extra small Small devices Medium devices Large devices

devices Phones Tablets Desktops Desktops
(<768px) (≥768px) (≥992px) (≥1200px)
Comportamiento Horizontal en Contraído para Contraído para Contraído para
todo momento comenzar, comenzar, comenzar,
horizontal por horizontal por horizontal por
encima de los encima de los encima de los
puntos de puntos de puntos de
interrupción interrupción interrupción
Ancho máximo del None (auto) 750px 970px 1170px
contenedor
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
# de columnas 12 12 12 12
Ancho de canal 30px (15px a 30px (15px a 30px (15px a 30px (15px a
cada lado de cada lado de una cada lado de una cada lado de una
una columna) columna) columna) columna)
Anidable Si Si Si Si
Offsets Si Si Si Si
Ordenamiento de Si Si Si Si
columnas
El sistema de rejilla se basa principalmente en 3 conceptos: contenedores,

filas y columnas.
13
A. EL CONTENEDOR
El contenedor es el elemento base en el sistema de rejillas de Bootstrap.
Como ejemplo:
<div class="container">
</div>
Un contenedor puede ser de la clase “container” (tamaño definido) o

“container-fluid” (tamaño variable dependiendo del navegador).
B. LA FILA
La fila es el segundo elemento en la jerarquía y lo que hace es asegurar la
presencia de 12 columnas imaginarias dentro del contenedor. Como ejemplo:
<div class="row" >
</div>
</div>
C. LA COLUMNA
El tercer elemento en el sistema de rejillas permite especificar el aspecto que
tendrá la página dependiendo del tamaño de pantalla. Como ejemplo:
<div class="row">
<div class="col-xs-12 col-sm-3">
</div>
</div>
</div>
El ejemplo anterior al estar en un dispositivo con una pantalla extra pequeña

ocupara las 12 columnas que se encuentran disponibles por fila y si se
encuentra en una pantalla pequeña solo ocupara 3 posiciones de las 12
columnas que le corresponden.
14
1.4 CASOS DE APLICACION
Desarrollar el código y mostrar el resultado según las imágenes siguientes:
a. Representar la siguiente distribución bajo un diseño responsivo.
b. Representar las siguientes rejillas en función de una pantalla extra small.
15
c. Representar las siguientes rejillas en función de una pantalla mediana.
d. Representar las siguientes rejillas en función de una pantalla grande.
e. Representar la siguiente distribución bajo un diseño responsivo.
16
Bootstrap utiliza Helvetica
Neue, Helvetica, Arial y Sans-
serif en su pila de fuentes
predeterminada. Usando la
función de tipografía de
Bootstrap puede crear
encabezados, párrafos, listas
y otros elementos en línea.
TIPOGRAFIAS
17
2.1 FUENTES Y COLORES
La tipografía en Bootstrap 4 es un factor a tener muy en cuenta, ya que todo
el diseño de la página y también la experiencia de usuario dependen bastante
del uso que le demos. Bootstrap presenta la siguiente configuración
predeterminada
 Tamaño de letra (font-size) de 16px.
 Espacio entre líneas (line-height) de 1.5.
 Fuente (font-family) es «Helvetica Neue», Helvetica, Arial, sans-serif.
 Los elementos párrafo (<p>) tienen margin-top: 0 y margin-bottom: 1rem.
A. ENCABEZADOS
Los encabezados disponibles en HTML son h1, h2, h3, h4, h5. y h6. En
Bootstrap podemos aplicarles 4 clases a estos encabezados. Utilizando la
clase display-[número del 1 al 4] podemos hacer que cambie el tamaño de la
letra, donde 1 es el más grande (algo mayor que el h1 normal) y 4 el más
pequeño pero aún muy grande para el texto normal, por lo que es usual utilizar
la clase display en las cabeceras html
<h1 class="display-1">Bootstrap 1</h1>

18
B. FUENTES
Tenemos la posibilidad de hacer cambios y modificar elementos de nuestras
tipografías por medio de clases en bootstrap 4
small
Permite escribir texto más pequeño de lo que sería un párrafo normal.
<span class="small">Pie de página</span>
font-weight-bold
Texto en negrita
<span class="font-weight-bold”>Texto resaltado</span>
font-weigth-light
Texto en letra más suave
<span class="font-weight-light">Texto suave</span>
font-italic
Texto aparezca en cursiva
<span class="font-italic">Texto en cursiva</span>
text-left / text-center / text-right

Alinea el texto a la izquierda, centro o derecha
<span class="text-right ">Texto alineado a la izquierda</span>
text-justify
Texto justificado.
<span class="text-justify">Texto justificado</span>
19
text-nowrap
Texto en una sola línea
<span class="text-nowrap">Texto en una sola línea</span>
text-lowercase / text-uppercase
Texto en minúscula/mayúscula
<span class="text-lowercase">Texto en Minúsculas</span>
text-capitalize
Texto con cada palabra empezando por mayúscula
<span class="text-capitalize">Letra capital</span>
text-[color]
Texto con color según la paleta de Bootstrap: primary, secondary, dark, light,
danger, warning, success, info, white
<span class="text-primary">Texto primary</span>
20
C. COLORES
Bootstrap viene con una serie de etiquetas que permiten añadir colores
basados en el «significado de los colores». Estos colores se pueden aplicar
tanto a textos como a fondos, simplemente se necesita cambiar la etiqueta:
<p class="text-muted">text-muted</p>
O en todo caso:
<p class="bg-muted">bg-muted</p>
Veamos la siguiente secuencia de código

<p class="bg-muted">bg-muted</p>
<p class="bg-primary">bg-primary</p>
<p class="bg-success">bg-success</p>
<p class="bg-info">bg-info</p>
<p class="bg-warning">bg-warning</p>
<p class="bg-danger">bg-danger</p>
<p class="bg-secondary">bg-secondary</p>
<p class="bg-white">bg-white</p>
<p class="bg-dark">bg-dark</p>
<p class="bg-light">bg-light</p>
21
D. OTROS ELEMENTOS
Bootstrap dispone también en su tipografía de ciertos elementos útiles para la
presentación del texto.
abbr
Texto que representa abreviaturas o acrónimos. Bootstrap aplica estilos a los
elementos <abbr> con un borde punteado claro en la parte inferior y revela el
texto completo al pasar el mouse (siempre que agregue ese texto al atributo
de título <abbr>). Para obtener un tamaño de fuente ligeramente más pequeño
Agregue .initialism a <abbr>.
<p>La <abbr title=" World Wide Web Consortium">3WC</abbr> es el

organismo encargado de los estándares para la Web asegurando que sea
abierta, accesible, segura e internacional</p>
mark
Una de las utilidades tipográficas que nos ofrece Bootstrap, dentro de las
muchas que podemos encontrar en el manejo del texto, es la capacidad de
crear un texto marcado o resaltado para mostrar la relevancia del mismo. Es
lo mismo que si en una hoja de papel con texto escrito subrayas parte del texto
con un subrayador resaltador.
<p>Esto es un <mark>texto marcado</mark></p>
22
code
Texto que representa códigos reservados.
<p>Esto es un <code>code</code></p>
address
Texto que representa una dirección de algún lugar. Con la etiqueta <address>
puede mostrar la información de contacto en su página web. Como la
<dirección> se muestra de forma predeterminada: bloque; deberá usar
etiquetas para agregar saltos de línea al texto de dirección adjunto.
<address><strong>Roger Natividad</strong><br>
Calle Ocho, 1 2º<br>
Ciudad, CP008<br>
<abbr title="teléfono">t.</abbr> (+51) 977 987 977</address>
23
2.2 IMÁGENES
Bootstrap permite que las imágenes respondan agregando una clase .img-
responsive a la etiqueta <img>. Esta clase aplica ancho máximo: 100%; y
altura: auto; a la imagen para que se adapte bien al elemento padre. Las
clases que permiten trabajar con imágenes en Bootstrap son las siguientes:
 img-fluid: hace que la imagen se adapte al ancho del contenedor donde se
encuentra, si esta fuera más ancha que el mismo.
 float-right: aliena la imagen a la derecha
 float-left: alinea la imagen a la izquierda (es la que viene por defecto)
 rounded: hace que las esquinas aparezcan redondeadas.
 rounded-circle: hace que la imagen aparezca redondeada, es decir, con un
border-radius del 50%
 img-thumbnail: pone un marco a la imagen como si fuera una miniatura
<div class="row">
<div class="col-lg-4">
<img src="img/B4.jpg" class="img-fluid img-thumbnail">
</div>
<img src="img/B4.jpg" class="img-fluid rounded">
</div>
<img src="img/B4.jpg" class="img-fluid rounded-circle">
</div>
</div>
24
2.3 TABLAS
Bootstrap utiliza la clase “table” para aplicar estilos personalizados sobre las
tablas. Con esta clase se configura el aspecto que tendrá la tabla.
<table class="table">
</table>
Algunos elementos de las tablas de Bootstrap se muestran a continuación:
Tag Descripción
<table> Elemento de ajuste para mostrar datos en formato tabular
<thead> Elemento contenedor para etiquetar encabezado de
columnas
<tbody> Elemento contenedor para etiquetar el cuerpo de la tabla
<tr> Define una nueva fila
<td> Define una nueva celda
<th> Define una cabecera de tabla
<caption> Describe lo que contiene la tabla
Ejemplo:
<table class="table"><caption>Diseño básico de
tabla</caption><thead><tr>
<th>Framework</th><th>Promueve</th></tr></thead><tbody><tr><td>Pu
re</td><td>Yahoo</td></tr><tr><td>Bootstrap</td><td>Twitter</td></tr></
tbody></table>
25
A. TAMAÑO
Si tenemos que mostrar grandes tablas con datos puede ser necesario
mostrar más información al mismo tiempo por pantalla condensando los datos.
Esto se logra agregando la clase "table-sm".
<table class="table table-sm">
B. COLORES
Para mejorar la lectura de la tabla, podemos darle color gris al fondo de las
filas pares añadimos el estilo .table-striped.
<table class="table table-striped">
C. TABLAS DINÁMICAS
Usando el estilo .table-hover, cuando pasemos el cursor por una fila, cambia
su color de fondo para mejorar la lectura de dicha fila y de la tabla en general.
<table class="table table-hover">
26
D. TABLAS RESPONSIVE
Bootstrap está enfocado para crear nuestro diseño responsive. El tamaño de
la tabla si accedemos desde un dispositivo con pantalla menor a 768px
muestra un scroll horizontal para ver la tabla completa.
<div class="table-responsive">
<table class="table table-hover">
…
</table>
</div>
27
a. Tabla básica
b. Tabla cebrada
c. Tabla con bordes
28
d. Tabla dinámica
e. Tabla semántica
f. Tabla responsiva
29
Bootstrap ofrece algunas
opciones diferentes para
diseñar elementos de
navegación. Todos ellos
comparten el mismo marcado
y clase base, .nav. Bootstrap
también proporciona una
clase auxiliar, para compartir
marcas y estados.
NAVEGACION
30
3.1 BARRA DE NAVEGACION
Bootstrap facilita la creación de la barra principal de navegación de nuestra
web mediante la clase .navbar. Una barra de navegación estándar se crea
con la clase .navbar clase, seguido por la clase de respuesta: .navbar-expand-
xl|lg|md|sm
<nav class="navbar navbar-expand-sm bg-light">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Link 1</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link 3</a></li></ul>
</nav>
A. BARRA DE NAVEGACION VERTICAL

Para obtener una barra de navegación vertical debemos retirar del código
anterior la clase .navbar-expand-xl|lg|md|smclase
<nav class="navbar bg-light">
<li class="nav-item"><a class="nav-link" href="#">Link 3</a>
</li></ul></nav>
B. BARRA DE NAVEGACION CENTRADA

Para centrar la barra de navegación añadir la clase .justify-content-center.
<nav class="navbar navbar-expand-sm bg-light justify-content-center">
... </nav>
31
C. BARRA DE NAVEGACION CON COLOR
Para obtener aspecto diferente en el color podemos utilizar cualquiera de las
.bg-color (.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-
secondary, .bg-darky .bg-light)
<nav class="navbar navbar-expand-sm bg-light navbar-light">

<li class="nav-item active">
<a class="nav-link" href="#">Active</a></li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a></li>
<a class="nav-link disabled" href="#">Disabled</a>
</li></ul>
</nav>
D. BARRA DE NAVEGACION CON LOGOTIPO

Para obtener una barra de navegación con logo se debe invocar a la clase
.navbar-brandclase se utiliza para resaltar el logotipo de la marca Nombre / /
proyecto de su página:
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">

<a class="navbar-brand" href="#">
<img src="img/B4.jpg" alt="Logo" style="width:40px;">
</a>
...
</nav>
32
E. BARRA DE NAVEGACION PLEGABLE
Muy a menudo, especialmente en pantallas pequeñas, que desea ocultar el
menú de navegación y reemplazarlos con un botón que debe revelarlas
cuando se hace clic en. Para crear una barra de navegación plegable, utilizar
el siguiente código
<nav class="navbar navbar-expand-md bg-dark navbar-dark">

<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<a class="nav-link" href="#">Link</a> </li>
</ul> </div></nav>
Conforme se va comprimiendo el Viewport el menú cambia de aspecto
33
F. BARRA DE NAVEGACION CON FORMULARIO
Podemos obtener una barra de navegación que contenga una caja de texto
para buscar algún elemento en la página
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">

<form class="form-inline" action="/action_page.php">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-success" type="submit">Search</button>
</form>
</nav>
También puede utilizar otras clases de entrada, como por ejemplo .input-
group-prepend, o .input-group-appendpara fijar un icono o texto de ayuda al
lado del campo de entrada.
G. BARRA DE NAVEGACION FIJA

La barra de navegación también puede ser fijado en la parte superior o en la
parte inferior de la página. Una barra de navegación fija permanece visible en
una posición fija (superior o inferior) independiente de la página de
desplazamiento.
La clase .fixed-topclase hace que la barra de navegación fijo en la parte
superior
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">

...
</nav>
Podemos utilizar la clase .fixed-bottom para hacer la estancia barra de

navegación en la parte inferior de la página.
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">

...
</nav>
34
3.2 PESTAÑAS
Mediante la clase .nav-tabs podemos crear un grupo de pestañas o fichas,
para ello tenemos que seguir la siguiente estructura. Las fichas se crean con
<ul class="nav nav-tabs">. El siguiente ejemplo crea pestañas de navegación:
<ul class="nav nav-tabs">

<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
</ul>
Las fichas con menú desplegable

Las pestañas también pueden contener menús desplegables. El siguiente
ejemplo añade un menú desplegable a "Menú 1":
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
</ul></li> <li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li></ul>
35
3.3 PILDORAS
La clase .nav-pills se define de igual forma que la .nav-tab pero sus elementos
adoptarán una apariencia más similar a botones o "píldoras". Las píldoras se
crean con <ul class="nav nav-pills">. También marque la página actual con <li
class="active">.
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill"
href="#pills-home" role="tab"
aria-controls="pills-home" aria-selected="true">HTML</a>
</li>
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-
profile" role="tab"
aria-controls="pills-profile" aria-selected="false">CSS</a>
</li>
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-
contact" role="tab"
aria-controls="pills-contact" aria-selected="false">JavaScript</a>
</li>
</ul>
<div class="tab-content pt-2 pl-1" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel"
aria-labelledby="pills-home-tab">Estructura la Web</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-
labelledby="pills-profile-tab">Aspecto a la Web</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-
labelledby="pills-contact-tab">Comportamiento a la Web</div>
</div>
36
a. Menú Responsivo 1
Se muestra en un navegador
Al reducir el Viewport se muestra el menú adaptativo
Luego dentro del menú adaptativo
37
b. Menú Responsivo 2
Se muestra en un navegador
Al reducir el Viewport se muestra el menú adaptativo
38
Bootstrap lo hace fácil con el
marcado HTML simple y las
clases extendidas para
diferentes estilos de
formularios.
FORMULARIOS
39
4.1 ESTRUCTURA DE FORMULARIO
Bootstrap aplica estilos a los elementos de tipo formulario para convertirlos en
elementos responsive. La estructura básica de un formulario es la siguiente:
<form>
<div class="form-group">
<label for="ejemplo">DNI</label>
<input type="text" class="form-control" id="ejemplo">
</div>
</form>
Como se ve en el código anterior para que Bootstrap ajuste correctamente el

espaciado se requiere que cada elemento de formulario (etiqueta, caja de
texto, lista desplegable entro otros) debe estar agrupado en un div con la clase
.form-group. Además a cada elemento se le tiene que aplicar la clase .form-
control. Los elementos de formulario son:
4.2 FORMULARIO LINEAL

Bootstrap aplica la clase .form-inline sobre la etiqueta <form> para obtener
formularios que se dispondrán en una sola línea.
<form class="form-inline">
<div class="form-group mx-sm-3">
<label for="inputUser" class="sr-only">User</label>
<input type="password" class="form-control" id="inputUser"></div>
<div class="form-group mx-sm-3">
<label for="inputPass" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPass"></div>
<button type="submit" class="btn btn-primary">Confirmar</button>
</form>
Como se ve en el código anterior todos los elementos se agrupan en una solo

línea dentro del navegador.
40
4.3 ELEMENTOS DE FORMULARIO
Bootstrap también implementa mediante sus clases diferentes elementos de
un formulario como son:
A. CAMPOS DE ENTRADA
Los campos de entrada o <text> son los más numerosos, ya que con HTML5
la lista se ha ampliado a text, password, datetime, datetime-local, date, month,
time, week, number, email, url, search, tel, y color.
<input type="text" class="form-control" placeholder="Campo de texto">
B. AREAS DE TEXTO
Las áreas de texto o <textarea> están presentes en Bootstrap para escribir
textos largos, modificando el valor del atributo rows para ajustarlo al número
de líneas que se desea.
<textarea class="form-control" rows="3"></textarea>
41
C. CASILLAS DE VERIFICACION
Las casillas de verificación o <checkbox> permiten elegir una o más opciones
dentro de una lista. Las casillas de verificación son utilizadas mayormente
cuando las alternativas no son excluyentes
<div class="form-check">
<input type="checkbox" class="form-check-input" value="">Opcion 1
</div>
</div>
<input type="checkbox" class="form-check-input" value=""
disabled>Opcion 3
</div>
Se utiliza class="form-check" para asegurar márgenes adecuados para

etiquetas y casillas de verificación. Se puede aplicar la clase .form-check-
inline para obtener la lista en una sola línea en el navegador
<div class="form-check-inline">
</div>
</div>
<input type="checkbox" class="form-check-input" value=""
disabled>Opcion 3
</div>
42
D. BOTONES
Los botones o <button> permiten ejecutar comandos de acción dentro del
formulario.
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
Podemos variar el tamaño de los botones simplemente añadiendo las clases

.btn-lg, .btn-sm o .btn-block, para obtener botones con un tamaño más grande,
más pequeño, o un botón que ocupe todo el ancho. Por ejemplo, con el
siguiente código:
<button type="button" class="btn btn-primary btn-lg">Large

button</button>
<button type="button" class="btn btn-primary btn-sm">Small
button</button>
<button type="button" class="btn btn-primary btn-block">Block
button</button>
43
E. BOTONES RADIO
Los botones radio o <radio> permiten elegir solo una opción dentro de una
lista. Los botones de radio se utilizan si desea limitar al usuario sólo una
selección de una lista de opciones predefinidas.
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Opcion 1
</label></div>
<input type="radio" class="form-check-input" name="optradio">Opcion 2
</label></div>
<div class="form-check disabled">
<input type="radio" class="form-check-input" name="optradio"
disabled>Opcion 3
</label>
</div>
F. LISTAS DESPLEGABLES
Las listas desplegables o <dropdown> permiten mostrar varias opciones a
través de una lista que se puede extender. Un menú desplegable es un menú
conmutable que permite al usuario elegir un valor de una lista predefinida
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-
toggle="dropdown">
Marcas de Vehiculos
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Honda</a>
<a class="dropdown-item" href="#">Nissan</a>
<a class="dropdown-item" href="#">Toyota</a>
</div></div>
44
G. SELECCIONAR ARCHIVO
Los formularios de selección de archivo o <file> muestran un diálogo para
seleccionar un archivo del sistema operativo
<input type="file" class="form-control-file border">
H. CONTROL DE RANGO
Los controles de rango o <range> permiten seleccionar dentro de una barra
de desplazamiento un valor determinado
<input type="range" class="form-control-range">
45
4.4 CREACION DE FORMULARIOS
El siguiente ejemplo muestra la creación de un formulario básico.
<form role="form">
<label for="name">Nombres</label>
<input type="text" class="form-control" id="name"
placeholder="Ingrese su nombre">
</div>
<label for="inputfile">Archivo</label>
<input type="file" id="inputfile">
</div>
<div class="checkbox">
<label><input type="checkbox"> Confirmar</label>
</div>
<button type="button" class="btn btn-primary">Grabar</button>
</form>
Podemos utilizar la clase help-block para mostrar los mensajes de ayuda de

los campos del formulario. Ejemplo:
46
a. Formulario de contacto
b. Formulario de login vertical
c. Formulario de login horizontal
47
d. Formulario de ingreso de dirección
e. Formulario para tarjeta de crédito
48
Para comenzar con los
complementos de JavaScript
de Bootstrap, no necesita ser
un desarrollador avanzado de
JavaScript. Al utilizar
Bootstrap Data API, la
mayoría de los complementos
se pueden activar sin escribir
una sola línea de código
COMPONENTES
49
5.1 COMPONENTES
Los componentes en Bootstrap pueden ser utilizados dentro de nuestras
páginas de forma independiente del resto de ellos, es decir, que podemos
generar tantos componentes como necesitemos en un solo documento sin
que estos hagan conflicto con los demás. Adicionalmente, el estilo básico por
defecto ya está pre definido con lo cual podemos construir nuestra aplicación
de forma rápida y sin tanto esfuerzo, donde al final podemos personalizar toda
nuestra aplicación al cambiar el estilo base por nuestros estilos propios.
5.2 ICONOS
Uno de los primeros componentes que necesitamos entender son los iconos,
ya que con estas pequeñas piezas de imagen podemos dar a entender al
usuario la funcionalidad de cualquier parte de nuestro diseño, así cuando
vemos un icono de una gran x sabemos que es relacionado a cerrar la sección
actual o en el caso que veamos un icono en forma de + sabremos que es para
agregar algo.
Bootstrap 4 no tiene su propia biblioteca de iconos; sin embargo, hay muchas
bibliotecas de Iconos como la de los íconos desarrollados por Font Awesome
5 Free (https://fontawesome.com/).
Para utilizar fuentes iconos tenemos que añadir lo siguiente a nuestra página
HTML (No se requiere ninguna descarga o instalación):
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
integrity="sha384-
lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56
Ebc1zFSJ" crossorigin="anonymous">
<i class="fas fa-cloud"></i>
<i class="fas fa-coffee"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>
50
Podemos añadir también iconos animados
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>List
Item</li>
<li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>List
Item</li>
<li><span class="fa-li"><i class="fas fa-square"></i></span>List Item</li>
</ul> <i class="fas fa-file"></i>
<i class="fas fa-bars"></i>
5.3 ACORDEON
El acordeón muestra los elementos en una pila de opciones.
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-
target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
HTML</button></h5></div>
<div id="collapseOne" class="collapse show" aria-
labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
Estructura de la Web
</div></div></div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-
target="#collapseTwo" aria-expanded="false" aria-
controls="collapseTwo">
CSS
</button>
</h5></div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo"
data-parent="#accordion">
51
Aspecto de la Web
</div></div></div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-
target="#collapseThree" aria-expanded="false" aria-
controls="collapseThree">
Javascript</button></h5></div>
<div id="collapseThree" class="collapse" aria-
labelledby="headingThree" data-parent="#accordion">
Comportamiento de la Web
</div></div></div></div>
52
5.4 CARRUSEL
El carrusel es una presentación de diapositivas para recorrer una serie de
contenidos, construido con transformaciones CSS 3D y un poco de
JavaScript. Funciona con una serie de imágenes, texto o marcas
personalizadas. También incluye soporte para controles e indicadores
anteriores / siguientes. El siguiente ejemplo muestra la estructura
<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="img/cherokee.jpg" alt="Cherokee">
</div> <div class="carousel-item">
<img src="img/renegade.jpg" alt="Renegade">
</div> <div class="carousel-item">
<img src="img/wrangler.jpg" alt="Wrangler">
</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>
53
Dentro de un carrusel se puede apreciar que en su estructura existen 3 partes:
 indicadores: elementos que nos indican en que imagen nos encontramos
 imágenes: hacen referencia a las imágenes del slider
 controles: que nos permitirán navegar por el slider
También es posible agregar subtítulos a las diapositivas. Agregue elementos
<div class="carousel-caption">dentro de cada uno <div class="carousel-
item">para crear un título para cada diapositiva.
5.5 PAGINACION
La paginación simple o básica se utiliza cuando se tiene un sitio web con
muchas páginas y es posible que desee agregar algún tipo de paginación a
cada página.
<ul class = "pagination">

<li><a href = "#">«</a></li>
<li><a href = "#">1</a></li>
<li><a href = "#">2</a></li>
<li><a href = "#">3</a></li>
<li><a href = "#">4</a></li>
<li><a href = "#">5</a></li>
<li><a href = "#">»</a></li></ul>
Otro ejemplo de paginación simple
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Inicio</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">Final</a></li>
</ul>
54
Podemos utilizar el estado activo para resaltar la página actual
<li class="page-item active"><a class="page-link" href="#">2</a></li>
Así mismo podemos desactivar una página
<li class="page-item disabled"><a class="page-link"

href="#">Inicio</a></li>
Como también podemos alinear el componente de paginación. El siguiente

ejemplo alinea la paginación a la derecha.
<ul class="pagination justify-content-end">
También se puede utilizar
<ul class="pagination justify-content-center">
55
5.6 CARGADORES
Los hiladores, cargadores o simplemente spinner se pueden usar para
mostrar el estado de carga en sus proyectos. Están construidos solo con
HTML y CSS, lo que significa que no necesita ningún JavaScript para crearlos.
Sin embargo, necesitará algunos JavaScript personalizados para alternar su
visibilidad. Su apariencia, alineación y tamaño se pueden personalizar
fácilmente con nuestras increíbles clases de utilidad. Para crear un spinner /
cargador, use la .spinner-borderclase:
<div class="spinner-border"></div>
Podemos utilizar cualquier utilidad de color de texto para agregar un color a la

ruleta:
<div class="spinner-border text-muted"></div>

<div class="spinner-border text-primary"></div>
<div class="spinner-border text-success"></div>
<div class="spinner-border text-info"></div>
<div class="spinner-border text-warning"></div>
<div class="spinner-border text-danger"></div>
<div class="spinner-border text-secondary"></div>
<div class="spinner-border text-dark"></div>
<div class="spinner-border text-light"></div>
56
5.7 TARJETAS
Una tarjeta de Bootstrap 4 es una caja con borde con un poco de relleno
alrededor de su contenido. Incluye opciones para cabeceras, pies de página,
contenido, colores, etc.
Se crea una tarjeta básica con la .cardclase, y el contenido dentro de la tarjeta
tiene una .card-bodyclase:
<div class="card">
<div class="card-body">Tarjeta Básica</div>
</div>
La .card-headerclase agrega un encabezado a la tarjeta y la .card-footerclase

agrega un pie de página a la tarjeta:
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
<div class="card-footer">Footer</div>
</div>
Se puede utilizar .card-titlepara agregar títulos de cartas a cualquier elemento

de encabezado. La .card-textclase se usa para eliminar los márgenes
inferiores para un elemento <p> si es el último hijo (o el único) dentro .card-
body. La .card-linkclase agrega un color azul a cualquier enlace y un efecto
de desplazamiento.
57
<div class="card">
<h4 class="card-title">Título de Tarjeta</h4>
<p class="card-text">Mas texto de Ejemplo.</p>
<a href="#" class="card-link">Enlace de Tarjeta</a>
<a href="#" class="card-link">Oto Enlace</a>
</div>
</div>
Podemos agregar .card-img-topo .card-img-bottoma una <img>para colocar la

imagen en la parte superior o inferior dentro de la tarjeta. Tenga en cuenta
que hemos agregado la imagen fuera del .card-bodypara abarcar todo el
ancho:
<div class="card" style="width:400px">

<img class="card-img-top" src="img/foto.png" alt="Foto">
<h4 class="card-title">Ejecutiva</h4>
<p class="card-text">Jane Doe es arquitecta e ingeniera. Ha realizado
sus estudios en la Universidad de Paris .</p>
<a href="#" class="btn btn-primary">Ver Perfil</a>
</div></div>
58
5.8 TOSTADAS
El componente de pan tostado <toast> es como un cuadro de alerta que sólo
se muestra durante un par de segundos cuando pasa algo (es decir, cuando
el usuario hace clic en un botón, envía un formulario, etc.). Para crear una
tostada, utilice clase .toast, y añadir una .toast-headery .toast-bodydentro de
ella:
<div class="toast">
<div class="toast-header">
Toast Header
</div>
<div class="toast-body">
Some text inside the toast body
</div>
</div>
Tostadas están ocultas por defecto. Utilice el data-autohide="false" atributo

para mostrar por defecto. Para cerrarla, utilizar un <button> y añade data-
dismiss="toast":
<div class="toast" data-autohide="false">

<div class="toast-header">
<strong class="mr-auto text-primary">Toast Header</strong>
<small class="text-muted">5 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-
dismiss="toast">×</button>
</div>
<div class="toast-body">
Some text inside the toast body
</div>
</div>
Las notificaciones tipo toast sirven para mostrar pequeñas notificaciones al

usuario, similares a las notificaciones que muestra Facebook, estas pueden
ser en la derecha superior o izquierda inferior de la página.
59
a. Carrusel
b. Acordeon
60
Bootstrap proporciona
algunas clases de ayuda, para
un desarrollo más rápido para
dispositivos móviles. Estos se
pueden usar para mostrar y
ocultar contenido por
dispositivo a través de una
consulta de medios
combinada con dispositivos
grandes, pequeños y
DISEÑO WEB medianos.
RESPONSIVO
61
6.1 DISEÑO WEB RESPONSIVO
El diseño web responsivo o adaptable, conocido por las siglas RWD
(responsive web design), es una filosofía de diseño y desarrollo, cuyo objetivo
es adaptar la apariencia de las páginas web al dispositivo que se esté
utilizando para visualizarla. Hoy día las páginas web se visualizan en multitud
de tipos de dispositivos como tabletas, teléfonos inteligentes, libros
electrónicos, portátiles y computadoras personales, entre otros. Además, aún
dentro de cada tipo, cada dispositivo tiene sus características concretas:
tamaño de pantalla, resolución, potencia de CPU y capacidad de memoria.
Esta tecnología pretende que con un solo diseño web, se tenga una
visualización adecuada en cualquier dispositivo.
Con un sitio web responsivo, el cien por ciento del contenido y las páginas son
flexibles en todas las resoluciones de pantalla y dispositivos. Ya sea que esté
visualizando un sitio web en su teléfono inteligente o en una computadora
portátil, el desempeño será unificado y fácil de navegar a pesar de los
diferentes tamaños de pantalla. Al proporcionar una experiencia óptima para
el usuario, el diseño web responsivo significa que el usuario podrá leer y
navegar por el sitio con un cambio de tamaño y desplazamiento mínimos.
El diseño web responsivo es también ahora importante porque tiene un efecto

positivo sobre el posicionamiento. Los sitios que son responsivos
generalmente se cargan más rápido, lo que probablemente aumentará su
posicionamiento y disminuirá su tasa de rebote (bounce rate). El diseño web
responsivo también puede facilitar el intercambio en redes sociales, ayudando
a lograr un público más extenso para su marca.
Las campañas de SEO y el mantenimiento del sitio web también son un

proceso mucho más sencillo con un sitio web optimizado para dispositivos
móviles. El diseño web responsivo significa que solo tiene un único sitio web
que mantener; también es más rápido y menos costoso que hacer una
aplicación móvil independiente adicional a la versión de escritorio.
62
6.2 DISEÑO RESPONSIVO: CONFIGURACION
Diseño web responsivo es aquel capaz de adaptarse a diferentes tamaños y
dispositivos, es decir, dependiendo de qué dispositivo sea en el que se cargue,
tu sitio web se verá más accesible y fácil de usar. Sin embargo, lo que propone
el término Mobile First es empezar a diseñar un sitio web desde la resolución
más pequeña para ir creciendo y adaptando el contenido y el diseño a la
resolución más grande. Los pilares principales del Responsive son las Media
Queries y la etiqueta Viewport.
Media Queries
Las Media Queries son las herramientas fundamentales que se encargan de
aplicar diferentes estilos para diferentes dispositivos, y proporcionan la mejor
experiencia para cada tipo de usuario que se encuentra navegando en tu sitio
web. Nacen de la necesidad de crear breakpoints o puntos de ruptura en la
hoja de estilos CSS que tengas predefinida. Permite que tu sitio Web sea
manejable desde diferentes dispositivos.
Las Media Queries son un módulo de CSS que sirve para detectar el tipo de
dispositivo por el que se está navegando; de esa manera el contenido
consigue adaptarse al dispositivo concreto a través de las distintas
condiciones que tú mismo asignas, como pueden ser ancho y alto de la
ventana del navegador, ancho y alto del dispositivo, la resolución del
dispositivo o la orientación de la pantalla. Son declaraciones lógicas que
actúan dependiendo de las condiciones específicas que tú mismo declaras en
63
la hoja de estilos. Si la premisa se cumple, se aplicarán los estilos definidos;
si no, los omitirá por completo.
Viewport
El Viewport es el área visual donde se plasma el contenido del documento
HTML de tu sitio web. Se podría traducir como vista o ventana y nos sirve para
definir qué área de pantalla está disponible al renderizar un documento, la
escala/zoom que debe mostrar inicialmente. Todo ello, con parámetros que le
damos a la propia etiqueta meta, separados por comas en caso de utilizar más
de uno:
Atributo Valores Descripción

Width Valor integral (en pixels) o constante Define el ancho de la
device-width página.
Height Valor integral (en pixels) o constante Define el alto de la página.
device-height
Initial-scale Cualquier número real de 0.1 en adelante. La escala / zoom inicial del
1 representa no escalable sitio Web.
(1.0 para no tener zoom o 2.5 para tener
un zoom del 2,5 de aumento, por ejemplo).
User-scale “yes” / “no” Define los permisos para
que el usuario pueda o no
hacer zoom.
Minimun-scale Cualquier número real de 0.1 en adelante. Define la escala / zoom
1 representa no escalable mínimo que podemos
hacer en la página.
Maximun-scale Cualquier número real de 0.1 en adelante. Define la escala / zoom
1 representa no escalable máxima que podemos
hacer en la página.
Prácticamente todos los navegadores de smartphones al entrar a un sitio

analizan el tamaño total y lo escalan para que se muestre completo en la
pantalla, este procedimiento genera muchas veces resultados inapropiados.
Por ejemplo, esta imagen mide 320 píxeles al igual que la pantalla del
dispositivo, ahora bien, la imagen aparece con un tamaño inferior a causa del
efecto de la escala automática.
64
La escala automática se puede evitar y controlar muy fácil con el uso de este
atributo Viewport: es un atributo del tag <meta> que debe incluirse entre las
etiquetas <head> del documento HTML de tu sitio web:
<meta name="viewport" content="width=device-width"/>
Con solo agregar estas líneas de código, la imagen se adaptará al dispositivo:
Es posible definir un tamaño específico para el área visible del documento;

muchos sitios web ajustan directamente el Viewport a 320 px para ajustar la
apariencia al display vertical de un smartphone, usando un código similar a
este:
65
<meta name="viewport" content="width=320"/>
Pero, con los diferentes equipos, dispositivos y tamaños de pantalla, definir un

tamaño específico puede ser una mala práctica que puede mostrar resultados
erróneos en algunos equipos o cuando el dispositivo cambia de posición.
Afortunadamente podemos configurar el viewport para ajustarse
dinámicamente al tamaño de cada dispositivo usando el atributo “device-
width”, que es equivalente al 100% del ancho de la pantalla del dispositivo,
independiente de su tamaño, posición o resolución:
<meta name="viewport" content="width=device-width"/>
El alto de la pantalla también es configurable con las mismas propiedades a

través del atributo “height” , aunque –salvo condiciones muy específicas– no
es necesario definirlo. Esta propiedad se asignará automáticamente a través
del scroll. También podemos controlar la escala de la vista con el atributo
“initial-scale“. El sitio se mostrará al doble de su tamaño original:
<meta name=”viewport” content=”width=device-width; initial-scale=2“/>
Es posible además, limitar el tamaño al que se puede escalar el sitio con el

atributo “maximum-scale” . El siguiente ejemplo muestra el documento en
escala correcta y permite ampliar (zoom) hasta al doble de su tamaño.
<meta name="viewport" content="width=device-width, maximum-scale=2"/>
Por último, está el atributo “user-scalable”, que controla los permisos de

reducir/ampliar el documento. Con el siguiente código, el sitio se muestra en
su escala original y no es posible cambiar el tamaño desde el dispositivo móvil
(importante mencionar que no se recomienda deshabilitar la opción de escalar
el contenido).
66
<meta name="viewport" content="width=device-width, user-scalable=no"/>
En general, el atributo viewport permite muchas configuraciones, pero para

asegurar compatibilidad con la mayor cantidad de pantallas y navegadores
móviles, se recomienda utilizar este formato como base:
<meta name="viewport" content="width=device-width, initial-scale=1,

maximum-scale=1">
Para conseguir que nuestro sitio web se adapte a los diferentes anchos de
pantalla, estos parámetros serán muy útiles:
 Lo primero, y lo más importante es dejar de usar píxeles y usar porcentajes

a la hora de tomar medidas (por ejemplo: width: 60%).
 Que el ancho de la página sea 100% no significa que queramos que la
pantalla este en una alta resolución, sino que, si queremos limitar el
ancho/alto junto al máximo/mínimo del contenido, debemos usar los
diferentes parámetros apropiados para ello (max-width o si quisiésemos
67
establecer un alto máximo max-height; para establecer el mínimo sería min-
width y min-height)
 Las posiciones absolutas o fijas no son recomendables usarlas para
posicionar contenido (menos cuando hagan falta). Lo mejor es utilizar el
atributo float (float:left/right), es una técnica muy usada.
 Hay que hacer que las imágenes y vídeos no sobresalgan de la estructura;
si no, aparecerá un scroll lateral en los dispositivos móviles que
descolocará totalmente el diseño.
En resumen, ¿cuál es la mejor opción para tu sitio web? La experiencia del

usuario siempre será lo primero.
A los usuarios no les importa que versión utilices ni como estés optimizando
tu sitio web; su objetivo es poder encontrar lo que buscan de manera más
eficiente y rápida. Por tanto, si tu web está más centrada en el contenido, es
mejor una Responsive Web Design. Pero si necesitas que el usuario
interaccione mucho con la web, es mejor una Mobile First, ya que cada vez se
consume más información desde los dispositivos móviles.
La conclusión es sencilla, los clientes están yendo más rápido que las propias
empresas y estas deben adaptarse a ellos y a sus nuevas costumbres de
consumo online a través de dispositivos. Esto es una solución para reducir la
tasa de rebote, haciendo que el usuario pase más tiempo en la página por su
facilidad, comodidad, y óptima visualización y lectura de los contenidos.
A día de hoy, Google valora todas aquellas páginas web que se adaptan
perfectamente a cualquier dispositivo, ya sea PC, smartphone, tablet… Por
ello, es necesario que optimices tu sitio web de modo que cualquier usuario
pueda visualizar la página sin importar el medio por el cual acceda.
68
a. Conoce mas
b. Que hay de nuevo
69
ANEXO 1
TEST DE BOOTSTRAP
1. ¿Cómo conseguimos crear una tabla con estilo cebra?

o table table-lined
o table table-rowcolors
o table table-striped
o table table-zebra
2. ¿Cuál de las siguientes clases no sirve para da formato al texto?

o text-correct
o text-success
o text-info
o text-danger
3. ¿Qué código utilizaríamos para tener una abreviatura en Bootstrap?

o <abbr title="teléfono">Tel.</abbr>
o <abbr>Tel.</abbr>
o <quote>Tel.</quote>
o Las dos primeras son correctas
4. ¿Qué clase alinearía el texto de un párrafo a la izquierda?

o move-left
o to-left
o p-left
o text-left
5. ¿Qué elemento utiliza Bootstrap para tener el efecto negrita?

o b
o strong
o bold
o Ninguno de los tres anteriores
6. ¿Cuál es la versión mínima de jQuery a utilizar con Bootstrap 3?

o jQuery 1.8
o jQuery 1.9
o jQuery 1.9.1
o Funciona con todas las versiones de jQuery
70
7. ¿Para qué utiliza Bootstrap el elemento em?
o Para crear una cita
o Para simular una letra cursiva
o Para crear una abreviatura de un texto
o No utiliza ese elemento para nada
8. ¿Qué hace el siguiente código?
<abbr title="HyperText Markup Language"

class="initialism">HTML</abbr>
o Crea una abreviatura.

o Crea una abreviatura, pero con el texto ligeramente más pequeño.
o Crear una cita.
o Ninguna de las anteriores es correcta.
9. ¿Cómo podemos mostrar un texto para una acción correcta?

o text-correct
o text-ok
o text-success
o text-confirmation
10. ¿Cuál de las siguientes características no está soportada por Bootstrap?

o Es Responsive Design
o Tiene un sistema de Grid para los Layouts
o Tiene un juego de componentes para el desarrollo
o Implementa un MVC
11. ¿Qué clase Bootstrap sirve para alinear un párrafo de texto en el centro?
o text-middle
o text-center
o p-middle
o p-center
12. ¿Qué conseguimos con el siguiente código?
<img src="imagen.png" class="img-circle" />
o Que aparezca una imagen en miniatura

o Que aparezca una imagen con los bordes redondeados
o Que aparezca una imagen con un círculo
o Ninguna de las tres respuestas anteriores es correcta
71
13. ¿Qué conseguiríamos con el siguiente código?
<p class="text-muted">Párrafo de texto</p>
o Que el texto no apareciese

o Que el texto apareciese en una tonalidad gris
o Que el texto apareciese rojo
o Qué se generen espacios delante y detrás del texto
14. ¿Qué clase podemos utilizar para destacar un texto?

o highlight
o stand-out
o lead
o foreground
15. ¿Qué efecto tenemos sobre la tabla?
<table class="table table-striped">

<thead>
<tr>
<th>País</th>
<th>Capital</th>
<th>Superficie</th>
<th>Habitantes</th>
</tr>
</thead>
<tbody>
<tr>
<td>España</td>
<td>Madrid</td>
<td>504.645 km<sup>2</sup></td>
<td>46,6 M</td>
</tr>
...
</tbody></table>
o Que se ajusta al ancho de la página
o Que el título aparece con color
o Aparece una tabla estilo cebra
o Ninguna de las anteriores es correcta
16. ¿Para qué sirve la clase initialism en Bootstrap?

o Pone las primeras letras de las palabras en mayúsculas.
o Pone la primera letra de un párrafo en mayúsculas.
o En una abreviatura muestra el texto ligeramente más pequeño.
o No existe esa clase.
72
17. ¿Cuál de los siguientes estilos no se puede dar a una imagen?
o img-rounded
o img-square
o img-circle
o img-thumbnail
18. ¿Para qué utiliza Bootstrap el elemento strong?

o Para convertir un texto a mayúsculas
o Para los títulos
o Para simular una letra negrita
o No utiliza ese elemento para nada
19. ¿Sobre qué tecnologías está basado Bootstrap?

o HTML5, CSS3 y Javascript
o NodeJS y Javascript
o HTML5, Angular y Javascript
o HTML5, CSS3 y PHP
20. ¿Es obligatorio el uso de jQuery con Bootstrap?

o Sí.
o No.
o Sí, pero solo a partir de BootStrap 3.3.
o No. Algunos plugins no lo necesitan.
73
ANEXO 2
TEST DE DISEÑO WEB RESPONSIVO
Para catalogar a una web responsive será necesario realizar pruebas en las
pantallas de diferentes dispositivos (escritorio, portátiles, tablets,
smartphones). Estos tests se efectúan con herramientas que se ejecutan en
un navegador como las que se exponen a continuación:
a. Desde Mozilla Firefox

Si utilizas Firefox como navegador web, es bastante fácil comprobar si tu
web es responsiva. En el menú de navegación, haz clic en la opción
“Desarrollador Web” y luego en “Vista de Diseño Adaptable” o utiliza la
combinación de teclado [Ctrl] + [Mayús] + [M]. La página web se mostrará
sobre un fondo negro y en la parte superior izquierda podrás elegir el
tamaño de pantalla preestablecido del responsive test. También puedes
cambiar la resolución agrandando o reduciendo el marco de las esquinas
con tu ratón.
b. Screenfly http://quirktools.com/screenfly/
Esta aplicación web prueba el diseño responsivo de una web mediante una
amplia gama de resoluciones estándar representadas por los iconos en la
parte inferior de la barra de direcciones del navegador. Entre las opciones
se incluyen pantallas de escritorio, tablets, smartphones y televisores.
Screenfly también permite comprobar resoluciones individuales, lo que la
convierte en una aplicación particularmente versátil.
c. Google Resizer https://material.io/resources/resizer/#
En la página principal de la herramienta de prueba de Google, la web se
visualiza en tres tamaños diferentes (de escritorio, para tablets y
smartphones). Google Resizer también es compatible con otras
resoluciones en modo horizontal (480 – 1600 píxeles) y vertical (360 –
1024 píxeles). En comparación con otras aplicaciones, la gama de
tamaños de pantalla para un responsive test integral es muy reducida.
74
d. Responsinator http://www.responsinator.com/
Responsinator simula la representación de la web en un total de seis
dispositivos móviles diferentes, cada uno con orientación vertical y
horizontal. Este responsive test incluye diferentes versiones de iPhone,
Android e iPad.
e. Am I Responsive? http://ami.responsivedesign.is/
La aplicación web Am I Responsive? ofrece la simulación en cuatro
dispositivos Apple: desktop (Resolución: 1600 x 992 píxeles), laptop (1280
x 802 píxeles), tablet (768 x 1024 píxeles) y mobile (320 x 480 píxeles).
Una de las ventajas de este test es que los tamaños se pueden comparar
directamente.
En resumen
Si estás implementando el diseño responsivo en tu página web y quieres
comprobar si lo estás haciendo correctamente, tienes a tu disposición
numerosas herramientas de diseño web con las que puedes realizar
diferentes pruebas cómodamente desde de tu navegador. Sin embargo,
no siempre es recomendable confiar plenamente en este tipo de
aplicaciones. El mejor responsive test consiste en probar tu página web
personalmente en el mayor número de dispositivos posible, pues al final,
los instrumentos mencionados anteriormente son únicamente
simuladores.
La razón principal es que algunos de los elementos de una web responsiva
no pueden ser comprobados mediante una simulación online. Además,
este tipo de aplicaciones son más una herramienta de diseño web que un
instrumento para medir la usabilidad de la web, un aspecto fundamental
en el desarrollo de cualquier proyecto web responsivo. Un responsive test
también debe evaluar el impacto de factores como la potencia del equipo,
los diferentes navegadores web o la operación de una pantalla táctil en la
experiencia del usuario. Además, la representación de una página web
responsiva puede verse afectada por elementos del navegador como, por
ejemplo, la barra de desplazamiento, algo que no está presente en los
dispositivos móviles.
75

Diseño Web Con Bootstrap

Cargado por

Información del documento

Título 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

Diseño Web Con Bootstrap

Cargado por

Copyright:

Formatos disponibles

Diseño Web con Bootstrap 4

Juan Carlos Obando Roldán

Juan Carlos Obando Roldán

La naturaleza abierta de la web ofrece amplias oportunidades para los

Bootstrap es el framework para que aquellos estudiantes con conocimientos

MODULO 2: TIPOGRAFIAS (3,4)

MODULO 3: NAVEGACION (6)

MODULO 4: FORMULARIOS (7,8)

MODULO 5: COMPONENTES (9)

MODULO 6: WEB RESPONSIVE (11,12,13,14)

Anexo 1. Test de Bootstrap ..................................................................................70

Para el desarrollo de los ejemplos necesitamos un editor de páginas web y el

A. Mediante Uso Remoto

<!DOCTYPE html><html><head><meta charset="utf‐8">

El resultado en navegador será un texto formateado que diga Bootstrap 4.

El resultado en navegador será un texto formateado que diga Bootstrap 4.

1.2 FILOSOFÍA MOBILE

El objetivo principal de todo esto es que un usuario desde móvil tenga la

1.3 SISTEMA DE REJILLAS

Extra small Small devices Medium devices Large devices

El sistema de rejilla se basa principalmente en 3 conceptos: contenedores,

Un contenedor puede ser de la clase “container” (tamaño definido) o

El ejemplo anterior al estar en un dispositivo con una pantalla extra pequeña

a. Representar la siguiente distribución bajo un diseño responsivo.

b. Representar las siguientes rejillas en función de una pantalla extra small.

d. Representar las siguientes rejillas en función de una pantalla grande.

e. Representar la siguiente distribución bajo un diseño responsivo.

<h1 class="display-1">Bootstrap 1</h1>

<span class="small">Pie de página</span>

<span class="font-weight-bold”>Texto resaltado</span>

<span class="font-weight-light">Texto suave</span>

<span class="font-italic">Texto en cursiva</span>

text-left / text-center / text-right

<span class="text-right ">Texto alineado a la izquierda</span>

<span class="text-justify">Texto justificado</span>

<span class="text-nowrap">Texto en una sola línea</span>

<span class="text-lowercase">Texto en Minúsculas</span>

<span class="text-capitalize">Letra capital</span>

<span class="text-primary">Texto primary</span>

Veamos la siguiente secuencia de código

<p>La <abbr title=" World Wide Web Consortium">3WC</abbr> es el

<p>Esto es un <mark>texto marcado</mark></p>

Algunos elementos de las tablas de Bootstrap se muestran a continuación:

<table class="table table-sm">

<table class="table table-striped">

<table class="table table-hover">

c. Tabla con bordes

A. BARRA DE NAVEGACION VERTICAL

B. BARRA DE NAVEGACION CENTRADA

<nav class="navbar navbar-expand-sm bg-light navbar-light">

D. BARRA DE NAVEGACION CON LOGOTIPO

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">

<nav class="navbar navbar-expand-md bg-dark navbar-dark">

Conforme se va comprimiendo el Viewport el menú cambia de aspecto

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">

G. BARRA DE NAVEGACION FIJA

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">

Podemos utilizar la clase .fixed-bottom para hacer la estancia barra de

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">

<ul class="nav nav-tabs">

Las fichas con menú desplegable

Al reducir el Viewport se muestra el menú adaptativo

Luego dentro del menú adaptativo