FACULTAD DE INGENIERÍA

DISEÑO WEB

SESIÓN N° 11
DISEÑO RESPONSIVO,
INTRODUCCIÓN A BOOTSTRAP
TALLER DE PROGRAMACIÓN WEB

DISEÑO WEB
 TALLER DE PROGRAMACIÓN WEB

AGENDA

Diseño responsivo.
Introducción a Bootstrap.

Datos/Observaciones
 TALLER DE PROGRAMACIÓN WEB

LOGRO DEL APRENDIZAJE

Al finalizar el Estudiante será capaz de:

 Utilizar todos los conocimientos adquiridos durante

el transcurso de la asignatura para la construcción
de páginas web responsivas.

Datos/Observaciones
Diseño Responsive
A lo largo de los últimos años hemos visto un cambio fundamental en el modo en que los usuarios consumen
contenidos web. El auge de los dispositivos móviles ha hecho que el planteamiento de diseñar un sitio web
para un tamaño fijo de pantalla haya dejado de ser una buena práctica.

¿Qué es el diseño web responsivo?

El diseño Web Responsivo (Responsive Web Design en inglés), es una técnica de diseño y desarrollo web
que, mediante el uso de estructuras e imágenes fluidas, así como de media-queries en la hoja de estilo CSS,
consigue adaptar el sitio web al entorno del usuario.

Datos/Observaciones
Toma las mejores prácticas para aplicarlas en la construcción de sitios, logrando buena calidad en las
aplicaciones. La idea es que un solo sitio sea no solo adaptable a las características del recurso, sino que llegue
a ser adaptativo.

En resumen, se trata de una estrategia de diseño que nos centrará en crear nuestros contenidos para que
respondan de forma correcta independientemente del tamaño de pantalla o tipo de dispositivo en el que se
estén visualizando..

Datos/Observaciones
Implementando diseño web responsivo.
Hoy en día, una empresa que desee tener un sitio web "digno de ese nombre" deberá proponer un contenido
que se visualice correctamente en todos los medios actuales: en una pantalla de ordenador (¡de 13" a 32"!), en
una tableta táctil y en un smartphone.

La dificultad consiste, claro está, en lograr que nuestro contenido sea visible y legible a partir de esos tres tipos
de pantalla. El objetivo es proponer una experiencia de uso, una interfaz web, un diseño web, que se adapte
automáticamente a las diferentes resoluciones de pantalla que podría utilizar el usuario.

Datos/Observaciones
Para lograr nuestro objetivo, vamos a usar tres técnicas:

 Un grid flexible, que permita reorganizar la estructura de las páginas, de modo que puedan adaptarse a la
resolución de la pantalla.
 Imágenes flexibles, para que su tamaño se adapte al tamaño de la pantalla de visualización.
 Media queries, que nos permitan saber cuál es el tipo y las dimensiones del dispositivo del visitante.

Datos/Observaciones
Meta-etiqueta viewport.

El viewport en un navegador de una computadora es igual al área disponible para renderizar el documento web
(o sea, le restamos toda la interfaz del navegador, como botones, barra de direcciones, barra de menús, barras
de desplazamiento, etc.) Dicho de otro modo, es el área útil donde se mostrará la página web.

Para el caso de los dispositivos móviles el viewport no corresponde al tamaño real de la pantalla en píxeles,
sino al espacio que la pantalla está emulando que tiene. Por ejemplo, en un iPhone, aunque la pantalla en
vertical tiene unas dimensiones de 320 píxeles, en realidad el dispositivo está emulando tener 980 píxeles.

Esto hace que ciertas páginas web (optimizadas para navegadores de escritorio) quepan en una pantalla de
320 píxeles, porque en realidad el Safari para iOS está emulando tener un espacio de 980 píxeles.

Datos/Observaciones
Lo interesante en este caso es que los desarrolladores somos capaces de alterar el viewport que viene
configurado en el navegador, algo que resulta totalmente necesario si queremos que nuestra página se vea
correctamente en dispositivos móviles.

