Professional Documents
Culture Documents
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
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
Bootstrap
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
Bootstrap
Se puede configurar
http://getbootstrap.com/getting-started/#customizing http://getbootstrap.com/customize/
Bootstrap
Plantilla bsica
<!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>
Juan Pavn - UCM 2013-14 Bootstrap
Ejercicios
Descargar bootstrap
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
Bootstrap
Viewport
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)
<metaname="viewport"content="width=devicewidth,initialscale=1.0">
<metaname="viewport"content="width=devicewidth,initialscale=1.0, maximumscale=1.0,userscalable=no">
Bootstrap
Grid de 12 columnas
Men 1 2 Cabecera 3 4 5 6 7 8 9 10 11 12
Columna 1
Contenido principal
Columna 2
Bootstrap
Grid de 12 columnas
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
row
Grupos horizontales de columnas Se deben declarar dentro de un container
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
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
Cabecera
Columna 1
Columna 2
Sigue el contenido
Bootstrap
13
Tipografa
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>
14
Tipografa
http://getbootstrap.com/css/#type
Listas
Cdigo
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
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
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
Breadcrumbs, pagination
Cabecera y pi de pgina
Bootstrap
20
Componentes
Thumbnails
Comentarios de blogs, tweets, etc. que requieren una pequea imagen alineada a la izquierda o derecha del texto
Bootstrap
21
Componentes
Bootstrap
22
Ejercicios
Bootstrap
23
plugins jQuery
Transitions
Efectos de transiciones Ventanas de dilogo que requieren una respuesta sencilla del usuario Mens Actualiza automticamente los objetos de navegacin al pasar el ratn o dedo por un componente (resaltando o sacando el men) Efectos para activar o desactivar tabs Saca informacin sobre un elemento al pasar por el Informacin que se saca sobre un elemento
Modals
Dropdowns
ScrollSpy
Tabs
Tooltips
Popovers
Bootstrap
24
plugins jQuery
Alert messages
Mensajes con un tick para desactivarlos Control de los botones Permite hacer presentaciones/diaporamas Subnavegacin con un men lateral
Buttons
Carousel
Affix
Bootstrap
25
Ejercicio
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
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