Bootstrap, un framework CSS

BOOTSTRAP,UNFRAMEWORKCSS

ADOLFOSANZDEDIEGOSEPTIEMBRE2014

1ELAUTOR

1.1ADOLFOSANZDEDIEGOAntiguoprogramadorwebJEE(6años)Hoyendía:ProfesordeFP(6años):Hardware,SistemasOperativosRedes,Programación

FormadorFreelance(3años):Java,AndroidJavaScript,jQueryJSF,Spring,HibernateGroovy&Grails

1.2ALGUNOSPROYECTOSFundadory/ocreador:HackathonLovers:TweetsSentiment:MarkdownSlides:

Co-fundadory/oco-creador:PeliTweets:PasswordManagerGenerator:

http://hackathonlovers.comhttp://tweetssentiment.com

https://github.com/asanzdiego/markdownslides

http://pelitweets.com

http://pasmangen.github.io

1.3¿DONDEENCONTRARME?Minick:asanzdiegoAboutMe:GitHub:Twitter:Blog:LinkedIn:Google+:

http://about.me/asanzdiegohttp://github.com/asanzdiegohttp://twitter.com/asanzdiego

http://asanzdiego.blogspot.com.eshttp://www.linkedin.com/in/asanzdiego

http://plus.google.com/+AdolfoSanzDeDiego

2INTRODUCCIÓN

2.1¿QUÉES?BoostrapesunframeworkCSS,liberadoporTwitterymuypopularhoyendía.EstápensadoparahacerundesarrolloMobileFirst

2.2VENTAJAS(I)Utilizacomponentesyservicioscreadosporlacomunidadweb.Utilizaunconjuntodebuenasprácticasqueperduraráneneltiempo.UtilizaHTML5yCSS3

2.3VENTAJAS(II)Implementaunsistemaderejillas,quepordefectoincluye12columnas.UtilizaLESS,unpreprocesadorCSS.(AhoratambiénsoportaSaas).EsOOCSS,oseaCSSOrientadoaObjetos:organizadopormódulosindependientesyreutilizables.

2.4VENTAJAS(III)Hayunaenormecomunidaddetrás.Herramientasencillayágilparaconstruirsitioswebeinterfaces.Tieneunthemepordefectobastanteoptimizadoyquepuedesmodificarfácilmente.

2.5DESVENTAJAS(I)Esnecesarioadaptarseasuformadetrabajo,sibiensucurvadeaprendizajeesliviana,deberáscomprenderyfamiliarizarteconsuestructuraynomenclatura.Debesadaptartudiseñoaungridde12columnas.Traeanchosymárgenespordefecto,queavecessonunpocotediososdecambiar.

2.6DESVENTAJAS(II)Escomplicadocambiardeversiónsihasrealizadomodificacionesprofundassobreelcore.Sinecesitasañadircomponentesquenoexisten,debeshacerlostúmismoenCSSycuidardequemantengacoherenciacontudiseñoycuidandoelresponsive.Aveceshacerimplementarundiseñoimpuesto,puedellegararesultarbastantedifícil,almenossieresunperfeccionista.

2.7DESCARGASisóloquiereslofundamental:https://github.com/twbs/bootstrap/releases/download/v3.2.0/bootstrap-3.2.0-dist.zip

bootstrap/├──css/│├──bootstrap.css│├──bootstrap.min.css│├──bootstrap-theme.css│└──bootstrap-theme.min.css├──js/│├──bootstrap.js│└──bootstrap.min.js└──fonts/

2.8PLANTILLABÁSICA<!DOCTYPEhtml><htmllang="en"><head><metaname="viewport"...><title>Template</title><linkhref="bootstrap.min.css"...></head><body><h1>Hello,world!</h1><scriptsrc=".../jquery.min.js"></script><scriptsrc="bootstrap.min.js"></script></body></html>

3RESUMENCSS

3.1HTML5DOCTYPEBootstrapnecesitaundoctypedeHTML5:

<!DOCTYPEhtml><htmllang="en">...</html>

3.2MOBILEFIRSTDesdelaversión3,BoostrapesMobilefirst.Paragarantizarunbuenrenderizadoyunbuenfuncionamientodelzoom:<metaname="viewport"content="width=device-width,initial-scale=1">

3.3DESACTIVARZOOM(I)Sepuededesactivarelzoomconuser-scalable=no<metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

3.4DESACTIVARZOOM(II)Hacequeelsitioseparezcamásunaaplicaciónnativa,perotambiénlohacemenosaccesible.Engeneral,noserecomienda.

3.5NORMALIZE.CSSParaunmejorrenderizadoenvariosnavegadores,BoostrapusaNormalize.css,unproyectodesarrolladoporNicolasGallagheryJonathanNeal:http://necolas.github.io/normalize.css/

