25 Bootstrap

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.
Bootstrap
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
Responsive web design
Responsive web design
Bootstrap 3: Mobile first
Diseo de pginas web para que el usuario las visualice

perfectamente en un amplio rango de dispositivos
Navegador en el PC, tableta, smartphone
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
Bootstrap
Distribucin bsica: http://getbootstrap.com/

bootstrap/
css/
clases de base de bootstrap
bootstrap.css
igual pero sin comentarios
bootstrap.min.css
aade efectos 3D a botones y otros elementos
bootstrap-theme.css
bootstrap-theme.min.css
js/
funciones JavaScript de los componentes de bootstrap
bootstrap.js
bootstrap.min.js
fonts/
Iconos grficos
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
En produccin se usan las versiones .min que ahorran espacio
Bootstrap
Se puede configurar
http://getbootstrap.com/getting-started/#customizing
http://getbootstrap.com/customize/
Bootstrap
Plantilla bsica
Bootstrap funciona con documentos HTML 5
<!DOCTYPEhtml>
<html lang="es">
El viewport es un atributo que permite definir
la anchura de la ventana del navegador para
<head>
adaptar la pgina automticamente
<metacharset="utf8">
<metaname="viewport"content="width=devicewidth,initialscale=1.0">
<title>PlantillabsicadeBootstrap enespaol</title>
<! CSSdeBootstrap >
<linkhref="css/bootstrap.min.css"rel="stylesheet">
</head>
Inclusin de la librera CSS de bootstrap
<body>
<h1>Holamundo!</h1>
Necesita jquery
<! LibrerajQuery requeridaporlosplugins deJavaScript>
<scriptsrc="http://code.jquery.com/jquery.js"></script>
<! Todoslosplugins JavaScriptdeBootstrap >
<scriptsrc="js/bootstrap.min.js"></script>
</body>
Inclusin de la librera JS de bootstrap
</html>
Bootstrap
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
Bootstrap
Viewport
rea visual en la que se muestran los documentos HTML

Atributos
width:
height:
initial-scale:
user-scale:
minimum-scale:
maximum-scale:
device-width o nmero de pixels

device-height o valor en pixels
0..1 (1 indica que es sin escala)
yes/no (indica si el usuario puede cambiar la escala)
0..1 (escala mnima del viewport)
0..1 (escala mxima del viewport)
Para aplicar responsive design:
<metaname="viewport"content="width=devicewidth,initialscale=1.0">
En mviles conviene deshabilitar el zooming:
<metaname="viewport"content="width=devicewidth,initialscale=1.0,
maximumscale=1.0,userscalable=no">
Bootstrap
Grid de 12 columnas
Men
1
2
10
11
12
Cabecera
Columna 1
Contenido principal
Columna 2
Bootstrap
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
Bootstrap
10
Grid de 12 columnas
Adaptacin en funcin del ancho del viewport
Tabla de la documentacin en lnea en http://getbootstrap.com/css/

Bootstrap
11
Grid de 12 columnas
<divclass="container">
<divclass="row">
<divclass="colmd4">
<h2>Cajade4columnas</h2>
</div>
<divclass="colmd6colmdoffset2">
<h2>Offsetde2columnasycajade6columnas</h2>
<divclass="row">
<divclass="colmd8"><p>Anidadode4</p></div>
<divclass="colmd4"><p>Anidadode2</p></div>
</div>
</div>
</div>
La suma de
</div>
columnas anidadas
tiene que ser 12
Bootstrap
12
Ejercicio
Crear un una pgina con la siguiente distribucin:

Men
1
10
11
12
Cabecera
Columna 1
Contenido principal
Columna 2
Subcajas (deben sumar 12)

De 2
De 4
Sigue el contenido
Bootstrap
13
Tipografa
http://getbootstrap.com/css/#type
Bootstrap define la tipografa para distintos tipos de texto
h1, h2, h3, h4, h5, h6: Semibold 36px, 30px, 24px, 18px, 14px, 12px
Con <small> dentro del header se puede aadir texto ms pequeo
<h1>h1.Cabecera deBootstrap<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>
<p class="text-right">Texto alineado a la derecha</p>
<abbr title="abreviatura">abr</abbr>
<address> para direcciones
<blockquote> para citar un texto
Bootstrap
14
Tipografa
http://getbootstrap.com/css/#type
Listas
Unordered <ul>
Ordered <ol>
Descripciones <dl>
Cdigo
En lnea: <code><code></code>
En bloque: <pre> cdigo en varias lneas </pre>
Tablas
Formularios
Botones
Bootstrap
15
Imgenes redimensionables
img {
maxwidth: 100%;
height: auto;
}
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
Bootstrap
16
Utilidades para responsive design
Se pueden ocultar elementos de una pgina dependiendo del

