bootstrap, un framework css
DESCRIPTION
Empiezo contando qué es Bootstrap, sus ventajas e inconvenientes, y como empezar a usarlo. Luego cuento detalladamente las distintas características del framework: el sistema de rejilla, la tipografía, las tablas, los formularios, los botones, las imágenes, los helpers... Continúo explicando las facilidades que tiene para realizar diseños adaptables. Sigo enumerando los distintos componentes del framework, y los distintos añadidos que tiene si además utilizas JavaScript. Para terminar, comento como se puede personalizar, ya sea usando tu propio CSS, modificando el CSS de Bootstrap desde la página destinada a tal efecto, o directamente compilando los ficheros Less del core.TRANSCRIPT
![Page 1: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/1.jpg)
BOOTSTRAP,UNFRAMEWORKCSS
ADOLFOSANZDEDIEGOSEPTIEMBRE2014
![Page 2: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/2.jpg)
1ELAUTOR
![Page 3: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/3.jpg)
1.1ADOLFOSANZDEDIEGOAntiguoprogramadorwebJEE(6años)Hoyendía:ProfesordeFP(6años):Hardware,SistemasOperativosRedes,Programación
FormadorFreelance(3años):Java,AndroidJavaScript,jQueryJSF,Spring,HibernateGroovy&Grails
![Page 4: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/4.jpg)
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
![Page 5: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/5.jpg)
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
![Page 6: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/6.jpg)
2INTRODUCCIÓN
![Page 7: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/7.jpg)
2.1¿QUÉES?BoostrapesunframeworkCSS,liberadoporTwitterymuypopularhoyendía.EstápensadoparahacerundesarrolloMobileFirst
![Page 8: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/8.jpg)
2.2VENTAJAS(I)Utilizacomponentesyservicioscreadosporlacomunidadweb.Utilizaunconjuntodebuenasprácticasqueperduraráneneltiempo.UtilizaHTML5yCSS3
![Page 9: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/9.jpg)
2.3VENTAJAS(II)Implementaunsistemaderejillas,quepordefectoincluye12columnas.UtilizaLESS,unpreprocesadorCSS.(AhoratambiénsoportaSaas).EsOOCSS,oseaCSSOrientadoaObjetos:organizadopormódulosindependientesyreutilizables.
![Page 10: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/10.jpg)
2.4VENTAJAS(III)Hayunaenormecomunidaddetrás.Herramientasencillayágilparaconstruirsitioswebeinterfaces.Tieneunthemepordefectobastanteoptimizadoyquepuedesmodificarfácilmente.
![Page 11: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/11.jpg)
2.5DESVENTAJAS(I)Esnecesarioadaptarseasuformadetrabajo,sibiensucurvadeaprendizajeesliviana,deberáscomprenderyfamiliarizarteconsuestructuraynomenclatura.Debesadaptartudiseñoaungridde12columnas.Traeanchosymárgenespordefecto,queavecessonunpocotediososdecambiar.
![Page 12: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/12.jpg)
2.6DESVENTAJAS(II)Escomplicadocambiardeversiónsihasrealizadomodificacionesprofundassobreelcore.Sinecesitasañadircomponentesquenoexisten,debeshacerlostúmismoenCSSycuidardequemantengacoherenciacontudiseñoycuidandoelresponsive.Aveceshacerimplementarundiseñoimpuesto,puedellegararesultarbastantedifícil,almenossieresunperfeccionista.
![Page 13: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/13.jpg)
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/
![Page 14: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/14.jpg)
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>
![Page 15: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/15.jpg)
3RESUMENCSS
![Page 16: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/16.jpg)
3.1HTML5DOCTYPEBootstrapnecesitaundoctypedeHTML5:
<!DOCTYPEhtml><htmllang="en">...</html>
![Page 17: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/17.jpg)
3.2MOBILEFIRSTDesdelaversión3,BoostrapesMobilefirst.Paragarantizarunbuenrenderizadoyunbuenfuncionamientodelzoom:<metaname="viewport"content="width=device-width,initial-scale=1">
![Page 18: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/18.jpg)
3.3DESACTIVARZOOM(I)Sepuededesactivarelzoomconuser-scalable=no<metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
![Page 19: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/19.jpg)
3.4DESACTIVARZOOM(II)Hacequeelsitioseparezcamásunaaplicaciónnativa,perotambiénlohacemenosaccesible.Engeneral,noserecomienda.
![Page 20: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/20.jpg)
3.5NORMALIZE.CSSParaunmejorrenderizadoenvariosnavegadores,BoostrapusaNormalize.css,unproyectodesarrolladoporNicolasGallagheryJonathanNeal:http://necolas.github.io/normalize.css/
![Page 21: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/21.jpg)
4GRIDSYSTEM
![Page 22: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/22.jpg)
4.1INTRODUCCIÓNBootstrapincluyeunsistemaderejillaresponsiveymobilefirstde12columnas.
![Page 23: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/23.jpg)
4.2FUNCIONAMIENTOElsistemaderejilladeBootstrapfuncionaasí:Sedebencolocar.rowdentrodeun.container(anchofijo)o.container-fluid(anchocompleto).Utilice.rowparacreargruposhorizontales.Elcontenidosedebecolocarentre.rowydebendeserhijosinmediatos.Sihaymásde12columnasenuna.row,estasondesplazadasabajo.
![Page 24: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/24.jpg)
4.31COLUMNA(I)Ejemplode1columnadeuntamañode12
1columna
![Page 25: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/25.jpg)
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>
![Page 26: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/26.jpg)
4.52COLUMNAS(I)Ejemplode2columnasdeuntamañode6
2columnas
![Page 27: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/27.jpg)
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>
![Page 28: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/28.jpg)
4.73COLUMNAS(I)Ejemplode3columnasdeuntamañode4
3columnas
![Page 29: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/29.jpg)
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>
![Page 30: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/30.jpg)
4.94COLUMNAS(I)Ejemplode4columnasdeuntamañode3
4columnas
![Page 31: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/31.jpg)
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>
![Page 32: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/32.jpg)
4.11MULTIDISPOSITIVO1columnaparaxs(<768px)2columnasparasm(≥768px)3columnasparamd(≥992px)4columnasparalg(≥1200px)
![Page 33: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/33.jpg)
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>
![Page 34: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/34.jpg)
4.13CLEARFIX(I)Problemacuandounacapatieneunaltomayorqueladelosdemás:
Problemaclearfix
![Page 35: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/35.jpg)
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>
![Page 36: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/36.jpg)
4.15HUECOSCONOFFSET(I)
Huecosconoffset
![Page 37: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/37.jpg)
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>
![Page 38: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/38.jpg)
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>
![Page 39: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/39.jpg)
4.18HUECOSCONOFFSET(IV)<divclass="row"><divclass="col-md-6col-md-offset-3">.col-md-6.col-md-offset-3</div></div>
![Page 40: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/40.jpg)
4.19PUSH&PULL(I)
push&pull
![Page 41: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/41.jpg)
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>
![Page 42: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/42.jpg)
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){}
![Page 43: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/43.jpg)
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){}
![Page 44: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/44.jpg)
5TIPOGRAFÍA
![Page 45: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/45.jpg)
5.1CABECERAS(I)
Cabeceras
![Page 46: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/46.jpg)
5.2CABECERAS(II)<h1>h1.CabecerasconBootstrap<small>Textosecundario</small></h1>
<h2>h2.CabecerasconBootstrap<small>Textosecundario</small></h2>
![Page 47: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/47.jpg)
5.3PÁRRAFOS(I)
Párrafos
![Page 48: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/48.jpg)
5.4PÁRRAFOS(II)<pclass="lead">Párrafoconclass="lead"</p>
<p>Párrafonormal</p>
<pclass="small">Párrafoconclass="small"</p>
![Page 49: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/49.jpg)
5.5TEXTOSENLÍNEA
Textosenlínea
![Page 50: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/50.jpg)
5.6STRONGmuchoémfasis
<p>Puedesusareltagstrongparadarle<strong>muchoémfasis</strong>auntexto</p>
![Page 51: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/51.jpg)
5.7EMémfasis
<p>Puedesusareltagemparadarle<em>émfasis</em>auntexto</p>
![Page 52: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/52.jpg)
5.8MARKmarcar
<p>Puedesusareltagmarkpara<mark>marcar</mark>untexto</p>
![Page 53: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/53.jpg)
5.9INSinsertaruntexto(mejorquesubrallar)
<p>Puedesusareltaginspara<ins>insertar</ins>untexto</p>
![Page 54: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/54.jpg)
5.10DELborraruntexto(mejorquetachar)
<p>Puedesusareltagdelpara<del>borrar</del>untexto</p>
![Page 55: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/55.jpg)
5.11ALINEACIÓN
Alineación
![Page 56: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/56.jpg)
5.12IZQUIERDATextoalineadoalaizquierda.
<pclass="text-left">Textoalineadoalaizquierda.</p>
![Page 57: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/57.jpg)
5.13CENTRADOTextocentrado.
<pclass="text-center">Textocentrado.</p>
![Page 58: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/58.jpg)
5.14DERECHATextoalineadoaladerecha.
<pclass="text-right">Textoalineadoaladerecha.</p>
![Page 59: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/59.jpg)
5.15JUSTIFICADOTextojustificado.
<pclass="text-justify">Textojustificado.</p>
![Page 60: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/60.jpg)
5.16SINAJUSTETextosinajuste.
<pclass="text-nowrap">Textosinajuste.</p>
![Page 61: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/61.jpg)
5.17CAPITALIZACIÓN
Capitalización
![Page 62: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/62.jpg)
5.18MINÚSCULASMinúsculas
<pclass="text-lowercase">Lowercasedtext.</p>
![Page 63: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/63.jpg)
5.19MAYÚSCULASMayúsculas
<pclass="text-uppercase">Uppercasedtext.</p>
![Page 64: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/64.jpg)
5.20TIPOTÍTULOTipoTítulo
<pclass="text-capitalize">Capitalizedtext.</p>
![Page 65: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/65.jpg)
5.21ABREVIATURAS(I)
Abreviaturas
![Page 66: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/66.jpg)
5.22ABREVIATURAS(II)<abbrtitle="HyperTextMarkupLanguage">HTML</abbr>esunaabreviatura.Pasaelratónporencimaparaaveriguardequesetrata.
![Page 67: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/67.jpg)
5.23DIRECCIONES(I)
Direcciones
![Page 68: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/68.jpg)
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>
![Page 69: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/69.jpg)
5.25CITAS(I)
Citas
![Page 70: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/70.jpg)
5.26CITAS(II)<blockquoteclass="blockquote">
<p>Loremipsumdolorsitamet,consecteturadipiscingelit.Integerposuereerataante.</p>
<footer>Someonefamousin<citetitle="SourceTitle">SourceTitle</cite></footer>
</blockquote>
![Page 71: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/71.jpg)
5.27LISTAS(I)
Listas
![Page 72: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/72.jpg)
5.28LISTAS(II)<ulclass="list-inline"><li>Peras</li><li>Manzanas</li><li>Naranjas</li><li>Platanos</li></ul>
![Page 73: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/73.jpg)
5.29DESCRIPCIONES(I)
Descripciones
![Page 74: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/74.jpg)
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>
![Page 75: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/75.jpg)
6TABLAS
![Page 76: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/76.jpg)
6.1CLASEStable:paradarleelformatotable-striped:paradarleformatoalasparesyalasimparestable-bordered:paraponerlebordesalatablatable-hover:paraoscurecerlafilaendondeestáelratóntable-condensed:paraqueocupemenosespacio
![Page 77: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/77.jpg)
6.2RESPONSIVEPoniendolatabladentrodeunacapaconclass=table-responsiveapareceráunscrollhorizontalenlatablaendispositivospequeños.
![Page 78: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/78.jpg)
6.3EJEMPLO(I)
Tabla
![Page 79: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/79.jpg)
6.4EJEMPLO(II)<divclass="table-responsive"><tableclass="tabletable-stripedtable-borderedtable-hovertable-condensed"><thead><tr><th>...</thead><tbody><tr><td>...</tbody></table></div>
![Page 80: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/80.jpg)
7FORMULARIOS
![Page 81: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/81.jpg)
7.1LOBÁSICO(I)Agruparlabel+controlconclass=form-groupInput,textareayselectconclass=form-control
![Page 82: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/82.jpg)
7.2LOBÁSICO(II)Layouts:normal,form-inlineyform-horizontalParadistribuirelcontenido,sepuedeusar.col-peronohacefaltausar.row
![Page 83: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/83.jpg)
7.3NORMAL
Formularionormal
![Page 84: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/84.jpg)
7.4INLINE
Formularioinline
![Page 85: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/85.jpg)
7.5HORIZONTAL
Formulariohorizontal
![Page 86: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/86.jpg)
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>
![Page 87: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/87.jpg)
7.7INPUTSLosdeHTML5:text,password,datetime,datetime-local,date,month,time,week,number,email,url,search,tel,andcolor.
![Page 88: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/88.jpg)
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>
![Page 89: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/89.jpg)
7.9VALIDACIONES(I)
FormularioValidaciones
![Page 90: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/90.jpg)
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>
![Page 91: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/91.jpg)
7.11TAMAÑOS(I)
Tamaños
![Page 92: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/92.jpg)
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>
![Page 93: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/93.jpg)
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>
![Page 94: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/94.jpg)
8BOTONES
![Page 95: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/95.jpg)
8.1EJEMPLOS
Ejemplosdebotones
![Page 96: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/96.jpg)
8.2TIPOS(I)
Tiposdebotones
![Page 97: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/97.jpg)
8.3TIPOS(II)<buttontype="button"class="btn">Button</button>
<buttontype="button"class="btnbtn-default">Default</button>
<buttontype="button"class="btnbtn-primary">Primary</button>
...
![Page 98: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/98.jpg)
8.4ACTIVADOS(I)
Botonesactivados
![Page 99: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/99.jpg)
8.5ACTIVADOS(II)<buttontype="button"class="btnactive">Button</button>
<buttontype="button"class="btnactivebtn-default">Default</button>
<buttontype="button"class="btnactivebtn-primary">Primary</button>
...
![Page 100: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/100.jpg)
8.6DESACTIVADOS(I)
Botonesactivados
![Page 101: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/101.jpg)
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>
...
![Page 102: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/102.jpg)
8.8ENLACES(I)
Tamañosdelosbotones
![Page 103: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/103.jpg)
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>
![Page 104: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/104.jpg)
8.10TAMAÑOS(I)
Tamañosdelosbotones
![Page 105: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/105.jpg)
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>
![Page 106: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/106.jpg)
8.12EXPANDIR(I)
Expandirlosbotones
![Page 107: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/107.jpg)
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>
![Page 108: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/108.jpg)
9IMÁGENES
![Page 109: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/109.jpg)
9.1RESPONSIVEAñadirclass=img-responsivepondrámax-size=100%yheight=auto.
![Page 110: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/110.jpg)
9.2EFECTOS(I)
Efectosdeimágenes
![Page 111: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/111.jpg)
9.3EFECTOS(II)Sepuedenañadirefectos:class=img-rounded:redondealosbordesdelafoto.class=img-circle:conviertelafotoencircular.class=img-thumbnail:dejaunpequeñorecuadroalafoto.
![Page 112: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/112.jpg)
10HELPERS
![Page 113: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/113.jpg)
10.1TEXTOSCOLOREADOS(I)
Textoscoloreados
![Page 114: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/114.jpg)
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>
![Page 115: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/115.jpg)
10.3COLORESDEFONDO(I)
Coloresdefondo
![Page 116: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/116.jpg)
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>
![Page 117: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/117.jpg)
10.5FLOATYCLEARFIX<divclass="pull-left">pull-left</div>
<divclass="pull-right">pull-right</div>
<p>antesdelclearfix</p>
<divclass="clearfix"></div>
<p>despuésdelclearfix</p>
![Page 118: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/118.jpg)
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>
![Page 119: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/119.jpg)
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>
![Page 120: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/120.jpg)
11RESPONSIVE
![Page 121: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/121.jpg)
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>
![Page 122: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/122.jpg)
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>
![Page 123: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/123.jpg)
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>
![Page 124: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/124.jpg)
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>
![Page 125: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/125.jpg)
12COMPONENTES
![Page 126: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/126.jpg)
12.1ICONOS(I)Utilizaunaversiónreducidadeglyphicons:
AlternativaFont-Awesome:http://glyphicons.com
http://fortawesome.github.io/Font-Awesome
![Page 127: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/127.jpg)
12.2ICONOS(II)
Ejemplodeiconos
![Page 128: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/128.jpg)
12.3ICONOS(III)<buttontype="button"class="btnbtn-default"><spanclass="glyphiconglyphicon-star"></span>Star</button>
![Page 129: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/129.jpg)
12.4DROPDOWN(I)
Dropdown
![Page 130: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/130.jpg)
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>
![Page 131: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/131.jpg)
12.6BUTTONGROUPS(I)
Buttongroups
![Page 132: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/132.jpg)
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>
![Page 133: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/133.jpg)
12.8INPUTGROUPS(I)
Inputgroups
![Page 134: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/134.jpg)
12.9INPUTGROUPS(II)<divclass="input-group"><spanclass="input-group-addon">@</span><inputtype="text"class="form-control"placeholder="Username"></div>
![Page 135: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/135.jpg)
12.10VARIOS
Tabs,pills,navbars,breadcrumbs
![Page 136: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/136.jpg)
12.11TABS<ulclass="navnav-tabs"role="tablist"><liclass="active"><ahref="#">Home</a></li><li><ahref="#">Help</a></li>...</ul>
![Page 137: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/137.jpg)
12.12PILLS<ulclass="navnav-pills"><liclass="active"><ahref="#">Home</a></li><li><ahref="#">Help</a></li>...</ul>
![Page 138: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/138.jpg)
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>
![Page 139: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/139.jpg)
12.14BREADCRUMBS<olclass="breadcrumb"><li><ahref="#">Home</a></li><li><ahref="#">Library</a></li><liclass="active">Data</li></ol>
![Page 140: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/140.jpg)
12.15PAGINATION(I)
Pagination
![Page 141: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/141.jpg)
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>
![Page 142: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/142.jpg)
12.17PAGER(I)
Pager
![Page 143: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/143.jpg)
12.18PAGER(II)<ulclass="pager"><liclass="previousdisabled"><ahref="#">←Older</a></li><liclass="next"><ahref="#">Newer→</a></li></ul>
![Page 144: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/144.jpg)
12.19LABELS(I)
Labels
![Page 145: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/145.jpg)
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>
![Page 146: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/146.jpg)
12.21BADGES(I)
Badges
![Page 147: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/147.jpg)
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>
![Page 148: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/148.jpg)
12.23BADGES(III)<buttonclass="btnbtn-default"type="button">Messages<spanclass="badge">4</span></button>
![Page 149: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/149.jpg)
12.24JUMBOTRON(I)
Jumbotron
![Page 150: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/150.jpg)
12.25JUMBOTRON(II)<divclass="jumbotron"><h1>Hello,world!</h1><p>...</p><p><aclass="btnbtn-primarybtn-lg"role="button">Learnmore</a></p></div>
![Page 151: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/151.jpg)
12.26THUMBNAILS(I)
Thumbnails
![Page 152: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/152.jpg)
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>
![Page 153: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/153.jpg)
12.28ALERTS(I)
Alerts
![Page 154: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/154.jpg)
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>
![Page 155: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/155.jpg)
12.30PROGRESSBAR(I)
ProgressBar
![Page 156: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/156.jpg)
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>
![Page 157: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/157.jpg)
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)...
![Page 158: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/158.jpg)
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>
![Page 159: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/159.jpg)
12.34MEDIA(I)
Media
![Page 160: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/160.jpg)
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>
![Page 161: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/161.jpg)
12.36LISTGROUP(I)
Listgroup
![Page 162: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/162.jpg)
12.37LISTGROUP(II)<divclass="list-group"><ahref="#"class="list-group-itemactive">Crasjustoodio</a><ahref="#"class="list-group-item">Dapibusacfacilisisin</a>...</div>
![Page 163: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/163.jpg)
12.38PANELGROUP(I)
Panelgroup
![Page 164: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/164.jpg)
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>
![Page 165: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/165.jpg)
12.40RESPONSIVEEMBED<divclass="embed-responsiveembed-responsive-16by9"><iframeclass="embed-responsive-item"src="//www.youtube.com/..."allowfullscreen=""></iframe></div>
![Page 166: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/166.jpg)
13JAVASCRIPT
![Page 167: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/167.jpg)
13.1MODAL(I)
Dialogosmodales
![Page 168: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/168.jpg)
13.2MODAL(II)<buttonclass="btnbtn-primarybtn-lg"data-toggle="modal"data-target="#myModal">Launchdemomodal</button>
![Page 169: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/169.jpg)
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>
![Page 170: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/170.jpg)
13.4TABS(I)
Tabs
![Page 171: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/171.jpg)
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>
![Page 172: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/172.jpg)
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>
![Page 173: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/173.jpg)
13.7TOOLTIPS(I)
Tooltips
![Page 174: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/174.jpg)
13.8TOOLTIPS(II)<script>$(document).ready(function(){$('[data-toggle="tooltip"]').tooltip();});</script>
![Page 175: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/175.jpg)
13.9TOOLTIPS(III)<pclass="muted">Farm-to-tableseitan,mcsweeney'sfixiesustainablequinoa8-bitamericanapparel<ahref="#"data-toggle="tooltip"title="Anothertooltip">havea</a>terryrichardsonvinylchambray.</p>
![Page 176: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/176.jpg)
13.10TOOLTIPS(IV)<buttontype="button"class="btnbtn-default"data-toggle="tooltip"data-placement="right"title="Tooltiponright">Tooltiponright</button>
![Page 177: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/177.jpg)
13.11POPOVER(I)
Popover
![Page 178: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/178.jpg)
13.12POPOVER(II)<script>$(document).ready(function(){$('[data-toggle="popover"]').popover();});</script>
![Page 179: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/179.jpg)
13.13POPOVER(III)<buttontype="button"class="btnbtn-default"title="Popovertitle"data-container="body"data-toggle="popover"data-placement="right"data-content="Vivamussagittislacusvelauguelaoreetrutrumfaucibus.">Popoveronright</button>
![Page 180: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/180.jpg)
13.14ACCORDION(I)
Accordion
![Page 181: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/181.jpg)
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>
![Page 182: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/182.jpg)
13.16CAROUSEL(I)
Carousel
![Page 183: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/183.jpg)
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>
![Page 184: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/184.jpg)
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>
![Page 185: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/185.jpg)
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>
![Page 186: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/186.jpg)
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>
![Page 187: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/187.jpg)
14EJEMPLOS
![Page 188: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/188.jpg)
14.1ÍNDICEUsingtheframeworkNavbarsinactionCustomcomponentsExperiments
![Page 189: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/189.jpg)
14.2USINGTHEFRAMEWORKStartertemplateBootstrapthemeGridsJumbotronNarrowjumbotron
![Page 190: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/190.jpg)
14.3STARTERTEMPLATE
![Page 191: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/191.jpg)
14.4BOOTSTRAPTHEME
![Page 192: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/192.jpg)
14.5GRIDS
![Page 193: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/193.jpg)
14.6JUMBOTRON
![Page 194: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/194.jpg)
14.7NARROWJUMBOTRON
![Page 195: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/195.jpg)
14.8NAVBARSINACTIONNavbarStatictopnavbarFixednavbar
![Page 196: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/196.jpg)
14.9NAVBAR
![Page 197: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/197.jpg)
14.10STATICTOPNAVBAR
![Page 198: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/198.jpg)
14.11FIXEDNAVBAR
![Page 199: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/199.jpg)
14.12CUSTOMCOMPONENTSCoverCarouselBlogDashboardSign-inpageJustifiednavStickyfooterStickyfooterwithnavbar
![Page 200: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/200.jpg)
14.13COVER
![Page 201: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/201.jpg)
14.14CAROUSEL
![Page 202: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/202.jpg)
14.15BLOG
![Page 203: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/203.jpg)
14.16DASHBOARD
![Page 204: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/204.jpg)
14.17SIGN-INPAGE
![Page 205: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/205.jpg)
14.18JUSTIFIEDNAV
![Page 206: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/206.jpg)
14.19STICKYFOOTER
![Page 207: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/207.jpg)
14.20STICKYFOOTERWITHNAVBAR
![Page 208: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/208.jpg)
14.21EXPERIMENTSNon-responsiveBootstrapOffcanvas
![Page 209: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/209.jpg)
14.22NON-RESPONSIVEBOOTSTRAP
![Page 210: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/210.jpg)
14.23OFFCANVAS
![Page 211: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/211.jpg)
15PERSONALIZACIÓN
![Page 212: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/212.jpg)
15.1TUPROPIOCSSUnaformadepersonalizartupáginawebhechaconbootstrap,esañadiendounficheroCSS,despuésdelasllamadasalosCSSdebootstrap(paraquesobrescribalosvalores)Estaesunaformamuymanualymuypocoproductiva.
![Page 213: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/213.jpg)
15.2PÁGINACUSTOMIZEDesdelapáginawebdebootstrap
sepuedenpersonalizarunmontóndevariables,ydescargarunaversiónpersonaliadadebootstrap.
http://getbootstrap.com/customize
PersonalizardesdelapáginawebdebootstrapEstaformaesmásproductiva,perosiguesiendobastantemanual,yademásnopuedesteneruncontroldecambioseficiente.
![Page 214: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/214.jpg)
15.3COMPILARLESSLaformamásproductivayeficientedepersonalizarbootstrapescompilandolosficherosLessdelcoreaCSS.
![Page 215: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/215.jpg)
16COMPILARLESS
![Page 216: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/216.jpg)
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/
![Page 217: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/217.jpg)
16.2ENTORNOSiqueremosmodificarelcore(LESS),necesitamos:intalarNodeJS,luegoGruntyparaterminarinstalarlasdependencias.
![Page 218: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/218.jpg)
16.3NODEJSNodeJSnospermiteejecutarJavaScriptdelladodelservidor.ParainstalarNodeJS,hayqueseguirlasinstruccionesdeinstalacióndelapáginaoficialparacadasistemaoperativo:http://nodejs.org
![Page 219: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/219.jpg)
16.4GRUNTGruntesunautomatizadordetareasqueseejecutasobreNodeJS.UnavezinstaladoNodeJS,hayqueinstalarGruntdesdeelgestordepaquetesdenode(npm)ejecutandoenunterminal,comoadministrador,elsiguientecomando:$npminstall-ggrunt-cli
![Page 220: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/220.jpg)
16.5DEPENDENCIASUnavezinstaladoNodeJSyGrunt,hayqueinstalarlasdependenciasdebootstrap.Paraellohayquesituarseenlacarpetadebootstrapyejecutar:../bootstrap$npminstall
![Page 221: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/221.jpg)
16.6DEFAULTSiqueremoslanzartodaslastareaspordefectodegrunt(compilar,minificar,pasarlostest,generardocumentación...)tenemosqueejecutarlosiguiente$grunt
![Page 222: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/222.jpg)
16.7DISTSiloúnicoquequeremosescompilaryminificarelCSSyelJavaScript,tenemosqueejecutarlosiguiente:$gruntdist
![Page 223: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/223.jpg)
16.8WATCHTambiénpodemosrecompilarautomaticamentelosficherosLessaCSScuandosalvasloscambios,ejecutandoelsiguientecomando:$gruntwatch
ElproblemaesquesólorecompilaficherosLessaCSS,nolosminifica.
![Page 224: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/224.jpg)
16.9PERSONALIZARUnodelosficherosquemássepersonalizaes/bootstrap/less/variables.less,puesenélestánlasvariablesmásimportantesqueusabootstrap.
![Page 225: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/225.jpg)
17ACERCADE
![Page 226: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/226.jpg)
17.1LICENCIAEstastransparenciasestánhechascon:MarkdownSlides:
EstastransparenciasestánbajounalicenciaCreativeCommonsReconocimiento-CompartirIgual3.0:
https://github.com/asanzdiego/markdownslides
http://creativecommons.org/licenses/by-sa/3.0/es
![Page 227: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/227.jpg)
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
![Page 228: Bootstrap, un framework CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050921/556271a1d8b42ae73c8b45d1/html5/thumbnails/228.jpg)
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