4GRIDSYSTEM

4.1INTRODUCCIÓNBootstrapincluyeunsistemaderejillaresponsiveymobilefirstde12columnas.

4.2FUNCIONAMIENTOElsistemaderejilladeBootstrapfuncionaasí:Sedebencolocar.rowdentrodeun.container(anchofijo)o.container-fluid(anchocompleto).Utilice.rowparacreargruposhorizontales.Elcontenidosedebecolocarentre.rowydebendeserhijosinmediatos.Sihaymásde12columnasenuna.row,estasondesplazadasabajo.

4.31COLUMNA(I)Ejemplode1columnadeuntamañode12

1columna

4.41COLUMNA(II)Ejemplode1columnadeuntamañode12

<divclass="row"><divclass="col-xs-12">1</div><divclass="col-xs-12">2</div><divclass="col-xs-12">3</div><divclass="col-xs-12">4</div></div>

4.52COLUMNAS(I)Ejemplode2columnasdeuntamañode6

2columnas

4.62COLUMNAS(II)Ejemplode2columnasdeuntamañode6



3columnas




4columnas



4.11MULTIDISPOSITIVO1columnaparaxs(<768px)2columnasparasm(≥768px)3columnasparamd(≥992px)4columnasparalg(≥1200px)

4.12NORMAL<divclass="row"><divclass="col-xs-12col-sm-6col-md-4col-lg-3">1</div><divclass="col-xs-12col-sm-6col-md-4col-lg-3">2</div><divclass="col-xs-12col-sm-6col-md-4col-lg-3">3</div><divclass="col-xs-12col-sm-6col-md-4col-lg-3">4</didv></div>

4.13CLEARFIX(I)Problemacuandounacapatieneunaltomayorqueladelosdemás:

Problemaclearfix

4.14CLEARFIX(II)<divclass="row"><divclass="...">1Resizeyourviewport</div><divclass="...">2</div><divclass="clearfixvisible-sm-block"></div><divclass="...">3</div><divclass="clearfixvisible-md-block"></div><divclass="...">4</didv></div>

4.15HUECOSCONOFFSET(I)

Huecosconoffset

4.16HUECOSCONOFFSET(II)<divclass="row"><divclass="col-md-4">.col-md-4</div><divclass="col-md-4col-md-offset-4">.col-md-4.col-md-offset-4</div></div>

4.17HUECOSCONOFFSET(III)<divclass="row"><divclass="col-md-3col-md-offset-3">.col-md-3.col-md-offset-3</div><divclass="col-md-3col-md-offset-3">.col-md-3.col-md-offset-3</div></div>

4.18HUECOSCONOFFSET(IV)<divclass="row"><divclass="col-md-6col-md-offset-3">.col-md-6.col-md-offset-3</div></div>

4.19PUSH&PULL(I)

push&pull

4.20PUSH&PULL(II)<divclass="row"><divclass="col-md-9col-md-push-3">.col-md-9.col-md-push-3</div><divclass="col-md-3col-md-pull-9">.col-md-3.col-md-pull-9</div></div>

4.21MEDIAQUERIES(I)EstassonlasMediaQueriesqueseusan:

/*Extrasmalldevices(phones,lessthan768px)*//*defaultinBootstrap*/

/*Smalldevices(tablets,768pxandup)*/@media(min-width:@screen-sm-min){}

/*Mediumdevices(desktops,992pxandup)*/@media(min-width:@screen-md-min){}

/*Largedevices(largedesktops,1200pxandup)*/@media(min-width:@screen-lg-min){}

4.22MEDIAQUERIES(II)Avecestambiénusanmax-witdhparalimitarciertasreglas.@media(max-width:@screen-xs-max){}

@media(min-width:@screen-sm-min)and(max-width:@screen-sm-max){}

@media(min-width:@screen-md-min)and(max-width:@screen-md-max){}

@media(min-width:@screen-lg-min){}

5TIPOGRAFÍA

5.1CABECERAS(I)

Cabeceras

5.2CABECERAS(II)<h1>h1.CabecerasconBootstrap<small>Textosecundario</small></h1>

<h2>h2.CabecerasconBootstrap<small>Textosecundario</small></h2>

5.3PÁRRAFOS(I)

Párrafos

5.4PÁRRAFOS(II)<pclass="lead">Párrafoconclass="lead"</p>

<p>Párrafonormal</p>

<pclass="small">Párrafoconclass="small"</p>

5.5TEXTOSENLÍNEA

Textosenlínea

5.6STRONGmuchoémfasis

<p>Puedesusareltagstrongparadarle<strong>muchoémfasis</strong>auntexto</p>

5.7EMémfasis

<p>Puedesusareltagemparadarle<em>émfasis</em>auntexto</p>

5.8MARKmarcar

