Bootstrap 3.

0

Aplicaciones Web/Sistemas Web
Juan Pavn Mestras
Dep. Ingeniera del Software e Inteligencia Artificial
Facultad de Informtica
Universidad
Complutense
Madrid
Curso de Aplicaciones Web/Sistemas Web by Juan Pavn Mestras is licensed
under a Creative Commons Reconocimiento-CompartirIgual 3.0 Unported License.

Framework de twitter para desarrollo de aplicaciones web
Sencillo y ligero
Puede bastar con un fichero CSS y uno JavaScript
Basado en los ltimos estndares de desarrollo de Web
HTML5, CSS3 y JavaScript/JQuery
Plugins de jQuery para validar entrada de datos, visualizacin tablas, grafos, etc.
Curva de aprendizaje baja
Compatible con todos los navegadores habituales
Arquitectura basada en LESS
Reset CSS basado en Normalize.css
Abierto
Publicado en 2011 con licencia Apache
Juan Pavn - UCM 2013-14
Bootstrap 2

Bootstrap

Responsive web design

Responsive web design
Diseo de pginas web para que el usuario las visualice perfectamente en un
amplio rango de dispositivos
Navegador en el PC, tableta, smartphone
Bootstrap 3: Mobile first
Se ha rediseado para adaptarse desde el principio a tamaos de pantalla tpicos
de los mviles
Sistema grid fluido que escala a 12 columnas al aumentar el tamao
del viewport Ver cambios de bootstrap 2 .x a 3.0 en :
http://getbootstrap.com/getting-started/#migration-classes

Juan Pavn - UCM 2013-14
Bootstrap 3

Distribucin bsica: http://getbootstrap.com/

bootstrap/

glyphicons-halflings-regular.svg
css/


bootstrap.css


bootstrap.min.css


bootstrap-theme.css


bootstrap-theme.min.css
js/


bootstrap.js


bootstrap.min.js
fonts/
glyphicons-halflings-regular.eot
clases de base de bootstrap
igual pero sin comentarios
de bootstrap JavaScript de los componentes funciones
pero igual sin comentarios
efectos aade 3 elementos y otros D a botones
sin comentarios pero igual
Iconos grficos

glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
En produccin se usan las versiones .min que ahorran espacio
Juan Pavn - UCM 2013-14
Bootstrap 4




Ejercicios

Descargar bootstrap
http://getbootstrap.com/
Download bootstrap
Fichero zip que contiene la distribucin bsica
Probar el ejemplo bsico
Crear un proyecto de sitio web
Copiar los directorios de bootstrap (css, fonts y js) en la raz del sitio
Crear un index.html con la plantilla bsica de http://getbootstrap.com/getting-
started/
Comprobar que estn bien los enlaces a los ficheros de bootstrap
Habr que adaptarlos a tu organizacin de los ficheros
Comprobar que se incluye jquery.js (al final del fichero)
Probar con otras plantillas
Juan Pavn - UCM 2013-14
Bootstrap 7

Viewport

rea visual en la que se muestran los documentos HTML Atributos
width: device-width o nmero de pixels
height: device-height o valor en pixels
initial-scale: 0..1 (1 indica que es sin escala )
user-scale: yes/no (indica si el usuario puede cambiar la escala)
minimum-scale: 0..1 ( escala mnima del viewport ) maximum-scale: 0..1 (
escala mxima del viewport )
Para aplicar responsive design:
<meta name="viewport" content="width=devicewidth, initialscale=1.0">

En mviles conviene deshabilitar el zooming:
<meta name="viewport" content="width=devicewidth, initialscale=1.0, maximum
scale=1.0, userscalable=no">
Juan Pavn - UCM 2013-14
Bootstrap 8


Juan Pavn - UCM 2013-14
Bootstrap 9

Grid de 12 columnas