Datos/Observaciones
Datos/Observaciones
La meta-etiqueta viewport fue creada en principio por Apple para su móvil predilecto, pero se ha convertido en
todo un estándar que es soportado por la mayoría de los dispositivos móviles (smartphones, tablets y gran parte
de móviles de gama media y baja). Como cualquier etiqueta meta, el viewport se define dentro del head del
documento web.

Un ejemplo de etiqueta viewport sería el siguiente:

<meta name = "viewport" content = "width=device-width, initial-scale=1.0, user-scalable=no" >

Datos/Observaciones
 Con widdevice-width conseguimos que el viewport sea igual a la anchura real de la pantalla del
dispositivoth=, de modo que no se tratará de emular una pantalla mayor de lo que realmente es y veremos
los píxeles reales.
 Con initial-scale=1 conseguimos que no se haga zoom sobre el documento. El contenido de la web no se
transformará, ni se agrandará, ni se hará menor.
 Con user-scalable=no conseguimos que el usuario no pueda hacer zoom en la página, con lo que siempre
se mantendrán las medidas que nosotros hemos definido al construir la web.

Datos/Observaciones
La lista completa de parámetros que se pueden utilizar para construir la meta etiqueta viewport es la siguiente
(los parámetros se separaran por comas):
 Width : ancho de la página (se puede establecer en píxeles o como device-width y usará el ancho del que
dispone).
 Height : alto de la página, actúa igual que el width.
 Initial-scale : escala o zoom inicial de la página (este y los demás tipos de escala se establecen con valores
como 1.0 para no tener zoom o 2.5 para tener un zoom del 2,5 de aumento, por ejemplo).
 Minimum-scale : zoom mínimo que podemos hacer en la página.
 Maximum-scale : zoom máximo que podemos hacer en la página.
 User-scalable : establece si está permitido o no hacer zoom (yes/no).

Datos/Observaciones
MEDIA QUERIES

Las Media Queries son una parte muy importante dentro del responsive design y nos permiten escribir estilos
que respondan a los cambios al tamaño de la pantalla, la orientación o el medio en el que se visualiza el sitio
web.
Las Media Queries nos permite seleccionar con toda precisión el medio de difusión, mediante criterios
específicos o combinaciones de criterios. El resultado obtenido de esta búsqueda será de tipo booleano: el valor
será verdadero o falso. De este modo podremos seleccionar una hoja de estilo en función de las respuestas
obtenidas en la búsqueda.

Datos/Observaciones
Los criterios de búsqueda más importantes para la construcción de media queries son los siguientes:

 El ancho de la zona de visualización : width. Podemos examinar el ancho de la zona de visualización del
navegador. Se permiten las variantes min-width y max-width . Es la principal expresión para el responsive
design. Ejemplo: width: 780px.

 La orientación de la pantalla: orientation. Ejemplo: orientation: portrait o orientation: landscape. Resulta

bastante práctico para examinar si el usuario usa su tableta táctil verticalmente (portrait) u horizontalmente
(landscape).

Datos/Observaciones
Como ya se indicó, los media queries devuelven un resultado booleano: solo pueden ser verdaderos o falsos. Si
la condición es verdadera, se aplica el estilo; si es falsa, será ignorada.

@media (max-width:600px ) {
/*reglas a implementar*/
}

Este sencillo ejemplo tiene una media query que se interpreta de la siguiente manera: Cuando el ancho de la
pantalla tenga un ancho menor a 600px se aplican las reglas de estilo encerradas dentro de las llaves que
abren y cierran la media queries.

Datos/Observaciones
Operadores
lógicos
Para la construcción de media queries útiles es necesario utilizar múltiples condiciones relacionadas mediante
operadores lógicos.

Operador and
El operador and es usado para colocar juntas múltiples funciones multimedia. Un query básico con el tipo de
medio especificado como all puede lucir así:

@media ( min-width : 700px ) { ... }

Datos/Observaciones
Si se desea quiere aplicar ese query solo si la pantalla esta en formato horizontal, se puede utilizar el operador
and y colocar la siguiente cadena:

@media ( min-width : 700px ) and ( orientation : landscape ) { ... }

Operador Or
Al escribir media queries el operador or no existe como tal sin embargo es posible conseguir su comportamiento
usando condiciones separados por coma.
Cuando utilizan condiciones separadas por comas y alguno de los queries retorna verdadero, el estilo o la hoja
de estilos será aplicada.

Datos/Observaciones
Por ejemplo, si se quiere aplicar una serie de estilos para un equipo con un ancho mínimo de 700px o si el
dispositivo está colocado en horizontal, debemos escribir la siguiente media query:

@media ( min-width : 700px ) , ( orientation : landscape ) { ... }

§ Operador not
Es una negación de una condición. Cuando esa condición no se cumpla se aplicarán las media queries.
Aplicando media queries
Las media queries se pueden aplicar básicamente en dos posibles puntos de la web:
 Al llamar al archivo css, indicando en cada uno las condiciones para cargarlo.

Datos/Observaciones
<link rel = "stylesheet" media = "(max-width: 800px)"
href = "ejemplo.css" />

 En el propio archivo CSS, formando un apartado donde incluir fragmentos de css a aplicar.

@ media (max-width: 800px) {

. prueba {
display : none;
}
}

Datos/Observaciones
Creando puntos de cortes mediante media queries
Típicamente las medias queries que se construyen para responsive design emplean como criterio de búsqueda
el ancho del viewport. En ese sentido encontraremos tres formas de crear media queries:

§ Aplicar solo en resoluciones de menos de X píxeles de ancho:

@media screen and (max-width:[ANCHO]px) {}
§ Aplicar solo en resoluciones de más de X pixeles de ancho:
@media screen and (min-width:[ANCHO]px) { }
§ Aplicar solo en resoluciones entre X e Y pixeles de ancho:
@media screen and (min-width:[ANCHO X]px) and (max-width:[ANCHO Y]px) { }

Datos/Observaciones
El proceso de creación de breakpoints (puntos de corte) puede llegar a ser muy completo por la gran diversidad
de dispositivos y dimensiones de pantalla que presentan los dispositivos en el mercado de los dispositivos
móviles.

Por ello, en lugar de trabajar con complejas matrices de dimensiones de dispositivos vamos a escribir nuestras
medias queries de la forma más genérica posibles.

Durante el desarrollo de los ejemplos de la práctica estaremos usando tres puntos de corte para smartphones,
tablets y PC.

Datos/Observaciones
Datos/Observaciones
Utilizando esos puntos de corte también podemos hacer que se aplique una o otra hoja de estilo según el
tamaño del viewport.

<link type = "text/css" rel = "stylesheet" href = "css/movil.css" media =

"screen and
(max-width:480px) " >
<link type = "text/css" rel = "stylesheet" href = "css/tablet.css" media ="
screen and
(min-width:481px) and (max-width:768px) " >
<link type = "text/css" rel = "stylesheet" href = "css/pc.css" media =
"screen and (min-width:769px) " >

Datos/Observaciones
Usando la etiqueta viewport, las media queries y todos las propiedades y selectores CSS estudiados a la fecha,
es posible crear sitios web que respondan al tipo de dispositivo y a los cambios en el ancho del viewport.

Por ejemplo, es posible que nuestro diseño para PC se presente en tres columnas, el diseño para Tablet en dos
columnas y el diseño para smartphones se presente en una sola columna.

Adaptando imágenes al diseño

responsivo
Para crear diseños muy optimizados puede ser importante usar varias imágenes distintas, una con un tamaño
superior y otra con uno más ligero, pero por simplicidad nos vamos a centrar en el uso de una misma imagen
(que en la medida de lo posible debería de estar optimizada) que se adaptará al tamaño del contenedor.