dispositivo con las siguientes clases (aplicables solo para bloques)
Tabla de http://getbootstrap.com/css/#responsive-utilities
Bootstrap
17
Utilidades para responsive design
Igualmente para impresin de pgina (aplicables solo para bloques)
Tabla de http://getbootstrap.com/css/#responsive-utilities
Bootstrap
18
Ejercicio
Comprobar en http://getbootstrap.com/css las distintas

posibilidades de tipografa que ofrece bootstrap para tablas,
formularios y botones
Bootstrap
19
Componentes
Dropdowns
Grupos de botones
Button dropdowns
Navegacin
Breadcrumbs, pagination
Indican el lugar de navegacin en la jerarqua del sitio
Labels
Badges
Jumbotron
Tabs, pills, justified, disabled links,

Navbars
Bloque para llamar la atencin sobre un contenido
Cabecera y pi de pgina
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
Bootstrap
21
Componentes
Iconos del proyecto Glyphicons

fonts/
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
Bootstrap
22
Ejercicios
Jugar con los componentes que se pueden encontrar en

http://getbootstrap.com/components
Bootstrap
23
plugins jQuery
Transitions
Modals
Efectos para activar o desactivar tabs
Tooltips
Actualiza automticamente los objetos de navegacin al pasar el ratn

o dedo por un componente (resaltando o sacando el men)
Tabs
Mens
ScrollSpy
Ventanas de dilogo que requieren una respuesta sencilla del usuario
Dropdowns
Efectos de transiciones
Saca informacin sobre un elemento al pasar por el
Popovers
Informacin que se saca sobre un elemento
Bootstrap
24
plugins jQuery
Alert messages
Buttons
Control de los botones
Carousel
Mensajes con un tick para desactivarlos
Permite hacer presentaciones/diaporamas
Affix
Subnavegacin con un men lateral
Bootstrap
25
Ejercicio
Crear una pgina con un diaporama de fotos
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">
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/
Bootstrap
28

25 Bootstrap

Cargado por

Información del documento

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

25 Bootstrap

Cargado por

Copyright:

Formatos disponibles

Bootstrap 3.

Juan Pavn Mestras

Curso de Aplicaciones Web/Sistemas Web by Juan Pavn Mestras is licensed under

Framework de twitter para desarrollo de aplicaciones web

Publicado en 2011 con licencia Apache

Juan Pavn - UCM 2013-14

Responsive web design

Responsive web design

Bootstrap 3: Mobile first

Diseo de pginas web para que el usuario las visualice

Ver cambios de bootstrap 2.x a 3.0 en:

Juan Pavn - UCM 2013-14

Distribucin bsica: http://getbootstrap.com/

En produccin se usan las versiones .min que ahorran espacio

Juan Pavn - UCM 2013-14

Juan Pavn - UCM 2013-14

Probar el ejemplo bsico

Crear un proyecto de sitio web

Comprobar que se incluye jquery.js (al final del fichero)

Probar con otras plantillas

Juan Pavn - UCM 2013-14

rea visual en la que se muestran los documentos HTML

device-width o nmero de pixels

Para aplicar responsive design:

En mviles conviene deshabilitar el zooming:

Juan Pavn - UCM 2013-14

Juan Pavn - UCM 2013-14

Grid de 960px (basado en http://960.gs)

Por defecto columnas de 60px y offset de 20px

La pgina se estructura en bloques del grid

Clases definidas en el CSS de bootstrap

col-md-1, col-md-2, col-md-3, col-md-12

Se puede usar versiones col-xs-* y col-sm-* para hacer varias

Adaptacin en funcin del ancho del viewport

Tabla de la documentacin en lnea en http://getbootstrap.com/css/

Juan Pavn - UCM 2013-14

Crear un una pgina con la siguiente distribucin:

Subcajas (deben sumar 12)

Juan Pavn - UCM 2013-14

Juan Pavn - UCM 2013-14

Juan Pavn - UCM 2013-14

Juan Pavn - UCM 2013-14

Utilidades para responsive design

Se pueden ocultar elementos de una pgina dependiendo del

Juan Pavn - UCM 2013-14

Utilidades para responsive design

Igualmente para impresin de pgina (aplicables solo para bloques)

Juan Pavn - UCM 2013-14

Comprobar en http://getbootstrap.com/css las distintas

Juan Pavn - UCM 2013-14

Indican el lugar de navegacin en la jerarqua del sitio

Tabs, pills, justified, disabled links,

Bloque para llamar la atencin sobre un contenido

Juan Pavn - UCM 2013-14

Para agrupar fotos o imgenes fcilmente

Comentarios de blogs, tweets, etc. que requieren una pequea

Juan Pavn - UCM 2013-14

Iconos del proyecto Glyphicons

Juan Pavn - UCM 2013-14

Jugar con los componentes que se pueden encontrar en

Juan Pavn - UCM 2013-14

Efectos para activar o desactivar tabs

Actualiza automticamente los objetos de navegacin al pasar el ratn

Ventanas de dilogo que requieren una respuesta sencilla del usuario