Legans

6-7 Febrero 2013

Miquel Camps Orteza

Desarrollo Rpido con Bootstrap

Except where otherwise noted, this work is licensed under: http://creativecommons.org/licenses/by-nc-sa/3.0/

c_b_n_a

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

@miquelcamps
betabeers.com

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

Esto es lo que hay

- Una verdad
- Por qu usar bootstrap?
- Caso prctico
- Como tunearlo
- Alternativas
3

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

Programador != Diseador

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

est 1 pxel ms abajo

no estn centrados con la pantalla

6

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

Esto es lo que pasa cuando un

programador disea una web

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

WARNING
Para evitar la ceguera total se
recomienda cerrar un ojo
8

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

10

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

11

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

El objetivo de un programador no es
hacer interfaces bonitas, pero por lo
menos deberan poder ser usadas por
personas normales.
12

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

Por suerte existe bootstrap

13

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

Qu es bootstrap?
Una coleccin de estilos css y
componentes javascript para
hacer aplicaciones web ms
bonitas y usables
14

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

Origen
2011
@mdo & @fat
Twitter

Para fomentar la coherencia entre

las herramientas internas

15

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

Para qu usar bootstrap?

1- Seguir una gua de estilo para maquetar ms rpido.
!

2- Maquetar slo una vez para escritorio y mvil.

!

3- Tener compatibilidad entre distintos navegadores.

16

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

Caso prctico
17

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

http://congreso.es

18

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

2007

200.000
19

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

2007

200.000
20

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

Versin mvil? Pues va a ser que no

21

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

Errores? De eso s tenemos

22

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

Bootstrap
extreme makeup
23

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

http://bit.ly/congresoweb

24

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

25

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

26

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

Manos a la obra

27

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

Cmo empezar?
<link href="bootstrap.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
!

http://www.bootstrapcdn.com/
28

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

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

29

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

Compatibilidad < IE9

<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<script src="respond.min.js"></script>
<![endif]-->
30

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

Estilos CSS usados

31

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

<div class="navbar navbar-inverse">

32

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

<div class="container">

33

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

<div class="row">

34

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

<div class="col-md-4">

35

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

<div class="panel panel-default">

36

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

<a class="btn btn-default">

37

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

<span class="glyphicon glyphicon-camera">

38

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

<span class="label label-info">

39

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

<input class="form-control">

40

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

<img class="img-rounded">

41

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

<img class="img-circle">

42

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

http://getbootstrap.com/css/

43

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

Componentes JS usados

44

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

<script>
$(function(){
// no hace falta si usas componentes por defecto
// y no quieres cambiarle el comportamiento
})
</script>

No hace falta aadir ningn JS al final

45

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

<div class="carousel slide">

46

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

<a class="dropdown-toggle">

47

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

Ventanas modales

http://getbootstrap.com/javascript

48

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

Pestaas

http://getbootstrap.com/javascript

49

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

Tooltips

http://getbootstrap.com/javascript

50

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

Tunear bootstrap

51

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

Importante
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"
52

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

Generador de bootstrap
- Cambia los colores por defecto.
- Aade/quita estilos CSS y componentes JS.
- Cambia el nombre de variables LESS.
!

http://getbootstrap.com/customize/
53

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

Bootsnipp

http://bootsnipp.com/

54

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

PaintStrap

http://paintstrap.com/

55

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

56

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

57

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

Flat UI

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

58

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

Lavish

http://lavishbootstrap.com/

59

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

60

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

Templates

61

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

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/
62

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

Sitios hechos con bootstrap

http://expo.getbootstrap.com/
!

http://builtwithbootstrap.com/
!

http://www.lovebootstrap.com/
63

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

Alternativas a bootstrap

64

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

Purecss.io by yahoo

65

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

Foundation by zurb

66

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

Diferencias

js
icons
size
ui kit
cdn

bootstrap
s
s
209 KB
s
s

pure
x
x
37 KB
s
s

foundation
s
s
139 KB
s
s
67

Legans
6-7 Febrero 2013

Desarrollo Rpido con Bootstrap

Gracias!
!

@miquelcamps
68