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 de aplicaciones 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 LESS
Reset CSS basado en Normalize.cssAbierto


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 ha rediseñado para adaptarse desde el principio a tamaños de
pantalla típicosde 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 de base 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-14

Bootstrap

5

Plantilla básica
Bootstrap funciona con documentos HTML 5



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

adaptar la página automáticamente






Inclusión de la librería CSS de bootstrap

¡Hola mundo!

Necesita jquery





Inclusión de la librería JS de bootstrap

Juan 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 de
http://getbootstrap.com/getting-started/
• Comprobar que están bien los enlaces a los ficheros de bootstrap
• Habrá queadaptarlos 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...

Leer documento completo

Regístrate para leer el documento completo.