BOOTSTRAP

Bootstrap 3.0
Aplicaciones Web/Sistemas Web

Juan Pavón Mestras
Dep. Ingeniería del Software e Inteligencia Artificial
Facultad de Informática
Universidad Complutense Madrid

Curso de Aplicaciones Web/Sistemas Web by Juan Pavón Mestras is licensed under
a Creative Commons Reconocimiento-CompartirIgual 3.0 Unported License.

Bootstrap



Framework de twitter para desarrollo deaplicaciones web













Sencillo y ligero
• Puede bastar con un fichero CSS y uno JavaScript
Basado en los últimos estándares de desarrollo de Web
• HTML5, CSS3 y JavaScript/JQuery
Plugins de jQuery para validar entrada de datos, visualización tablas,
grafos, etc.
Curva de aprendizaje baja
Compatible con todos los navegadores habituales
Arquitectura basada en LESSReset CSS basado en Normalize.css

Abierto


Publicado en 2011 con licencia Apache

Juan Pavón - UCM 2013-14

Bootstrap

2

Responsive web design


Responsive web design




Bootstrap 3: Mobile first




Diseño de páginas web para que el usuario las visualice
perfectamente en un amplio rango de dispositivos
• Navegador en el PC, tableta, smartphone
Se harediseñado para adaptarse desde el principio a tamaños de
pantalla típicos de los móviles
• Sistema grid fluido que escala a 12 columnas al aumentar el tamaño
del viewport

Ver cambios de bootstrap 2.x a 3.0 en:
http://getbootstrap.com/getting-started/#migration-classes

Juan Pavón - UCM 2013-14

Bootstrap

3

Distribución básica: http://getbootstrap.com/
bootstrap/
├── css/
clases debase de bootstrap
│ ├── bootstrap.css
igual pero sin comentarios
│ ├── bootstrap.min.css
añade efectos 3D a botones y otros elementos
│ ├── bootstrap-theme.css
igual pero sin comentarios
│ └── bootstrap-theme.min.css
├── js/
funciones JavaScript de los componentes de bootstrap
│ ├── bootstrap.js
igual pero sin comentarios
│ └── bootstrap.min.js
└── fonts/
Iconos gráficos
├──glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
└── glyphicons-halflings-regular.woff


En producción se usan las versiones .min que ahorran espacio

Juan Pavón - UCM 2013-14

Bootstrap

4

Se puede configurar



http://getbootstrap.com/getting-started/#customizing
http://getbootstrap.com/customize/

Juan Pavón - UCM 2013-14Bootstrap

5

Plantilla básica
Bootstrap funciona con documentos HTML 5



El viewport es un atributo que permite definir
la anchura de la ventana del navegador para

adaptar la página automáticamente


Plantilla básica de Bootstrap en español



Inclusión de la librería CSS de bootstrap

¡Hola mundo!
Necesita jquery





Inclusión de la librería JS de bootstrapJuan Pavón - UCM 2013-14

Bootstrap

6

Ejercicios


Descargar bootstrap





http://getbootstrap.com/
Download bootstrap
• Fichero zip que contiene la distribución básica

Probar el ejemplo básico




Crear un proyecto de sitio web
Copiar los directorios de bootstrap (css, fonts y js) en la raíz del sitio
Crear un index.html con la plantilla básica dehttp://getbootstrap.com/getting-started/
• Comprobar que están bien los enlaces a los ficheros de bootstrap
• Habrá que adaptarlos a tu organización de los ficheros

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

Probar con otras plantillas

Juan Pavón - UCM 2013-14

Bootstrap

7

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 número 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 mínima del viewport)
0..1 (escala máxima del viewport)

Para aplicar responsive design:




En móviles conviene deshabilitar el...