Datos/Observaciones
 Con esto conseguiremos que la imagen se muestre con su tamaño original siempre y cuando este tamaño no
supere el tamaño del contenedor.

Probando los diseños responsivos

Es muy común que para probar un diseño responsivo simplemente se cambien el ancho del navegador. Esta
prueba, aunque no es incorrecta, si es muy limitada puesto que haciendo eso no es posible determinar la
experiencia de navegación que obtendría el usuario en cada tipo de dispositivo.

Datos/Observaciones
Una mejor opción seria entonces probar nuestros diseños en diversos tipos de dispositivos para ver si
realmente la experiencia de navegación es cómoda.

La mayoría de navegadores incluyen desde su “inspeccionador de elementos” la posibilidad de probar un sitio

web en diferentes tipos de dispositivos. Adicionalmente existen extensiones para algunos navegadores que
permiten verificar como se verían nuestros sitios en diversos dispositivos móviles.

Datos/Observaciones
Introducción al diseño responsivo con el
FRAMEWORK Bootstrap
Construir un sitio web responsivo puede ser una tarea muy complicada que requiere de mucho trabajo y de
solidos fundamentos de CSS. Con el objetivo de facilitar el trabajo de construcción de sitios web responsivos,
existen una gran variedad de frameworks CSS disponibles para su uso.

Un framework CSS es un conjunto de estilos y componentes prefabricados que facilitan la creación de sitios
web responsivos. Actualmente existe una gran diversidad de frameworks CSS entre los cuales se pueden
mencionar:

Datos/Observaciones
  Bootstrap

 Foundation

 Skeleton

 Pure.css

 Materialize

Datos/Observaciones
Introducción a Bootstrap
Bootstrap es un framework CSS desarrollado inicialmente (en el año 2011) por Twitter que permite dar forma a
un sitio web mediante librerías CSS que incluyen tipografías, botones, cuadros, menús y otros elementos que
pueden ser utilizados en cualquier sitio web.

Aunque el desarrollo del framework Bootstrap fue iniciado por Twitter, fue liberado bajo licencia MIT en el año
2011 y su desarrollo continua en un repositorio de GitHub.

Bootstrap es una excelente herramienta para crear interfaces de usuario limpias y totalmente adaptables a todo
tipo de dispositivos y pantallas, sea cual sea su tamaño. Además, Bootstrap ofrece las herramientas necesarias
para crear cualquier tipo de sitio web utilizando los estilos y elementos de sus librerías.

Datos/Observaciones
Desde la aparición de Bootstrap 3 el framework se ha vuelto bastante más compatible con desarrollo web
responsive , entre otras características se han reforzado las siguientes:

 Se ha añadido un sistema GRID que permite diseñar usando un GRID de 12 columnas donde se debe
plasmar el contenido.

 Boostrap 3 establece Media Queries para 4 tamaños de dispositivos diferentes variando dependiendo del
tamaño de su pantalla, estas Media Queries permiten desarrollar para dispositivos móviles y tablets de
forma mucho más fácil.

 Boostrap 3 también permite insertar imágenes responsive , es decir, con solo insertar la imagen con la clase
“img-responsive” las imágenes se adaptaran al tamaño.

Datos/Observaciones
Bootstrap incluye una rejilla fluida pensada para móviles (mobile first) y que cumple con el diseño web
responsivo. Esta rejilla crece hasta 12 columnas a medida que crece el tamaño de la pantalla del dispositivo.

Mobile-first significa que se debe comenzar realizando el diseño para móviles (puesto que es la pantalla más

limitada o restrictiva) y luego ir pensando en el diseño para pantallas más grandes.

Datos/Observaciones
Datos/Observaciones
Centrando los contenidos de la pagina
Si se desea centrar una pagina respecto a la ventana del navegador, se debe encerrar su contenido dentro de
elemento y aplicarle la clase .container:

div class= "container" > ... </div>

La anchura del contenedor varía en cada punto de ruptura del diseño para adaptarse a la rejilla. Los
contenedores NO se pueden anidar debido a su propiedad padding y a su anchura fija.

Datos/Observaciones
Media queries de Bootstrap
Bootstrap utiliza las siguientes media queries para establecer los diferentes puntos de ruptura en los que la
rejilla se transforma para adaptarse a cada dispositivo.

Datos/Observaciones
Trabajando con la rejilla de Bootstrap

El diseño de páginas basado en rejilla se realiza mediante filas y columnas donde se colocan los contenidos.

Así funciona la rejilla de Bootstrap:

 Las filas siempre se definen dentro de un contenedor de tipo .container (anchura fija) o de tipo .container-
fluid (anchura variable). De esta forma se alinean bien y muestran el padding correcto.

 Las filas se utilizan para agrupar horizontalmente a varias columnas.

 El contenido siempre se coloca dentro de las columnas, ya que las filas solo deberían contener como hijos
elementos de tipo columna.

Datos/Observaciones
 Bootstrap define muchas clases CSS (como por ejemplo .row y .col-xs-4) para crear rejillas rápidamente.

 La separación entre columnas se realiza aplicando padding. Para contrarrestar sus efectos en la primera y
ultima columnas, las filas (elementos .row) aplican márgenes negativos.

 Las columnas de la rejilla definen su anchura especificando cuántas de las 12 columnas de la fila ocupan. Si
por ejemplo se desea dividir una fila en tres columnas iguales, se utilizaría la clase .col-xs-4 (el 4 indica que
cada columna ocupa 4 de las 12 columnas en las que se divide cada fila).

Datos/Observaciones
Datos/Observaciones
Estructura básica del grid

A continuación se muestra la estructura básica del grid de Bootstrap:

<div class = "container" >

<div class = "row" >
<div class = "col-*-*" ></div>
<div class = "col-*-*" ></div>
</div>
<div class = "row" >
...
</div>
</div>
<div class = "container" >
...
</div>

Datos/Observaciones
Contenedor de anchura variable

Si se desea transformar una rejilla de anchura fija en una rejilla de anchura variable que ocupa toda la anchura
del navegador, se debe reemplazar la clase CSS .container por .container-fluid en el elemento que encierra a
todos los demás elementos de la rejilla:

<div class= "container-fluid" >

<div class= "row" >
...
</div>
</div>

Datos/Observaciones
Acomodación de columnas
Si hay más de 12 columnas dentro de una sola fila, cada grupo de columnas adicional se colocará en una nueva
fila.

Desplazamiento de columnas

La clase .col-md-offset-* permite desplazar cualquier columna hacia su derecha. Estas clases aumentan el tamaño
del margen izquierdo de la columna en una cantidad equivalente a esas * columnas. Por ejemplo, la clase .col-md-
offset-4 desplaza la columna una anchura equivalente a 4 columnas.

Anidando columnas

Bootstrap 3 también permite anidar columnas dentro de otras columnas. Para ello, dentro de una columna con la
clase col-md-* se debe crear un nuevo elemento con la clase .row y luego se debe añadir una o más columnas con
la clase .col-md-*.
Datos/Observaciones
Las columnas anidadas siempre tienen que sumar 12 columnas de anchura.

Reordenando las columnas

Bootstrap 3 introduce la posibilidad de reordenar las columnas para cambiar su posición, lo que es muy

importante para los diseños web responsive .

 .col-md-push-X permite reordenar las columnas desplazándolas X unidades hacia la derecha.

 .col-md-pull-X permite reordenar las columnas desplazándolas X unidades hacia la izquierda.

Datos/Observaciones
TIPOGRAFIA