<p>Puedesusareltagmarkpara<mark>marcar</mark>untexto</p>

5.9INSinsertaruntexto(mejorquesubrallar)

<p>Puedesusareltaginspara<ins>insertar</ins>untexto</p>

5.10DELborraruntexto(mejorquetachar)

<p>Puedesusareltagdelpara<del>borrar</del>untexto</p>

5.11ALINEACIÓN

Alineación

5.12IZQUIERDATextoalineadoalaizquierda.

<pclass="text-left">Textoalineadoalaizquierda.</p>

5.13CENTRADOTextocentrado.

<pclass="text-center">Textocentrado.</p>

5.14DERECHATextoalineadoaladerecha.

<pclass="text-right">Textoalineadoaladerecha.</p>

5.15JUSTIFICADOTextojustificado.

<pclass="text-justify">Textojustificado.</p>

5.16SINAJUSTETextosinajuste.

<pclass="text-nowrap">Textosinajuste.</p>

5.17CAPITALIZACIÓN

Capitalización

5.18MINÚSCULASMinúsculas

<pclass="text-lowercase">Lowercasedtext.</p>

5.19MAYÚSCULASMayúsculas

<pclass="text-uppercase">Uppercasedtext.</p>

5.20TIPOTÍTULOTipoTítulo

<pclass="text-capitalize">Capitalizedtext.</p>

5.21ABREVIATURAS(I)

Abreviaturas

5.22ABREVIATURAS(II)<abbrtitle="HyperTextMarkupLanguage">HTML</abbr>esunaabreviatura.Pasaelratónporencimaparaaveriguardequesetrata.

5.23DIRECCIONES(I)

Direcciones

5.24DIRECCIONES(II)<address><strong>Twitter,Inc.</strong><br>795FolsomAve,Suite600<br>SanFrancisco,CA94107<br><abbrtitle="Phone">P:</abbr>(123)456-7890</address>

<address><strong>FullName</strong><br><ahref="mailto:#">[email protected]</a></address>

5.25CITAS(I)

Citas

5.26CITAS(II)<blockquoteclass="blockquote">

<p>Loremipsumdolorsitamet,consecteturadipiscingelit.Integerposuereerataante.</p>

<footer>Someonefamousin<citetitle="SourceTitle">SourceTitle</cite></footer>

</blockquote>

5.27LISTAS(I)

Listas

5.28LISTAS(II)<ulclass="list-inline"><li>Peras</li><li>Manzanas</li><li>Naranjas</li><li>Platanos</li></ul>

5.29DESCRIPCIONES(I)

Descripciones

5.30DESCRIPCIONES(II)<dlclass="dl-horizontal"><dt>Descripción</dt><dd>Perfectaparadefinir.</dd><dt>Euismod</dt><dd>Vestibulumidligula...</dd><dt>Feliseuismodsempereget</dt><dd>Fuscedapibus,tellus...</dd></dl>

6TABLAS

6.1CLASEStable:paradarleelformatotable-striped:paradarleformatoalasparesyalasimparestable-bordered:paraponerlebordesalatablatable-hover:paraoscurecerlafilaendondeestáelratóntable-condensed:paraqueocupemenosespacio

6.2RESPONSIVEPoniendolatabladentrodeunacapaconclass=table-responsiveapareceráunscrollhorizontalenlatablaendispositivospequeños.

6.3EJEMPLO(I)

Tabla

6.4EJEMPLO(II)<divclass="table-responsive"><tableclass="tabletable-stripedtable-borderedtable-hovertable-condensed"><thead><tr><th>...</thead><tbody><tr><td>...</tbody></table></div>

7FORMULARIOS

7.1LOBÁSICO(I)Agruparlabel+controlconclass=form-groupInput,textareayselectconclass=form-control

7.2LOBÁSICO(II)Layouts:normal,form-inlineyform-horizontalParadistribuirelcontenido,sepuedeusar.col-peronohacefaltausar.row

7.3NORMAL

Formularionormal

7.4INLINE

Formularioinline

7.5HORIZONTAL

Formulariohorizontal

7.6EJEMPLO<formclass="form"role="form"><divclass="form-group"><labelfor="inputEmail3"class="col-sm-2control-label">Email</label><divclass="col-sm-10"><inputclass="form-control"id="inputEmail3"placeholder="EnterEmail"type="email"></div></div><divclass="form-group"><divclass="col-sm-offset-2col-sm-10"><buttontype="submit"class="btnbtn-default">Signin</button></div></div></form>

7.7INPUTSLosdeHTML5:text,password,datetime,datetime-local,date,month,time,week,number,email,url,search,tel,andcolor.