Grid de 960px (basado en http://960.gs)
Por defecto columnas de 60px y offset de 20px
Se adapta dependiendo del viewport
Por debajo de 768px (tabletas, smartphones) las columnas pasan a fluid y se
apilan verticalmente

La pgina se estructura en bloques del grid
Clases definidas en el CSS de bootstrap
container ( fluido )
Se encarga de alinear y ajustar los mrgenes adecuadamente
row
Grupos horizontales de columnas
Se deben declarar dentro de un container
col-md-1, col-md-2, col-md-3, col-md-12
col-md-offset-1, col-md-offset-2, col-md-offset-3,
En la versin 2 de bootstrap era span1, span2, etc. y offset1, offset2,
Se puede usar versiones col-xs-* y col-sm-* para hacer varias columnas en
dispositivos mviles y no siempre apilar
Juan Pavn - UCM 2013-14
Bootstrap 10

Grid de 12 columnas

Adaptacin en funcin del ancho del viewport

Tabla de la documentacin en lnea en http://getbootstrap.com/css/
Juan Pavn - UCM 2013-14
Bootstrap 11



Juan Pavn - UCM 2013-14
Bootstrap 12

Grid de 12 columnas
div < class="container">
< div class="row">
< div class=" col md " > 4
< h2>Caja de 4 columnas</h2>
< /div >
< div class="col md 6 col md offset 2 " >
< h2>Offset de 2 columnas y caja de 6 columnas</h2>
< div class="row">
< div class="col md 8 "><p>Anidado de 4< /p></div >
< div class="col md 4 "><p>Anidado de 2< /p></div >
< /div >
/div > <
< /div >
< > /div
La suma de
columnas anidadas
tiene que ser 12


Tipografa

http://getbootstrap.com/css/#type
Bootstrap define la tipografa para distintos tipos de texto
h1, h2, h3, h4, h5, h6: Semibold 36 px, 30px, 24px, 18px, 14px, 12px
Con <small> dentro del header se puede aadir texto ms pequeo
<h1>h1. Cabecera de Bootstrap <small>Texto secundario</small></h1>
< body> y <p >
font-size por defecto 14px, con line-height 1.428
<p> tienen un margen inferior por defecto de 10px
< p class="lead">...</p> para resaltar el texto
Tambin <small> <strong> y <em>
Alineacin de texto
<p class="text-left">Texto alineado a la izquierda</p>
<p class="text-center">Texto centrado</p>
Ejercicio

Crear un una pgina con la siguiente distribucin:
UCM 2013-14 Juan Pavn -
Bootstrap 13
Men
Cabecera
Columna 1 Contenido principal
Sigue el contenido
Columna 2
1 2 3 4 5 6 7 8 9 10 11 12
( deben sumar 12) Subcajas
De 2 De 4

<p class="text-right">Texto alineado a la derecha</p>
< abbr title="abreviatura">abr</abbr >
< address> para direcciones
< blockquote> para citar un texto
Juan Pavn - UCM 2013-14
Bootstrap 14

Tipografa

http://getbootstrap.com/css/#type
Listas
Unordered <ul>
Ordered < ol >
Descripciones <dl>
Cdigo
En lnea: <code>&lt;code&gt;</code>
En bloque: <pre> cdigo en varias lneas </pre>
Tablas
Formularios
Botones
Juan Pavn - UCM 2013-14
Bootstrap 15




Juan Pavn - UCM 2013-14
Bootstrap 16

Utilidades para responsive design

Se pueden ocultar elementos de una pgina dependiendo del dispositivo
con las siguientes clases ( aplicables solo para bloques )

Imgenes redimensionables
{ img
max width: 100 %;
height: auto;
}
< img src="..." alt="..." class="img-rounded">
< img src="..." alt="..." class="img-circle">
< img src="..." alt="..." class="img-thumbnail">

Tabla de http://getbootstrap.com/css/#responsive-utilities
Juan Pavn - UCM 2013-14
Bootstrap 17

Utilidades para responsive design

Igualmente para impresin de pgina ( aplicables solo para bloques )

Tabla de http://getbootstrap.com/css/#responsive-utilities
Juan Pavn - UCM 2013-14
Bootstrap 18

Ejercicio

Comprobar en http://getbootstrap.com/css las distintas posibilidades
de tipografa que ofrece bootstrap para tablas, formularios y botones

Juan Pavn - UCM 2013-14
Bootstrap 19

Componentes

Dropdowns
Grupos de botones
Button dropdowns
Navegacin
Tabs, pills, justified, disabled
links,
Navbars
Breadcrumbs, pagination
Indican el lugar de navegacin en la jerarqua del sitio
Labels
Badges
Jumbotron
Bloque para llamar la atencin sobre un contenido
Cabecera y pi de pgina
Juan Pavn - UCM 2013-14
Bootstrap 20

Componentes

Thumbnails
Para agrupar fotos o imgenes fcilmente


Alertas

Barra de progreso

Media objects
Comentarios de blogs, tweets, etc. que requieren una pequea imagen alineada a
la izquierda o derecha del texto
Juan Pavn - UCM 2013-14
Bootstrap 21

Componentes

Iconos del proyecto Glyphicons fonts/
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff

Juan Pavn - UCM 2013-14
Bootstrap 22

Ejercicios


Jugar con los componentes que se pueden encontrar en
http://getbootstrap.com/components
Juan Pavn - UCM 2013-14
Bootstrap 23

plugins jQuery

Transitions
Efectos de transiciones
Modals
Ventanas de dilogo que requieren una respuesta sencilla del usuario
Dropdowns
Mens
ScrollSpy
Actualiza automticamente los objetos de navegacin al pasar el ratn o dedo por un
componente (resaltando o sacando el men)
Tabs
Efectos para activar o desactivar tabs Tooltips
Saca informacin sobre un elemento al pasar por el
Popovers
Informacin que se saca sobre un elemento

Juan Pavn - UCM 2013-14
Bootstrap 24

plugins jQuery

Alert messages
Mensajes con un tick para desactivarlos
Buttons
Control de los botones
Carousel
Permite hacer presentaciones/diaporamas Affix
Subnavegacin con un men lateral
Juan Pavn - UCM 2013-14
Bootstrap 25

Ejercicio

Crear una pgina con un diaporama de fotos

Juan Pavn - UCM 2013-14
Bootstrap 26

Personalizacin

Generar los ficheros con propiedades personalizadas en
http://getbootstrap.com/customize
Crear un fichero ejercicios.css donde incluir declaraciones para personalizar
el sitio
Incluirlo en el HTML de trabajo
< link href="css/ejercicio.css" rel="stylesheet" >
Juan Pavn - UCM 2013-14
Bootstrap 27

Bibliografa

Bootstrap
http://getbootstrap.com/
J. Spurlock. Bootstrap. O'Reilly (2013)
D. Cochran. Twitter Bootstrap Web Development How-To. Packt Publishing (2012)
LibrosWeb: Bootstrap 3 , el manual oficial http://librosweb.es/bootstrap_3/

Juan Pavn - UCM 2013-14
Bootstrap 28