Los estilos relacionados con la tipografía y el texto de los contenidos son esenciales en cualquier framework CSS.
Por esa razón, Bootstrap 3 incluye decenas de estilos para los principales elementos utilizados en los sitios y
aplicaciones web.

Texto

El tamaño de letra (font-size) por defecto de Bootstrap 3 es 14px y el interlineado (line-height) es 1.428. Estos
valores se aplican tanto al <body> como a todos los párrafos. Estos últimos también incluyen un margen inferior
cuyo valor es la mitad que su interlineado (10px por defecto).

Texto destacado

Para destacar un párrafo sobre los demás, se debe añadir la clase .lead.

Datos/Observaciones
Clases CSS para alinear texto

Bootstrap 3 define varias clases CSS para alinear de diferentes formas el contenido de texto de los elementos.

<p class = "text-left" > Texto alineado a la izquierda. </p>

<p class = "text-center" > Texto centrado. </p>
<p class = "text-right" > Texto alineado a la derecha. </p>
<p class = "text-justify" > Texto justificado </p>

Listas sin estilo

Como resulta muy habitual mostrar las listas sin viñetas y sin margen izquierdo, Bootstrap 3 incluye una clase CSS
llamada .list-unstyled para aplicar esos estilos.

Datos/Observaciones
La única desventaja de esta clase es que sólo se aplica a los elementos de una lista y no a los elementos de sus
listas anidadas. Así que si se desea aplicar los estilos a todos los elementos, de debe añadir la clase .list-unstyled
también a las listas anidadas.

Listas en línea

También resulta habitual mostrar los elementos de una lista horizontalmente, como por ejemplo en el menú
principal de navegación. Para ello, Bootstrap 3 define una clase CSS llamada .inline-block.

Datos/Observaciones
IMÁGENES

Imágenes responsivas

Bootstrap 3 no adapta el tamaño de las imágenes automáticamente. Para que las imágenes se comporten de
manera responsiva (es decir se adapten al ancho del contenedor), se debe aplicar la clase .img-responsive. Esta
clase hace que la imagen tenga un ancho máximo del 100% y una altura automática:

<img src= "..." class= "img-responsive" alt= "Imagen responsive" >

Decorando imágenes

Bootstrap 3 define algunas clases CSS para decorar las imágenes.

Datos/Observaciones
 .img-rounded , añade unas pequeñas esquinas redondeadas en todos los lados de la imagen aplicando el
estilo border-radius: 6px.

 .img-circle , convierte la imagen en un círculo aplicando el estilo border-radius: 50%

<img src = "img/uss.jpg" alt = “CIS" class = "img-rounded" >

<img src = "img/uss.jpg" alt = “CIS" class = "img-circle" >

Datos/Observaciones
UTILIDADES CSS

Elementos flotantes

Flotar un elemento a la derecha o a la izquierda es muy habitual en la mayoría de diseños web. Por eso Bootstrap
3 define dos clases CSS llamadas .pull-left y .pull-right que se pueden aplicar sobre cualquier elemento:

<div class= "pull-left" > ... </div>

<div class= "pull-right" > ... </div>

Este es el código CSS aplicado a cada clase (la palabra reservada !important se utiliza para evitar posibles
problemas con la especificidad de los selectores):

Datos/Observaciones
 .pull-left {
float : left !important ;
}
.pull-right {
float : right !important ;
}

Elementos centrados

Para centrar horizontalmente cualquier elemento basta con aplicar la clase center-block (el elemento centrado se
convierte en un elemento de bloque):

Datos/Observaciones
 <div class= "center-block" > ... </div>

El código CSS aplicado a esta clase es el siguiente:

.center-block {
display : block ;
margin-left : auto ;
margin-right : auto ;
}

Limpiando floats
Cuando un diseño utiliza muchos elementos flotantes, es común tener que limpiar un elemento para que no le
afecten otros elementos flotantes. Para realizar esta tarea, Bootstrap dispone de la clase clearfix.

Datos/Observaciones
 <div class= "clearfix" > ... </div>