7.8CHECKBOXESANDRADIOSSepuedeusarclass=checkbox-inlineoclass=radio-inline<divclass="radio"><label><inputtype="radio"name="optionsRadios"id="optionsRadios1"value="option1"checked>checked</label></div><divclass="radiodisabled"><label><inputtype="radio"name="optionsRadios"id="optionsRadios3"value="option3"disabled>disabled</label></div>

7.9VALIDACIONES(I)

FormularioValidaciones

7.10VALIDACIONES(II)Usarloshelpershas-success,has-warningyhas-error<divclass="form-grouphas-successhas-feedback">

<labelclass="control-label"for="inputSuccess2">Inputwithsuccess</label><inputtype="text"class="form-control"id="inputSuccess2"><spanclass="glyphiconglyphicon-okform-control-feedback"></span></div>

7.11TAMAÑOS(I)

Tamaños

7.12TAMAÑOS(II)Usarloshelpersform-group-lgoform-group-smobien,encasodeinputsaisladosquenoesténdentrodeunform-group,usarinput-lgoinput-sm<formclass="form-horizontal"role="form"><divclass="form-groupform-group-lg"><labelclass="col-sm-2control-label"for="formGroupInputLarge">Largelabel</label><divclass="col-sm-10"><inputclass="form-control"type="text"id="formGroupInputLarge"placeholder="Largeinput"></div></div></form>

7.13TAMAÑOS(III)Usarloshelpersform-group-lgoform-group-smobien,encasodeinputsaisladosquenoesténdentrodeunform-group,usarinput-lgoinput-sm<formclass="form-horizontal"role="form"><divclass="form-groupform-group-sm"><labelclass="col-sm-2control-label"for="formGroupInputSmall">Smalllabel</label><divclass="col-sm-10"><inputclass="form-control"type="text"id="formGroupInputSmall"placeholder="Smallinput"></div></div></form>

8BOTONES

8.1EJEMPLOS

Ejemplosdebotones

8.2TIPOS(I)

Tiposdebotones

8.3TIPOS(II)<buttontype="button"class="btn">Button</button>

<buttontype="button"class="btnbtn-default">Default</button>

<buttontype="button"class="btnbtn-primary">Primary</button>

...

8.4ACTIVADOS(I)

Botonesactivados

8.5ACTIVADOS(II)<buttontype="button"class="btnactive">Button</button>

<buttontype="button"class="btnactivebtn-default">Default</button>

<buttontype="button"class="btnactivebtn-primary">Primary</button>

...

8.6DESACTIVADOS(I)

Botonesactivados

8.7DESACTIVADOS(II)<buttontype="button"disabled="disabled"class="btnactive">Button</button>

<buttontype="button"disabled="disabled"class="btnactivebtn-default">Default</button>

<buttontype="button"disabled="disabled"class="btnactivebtn-primary">Primary</button>

...

8.8ENLACES(I)

Tamañosdelosbotones

8.9ENLACES(II)<ahref="#"class="btnbtn-primary"role="button">Primarylink</a>

<ahref="#"class="btnbtn-primaryactive"role="button">PrimarylinkActive</a>

<ahref="#"class="btnbtn-primarydisabled"role="button">PrimarylinkDisabled</a>

8.10TAMAÑOS(I)

Tamañosdelosbotones

8.11TAMAÑOS(II)<buttontype="button"class="btnbtn-primarybtn-lg">Largebutton</button>

<buttontype="button"class="btnbtn-primary">Defaultbutton</button>

<buttontype="button"class="btnbtn-primarybtn-sm">Smallbutton</button>

<buttontype="button"class="btnbtn-primarybtn-xs">Extrasmallbutton</button>

8.12EXPANDIR(I)

Expandirlosbotones

8.13EXPANDIR(II)<buttontype="button"class="btnbtn-primarybtn-lgbtn-block">Largebutton</button>

<buttontype="button"class="btnbtn-primarybtn-block">Defaultbutton</button>

<buttontype="button"class="btnbtn-primarybtn-smbtn-block">Smallbutton</button>

<buttontype="button"class="btnbtn-primarybtn-xsbtn-block">Extrasmall</button>

9IMÁGENES

9.1RESPONSIVEAñadirclass=img-responsivepondrámax-size=100%yheight=auto.

9.2EFECTOS(I)

Efectosdeimágenes

9.3EFECTOS(II)Sepuedenañadirefectos:class=img-rounded:redondealosbordesdelafoto.class=img-circle:conviertelafotoencircular.class=img-thumbnail:dejaunpequeñorecuadroalafoto.

10HELPERS

10.1TEXTOSCOLOREADOS(I)

Textoscoloreados

10.2TEXTOSCOLOREADOS(II)<pclass="text-muted">text-muted</p>

<pclass="text-primary">text-primary</p>

<pclass="text-success">text-success</p>

<pclass="text-info">text-info</p>

