Me 2

PROGRAMACIÓN FRONT END
UNIDAD Nº 1
CSS3 Y BOOTSTRAP
www.iplacex.cl
SEMANA 2
Introducción
En la semana anterior, repasamos las nociones básicas de CSS, buenas prácticas para
optimizar nuestro código en documentos HTML, vimos como CSS3 incluye algunas cosas
nuevas, trabajamos con selectores simples y avanzados, también nos adentramos en el
diseño responsivo, sus reglas, condiciones y como este se volvió un estándar en poco
tiempo de la mano del fuerte incremento del uso de dispositivos portátiles como
smartphones y tablets.
Para producir de manera mas rápida y eficiente el diseño responsivo de nuestras

aplicaciones y páginas web, es que se crearon diversos frameworks de trabajo que
contienen muchas de las tediosas tareas comunes preestablecidas, dando facilidad en la
implementación de estilos responsivos con clases preconstruidas y tamaños manejados
con media queries ya codificados.
El framework que revisaremos es Bootstrap, el cual, es un framework JavaScript

desarrollado por Twitter. Es una combinación de HTML, CSS y código JavaScript
diseñado para ayudar a los desarrolladores en la creación de componentes de interfaces.
Bootstrap está programado también para trabajar con HTML5 y CSS3. Pasó a ser llamado
un Front-end-framework, ya que es una colección gratuita de herramientas para crear
sitios web y aplicaciones web.
Contiene plantillas de diseño basadas en HTML y CSS que incluyen, tipografía, botones,
menús de navegación y otros componentes comunes de interfaces web, así también
cuenta con extensiones opcionales de JavaScript.
Las razones principales por las que Bootstrap se posicionó tan rápido en la industria son:
1) Fácil de aprender.
2) Eficiente sistema de grillas.
3) Estilos por defecto para la mayoría de los elementos HTML (Fuentes, Tablas,
Formularios, Botones, imágenes, iconos, etc).
4) Gran lista de componentes disponibles.
5) Incluye algunos plugin JavaScript.
2 www.iplacex.cl
Ideas Fuerza
1. Framework: Conjunto estandarizado de conceptos, prácticas y criterios para dar
solución a una necesidad particular, que sirve para resolver problemas comunes.
2. Bootstrap: Framework creado con la finalidad de apoyar el diseño front end de

sitios web, utiliza CSS3, HTML5 y JavaScript.
3. Sistema de Grillas: Esquema de diagramación implementado por Bootstrap que

consta de 1 a 12 columnas.
4. Manejo de Columnas: Bootstrap funciona basado en filas y columnas que se

pueden anidar, mover y editar para armar nuestro sitio web.
5. Componentes HTML: Elementos HTML predefinidos en Bootstrap listos para

implementar, con comportamientos y estilos de diseño definidos.
3 www.iplacex.cl
Desarrollo
8. Bootstrap
Bootstrap es uno de los frameworks más usados a nivel mundial para construir
páginas responsivas “mobile-first” gracias a los templates que trae incluido.
Entre los navegadores soportados se encuentra Chrome, Firefox, Opera, Safari e

Internet Explorer a partir de la versión 8.
Está diseñado y preparado para visualizarse correctamente en navegadores de PCs y

portátiles con cualquier resolución de pantalla, así como para tablets y smartphones de
tamaños mucho más reducidos.
Conceptos básicos: Bootstrap es un framework JavaScript que funciona en conjunto

con CSS3 y HTML5.
9. Incluir librería Bootstrap
Bootstrap utiliza ciertos elementos HTML y propiedades CSS que requieren el uso del
doctype de HTML5 para que funcionen correctamente, por lo que todas nuestras
páginas deben incluir la declaración al principio.
<!DOCTYPE html>
<html lang="es">
...
</html>
Además, como vimos la semana pasada, para asegurar que se muestra correctamente
en dispositivos móviles y que permita la utilización del zoom al arrastrar tenemos que
añadir la etiqueta meta viewport dentro de nuestra cabecera <head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Como tip adicional podemos indicar la propiedad initial-scale del viewport controla el
nivel de zoom cuando la pagina se carga por primera vez. Se pueden agregar otras
propiedades como maximum-scale, minimum-scale , y user-scalable para controlar la
forma en como los usuarios pueden interactuar con el zoom desde sus dispositivos
4 www.iplacex.cl
touch. Si añadimos la etiqueta al meta del viewport user-scalable=no podemos
deshabilitar el zoom para dispositivos móviles, así los usuarios solo podrán hacer scroll.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no",

