bootstrap
TRANSCRIPT
-
Bootstrap 3.0
Aplicaciones Web/Sistemas Web
Juan Pavn MestrasDep. Ingeniera del Software e Inteligencia Artificial
Facultad de InformticaUniversidad Complutense Madrid
Curso de Aplicaciones Web/Sistemas Web by Juan Pavn Mestras is licensed undera 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 2
-
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/ css/ bootstrap.css bootstrap.min.css bootstrap-theme.css bootstrap-theme.min.css js/ bootstrap.js bootstrap.min.js fonts/ 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
Juan Pavn - UCM 2013-14 Bootstrap 4
clases de base de bootstrap
igual pero sin comentarios
funciones JavaScript de los componentes de bootstrap
igual pero sin comentarios
aade efectos 3D a botones y otros elementos
igual pero sin comentarios
Iconos grficos
-
Se puede configurar
http://getbootstrap.com/getting-started/#customizing http://getbootstrap.com/customize/
Juan Pavn - UCM 2013-14 Bootstrap 5
Plantilla bsica
Juan Pavn - UCM 2013-14 Bootstrap 6
PlantillabsicadeBootstrap enespaol
Holamundo!
Bootstrap funciona con documentos HTML 5
Inclusin de la librera CSS de bootstrap
Necesita jquery
Inclusin de la librera JS de bootstrap
El viewport es un atributo que permite definirla anchura de la ventana del navegador para
adaptar la pgina automticamente
-
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:
En mviles conviene deshabilitar el zooming:
Juan Pavn - UCM 2013-14 Bootstrap 8
-
Grid de 12 columnas
Juan Pavn - UCM 2013-14 Bootstrap 9
Men
Cabecera
Columna 1 Contenido principal Columna 2
1 2 3 4 5 6 7 8 9 10 11 12
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
Grid de 12 columnas
Juan Pavn - UCM 2013-14 Bootstrap 12
Cajade4columnas
Offsetde2columnasycajade6columnas
Anidadode4Anidadode2
La suma de columnas anidadas
tiene que ser 12
-
Ejercicio
Crear un una pgina con la siguiente distribucin:
Juan Pavn - UCM 2013-14 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
Subcajas (deben sumar 12)
De 2 De 4
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 dentro del header se puede aadir texto ms pequeo
h1.Cabecera deBootstrapTexto secundario y
font-size por defecto 14px, con line-height 1.428 tienen un margen inferior por defecto de 10px ... para resaltar el texto Tambin y Alineacin de texto
Texto alineado a la izquierda Texto centrado Texto alineado a la derecha
abr para direcciones para citar un texto
Juan Pavn - UCM 2013-14 Bootstrap 14
-
Tipografa
http://getbootstrap.com/css/#type Listas
Unordered Ordered Descripciones
Cdigo En lnea: En bloque: cdigo en varias lneas
Tablas
Formularios
Botones
Juan Pavn - UCM 2013-14 Bootstrap 15
Imgenes redimensionables
img {maxwidth: 100%;height: auto;
}
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)
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 Glyphiconsfonts/ 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
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. PacktPublishing (2012)
LibrosWeb: Bootstrap 3, el manual oficial http://librosweb.es/bootstrap_3/
Juan Pavn - UCM 2013-14 Bootstrap 28