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
<divclass="row"><divclass="col-xs-6">1</div><divclass="col-xs-6">2</div><divclass="col-xs-6">3</div><divclass="col-xs-6">4</div></div>
4.73COLUMNAS(I)Ejemplode3columnasdeuntamañode4
3columnas
4.83COLUMNAS(II)Ejemplode3columnasdeuntamañode4
<divclass="row"><divclass="col-xs-4">1</div><divclass="col-xs-4">2</div><divclass="col-xs-4">3</div><divclass="col-xs-4">4</div></div>
4.94COLUMNAS(I)Ejemplode4columnasdeuntamañode3
4columnas
4.104COLUMNAS(II)Ejemplode4columnasdeuntamañode3
<divclass="row"><divclass="col-xs-3">1</div><divclass="col-xs-3">2</div><divclass="col-xs-3">3</div><divclass="col-xs-3">4</div></div>
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