maximum-scale=1, user-scalable=no">
Existen 2 formas de obtener dichos archivos la primera es descargándolo desde el sitio

oficial (https://getbootstrap.com/) o cargarlos directamente desde sus servidores CDN
(opción más recomendada), cualquiera sea la que seleccionemos el procedimiento será
el mismo, sólo variará la ruta. Bootstrap consta de 2 archivos para su correcto
funcionamiento base CSS y JavaScript.
CSS
Bootstrap incluye una hoja de estilo con una plantilla responsiva por defecto, que nos
permitirá agregar estilos a distintos componentes de nuestro documento HTML, a
continuación, tenemos el código que debemos incluir dentro de nuestro <head>
después de todas las otras hojas de estilo referenciadas en nuestra página web.
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
JS
Varios de los componentes que incluye Bootstrap requieren el uso de JavaScript para
funcionar. Específicamente lo que necesitamos incluir si o si son jQuery y Popper.js y
además el archivo JavaScript de Bootstrap. El código se debe agregar justo antes de
cerrar el tag </body>. JQuery se incluye primero, luego Popper.js y finalmente el plugin
Bootstrap. El siguiente código ejemplificará la inclusión de los 3 scripts (llamándolos del
repositorio online que Bootstrap facilita):
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js
"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
></script>
5 www.iplacex.cl
10. Sistema de Grilla.
El sistema de rejilla que utiliza Bootstrap se basa en la disposición del contenido de

nuestra web dentro de rejillas flexibles, las cuales se escalan al tamaño y posición
adecuada de forma automática dependiendo del tamaño de la pantalla en la que estén
visualizando.
Elemento Contenedor.
Para que nuestro sistema de grilla funcione correctamente, este tiene que ser
implementado dentro de uno de los dos contenedores que ofrece Bootstrap: container o
container-fluid. Es importante tener en cuenta que estos elementos son la raíz de la
grilla y no se pueden anidar uno dentro de otro.
Si queremos que el contenido aparezca centrado y con un ancho fijo, entonces hay que
utilizar la clase .container, de la siguiente forma:
<div class="container">
...
</div>
Por el contrario, si queremos que el contenido de nuestra web ocupe todo el ancho
disponible en pantalla (teniendo en cuenta todos los tamaños de pantalla), podemos
usar la clase .container-fluid:
<div class="container-fluid">
...
</div>
En la siguiente imagen se ejemplifica el resultado de utilizar los dos tipos de container

considerando que ambos son vistos en la misma pantalla:
.container
.container-fluid
6 www.iplacex.cl
Funcionamiento del sistema de grillas
Para entender el funcionamiento de la grilla en Bootstrap es necesario tener máxima

atención ya que es el pilar fundamental con el cual se trabaja en este framework.
Los contenidos en nuestra grilla se adaptan a distintos tipos de pantalla de manera

automática, para ello tenemos que poner el contenido dentro de columnas que irán
dentro de filas, cada fila se puede dividir hasta en 12 columnas, pero seremos nosotros
que definiremos (con ayuda de media queries o clases pre hechas en Bootstrap) el
número de columnas deseados para cada tamaño de pantalla.
A continuación, se detalla el funcionamiento y reglas del sistema de grillas:
▪ Las columnas irán agrupadas dentro de filas ( .row ).
▪ Las filas ( .row ) deben ir dentro de una etiqueta contenedora ( .container o

.container-fluid), esto permitirá alinear las columnas y asignarles un espacio
correctamente.
▪ Las columnas ( .col ) que contienen el contenido del sitio, deben estar de
manera estricta dentro de una fila ( .row ) y estas a su vez, son el único hijo
posible del contenedor ( .container o .container-fluid).
▪ Cada fila ( .row ) se puede dividir hasta un máximo de 12 columnas ( .col ), pero
somos nosotros quienes definimos el número de columnas en las que queremos
dividir cada fila y su ancho para cada tamaño de pantalla. Por ejemplo, 4
columnas de igual ancho.
▪ Si el tamaño total de las columnas supera las 12 unidades, el tamaño sobrante

se baja a la siguiente fila.
▪ Para definir el tamaño de las columnas (. col ) se utilizan clases css que
Bootstrap tiene definidas para cada tamaño, por ejemplo .col-md-xx, donde xx es
el tamaño de la columna que podrá tomar valores entre 01 y 12.
Al seguir este orden el sistema de grillas funcionará correctamente, creando los

márgenes apropiados dependiendo de las dimensiones de la pantalla.
7 www.iplacex.cl
En la siguiente tabla se muestra un resumen del sistema de grillas de Bootstrap, hay
que recordar que éste framework está pensado en los dispositivos móviles primero o
Mobile First. Por lo tanto, los tamaños y dimensiones están pensados para los
dispositivos móviles y para tamaños más grandes lo que se hace es adaptar o escalar
estos tamaños.
Importante, al definir estas clases no sólo se aplican para su tamaño especifico si no

para los superiores también. Por ejemplo, al indicar el tamaño de columnas con la clase
.col-sm-, también se aplicará a los tamaños de pantalla superiores .col-md-,.col-lg- y
.col-xl-, a menos que estén definidos y sobre escriban al anterior.
Columnas de ancho específico.
A continuación, veremos un ejemplo de como se usa el sistema de grilla definiendo

anchos específicos a las columnas:
Solo para pantallas medianas:
En el siguiente ejemplo, veremos 3 filas, la primera dividida en 2 columnas de tamaño

desigual, la segunda de 3 columnas del mismo tamaño y la ultima dividida en 2 de igual
tamaño.
8 www.iplacex.cl
<div class="row">
<div class="col-md-8">.col-md-8</div>
</div>
<div class="row">
</div>
<div class="row">
</div>
En la siguiente imagen se puede ver el resultado para pantallas de tamaño mediano

(.col-md-) en adelante.
Figura 1. Visualización estructural de filas y columnas con ancho fijo.

(Fuente: https://getbootstrap.com/docs/4.1/)
Como mencionamos anteriormente esto sólo define el tamaño de columnas para

pantallas medianas y para los tamaños pequeños, mostrará columnas ampliadas para
ocupar todo el ancho, lo que las deja apiladas de la siguiente forma:
Figura 2.
Visualización
estructural de
filas y
columnas con
ancho fijo en
dispositivos
pequeños.
(Fuente:
https://getboot
9 www.iplacex.cl
strap.com/docs/4.1/
Columnas de ancho automático.
Bootstrap 4 ha incluido columnas de ancho automático las cuales podemos utilizar

indicando únicamente el número de columnas que queremos y el sistema calculará
automáticamente su anchura. Para esto se puede usar la clase. col, sin número de
columnas ni tamaño de pantalla, por ejemplo:
<div class="row">
<div class="col">1 of 2</div>
</div>
<div class="row">
</div>
</div>
El código superior nos daría una grilla como la siguiente:
Figura 3. Visualización estructural de filas y columnas con ancho automático.

(Fuente: https://getbootstrap.com/docs/4.1/)
En el ejemplo anterior se aprecia como las filas se dividen de manera automática en

partes iguales, dividiendo el numero 12 por la cantidad de columnas que se escriben.
A esta clase podemos añadir el sufijo para establecer el tamaño de pantalla (.col, .col-
sm, .col-md, .col-lg, .col-xl), de esta forma podemos usar los sufijos cuando se necesite
que una columna tenga un ancho automático desde un tamaño de pantalla en adelante.
10 www.iplacex.cl
<div class="row">
<div class="col-sm">col-sm</div>
</div>
En el código anterior estamos programando que desde el tamaño “sm” en adelante las
tres columnas tendrán un ancho automático y solo en pantallas extrapequeñas
ocuparán todo el ancho.
Anchos de columna variable
Otra de las novedades que incluyó Bootstrap 4 son las columnas de ancho variable, las
que ocuparán el ancho justo que se necesite según el contenido de la columna,
respetando el tamaño de las columnas aledañas (si es que hay).
Para utilizarlas se dispone de la clase “.col-*-auto”, donde * puede ser cualquiera de los
sufijos de tamaños de pantalla, igual se puede obviar para indicar todos los tamaños de
pantalla “.col-auto”, si mezclamos lo aprendido hasta el momento podríamos generar
algo así:
<div class="row justify-content-md-center">
<div class="col col-lg-2">1 of 3</div>
<div class="col-md-auto">Variable width content</div>
</div>
<div class="row">
<div class="col-md-auto">Variable width content</div>
</div>
</div>
Con lo que obtendríamos un resultado similar al de la siguiente figura:
Figura 4. Visualización estructural de filas y columnas con ancho variable y

automático.(Fuente: https://getbootstrap.com/docs/4.1/)
11 www.iplacex.cl
Importante: utilizamos la clase “.justify-content-md-center” Para alinear el contenido
dentro de una fila, estas etiquetas las veremos en la sección de alineación de grillas.
Forzar cambio de fila
Bootstrap ofrece la clase “.w-100” con la cual podemos forzar el cambio de fila cuando
nosotros queramos, sin necesidad de utilizar las 12 unidades de la fila.
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<!—Forzar el salto de línea -->

<div class="w-100"></div>

</div>
Con lo que obtendríamos dos filas con dos columnas cada una:
Figura 5. Salto de fila forzado.(Fuente: https://getbootstrap.com/docs/4.1/)
Anidamiento de columnas
Una característica muy potente del sistema de grillas es que nos ofrece la libertad de
anidar columnas dentro de otras columnas. Para esto solamente debemos agregar una
fila dentro de una columna, posteriormente, dentro de esta nueva fila podemos
subdividirla también usando un máximo de 12 columnas, que dividen su espacio
disponible. A continuación, crearemos una columna con tamaño de 9 y dentro una fila
que posee dos columnas, de tamaño 8 y 4:
<div class="row">
12 www.iplacex.cl
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">Level 2: .col-8 .col-sm-6</div>
<div class="col-4 col-sm-6">Level 2: .col-4 .col-sm-6</div>
</div>
</div>
</div>
Al visualizar el resultado de este código obtendríamos:
Figura 6. Anidamiento columnas.(Fuente: https://getbootstrap.com/docs/4.1/)
Márgenes
Disponemos de clases para crear márgenes de espacio variable tanto al lado izquierdo
con “.ml-auto” y también para el lado derecho utilizando “.mr-auto”.
A continuación, revisaremos un ejemplo:
<div class="row">
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>
Y se vería así:
13 www.iplacex.cl
Figura 7. Márgenes.(Fuente: https://getbootstrap.com/docs/4.1/)
Alineación
Dentro de las novedades que introdujo la última versión de Bootstrap, han aparecido un
set de clases que nos permite alinear las columnas de manera horizontal o vertical.
Alineación vertical
Para realizar una alineación de los elementos a nivel de fila, usaremos la etiqueta
“.align-items-*”, donde “*” podrá ser “start”, “center” o “end”. A continuación,
ejemplificaremos los 3 parámetros:
<div class="row align-items-start">
<div class="col">One of three columns</div>
</div>
<div class="row align-items-center">
</div>
<div class="row align-items-end">
</div>
</div>
14 www.iplacex.cl
Generando la siguiente figura:
Figura 8. Alineación Vertical.(Fuente: https://getbootstrap.com/docs/4.1/)
Por otro lado, si queremos indicar por separado cada una de las alineaciones a nivel de
columna, entonces tendremos que usar la clase CSS “.aling-self-*”, donde al igual que
en el caso anterior “*” podrá ser “start”, “center” o “end”. Revisemos el siguiente
ejemplo que muestra dicha situación:
<div class="row">
<div class="col align-self-start">One of three columns</div>
<div class="col align-self-center">One of three columns</div>
<div class="col align-self-end">One of three columns</div>
</div>
</div>
Y obtenemos lo siguiente:
Figura 9. Alineación Vertical por columna.(Fuente: https://getbootstrap.com/docs/4.1/)
Alineación Horizontal
También podemos especificar la alineación horizontal de los elementos de una fila.

Para esto disponemos de la clase “.justify-content-*” donde “*” puede ser “start”
(izquierda), “center” (centrado), “end” (derecha), “around” (añadirá el mismo espacio a
15 www.iplacex.cl
ambos lados de la columna) y “between” (añade espacio entre las columnas). A
continuación, veremos un ejemplo de los tipos de alineación descritos:
<div class="row justify-content-start">
<div class="col-4">One of two columns</div>
</div>
<div class="row justify-content-center">
</div>
<div class="row justify-content-end">
</div>
<div class="row justify-content-around">
</div>
<div class="row justify-content-between">
</div>
</div>
Con lo que obtendríamos algo similar a lo que sigue:
Figura 10. Múltiples alineaciones horizontales.(Fuente:

https://getbootstrap.com/docs/4.1/)
16 www.iplacex.cl
11. Componentes HTML
Además del sistema de grillas que revisamos anteriormente, Bootstrap incluye un

completo conjunto de componentes HTML para facilitarnos la tarea de diseñar una web
responsiva. Estos componentes incluyen estilos predefinidos que se aplican a
elementos HTML existentes para crear un diseño más atractivo, moderno y adaptable a
todos los dispositivos.
Algunos de los componentes son:
▪ Barras de navegación (Menú)

▪ Botones
▪ Formularios
▪ Tablas
▪ Desplegables
▪ y muchos más...
A continuación, se explica el funcionamiento de los elementos más utilizados.
Botones
Mediante la clase “.btn” podemos aplicar estilo a los elementos HTML tipo “button”.
Esta clase se puede combinar con otras clases predefinidas como .btn-primary , .btn-
secondary , .btn-success , .btn-danger , .btn-warning , .btn-info , .btn-light , .btn-dark O
.btn-link. Con esto creamos distintos botones con diferentes estados o acciones en
nuestros formularios:
<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>
Con lo que obtendríamos esto:
17 www.iplacex.cl
Figura 11. Distintos estilos de botones.(Fuente: https://getbootstrap.com/docs/4.1/)
Estas clases no son exclusivas para etiquetas button, también pueden ser utilizadas de
la misma forma con <a> y <input>:
<a class="btn btn-primary" href="#" role="button">Link</a>

<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">
Obteniendo en todos los casos la misma apariencia:
Figura 12. Distintos elementos con la clase .btn de Bootstrap.(Fuente:

Por último, podemos variar los tamaños de los botones añadiendo las clases .btn-lg o
.btn-sm o .btn-block, para generar botones mas grandes, pequeños o que ocupe todo el
ancho, revisemos 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>
Como se espera, este código nos genera el siguiente resultado:
Figura 13. Demostración distintos tamaños de botones.(Fuente:

18 www.iplacex.cl
Desplegables
Bootstrap nos entrega la creación de botones con listas de opciones desplegables

mediante la clase. dropdown. Para poder utilizar este elemento ya es necesario utilizar
el plugin de Bootstrap en JavaScript. La estructura básica para crear un elemento de
esta manera es la siguiente:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button"
id="dropdownMenuButt
on" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
Figura 14. Dropdown (Fuente: https://getbootstrap.com/docs/4.1/)
Sobre el botón principal podremos aplicar todas las clases revisadas anteriormente,
modificar su apariencia, colores y tamaño.
También podemos alinear el menú a la derecha agregando la clase .dropdown-menu-

right a la lista .dropdown-menu, por ejemplo:
<div class="dropdown-menu dropdown-menu-right">
19 www.iplacex.cl
Formularios
Con Bootstrap podemos aplicar estilos a los elementos de un formulario para

convertirlos en elementos responsivos, mejorar su apariencia y permitirnos crear
diferentes alineaciones.
La estructura básica de un formulario es la siguiente:
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1"
aria-describedby="emailHelp" placeholder="Enter email">
</div>
</form>
Con lo que obtendríamos un formulario en vertical como el de la siguiente figura, es

decir, los elementos del formulario se organizarían en vertical, uno debajo del otro:
Figura 15. Campo de formulario (Fuente: https://getbootstrap.com/docs/4.1/)
Formulario inline
Mediante la clase .form-inline sobre la etiqueta <form> podemos crear 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"
placeholder="User">
</div>
<div class="form-group mx-sm-3">
<label for="inputPass" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPass"
placeholder="Pass">
</div>
<button type="submit" class="btn btn-primary">Confirm</button>
</form>
20 www.iplacex.cl
Obteniendo el siguiente resultado:
Figura 16. Formulario inline (Fuente: https://getbootstrap.com/docs/4.1/)
Formulario horizontal.
Gracias al uso del sistema de grillas de Bootstrap podemos crear formularios con una
disposición en horizontal. A continuación, revisaremos un ejemplo:
Figura 17. Formulario Horizontal (Fuente: https://getbootstrap.com/docs/4.1/)
<form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<input type="email" class="form-control" id="inputEmail3"
placeholder="Email">
</div>
</div>
<label for="inputPassword3" class="col-sm-2 col-form-
label">Password</label>
<input type="password" class="form-control" id="inputPassword3"
placeholder="Password">
</div>
</div>
21 www.iplacex.cl
<div class="col-sm-2">Checkbox</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Check me out
</label>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</div>
</form>
Barra de navegación.
Para crear un elemento tan común y necesario en nuestra pagina web como el menú
de navegación Bootstrap nos entrega herramientas para realizar de una manera simple
nuestra barra de navegación utilizando la clase “.navbar”. Esta barra se adapta al
tamaño de la pantalla y su comportamiento por defecto es mostrar los elementos
colapsados en un botón en pantallas pequeñas y de forma normal en pantallas más
grandes.
Para crear nuestra barra de navegación crearemos en nuestro documento HTML la

etiqueta <nav>, que es la etiqueta de HTML5 que identifica los elementos de
navegación. Además, es requisito que a esta etiqueta también añadamos 2 clases más
para indicar el estilo y los colores a aplicar, “.navbar-light .bg-light” y la etiqueta
“.navbar-expand-lg” para indicar el tamaño desde el cual la barra se mostrará
expandida.
Dentro de la etiqueta <nav> el contenido de la barra estará dividido en tres secciones:
▪ Nombre o logotipo de la web, marcado con la etiqueta “.navbar-brand”
▪ Botón toggler marcado con “.navbar-toggler”, que se mostrará únicamente

cuando el menú se colapse y se ocultará cuando el menú aparezco extendido.
22 www.iplacex.cl
▪ Las opciones del menú, las cuales irán dentro de una lista tipo <lu> con la clase
“.navbar-nav”. Además, esta lista la tendremos que meter dentro de una caja div
con las clases .collapse .navbar-collapse, que definirá la zona que se ocultará
para pantallas pequeñas.
Veamos un ejemplo de un menú de navegación implementado:
Vista en pantallas medianas y grandes:
Figura 18. Menú desplegado en pantallas medianas y grandes (Fuente:

En pantallas pequeñas, los elementos de navegación se colapsan en un botón

(toggler), de esta forma:
Figura 19. Menú visualizado en pantallas pequeñas (Fuente:

A continuación, veremos el código que permitió armar este menú.
<nav class="navbar navbar-expand-lg navbar-light bg-light">

<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-
controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
23 www.iplacex.cl
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-
only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown"
role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search"
aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit" >
Search </button>
</form>
</div>
</nav>
24 www.iplacex.cl
Pregunta de Reflexión
• ¿Cconsideras una buena alternativa utilizar Bootstrap para el diseño de tus
páginas web?
• ¿Has visto la herramienta Bootstrap presente en páginas webs que sueles
visitar?
• Si tuvieses que programar una página web, ¿Utilizarías Bootstrap? ¿Por qué?
25 www.iplacex.cl
Conclusión
Durante esta semana conocimos y vimos como funcionaba Bootstrap, que es uno de
los frameworks de Front End más utilizados en la industria, comprendimos que tan útil
puede llegar a ser implementar una solución como esta en nuestros proyectos web, ya
que nos asegura una correcta visualización de nuestro contenido y porque además
incluye muchos de los elementos que utilizaremos ya predefinidos, con estilos y
comportamientos que se adaptan a cualquier dispositivo.
Además, vimos en profundidad el sistema de grillas con el cual trabaja Bootstrap, que
es el pilar fundamental del diseño responsivo y que está dividido en 12 columnas
virtuales que se pueden ir anidando, acoplando y editando a medida que sea requerido
por nosotros, de esta manera, lograr un control total de nuestra web utilizando clases
predefinidas que permiten separar el comportamiento de los elementos html
dependiendo del tamaño del viewport.
La próxima semana tendremos una introducción a jQuery, una librería de herramientas

realizada en JavaScript que nos permite tener un control total de los elementos Front
End.
26 www.iplacex.cl
Bibliografía
Manual programación web en el entorno cliente | Ribes Alba, Purificación | E-LIBRO
Desarrollo web en entorno cliente | Vara Mesa, Juan Manuel; López Sanz, Marcos | E-LIBRO
https://getbootstrap.com/docs/4.1/
Libro: Mastering Bootstrap 4 Autor(es): Benjamin Jakobus y Jason Marah
https://www.w3schools.com
27 www.iplacex.cl
28 www.iplacex.cl

Me 2

Cargado por

Copyright:

Formatos disponibles

Me 2

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

Me 2

Cargado por

Copyright:

Formatos disponibles

PROGRAMACIÓN FRONT END

Para producir de manera mas rápida y eficiente el diseño responsivo de nuestras

El framework que revisaremos es Bootstrap, el cual, es un framework JavaScript

2) Eficiente sistema de grillas.

4) Gran lista de componentes disponibles.

5) Incluye algunos plugin JavaScript.

2. Bootstrap: Framework creado con la finalidad de apoyar el diseño front end de

3. Sistema de Grillas: Esquema de diagramación implementado por Bootstrap que

4. Manejo de Columnas: Bootstrap funciona basado en filas y columnas que se

5. Componentes HTML: Elementos HTML predefinidos en Bootstrap listos para

Entre los navegadores soportados se encuentra Chrome, Firefox, Opera, Safari e

Está diseñado y preparado para visualizarse correctamente en navegadores de PCs y

Conceptos básicos: Bootstrap es un framework JavaScript que funciona en conjunto

9. Incluir librería Bootstrap

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no",

Existen 2 formas de obtener dichos archivos la primera es descargándolo desde el sitio

El sistema de rejilla que utiliza Bootstrap se basa en la disposición del contenido de

En la siguiente imagen se ejemplifica el resultado de utilizar los dos tipos de container

Para entender el funcionamiento de la grilla en Bootstrap es necesario tener máxima

Los contenidos en nuestra grilla se adaptan a distintos tipos de pantalla de manera

A continuación, se detalla el funcionamiento y reglas del sistema de grillas:

▪ Las columnas irán agrupadas dentro de filas ( .row ).

▪ Las filas ( .row ) deben ir dentro de una etiqueta contenedora ( .container o

▪ Si el tamaño total de las columnas supera las 12 unidades, el tamaño sobrante

Al seguir este orden el sistema de grillas funcionará correctamente, creando los

Importante, al definir estas clases no sólo se aplican para su tamaño especifico si no

Columnas de ancho específico.

A continuación, veremos un ejemplo de como se usa el sistema de grilla definiendo

Solo para pantallas medianas:

En el siguiente ejemplo, veremos 3 filas, la primera dividida en 2 columnas de tamaño

En la siguiente imagen se puede ver el resultado para pantallas de tamaño mediano

Figura 1. Visualización estructural de filas y columnas con ancho fijo.

Como mencionamos anteriormente esto sólo define el tamaño de columnas para

Columnas de ancho automático.

Bootstrap 4 ha incluido columnas de ancho automático las cuales podemos utilizar

El código superior nos daría una grilla como la siguiente:

Figura 3. Visualización estructural de filas y columnas con ancho automático.

En el ejemplo anterior se aprecia como las filas se dividen de manera automática en

Anchos de columna variable

Con lo que obtendríamos un resultado similar al de la siguiente figura:

Figura 4. Visualización estructural de filas y columnas con ancho variable y

Forzar cambio de fila

<!—Forzar el salto de línea -->

<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

Figura 5. Salto de fila forzado.(Fuente: https://getbootstrap.com/docs/4.1/)

Al visualizar el resultado de este código obtendríamos:

Figura 6. Anidamiento columnas.(Fuente: https://getbootstrap.com/docs/4.1/)

A continuación, revisaremos un ejemplo:

Figura 8. Alineación Vertical.(Fuente: https://getbootstrap.com/docs/4.1/)

Figura 9. Alineación Vertical por columna.(Fuente: https://getbootstrap.com/docs/4.1/)

También podemos especificar la alineación horizontal de los elementos de una fila.

Con lo que obtendríamos algo similar a lo que sigue:

Figura 10. Múltiples alineaciones horizontales.(Fuente:

Además del sistema de grillas que revisamos anteriormente, Bootstrap incluye un

Algunos de los componentes son:

▪ Barras de navegación (Menú)

A continuación, se explica el funcionamiento de los elementos más utilizados.

<button type="button" class="btn btn-primary">Primary</button>