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
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�2
@miquelcamps betabeers.com
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…
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�4
Programador != Diseñador
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�5
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
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�7
Esto es lo que pasa cuando un programador diseña una web
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�8
WARNING Para evitar la ceguera total se recomienda cerrar un ojo
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�9
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�10
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�11
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”.
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�13Por suerte existe bootstrap
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?
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�15
2011 @mdo & @fat
“Para fomentar la coherencia entre las herramientas internas”
Origen
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?
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�17
Caso práctico
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�19
2007
200.000 €
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�20
2007
200.000 €
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�21¿Versión móvil? Pues va a ser que no…
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�22¿Errores? De eso sí tenemos
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�23
Bootstrap extreme makeup
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�24http://bit.ly/congresoweb
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�25
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�26
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�27
Manos a la obra
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?
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
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]-‐-‐>
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�31
Estilos CSS usados
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�32<div class="navbar navbar-‐inverse">
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�33<div class="container">
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�34<div class="row">
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�35<div class="col-‐md-‐4">
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�36<div class="panel panel-‐default">
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�37<a class="btn btn-‐default">
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�38<span class="glyphicon glyphicon-‐camera">
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�39<span class="label label-‐info">
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�40<input class="form-‐control">
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�41<img class="img-‐rounded">
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�42<img class="img-‐circle">
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�43http://getbootstrap.com/css/
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�44
Componentes JS usados
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>
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�46<div class="carousel slide">
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�47<a class="dropdown-‐toggle">
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�48http://getbootstrap.com/javascript
Ventanas modales
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�49http://getbootstrap.com/javascript
Pestañas
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�50http://getbootstrap.com/javascript
Tooltips
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�51
Tunear bootstrap
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
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
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�54
Bootsnipp
http://bootsnipp.com/
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�55
PaintStrap
http://paintstrap.com/
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�56
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�57
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�58
Flat UI
http://designmodo.github.io/Flat-‐UI/
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�59
Lavish
http://lavishbootstrap.com/
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�60
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�61
Templates
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
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/
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�64
Alternativas a bootstrap
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�65
Purecss.io by yahoo
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�66
Foundation by zurb
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í
Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014
�68
¡Gracias! !
@miquelcamps