Desarrollo Rápido con Bootstrap

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

http://creativecommons.org/licenses/by-nc-sa/3.0/

Desarrollo Rápido con BootstrapLeganés 6-7 Febrero 2014

�2

@miquelcamps betabeers.com

http://betabeers.com


�3

-‐ Una verdad -‐ ¿Por qué usar bootstrap? -‐ Caso práctico -‐ Como tunearlo -‐ Alternativas

Esto es lo que hay…


�4

Programador != Diseñador


�5


�6

está 1 píxel más abajo

no están centrados con la pantalla


�7

Esto es lo que pasa cuando un programador diseña una web


�8

WARNING Para evitar la ceguera total se recomienda cerrar un ojo


�9


�10


�11


�12

El objetivo de un programador no es hacer interfaces bonitas, pero por lo menos deberían poder ser usadas por

“personas normales”.


�13Por suerte existe bootstrap


�14

Una colección de estilos css y componentes javascript para hacer aplicaciones web más

bonitas y usables

¿Qué es bootstrap?


�15

2011 @mdo & @fat

Twitter

“Para fomentar la coherencia entre las herramientas internas”

Origen


�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?


�17

Caso práctico


�18http://congreso.es

http://congreso.es


�19

2007

200.000 €


�20

2007

200.000 €


�21¿Versión móvil? Pues va a ser que no…


�22¿Errores? De eso sí tenemos


�23

Bootstrap extreme makeup


�24http://bit.ly/congresoweb

http://bit.ly/congresoweb


�25


�26


�27

Manos a la obra


�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?

http://www.bootstrapcdn.com/


�29

<meta name="viewport" content="width=device-‐width, initial-‐scale=1.0">

Versión móvil


�30

Compatibilidad < IE9<!-‐-‐[if lt IE 9]>

<script src="html5shiv.js"></script> <script src="respond.min.js"></script> <![endif]-‐-‐>


�31

Estilos CSS usados


�32<div class="navbar navbar-‐inverse">


�33<div class="container">


�34<div class="row">


�35<div class="col-‐md-‐4">


�36<div class="panel panel-‐default">


�37<a class="btn btn-‐default">


�38<span class="glyphicon glyphicon-‐camera">


�39<span class="label label-‐info">


�40<input class="form-‐control">


�41<img class="img-‐rounded">


�42<img class="img-‐circle">


�43http://getbootstrap.com/css/

http://getbootstrap.com/css/


�44

Componentes JS usados


�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>


�46<div class="carousel slide">


�47<a class="dropdown-‐toggle">


�48http://getbootstrap.com/javascript

Ventanas modales

http://getbootstrap.com/javascript



Pestañas




Tooltips



�51

Tunear bootstrap


�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


�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

http://getbootstrap.com/customize/


�54

Bootsnipp

http://bootsnipp.com/

http://bootsnipp.com/


�55

PaintStrap

http://paintstrap.com/

http://paintstrap.com/


�56


�57


�58

Flat UI

http://designmodo.github.io/Flat-‐UI/

http://designmodo.github.io/Flat-UI/


�59

Lavish

http://lavishbootstrap.com/

http://lavishbootstrap.com/


�60


�61

Templates


�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

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/


�63

Sitios hechos con bootstraphttp://expo.getbootstrap.com/ !

http://builtwithbootstrap.com/ !

http://www.lovebootstrap.com/

http://expo.getbootstrap.com/

http://builtwithbootstrap.com/

http://www.lovebootstrap.com/


�64

Alternativas a bootstrap


�65

Purecss.io by yahoo


�66

Foundation by zurb


�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í


�68

¡Gracias! !

@miquelcamps

Documents

Desarrollo Rápido con Bootstrap