<pclass="text-warning">text-warning</p>

<pclass="text-danger">text-dangerx</p>

10.3COLORESDEFONDO(I)

Coloresdefondo

10.4COLORESDEFONDO(II)<pclass="bg-primary">bg-primary</p>

<pclass="bg-success">bg-success</p>

<pclass="bg-info">bg-info</p>

<pclass="bg-warning">bg-warning</p>

<pclass="bg-danger">bg-danger</p>

10.5FLOATYCLEARFIX<divclass="pull-left">pull-left</div>

<divclass="pull-right">pull-right</div>

<p>antesdelclearfix</p>

<divclass="clearfix"></div>

<p>despuésdelclearfix</p>

10.6MOSTRARYOCULTAR<p>class=show>display:block</p><divclass="show">show</div>

<p>class=hidden>display:none</p><divclass="hidden">hidden</div>

<p>class=invisible>visibility:hidden(nodesaparecedeldom)</p><divclass="invisible">invisible</div>

<p>class=text-hide</p>útilcuandoquieresunaimagendefondo<divclass="text-hide">text-hide</div>

10.7ACCESIBILIDAD<p>class=sr-only>soloapareceenloslectoresdepantalla</p>

<p>class=sr-only-focusable>aparececuandosehacefocosobreél</p>

<aclass="sr-onlysr-only-focusable"href="#content">Skiptomaincontent</a>

11RESPONSIVE

11.1ESCONDERSEGÚNDISPOSITIVO<pclass="hidden-xsbg-primary">hidden-xs</p>

<pclass="hidden-smbg-primary">hidden-sm</p>

<pclass="hidden-mdbg-primary">hidden-md</p>

<pclass="hidden-lgbg-primary">hidden-lg</p>

11.2MOSTRARCOMOBLOCKSEGÚNDISPOSITIVO<pclass="visible-xs-blockbg-primary">visible-block-xs</p>

<pclass="visible-sm-blockbg-primary">visible-block-sm</p>

<pclass="visible-md-blockbg-primary">visible-block-md</p>

<pclass="visible-lg-blockbg-primary">visible-block-lg</p>

11.3MOSTRARCOMOINLINESEGÚNDISPOSITIVO<pclass="visible-xs-inlinebg-primary">visible-xs-inline</p>

<pclass="visible-sm-inlinebg-primary">visible-sm-inline</p>

<pclass="visible-md-inlinebg-primary">visible-md-inline</p>

<pclass="visible-lg-inlinebg-primary">visible-lg-inline</p>

11.4MOSTRARUOCULTARPARAIMPRIMIR<pclass="hidden-printbg-primary">hidden-print</p>

<pclass="visible-print-blockbg-primary">visible-print-block</p>

<pclass="visible-print-inlinebg-primary">visible-print-inline</p>

12COMPONENTES

12.1ICONOS(I)Utilizaunaversiónreducidadeglyphicons:

AlternativaFont-Awesome:http://glyphicons.com

http://fortawesome.github.io/Font-Awesome

12.2ICONOS(II)

Ejemplodeiconos

12.3ICONOS(III)<buttontype="button"class="btnbtn-default"><spanclass="glyphiconglyphicon-star"></span>Star</button>

12.4DROPDOWN(I)

Dropdown

12.5DROPDOWN(II)<divclass="dropdown"><button...data-toggle="dropdown">Dropdown</button><ul...class="dropdown-menu"role="menu"><lirole="presentation"class="dropdown-header">Header</li><lirole="presentation"class="divider"></li><lirole="presentation"><arole="menuitem"...href="#">Action</a></li></ul></div>

12.6BUTTONGROUPS(I)

Buttongroups

12.7BUTTONGROUPS(II)<divclass="btn-group"><buttontype="button"class="btnbtn-default">Left</button>

<buttontype="button"class="btnbtn-default">Middle</button>

<buttontype="button"class="btnbtn-default">Right</button></div>

12.8INPUTGROUPS(I)

Inputgroups

12.9INPUTGROUPS(II)<divclass="input-group"><spanclass="input-group-addon">@</span><inputtype="text"class="form-control"placeholder="Username"></div>

12.10VARIOS

Tabs,pills,navbars,breadcrumbs

12.11TABS<ulclass="navnav-tabs"role="tablist"><liclass="active"><ahref="#">Home</a></li><li><ahref="#">Help</a></li>...</ul>

12.12PILLS<ulclass="navnav-pills"><liclass="active"><ahref="#">Home</a></li><li><ahref="#">Help</a></li>...</ul>

12.13NAVBARS<nav...><divclass="container-fluid"><divclass="navbar-header"><button...id="collapse-1"><spanclass="sr-only">Togglenavigation</span>...</button><aclass="navbar-brand"href="#">Brand</a></div><div...id="collapse-1"><ulclass="navnavbar-navnavbar-right"><li><ahref="#">Link</a></li>...</ul></div></div></nav>

