desarrollo rápido con bootstrap
TRANSCRIPT
![Page 1: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/1.jpg)
Miquel Camps Orteza
Desarrollo Rápido con Bootstrap
Except where otherwise noted, this work is licensed under: http://creativecommons.org/licenses/by-nc-sa/3.0/ c_b_n_a
Leganés 6-7 Febrero 2014
![Page 2: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/2.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�2
@miquelcamps betabeers.com
![Page 3: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/3.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�3
-‐ Una verdad -‐ ¿Por qué usar bootstrap? -‐ Caso práctico -‐ Como tunearlo -‐ Alternativas
Esto es lo que hay…
![Page 4: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/4.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�4
Programador != Diseñador
![Page 5: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/5.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�5
![Page 6: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/6.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�6
está 1 píxel más abajo
no están centrados con la pantalla
![Page 7: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/7.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�7
Esto es lo que pasa cuando un programador diseña una web
![Page 8: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/8.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�8
WARNING Para evitar la ceguera total se recomienda cerrar un ojo
![Page 9: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/9.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�9
![Page 10: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/10.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�10
![Page 11: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/11.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�11
![Page 12: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/12.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�12
El objetivo de un programador no es hacer interfaces bonitas, pero por lo menos deberían poder ser usadas por
“personas normales”.
![Page 13: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/13.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�13Por suerte existe bootstrap
![Page 14: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/14.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�14
Una colección de estilos css y componentes javascript para hacer aplicaciones web más
bonitas y usables
¿Qué es bootstrap?
![Page 15: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/15.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�15
2011 @mdo & @fat
“Para fomentar la coherencia entre las herramientas internas”
Origen
![Page 16: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/16.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�16
1-‐ Seguir una guía de estilo para maquetar más rápido. !
2-‐ Maquetar sólo una vez para escritorio y móvil. !
3-‐ Tener compatibilidad entre distintos navegadores.
¿Para qué usar bootstrap?
![Page 17: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/17.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�17
Caso práctico
![Page 19: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/19.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�19
2007
200.000 €
![Page 20: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/20.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�20
2007
200.000 €
![Page 21: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/21.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�21¿Versión móvil? Pues va a ser que no…
![Page 22: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/22.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�22¿Errores? De eso sí tenemos
![Page 23: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/23.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�23
Bootstrap extreme makeup
![Page 24: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/24.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�24http://bit.ly/congresoweb
![Page 25: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/25.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�25
![Page 26: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/26.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�26
![Page 27: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/27.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�27
Manos a la obra
![Page 28: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/28.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�28
<link href="bootstrap.min.css" rel="stylesheet"> <script src="jquery.min.js"></script> <script src="bootstrap.min.js"></script> !
http://www.bootstrapcdn.com/
¿Cómo empezar?
![Page 29: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/29.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�29
<meta name="viewport" content="width=device-‐width, initial-‐scale=1.0">
Versión móvil
![Page 30: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/30.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�30
Compatibilidad < IE9<!-‐-‐[if lt IE 9]>
<script src="html5shiv.js"></script> <script src="respond.min.js"></script> <![endif]-‐-‐>
![Page 31: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/31.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�31
Estilos CSS usados
![Page 32: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/32.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�32<div class="navbar navbar-‐inverse">
![Page 33: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/33.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�33<div class="container">
![Page 34: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/34.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�34<div class="row">
![Page 35: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/35.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�35<div class="col-‐md-‐4">
![Page 36: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/36.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�36<div class="panel panel-‐default">
![Page 37: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/37.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�37<a class="btn btn-‐default">
![Page 38: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/38.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�38<span class="glyphicon glyphicon-‐camera">
![Page 39: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/39.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�39<span class="label label-‐info">
![Page 40: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/40.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�40<input class="form-‐control">
![Page 41: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/41.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�41<img class="img-‐rounded">
![Page 42: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/42.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�42<img class="img-‐circle">
![Page 43: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/43.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�43http://getbootstrap.com/css/
![Page 44: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/44.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�44
Componentes JS usados
![Page 45: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/45.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�45No hace falta añadir ningún JS al final
<script> $(function(){ // no hace falta si usas componentes por defecto // y no quieres cambiarle el comportamiento
}) </script>
![Page 46: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/46.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�46<div class="carousel slide">
![Page 47: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/47.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�47<a class="dropdown-‐toggle">
![Page 48: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/48.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�48http://getbootstrap.com/javascript
Ventanas modales
![Page 49: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/49.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�49http://getbootstrap.com/javascript
Pestañas
![Page 50: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/50.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�50http://getbootstrap.com/javascript
Tooltips
![Page 51: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/51.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�51
Tunear bootstrap
![Page 52: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/52.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�52
1-‐ No modifiques bootstrap.css crea otro .css !
2-‐ Si vas a cambiar un estilo por defecto, aplica otra clase class=“btn btn-‐primary myclass"
Importante
![Page 53: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/53.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�53
-‐ Cambia los colores por defecto. -‐ Añade/quita estilos CSS y componentes JS. -‐ Cambia el nombre de variables LESS. !
http://getbootstrap.com/customize/
Generador de bootstrap
![Page 54: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/54.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�54
Bootsnipp
http://bootsnipp.com/
![Page 55: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/55.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�55
PaintStrap
http://paintstrap.com/
![Page 56: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/56.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�56
![Page 57: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/57.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�57
![Page 58: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/58.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�58
Flat UI
http://designmodo.github.io/Flat-‐UI/
![Page 59: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/59.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�59
Lavish
http://lavishbootstrap.com/
![Page 60: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/60.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�60
![Page 61: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/61.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�61
Templates
![Page 62: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/62.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�62
http://getbootstrap.com/getting-‐started/#examples http://www.bootstrapzero.com/ http://bootswatch.com http://bootstraptor.com/ http://bootstrapstyler.com/ https://wrapbootstrap.com/ http://startbootstrap.com/
Templates
![Page 63: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/63.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�63
Sitios hechos con bootstraphttp://expo.getbootstrap.com/ !
http://builtwithbootstrap.com/ !
http://www.lovebootstrap.com/
![Page 64: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/64.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�64
Alternativas a bootstrap
![Page 65: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/65.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�65
Purecss.io by yahoo
![Page 66: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/66.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�66
Foundation by zurb
![Page 67: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/67.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�67
Diferencias bootstrap pure foundation
js sí x sí icons sí x sí size 209 KB 37 KB 139 KB ui kit sí sí sí cdn sí sí sí
![Page 68: Desarrollo Rápido con Bootstrap](https://reader031.vdocuments.us/reader031/viewer/2022030322/587c83141a28abf66f8b4c24/html5/thumbnails/68.jpg)
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�68
¡Gracias! !
@miquelcamps