Post on 16-Jul-2015
Tecnologías Web de Cliente
Bootstrap
ProfesoresPuedes contactarme en cif@gsi.dit.upm.es - Despacho C-211
2
Carlos A. Iglesias
1.Principios Para qué vale
3
Framework HTML CSS y JS
Componentes para realizar webs multidispositivo de forma rápida y con calidad
4
‘’
5
“[A] super small group of developers and I got together to design and build a new internal tool and saw an opportunity to do something more. Through that process, we saw ourselves build something much more substantial than another internal tool. Months later, we ended up with an early version of Bootstrap as a way to document and share common design patterns and assets within the company”
Mark Otto, 2011, Creador de Bootstrap
‘’
6
Bootstrap: the most popular HTML, CSS,
and JS framework for developing responsive,
mobile first projects on the web.
7
Bootstrap
8
Alternativas a Bootstrap
9
Foundation Semantic UI
http://foundation.zurb.com http://semantic-ui.com/
10
¿Qué incluye Bootstrap?
CSS Iconos(fonts)
JavaScriptsobre jQuery
Cosas que hay que saber de Bootstrap
FrameworkBootstrap ha sido desarrollado por Twitter y liberado con licencia MIT
GridBootstrap se basa en una rejilla (grid) de 12 columnas
Primero móviBootstrap sigue el enfoque “mobile-first design”: diseñamos para móviles y mejoramos para escritorio
FrameworkUn framework nos da una base que extendemos para construir aplicaciones. Bootstrap proporciona CSS, JS, iconos y componentes
LessEl fuente de Bootstrap usa Less, un lenguaje de estilos dinámico (con variables o mixins), que se puede compilar a CSS
ReferenciasHay disponibles temas y herramientas visuales para personalizar o crear interfaces con bootstrap
11
Degradación Gradual y Mejora progresiva
12
Degradación Gradual y Mejora progresiva
13
Degradación Gradual y Mejora progresiva
14
Diseño adaptable
15
http://brettjankord.com/2013/01/30/you-keep-using-that-word-i-do-not-think-it-means-what-you-think-it-means/
2.Primeros pasos
Cómo instalar BS3, plantillas y ejemplos
16
17
Versión compilada
18
▣ bootstrap.css □ obligatorio - BS3 listo
para usar▣ bootstrap-theme.css
□ opcional, añade efecto 3D
▣ *.map□ para depurar en
Chrome y enlazar less y css
▣ *.min.css□ versión comprimida
Versión fuente
▣ incluye less▣ al compilarlo
generamos css
19
Versión CDN (sin descarga)
20
Plantilla básica
21
HTML5
Ojo: usa viewport
22Fuente: http://m5designstudio.com/2013/orlando-web-design/bootstrap-responsive-layout/
Plantillas del framework
23
http://getbootstrap.com/getting-started/
Plantillas con barras de navegación
24
http://getbootstrap.com/getting-started/
Componentes
25
Componentes
26
container y container-fluid
27
▣ Necesitamos envolver la rejilla en elemento□ .container: contenedor fijo y adaptable□ .container-fluid: contenedor fluid y adaptable
28
Resultado
29
3.Diseño basado
en rejillaQué es y cómo usar la rejilla (grid) en diseño
30
¿Qué web te parece mejor?
31
32
Diseño basado en rejilla
33
Qué es▣ Esqueleto de la
página web▣ Permite organizar
los elementos (textos, gráficos, ….)
▣ Son las líneas invisibles en que colocamos los elementos
Tipos de grid▣ Manuscrito▣ Columna▣ Modular▣ Jerárquico▣ Adaptable
(responsive)
Tipos de grid (I)
Manuscrito Columna
34Fuente: http://www.vanseodesign.com/web-design/grid-types/
Tipos de grid (II)
Modular Jerárquico
35
Anatomía de una rejilla (grid)
36
Margen (margin) Medianil (gutter)(para filas o columnas)
Columna Rejilla o retícula (grid)
Ejemplo: Mondrian
37Fuente: http://designshack.net/articles/css/5-really-useful-responsive-web-design-patterns/
Ejemplo: galería
38
Ejemplo: elementos destacados
39
4.La rejilla de Bootstrap 3
Qué es y cómo usar la rejilla de Bootstrap 3
40
Rejilla BS3
41
▣ Dentro de etiqueta container o container-fluid
▣ Ponemos filas (row) y dentro columnas (col-xx-size)
▣ 1 fila, 12 columnas▣ “Mobile-first” - el
dispositivo por defecto es el más pequeño (xs)
▣ Medianiles (gutter) con padding
▣ Las clases de la rejilla se aplican a los dispositivos de mayor tamaño si no se sobreescriben□ Ej. si defino col-md-
X se aplica a lg si no defino col-lg-X
▣ Si defino más de 12 columnas, las que no caben pasan a la siguiente fila
Dispositivos de BS3
42
43
Plantilla básica con xs (por defecto)
44
Resultado: misma rejilla para todos
45
Apilado xs; horizontal resto (sm, …)
46
Rejillas BS3
47
Ejemplo Punto ruptura
48Fuente: http://fearlessflyer.com/exploring-the-bootstrap-3-0-grid-system/
.col-xs-*
49
Fuente: http://www.zeninvader.com/css/bootstrap-3-grid-system-explained
.col-sm-*
50
Fuente: http://www.zeninvader.com/css/bootstrap-3-grid-system-explained
.col-md-*
51
Fuente: http://www.zeninvader.com/css/bootstrap-3-grid-system-explained
.col-lg-*
52
Fuente: http://www.zeninvader.com/css/bootstrap-3-grid-system-explained
Mezcla
53
Fuente: http://www.zeninvader.com/css/bootstrap-3-grid-system-explained
.col-xs-6 .col-sm-8 .col-md-5 .col-lg-2
.col-xs-6 .col-sm-4 .col-md-7 .col-lg-10
Mezcla apilada
54
Fuente: http://www.zeninvader.com/css/bootstrap-3-grid-system-explained
.col-xs-9 .col-sm-12
.col-md-4 .col-lg-5.col-xs-6 .col-sm-6 .col-md-9 .col-lg-7
Mezcla anidado
55
Fuente: http://www.zeninvader.com/css/bootstrap-3-grid-system-explained
Anidar columnas
56
Desplazar columnas (offset)
57
Reordenar columnas de forma manual
58
Push 3 (mover 3 a la dcha)Pull 3 (mover 3 a la izda)
5.Estilos CSS base
Estilos CSS básicos que nos da BS3
59
Tipografía
60
Ej. estilos predefinidos
61
Tablas
62
Formularios
63
Imágenes
64
Botones
65
6.Componentes
Componentes reutilizables
66
Labels
67
68
Dropdown, Button groups, Button dropdown
Fuente: http://bootstrapuikit.com/Documentación: http://getbootstrap.com/components/
Glyphicons
69
Nav (Tabs, Pills), Breadcrumb, Badges, List group, NavBar
70
Input groups
71
Jumbotron
72
Pagination, Progress bar
73
Thumbnail
74
Media object
75
Fuente: http://www.tutorialspark.com/twitterBootstrap/TwitterBootstrap_MediaObjects.php
Panel, Well
76
Alerts
77
Ejemplo
78
Pruebabs3-template:html5bs3-containerbs3-page-headerbs3-panel:headinglorem20bs3-panel:footer
7.Componentes
JS
Componentes jQuery ya integrados en BS3
79
Componentes JS
▣ Tenemos que definir un marcado HTML y…▣ .. activarlos con jQuery o con marcado HTML
(atributos data-)▣ Tenemos
□ ventanas modales□ carrusel de imágenes□ menús□ …□ Más en http://getbootstrap.com/javascript/
80
Ejemplo: desplegable (dropdown)
81
Opción 1. Marcado HTML
82
▣ data-target: hace que los enlaces no cambien de página
▣ data-toggle: evento desplegar menú
Opción 1 con “flechita” (caret)
83
Opción 1 con glyphicon
84
Opción 2. Uso de jQuery
85
JavaScript
86
Con jQuery podemos controlar eventos de BS3.
8.Cómo
personalizarlo
Cómo seleccionar nodos HTML en las reglas CSS
87
Cómo extender bootstrap
▣ Técnica sobreescribir propiedades css□ ¡Nunca modificar bootstrap.css!
▣ Opción 1: usar la versión compilada de BS3□ Modificamos el CSS
▣ Opción 2: usar la versión fuente de BS3□ Hacer cambios en less o CSS□ Si tocamos el less, se compila□ Puede ser difícil
▣ En ambos casos, también podemos partir de una plantilla o tema prediseñado o de las plantillas de BS3
88
Generar bootstrap personalizado
▣ Podemos bajar fuente de bootstrap, cambiarlo con less, y generar la versión o…
▣ Asistente en http://getbootstrap.com/customize/
▣ Podemos□ Importar una configuración previa□ Adaptar cada variable□ Descargar nuestro bootstrap
89
Incluir estilo propio
▣ Nunca modificad directamente bootstrap
90http://bootstrapbay.com/blog/customize-bootstrap/
9.Extensiones y
temas
Cómo aplicar CSS y HTML para realizar una web
91
Temas y Plantillas
▣ Plantillas□ Nuevos tipos de páginas: comercio, administración,
...▣ Temas
□ Nuevo diseño con plantilla y componentes de Bootstrap
▣ Plantilla y Tema□ Nuevos tipos con nuevos diseños
92
Sitios para temas y plantillas
▣ Gratuitos: □ http://bootswatch.com/ □ http://bootstrapzero.com/□ http://startbootstrap.com/
▣ Comerciales□ https://wrapbootstrap.com
94
10.Less
Preprocesador de CSS
95
96
Transpilador Compilator de fuente a
fuente
http://en.wikipedia.org/wiki/Source-to-source_compiler
Less
▣ Preprocesador de CSS▣ Permite definir
□ variables con operaciones□ mixins, funciones, reglas anidadas□ espacios de nombres e importar, ...
▣ Página: http://lesscss.org▣ Compilador en línea
□ http://winless.org/online-less-compiler ▣ Chrome DevTools permite trabajar con
preprocesadores□ https://developer.chrome.
com/devtools/docs/css-preprocessors
97
¡Fuera del temario!
Less variables
98
lessc
Less mixins
99
Less mixins paramétricos (I)
100
Less mixins paramétricos (II)
101
Less. Reglas anidadas
102
Less. Funciones
103
Less
104
▣ Instalar less□ sudo apt-get install node-less
▣ Ejecutar lessc□ lessc styles.less > styles.css
Less en phpStorm
105
11.Conclusiones
Qué hemos aprendido
106
107
BS3 simplifica la creación de interfaces adaptables y fácilmente mantenibles con nuevos temas
Fallos habituales
108
▣ Usar marcado HTML diferente para dispositivos diferentes con hidden-sm o visible-sm. □ Se incrementa el tamaño global de la página HTML□ Mejor usar la rejilla para redimensionar.
▣ Usar BS3 para aplicaciones móviles hechas con tecnologías web. Mejor usar otros frameworks más ligeros como Ratchet (de los desarrolladores de BS3)□ http://goratchet.com/
¡Gracias!¿Alguna pregunta?
cif@gsi.dit.upm.es
109
Referencias
▣ Jump Start Bootstrap□ http://proquest.safaribooksonline.
com/book/web-design-and-development/9781457174346
▣ Learning Bootstrap□ http://proquest.safaribooksonline.
com/book/web-development/9781782161844
110
Recursos
▣ Bootstrap 3□ http://getbootstrap.com/
▣ Bootstrap Resources□ http://startbootstrap.com/bootstrap-resources/
▣ Showcases□ http://builtwithbootstrap.com/
▣ Temas gratuitos□ http://startbootstrap.com/bootstrap-
resources/#free-themes
111
Créditos
Gracias a todos los que han publicado estos recursos de forma gratuita:▣ Minicons de Webalys▣ Plantilla de la presentación de SlidesCarnival▣ Fotos de Unsplash y Wix
112