12.14BREADCRUMBS<olclass="breadcrumb"><li><ahref="#">Home</a></li><li><ahref="#">Library</a></li><liclass="active">Data</li></ol>

12.15PAGINATION(I)

Pagination

12.16PAGINATION(II)<ulclass="pagination"><liclass="disabled"><span>«</span></li><liclass="active"><span>1<spanclass="sr-only">(current)</span></span></li><li><ahref="#">2</a></li><li><ahref="#">3</a></li><li><ahref="#">4</a></li><li><ahref="#">5</a></li><li><ahref="#">»</a></li></ul>

12.17PAGER(I)

Pager

12.18PAGER(II)<ulclass="pager"><liclass="previousdisabled"><ahref="#">←Older</a></li><liclass="next"><ahref="#">Newer→</a></li></ul>

12.19LABELS(I)

Labels

12.20LABELS(II)<spanclass="labellabel-default">Default</span><spanclass="labellabel-primary">Primary</span><spanclass="labellabel-success">Success</span><spanclass="labellabel-info">Info</span><spanclass="labellabel-warning">Warning</span><spanclass="labellabel-danger">Danger</span>

12.21BADGES(I)

Badges

12.22BADGES(II)<ulclass="navnav-pills"><liclass="active"><ahref="#">Home<spanclass="badge">42</span></a></li><li><ahref="#">Profile</a></li><li><ahref="#">Messages<spanclass="badge">3</span></a></li></ul>

12.23BADGES(III)<buttonclass="btnbtn-default"type="button">Messages<spanclass="badge">4</span></button>

12.24JUMBOTRON(I)

Jumbotron

12.25JUMBOTRON(II)<divclass="jumbotron"><h1>Hello,world!</h1><p>...</p><p><aclass="btnbtn-primarybtn-lg"role="button">Learnmore</a></p></div>

12.26THUMBNAILS(I)

Thumbnails

12.27THUMBNAILS(II)<divclass="row"><divclass="col-sm-6col-md-4"><divclass="thumbnail"><imgsrc="img.jpg"...><divclass="caption"><h3>Thumbnaillabel</h3><p>...</p></div></div></div></div>

12.28ALERTS(I)

Alerts

12.29ALERTS(II)<divclass="alertalert-success"role="alert"><strong>Welldone!</strong></div><divclass="alertalert-info"role="alert"><strong>Headsup!</strong></div><divclass="alertalert-warning"role="alert"><strong>Warning!</strong></div><divclass="alertalert-danger"role="alert"><strong>Ohsnap!</strong></div>

12.30PROGRESSBAR(I)

ProgressBar

12.31PROGRESSBAR(II)<divclass="progress"><divclass="progress-bar"role="progressbar"aria-valuenow="0"aria-valuemin="0"aria-valuemax="100">0%</div></div><divclass="progress"><divclass="progress-bar"role="progressbar"aria-valuenow="2"aria-valuemin="0"aria-valuemax="100"style="width:2%;">2%</div></div>

12.32PROGRESSBAR(III)<divclass="progress"><divclass="progress-barprogress-bar-success"...style="width:40%"><spanclass="sr-only">40%Complete(success)...<divclass="progress"><divclass="progress-barprogress-bar-infoprogress-bar-striped"...style="width:20%"><spanclass="sr-only">20%Complete...<divclass="progress"><divclass="progress-barprogress-bar-warningprogress-bar-stripedactive"...style="width:60%"><spanclass="sr-only">60%Complete(warning)...

12.33PROGRESSBAR(IV)<divclass="progress"><divclass="progress-bar"style="width:35%"><spanclass="sr-only">35%Complete(success)</span></div><divclass="progress-barprogress-bar-warningprogress-bar-striped"style="width:20%"><spanclass="sr-only">20%Complete(warning)</span></div><divclass="progress-barprogress-bar-dangerprogress-bar-stripedactive"style="width:10%"><spanclass="sr-only">10%Complete(danger)</span></div></div>

12.34MEDIA(I)

Media

12.35MEDIA(II)<ulclass="media-list"><liclass="media"><aclass="pull-left"href="#"><imgsrc="img.png"></a><divclass="media-body"><h4class="media-heading">Mediaheading</h4><p>...</p></div></li></ul>

12.36LISTGROUP(I)

Listgroup

12.37LISTGROUP(II)<divclass="list-group"><ahref="#"class="list-group-itemactive">Crasjustoodio</a><ahref="#"class="list-group-item">Dapibusacfacilisisin</a>...</div>

12.38PANELGROUP(I)

Panelgroup

