You are on page 1of 68

Leganés

6-7 Febrero 2013

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 2013

Desarrollo  Rápido  con  Bootstrap

@miquelcamps  
betabeers.com

2

Leganés
6-7 Febrero 2013

Desarrollo  Rápido  con  Bootstrap

Esto  es  lo  que  hay…
-­‐  Una  verdad  
-­‐  ¿Por  qué  usar  bootstrap?  
-­‐  Caso  práctico  
-­‐  Como  tunearlo  
-­‐  Alternativas
3

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Programador    !=    Diseñador 4 .

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap 5 .

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap está  1  píxel  más  abajo no  están  centrados  con  la  pantalla 6 .

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Esto  es  lo  que  pasa  cuando  un   programador  diseña  una  web 7 .

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap WARNING   Para  evitar  la  ceguera  total  se   recomienda  cerrar  un  ojo 8 .

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap 9 .

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap 10 .

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap 11 .

 pero  por  lo   menos  deberían  poder  ser  usadas  por   “personas  normales”.Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap El  objetivo  de  un  programador  no  es   hacer  interfaces  bonitas. 12 .

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Por  suerte  existe  bootstrap 13 .

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap ¿Qué  es  bootstrap? Una  colección  de  estilos  css  y   componentes  javascript  para   hacer  aplicaciones  web  más   bonitas  y  usables   14 .

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Origen 2011   @mdo  &  @fat   Twitter   
 “Para  fomentar  la  coherencia  entre   las  herramientas  internas” 15 .

  16 .Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap ¿Para  qué  usar  bootstrap? 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.

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Caso  práctico 17 .

es 18 .Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap http://congreso.

000  € 19 .Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap 2007   200.

000  € 20 .Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap 2007   200.

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap ¿Versión  móvil?  Pues  va  a  ser  que  no… 21 .

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap ¿Errores?  De  eso  sí  tenemos 22 .

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Bootstrap   extreme  makeup 23 .

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap http://bit.ly/congresoweb 24 .

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap 25 .

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap 26 .

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Manos  a  la  obra 27 .

min.min.min.com/ 28 .css"  rel="stylesheet">   <script  src="jquery.Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap ¿Cómo  empezar? <link  href="bootstrap.js"></script>   ! http://www.js"></script>   <script  src="bootstrap.bootstrapcdn.

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Versión  móvil <meta  name="viewport"  content="width=device-­‐width.0"> 29 .   initial-­‐scale=1.

min.js"></script>              <script  src="respond.js"></script>   <![endif]-­‐-­‐> 30 .Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Compatibilidad  <  IE9 <!-­‐-­‐[if  lt  IE  9]>              <script  src="html5shiv.

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Estilos  CSS  usados 31 .

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap <div  class="navbar  navbar-­‐inverse"> 32 .

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap <div  class="container"> 33 .

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap <div  class="row"> 34 .

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap <div  class="col-­‐md-­‐4"> 35 .

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap <div  class="panel  panel-­‐default"> 36 .

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap <a  class="btn  btn-­‐default"> 37 .

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap <span  class="glyphicon  glyphicon-­‐camera"> 38 .

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap <span  class="label  label-­‐info"> 39 .

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap <input  class="form-­‐control"> 40 .

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap <img  class="img-­‐rounded"> 41 .

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap <img  class="img-­‐circle"> 42 .

com/css/ 43 .Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap http://getbootstrap.

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Componentes  JS  usados 44 .

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap <script>   $(function(){          //  no  hace  falta  si  usas  componentes  por  defecto
        //  y  no  quieres  cambiarle  el  comportamiento   })   </script> No  hace  falta  añadir  ningún  JS  al  final 45 .

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap <div  class="carousel  slide"> 46 .

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap <a  class="dropdown-­‐toggle"> 47 .

com/javascript 48 .Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Ventanas  modales http://getbootstrap.

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Pestañas http://getbootstrap.com/javascript 49 .

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Tooltips http://getbootstrap.com/javascript 50 .

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Tunear  bootstrap 51 .

 aplica   otra  clase  class=“btn  btn-­‐primary  myclass"   52 .css  crea  otro  .css   ! 2-­‐  Si  vas  a  cambiar  un  estilo  por  defecto.Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Importante 1-­‐  No  modifiques  bootstrap.

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Generador  de  bootstrap -­‐ Cambia  los  colores  por  defecto.   ! http://getbootstrap.   -­‐ Cambia  el  nombre  de  variables  LESS.   -­‐ Añade/quita  estilos  CSS  y  componentes  JS.com/customize/   53 .

Leganés
6-7 Febrero 2013

Desarrollo  Rápido  con  Bootstrap

Bootsnipp

http://bootsnipp.com/

54

Leganés
6-7 Febrero 2013

Desarrollo  Rápido  con  Bootstrap

PaintStrap

http://paintstrap.com/

55

Leganés
6-7 Febrero 2013

Desarrollo  Rápido  con  Bootstrap

56

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap 57 .

io/Flat-­‐UI/ 58 .github.Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Flat  UI http://designmodo.

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Lavish http://lavishbootstrap.com/ 59 .

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap 60 .

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Templates 61 .

com/   https://wrapbootstrap.com   http://bootstraptor.com/   http://bootswatch.com/   http://bootstrapstyler.com/ 62 .Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Templates http://getbootstrap.com/getting-­‐started/#examples   http://www.bootstrapzero.com/   http://startbootstrap.

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Sitios  hechos  con  bootstrap http://expo.com/   ! http://builtwithbootstrap.getbootstrap.lovebootstrap.com/ 63 .com/   ! http://www.

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Alternativas  a  bootstrap 64 .

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Purecss.io  by  yahoo 65 .

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Foundation  by  zurb 66 .

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  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 .

Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap ¡Gracias!   ! @miquelcamps 68 .