Mostrar/ocultar elementos.

Bootstrap dispone de algunas clases que permiten mostrar u ocultar elementos en función del tipo de dispositivo
que utiliza el usuario para navegar. Estas clases solo funcionan para los elemento de bloque y las tablas.

Datos/Observaciones
Datos/Observaciones
BOTONES
Bootstrap dispone de una buena cantidad de clases para darle estilo a los botones.
<!-- Botón normal -->
<button type = "button" class = "btn btn-default" > Normal </button>
<!-- Muestra el botón de forma destacada para descubrir fácilmente el botón
principal dentro de un grupo de botones -->
<button type = "button" class = "btn btn-primary" > Destacado </button>
<!-- Indica una acción exitosa o positiva -->
<button type = "button" class = "btn btn-success" > Éxito </button>
<!-- Botón pensado para los mensajes con alertas informativas -->
<button type = "button" class = "btn btn-info" > Información </button>
<!-- Indica que hay que tener cuidado con la acción asociada al botón -->
<button type = "button" class = "btn btn-warning" > Advertencia </button>
<!-- Indica una acción negativa o potencialmente peligrosa -->
<button type = "button" class = "btn btn-danger" > Peligro </button>
<!-- Resta importancia al botón haciéndolo parecer un simple enlace
aunque conserva tu comportamiento original de botón -->
<button type = "button" class = "btn btn-link" > Enlace </button>
 Botones de diferente tamaño

Cuando se necesite crear botones más grandes o más pequeños que el tamaño estándar, es preciso utilizar las
clases .btn-lg (grande), .btn-sm (pequeño) y .btn-xs (extra pequeño).

<button type = "button" class = "btn btn-primary btn-lg" > Botón grande </button>
<button type = "button" class = "btn btn-primary" > Botón normal </button>
<button type = "button" class = "btn btn-primary btn-sm" > Botón pequeño </button>
<button type = "button" class = "btn btn-primary btn-xs" >
Botón extra pequeño
</button>
Datos/Observaciones
Botones de bloque

Bootstrap permite convertir el botón en un elemento de bloque para hacer que ocupe toda la anchura del
elemento en el que se encuentre. Para ello, se debe añadir la clase .btn-block.

<button type= "button" class= "btn btn-primary btn-lg btn-block" >

Botón de bloque
</button>
<button type= "button" class= "btn btn-default btn-lg btn-block" >
Botón de bloque
</button>

Datos/Observaciones
Etiquetas para botones

Gracias a los estilos de Bootstrap 3, es posible utilizar cualquiera de las siguientes etiquetas para mostrar
botones: <a>, <button> e <input>.

Datos/Observaciones
<a class = "btn btn-primary" href = "#“ >Enlace </a>
<button class = "btn btn-primary" type = "submit" > Botón </button>
<input class = "btn btn-primary" type = "button" value = "Campo input" >
<input class = "btn btn-primary" type = "submit" value = "Enviar" >

Datos/Observaciones
 TALLER DE PROGRAMACIÓN WEB

59
MBA. ING. BRUNO SARMIENTO JOSÉ MANUEL
 TALLER DE PROGRAMACIÓN WEB

RESUMIENDO …
Complete:

Responsive: …………………………………………….
 Bootstrap:………………………..………………………

MBA. ING. BRUNO SARMIENTO JOSÉ MANUEL 60

 TALLER DE PROGRAMACIÓN WEB

BIBLIOGRAFÍA DE LA
SESIÓN

 TORRES REMON, MANUEL ÁNGEL (2010) Desarrollo de aplicaciones web con PHP y
MySQL, O’Relly Media: Google Press
 PILGRIM, MARK (2010) HTML5: up and running, O’Relly Media: Google Press
 ORÓS CABELLO, JUAN CARLOS (2015) Diseño de páginas web con XHTML, JavaScript y
CSS, Macro

Datos/Observaciones