12.39PANELGROUP(II)<divclass="panelpanel-primary"><divclass="panel-heading"><h3class="panel-title">Paneltitle</h3></div><divclass="panel-body">Panelcontent</div><divclass="panel-footer">Panelfooter</div></div>

12.40RESPONSIVEEMBED<divclass="embed-responsiveembed-responsive-16by9"><iframeclass="embed-responsive-item"src="//www.youtube.com/..."allowfullscreen=""></iframe></div>

13JAVASCRIPT

13.1MODAL(I)

Dialogosmodales

13.2MODAL(II)<buttonclass="btnbtn-primarybtn-lg"data-toggle="modal"data-target="#myModal">Launchdemomodal</button>

13.3MODAL(III)<divclass="modalfade"id="myModal"tabindex="-1"role="dialog"aria-labelledby="myModalLabel"aria-hidden="true"><divclass="modal-dialog"><divclass="modal-content"><divclass="modal-header">...</div><divclass="modal-body">...</div><divclass="modal-footer">...</div></div></div></div>

13.4TABS(I)

Tabs

13.5TABS(II)<ulid="myTab"class="navnav-tabs"role="tablist"><liclass=""><ahref="#home"role="tab"data-toggle="tab">Home</a></li><liclass="active"><ahref="#profile"role="tab"data-toggle="tab">Profile</a></li>...</ul>

13.6TABS(III)<divid="myTabContent"class="tab-content"><divclass="tab-panefade"id="home"><p>...</p></div><divclass="tab-panefadeactivein"id="profile"><p>...</p></div>...</div>

13.7TOOLTIPS(I)

Tooltips

13.8TOOLTIPS(II)<script>$(document).ready(function(){$('[data-toggle="tooltip"]').tooltip();});</script>

13.9TOOLTIPS(III)<pclass="muted">Farm-to-tableseitan,mcsweeney'sfixiesustainablequinoa8-bitamericanapparel<ahref="#"data-toggle="tooltip"title="Anothertooltip">havea</a>terryrichardsonvinylchambray.</p>

13.10TOOLTIPS(IV)<buttontype="button"class="btnbtn-default"data-toggle="tooltip"data-placement="right"title="Tooltiponright">Tooltiponright</button>

13.11POPOVER(I)

Popover

13.12POPOVER(II)<script>$(document).ready(function(){$('[data-toggle="popover"]').popover();});</script>

13.13POPOVER(III)<buttontype="button"class="btnbtn-default"title="Popovertitle"data-container="body"data-toggle="popover"data-placement="right"data-content="Vivamussagittislacusvelauguelaoreetrutrumfaucibus.">Popoveronright</button>

13.14ACCORDION(I)

Accordion

13.15ACCORDION(II)<divclass="panel-group"id="accordion"><divclass="panelpanel-default"><divclass="panel-heading"><h4class="panel-title"><adata-toggle="collapse"data-parent="#accordion"href="#collapseOne">GroupItem#1</a></h4></div><divid="collapseOne"class="panel-collapsecollapsein"><divclass="panel-body">...</div></div></div>...</div>

13.16CAROUSEL(I)

Carousel

13.17CAROUSEL(II)<divclass="container"style="max-width:900px"><divid="carousel-example-generic"class="carouselslide"data-ride="carousel"><olclass="carousel-indicators">...</ol><divclass="carousel-inner">...</div><aclass="leftcarousel-control"...</a><aclass="rightcarousel-control"...</a></div></div>

13.18CAROUSEL(III)<olclass="carousel-indicators"><lidata-target="#carousel-example-generic"data-slide-to="0"class=""></li><lidata-target="#carousel-example-generic"data-slide-to="1"class="active"></li><lidata-target="#carousel-example-generic"data-slide-to="2"class=""></li></ol>

13.19CAROUSEL(IV)<divclass="carousel-inner"><divclass="itemactiveleft"><imgsrc="img1.png"data-src="..."alt="Firstslide"></div><divclass="itemnextleft"><imgsrc="img2.png"data-src="..."alt="Secondslide"></div><divclass="item"><imgsrc="img2.png"data-src="..."alt="Thirdslide"></div></div>

13.20CAROUSEL(V)<aclass="leftcarousel-control"href="#carousel-example-generic"role="button"data-slide="prev"><spanclass="glyphiconglyphicon-chevron-left"></span></a><aclass="rightcarousel-control"href="#carousel-example-generic"role="button"data-slide="next"><spanclass="glyphiconglyphicon-chevron-right"></span></a>

14EJEMPLOS

14.1ÍNDICEUsingtheframeworkNavbarsinactionCustomcomponentsExperiments

14.2USINGTHEFRAMEWORKStartertemplateBootstrapthemeGridsJumbotronNarrowjumbotron

14.3STARTERTEMPLATE

14.4BOOTSTRAPTHEME

14.5GRIDS

14.6JUMBOTRON

14.7NARROWJUMBOTRON

14.8NAVBARSINACTIONNavbarStatictopnavbarFixednavbar

14.9NAVBAR

14.10STATICTOPNAVBAR

14.11FIXEDNAVBAR

14.12CUSTOMCOMPONENTSCoverCarouselBlogDashboardSign-inpageJustifiednavStickyfooterStickyfooterwithnavbar

14.13COVER

14.14CAROUSEL

14.15BLOG

14.16DASHBOARD

14.17SIGN-INPAGE

14.18JUSTIFIEDNAV

14.19STICKYFOOTER

14.20STICKYFOOTERWITHNAVBAR

14.21EXPERIMENTSNon-responsiveBootstrapOffcanvas

14.22NON-RESPONSIVEBOOTSTRAP

14.23OFFCANVAS

15PERSONALIZACIÓN

15.1TUPROPIOCSSUnaformadepersonalizartupáginawebhechaconbootstrap,esañadiendounficheroCSS,despuésdelasllamadasalosCSSdebootstrap(paraquesobrescribalosvalores)Estaesunaformamuymanualymuypocoproductiva.

15.2PÁGINACUSTOMIZEDesdelapáginawebdebootstrap

sepuedenpersonalizarunmontóndevariables,ydescargarunaversiónpersonaliadadebootstrap.

http://getbootstrap.com/customize

PersonalizardesdelapáginawebdebootstrapEstaformaesmásproductiva,perosiguesiendobastantemanual,yademásnopuedesteneruncontroldecambioseficiente.

15.3COMPILARLESSLaformamásproductivayeficientedepersonalizarbootstrapescompilandolosficherosLessdelcoreaCSS.

16COMPILARLESS

16.1DESCARGAParaverlastripas,ymodificarlas(LESS),hayquedescargarlaversióncompleta:https://github.com/twbs/bootstrap/archive/v3.2.0.zip

bootstrap/├──less/├──js/├──fonts/├──dist/│├──css/│├──js/│└──fonts/└──docs/└──examples/

16.2ENTORNOSiqueremosmodificarelcore(LESS),necesitamos:intalarNodeJS,luegoGruntyparaterminarinstalarlasdependencias.

16.3NODEJSNodeJSnospermiteejecutarJavaScriptdelladodelservidor.ParainstalarNodeJS,hayqueseguirlasinstruccionesdeinstalacióndelapáginaoficialparacadasistemaoperativo:http://nodejs.org

16.4GRUNTGruntesunautomatizadordetareasqueseejecutasobreNodeJS.UnavezinstaladoNodeJS,hayqueinstalarGruntdesdeelgestordepaquetesdenode(npm)ejecutandoenunterminal,comoadministrador,elsiguientecomando:$npminstall-ggrunt-cli

16.5DEPENDENCIASUnavezinstaladoNodeJSyGrunt,hayqueinstalarlasdependenciasdebootstrap.Paraellohayquesituarseenlacarpetadebootstrapyejecutar:../bootstrap$npminstall

16.6DEFAULTSiqueremoslanzartodaslastareaspordefectodegrunt(compilar,minificar,pasarlostest,generardocumentación...)tenemosqueejecutarlosiguiente$grunt

16.7DISTSiloúnicoquequeremosescompilaryminificarelCSSyelJavaScript,tenemosqueejecutarlosiguiente:$gruntdist

16.8WATCHTambiénpodemosrecompilarautomaticamentelosficherosLessaCSScuandosalvasloscambios,ejecutandoelsiguientecomando:$gruntwatch

ElproblemaesquesólorecompilaficherosLessaCSS,nolosminifica.

16.9PERSONALIZARUnodelosficherosquemássepersonalizaes/bootstrap/less/variables.less,puesenélestánlasvariablesmásimportantesqueusabootstrap.

17ACERCADE

17.1LICENCIAEstastransparenciasestánhechascon:MarkdownSlides:

EstastransparenciasestánbajounalicenciaCreativeCommonsReconocimiento-CompartirIgual3.0:

https://github.com/asanzdiego/markdownslides

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

17.2FUENTESTransparencias:

Código:

https://github.com/asanzdiego/curso-interfaces-web-2014/tree/master/05-bootstrap/slides

https://github.com/asanzdiego/curso-interfaces-web-2014/tree/master/05-bootstrap/src

17.3BIBLIOGRAFÍAPáginaoficialdeBootstrap:

Bootstrapsí,perono

VentajasydesventajasdeusarBootstrap

http://getbootstrap.com

http://bruno.garciaechegaray.com/Bootstrap.The.Melee/presentation

http://jorgelessin.com/ventajas-y-desventajas-de-usar-bootstrap

Technology

Bootstrap, un framework CSS