1.1

1.2

1.2.1

1.2.2

1.2.3

1.3

1.4

1.4.1

1.4.2

1.4.3

1.4.4

1.5

1.6

1.7

1.7.1

1.7.2

1.7.3

1.7.4

1.7.5

1.7.6

1.7.7

1.8

1.9

1.10

TabladecontenidoContenidos

Introducción

Frameworksresponsive

Funcionamientodeldiseñoadaptable

Probandoelresponsive

Páginabásica

SistemadeRejilla

Forzarelcambiodefila

Anidamientodecolumnas

Márgenesoespaciadoentrecolumnas

Ordenacióndecolumnas

Utilidadesresponsive

MediaQueries

ComponentesResponsive

Botones

Desplegables

Gruposdebotones

Formularios

Navegación

Barradenavegación

Tablas

Ejercicios1

Ejercicios2

Bibliografía

2

ContenidosEldiseñodewebstipo"responsive"permitecrearwebsadaptablesadiferentestamañosdepantalla,desdewebsparapantallastamañoescritorio,pasandoportablets,hastawebsparamóviles.EstetipodediseñosebasaencrearunúnicocódigoyutilizarreglasyestilosCSSparaadaptarloscontenidosalosdiferentestamañosdepantalla.

Loscontenidosprincipalesdellibroson:

IntroducciónFrameworksresponsiveFuncionamientodeldiseñoadaptableProbandoelresponsive

PáginabásicaSistemaderejilla

ForzarelcambiodefilaAnidamientodecolumnasMárgenesoespaciadoentrecolumnasOrdenacióndecolumnas

UtilidadesresponsiveMediaQueriesComponentesResponsive

BotonesDesplegablesGruposdebotonesFormulariosNavegaciónBarradenavegaciónTablas

EjerciciosBibliografía

Contenidos

3

Introducciónaldiseño"responsive"Eldiseñowebresponsive,adaptableoadaptativo,conocidoporlassiglasRWD(delinglés,ResponsiveWebDesign)esunafilosofíadediseñoydesarrollocuyoobjetivoesadaptarlaaparienciadelaspáginaswebaldispositivoqueseestéutilizandoparavisualizarla.Hoydíalaspáginaswebsevisualizanenmultituddetiposdedispositivoscomotabletas,smartphones,libroselectrónicos,portátiles,PCs,etc.Estatecnologíapretendequeconunsolodiseñowebtengamosunavisualizaciónadecuadaencualquierdispositivo.

Eldiseñoresponsivesebasaenproporcionaratodoslosusuariosdeunaweblosmismoscontenidosyunaexperienciadeusuariolomássimilarposible,frenteaotrasaproximacionesaldesarrollowebmóvilcomolacreacióndeapps,elcambiodedominioowebsservidasdinámicamenteenfuncióndeldispositivo.

Aunquetodastienenprosycontras,lawebresponsiveesconsideradapormuchosexpertoscomolamejorprácticaposible,alunificarlaweb,reducirtiemposdedesarrolloyofrecergrandesventajasparaSEOmóvil.

VariabilidadenlasresolucionesdepantallaDurantemuchosañoseldesarrollowebsehabasadoenlaresoluciónestándarde1024×768(haceapenas3añosaproximadamenteel40%delosusuariosteníaestaresolución).Peroenlaactualidadexisteunaampliavariedadderesoluciones,nosoloenpantallasdeordenadoresdeescritoriosinotambiénparatabletsydispositivosmóviles.

Introducción

4

Esmuyimportanteconocertodasestasestadísticasasícomocualessonlasdimensionesdepantalladelosusuarios,aquépúblicovamosdirigidos,etc.yasípodertenerloencuentaenlausabilidaddenuestraweb.Yanoesposiblecentrareldesarrollopensandoquelosusuariosvanatener(enunaltoporcentaje)unaúnicaresolucióndepantalla.

Desdehaceyaunosañoseneldesarrollowebsehasustituidoenciertamedidaelproblemadelacompatibilidaddenavegadores(graciasaquepocoapocotodaslascompañíasseestánciñendoalosestándaresconHTML5/CSS3yotrassebasandirectamenteenweb-kit)porelproblemadelasresolucionesdelosdispositivos.

Enlasiguientetablasepuedenverlasúltimasestadísticas(2014)delasresolucionesdepantallamásutilizadas:

Resolución %utilización

>1920x1080 34%

1920x1080 13%

1366x768 31%

1280x1024 8%

1280x800 7%

1024x768 6%

800×600 0.5%

<800×600 0.5%

Enlaactualidadyanoes1024x768laresoluciónmásutilizada,sinoquees1366×768yresolucionessuperioresa1920x1080.

Esfundamentaltenerencuentaqueeneldiseñoresponsive,alvariartantolasposiblesresolucionesenlasqueseveránuestrawebdeberemosmostrarenprimerlugarloscontenidosmásimportanteseimprescindibles.

EjemplosdesitioswebcreadoscontecnologíaResponsiveEnunartículollamado:"ResponsiveWebDesign:50ExamplesandBestPractices"muestraexcelentesejemplosdelaaplicacióndeestatecnología.Algunosdeestosejemplosson:

dConstruct2011

Introducción

5

BostonGlobe

FoodSense

Introducción

6

Derenkeskin

Introducción

7

FrameworksresponsiveComosesueledecir,envezdereinventarlaruedayprogramarnosotrostodoeldiseñoresponsive,podemosaprovecharalgunosdelosframeworksqueexistenenelmercadoparaestepropósito.Nosahorraránmuchísimotiempo,partiremosdecódigoampliamenteprobado,ydeunosdiseñosbasedetodosloselementoswebbastantemásbonitosquelaquetendríandeformanativa.

Actualmenteexistenenelmercadounaampliavariedaddeestetipoframeworksresponsive,algunosdelosmásutilizadosson:

Bootstrap(http://getbootstrap.com/):Esteframeworkesunodelosmáspopularesdelmercado,habiendosidodesarrolladoporelequipodeTwitter.BootstraphasidocreadopensandoenofrecerlamejorexperienciadeusuariotantoausuariosdePC(IE7incluido!),comoasmartphonesytabletas.Utilizaungridresponsivede12columnasytraeintegradodecenasdecomplementos,pluginsdeJavaScript,tipografía,controladoresdeformulariosymuchomás.AdemásutilizaelpreprocesadordeCSSLESS.

Foundation(http://foundation.zurb.com/):JuntoconBootstrapesunodelosframeworksmásavanzadosqueexistenenlaactualidad.HasidodesarrolladoconSASS,unpotentepreprocesadordeCSSquehacedeFoundationunframeworkfácilmentepersonalizable.AdemássacapartidodelasnuevastecnologíasyfuncionaconIE8+.

Skeleton(http://getskeleton.com/):Skeletonesunboilerplatequeofreceungridresponsivebasadoenunaresoluciónde960pxqueseajustaaltamañodelosdispositivosmóviles.TienepocopesoeincluyeunacoleccióndearchivosCSSyJSparafacilitarnoseldiseñodenuestraweb.

HTML5Boilerplate(http://html5boilerplate.com/):Aligualquelosdemásnosofreceunsetdeutilidadesparaconstruirnuestrawebresponsivedeformarápidaysencilla,conlaventajadeserunodelosquemenosocupan.

EnestecursonosvamosacentrarenBootstrapporserunodelosframeworksmáscompletos,másutilizadosyquemejorfuncionan.Enlassiguientesseccionesestudiaremosendetalleelfuncionamientodeestalibrería.

Bootstrap

Frameworksresponsive

8

Comoyahemoscomentadoantes,Bootstrapesunodelosframeworksmáspopularesyutilizadosdelmercadoparalacreacióndepáginasresponsive,habiendosidodesarrolladoporelequipodeTwitter.

EntrelosnavegadoressoportadosseencuentranChrome,Firefox,Opera,SafarieInternetExplorerapartirdelaversión8(aunqueenlaversión7tambiénfuncionacorrectamente).

EstápreparadoparafuncionartantoennavegadoresdePCsyportátilesconcualquiertamañodepantallaasícomoparatabletsysmartphonesdetamañosmuchomásreducidos.

Paraconseguirqueunamismawebsepuedavisualizarcorrectamenteentodosesostamañosdepantallahadiseñadounavanzadosistemaderejilladivididoencolumnasparaelposicionamientodeloselementosdenuestraweb.Ademásincorporaotrasmuchasutilidadesycomplementos(formularios,botones,barrasdenavegación,etc.)parasimplificareldesarrollodeunawebresponsive.

Frameworksresponsive

9

FuncionamientodeldiseñoadaptableEldiseñoresponsivesebasaenadaptardinámicamenteeldiseñowebenfuncióndelaresolucióndelapantalladelvisitante.Deestaformaadaptamosnuestraswebsadispositivosmóvilessinnecesidaddetenerdossitiosseparadosyalmismotiempotambiénpodemosadaptarlawebaresolucionesgrandesparamejorarlaexperienciadeusuario.

Antiguamentesepensabaenhacer2diseños,unoparamóvilesyotroparaweb,sinembargo,eldiseñoresponsivetratadeestructuraroadaptarelcontenidoqueyatieneseneldiseñooriginalaotrosformatosdiferentes:móviles,tabletsyversióndeescritorio,comobienmuestraestaimagen:

LasolucióntécnicaqueselehadadoeneldesarrollowebalproblemadeestadiversidadderesolucioneswebsellamaResponsiveWebDesignynospermitehacerinterfacesadaptadasalentornodelusuariomedianteestructuras,bloques,columnaseimágenesfluidasgraciasamedia-queriesdeCSS.

ApartirdeCSS2.1lashojasdeestilohanincluidolosmediatypes,locualnoshafacilitado,porejemplo,proveerunestilodistintoparaeldiseñodeimpresión:

<linkrel="stylesheet"type="text/css"href="core.css"media="screen"/>

<linkrel="stylesheet"type="text/css"href="print.css"media="print"/>

Funcionamientodeldiseñoadaptable

10

ApartirdeCSS3elW3Ccreólasmediaqueries.Unamediaquerynospermiteapuntarnosóloaciertasclasesdedispositivos,sinorealmenteinspeccionarlascaracterísticasfísicasdeldispositivoqueestárenderizandonuestrotrabajo.Parautilizarlaspodemosincorporarunaqueryalatributomediadeunlinkaunahojadeestilos:

<linkrel="stylesheet"type="text/css"href="shetland.css"

media="screenand(max-device-width:480px)"/>

Laquerycontienedoscomponentes:

Unmediatype(screen,printoall).Laconsultaentreparéntesis,conteniendounacaracterísticaainspeccionar(max-device-widthomin-device-width)seguidaporelvaloralqueapuntamos(480px).

TambiénesposibleutilizarlasdirectamenteenelCSScomopartedeunaregla@media:

@mediascreenand(max-device-width:480px){

.column{

float:none;

}

}

Porejemplo,siquisiéramoscrearunestilodebloquesfluidosqueparapantallasgrandessemuestreunoacontinuacióndelotroyparapantallaspantallascambieamostrarsedeformaapilada,unoencimadeotro,podríamoshaceralgocomo:

@mediaalland(max-width:800px){

.bloque{

display:block!important;

/*Cuandoelanchoseainferiora800pxelelementoseráunbloque*/

width:auto!important;

}

}

.bloque{

display:inline-block;/*Paraquesemuestrenlosbloquesenlínea*/

height:300px;

width:300px;

border:1pxsolid#333;

background:#999;

margin:20px;

}

Paramásinformaciónpodéisconsultar:http://www.w3.org/TR/css3-mediaqueries/

Funcionamientodeldiseñoadaptable

11

Funcionamientodeldiseñoadaptable

12

ProbandoelresponsiveParaprobarnuestrosdiseñosresponsivetenemosvariasopciones,unadeellasesusaralgunasdelaswebsqueexistenparatalfin.Comoporejemplo:

Responsinator(http://www.responsinator.com)

Estaherramientaestádisponiblesolamentedeformaonline,peronospermiteverdeunsolovistazocomosemostraríanuestrawebconeltamañodelossmarthonesytabletsmáspopulares,comoporejemplolasdiferentesversionesdeiPhone,iPad,KindleyalgunasversionesdeteléfonosAndroid.

Elproblemadeestasherramientasesquetenemosqueaccederaunaversiónpublicadadenuestraweb(nopermitenlocalhost)ysonunpocomáslentaspararealizarpruebascontinuas,porestarazónesmuchomásrecomendableutilizaralgunodeloskitsdeherramientasparaeldesarrolladorwebqueexistenparalosdiferentesnavegadores.

Herramientasdelnavegadorparaeldesarrollador

Probandoelresponsive

13

TantoenFirefoxcomoChromevieneinstaladopordefectounaseriedeherramientasdeayudaparaeldesarrolladorquenospermiten,entreotrascosas,verlaconsolademensajes,inspeccionarelcódigooverlasecuenciadellamadasalservidor.

Ademásdeestastambiénexistenotrasherramientasmásavanzadasquepodemosinstalarcomounaextensióndenuestronavegador,comoporejemploFirebug.

Laventajadeestasherramientasfrentealasanterioresesquesonmuchosmásrápidas,nospermitenprobarnuestrapáginaenlocalyademáspodemosinspeccionarelcódigoymodificarlosestilosentiemporeal.Usandoelinspectordeestasherramientasnospodemosahorrarmuchotiempoalahoraderealizarpruebassobrelapropiapáginacargada,yaquedeotraformatendríamosquemodificarelcódigodirectamente,recargarlapáginayvolveraprobarlo.

Probandoelresponsive

14

PáginabásicaBootstraputilizaciertoselementosHTMLypropiedadesCSSquerequierenelusodeldoctypedeHTML5paraquefuncionen,porloqueesimportanteañadirloatodasnuestraspáginas:

<!DOCTYPEhtml>

<htmllang="en">

...

</html>

Ademásparaasegurarquesemuestracorrectamenteendispositivosmóvilesyquepermitelautilizacióndelzoomalarrastrartenemosqueañadirlasiguienteetiquetametadentrodelacabecera<head>:

<metaname="viewport"content="width=device-width,initial-scale=1">

AcontinuaciónseincluyeunaplantillaHTMLbaseparacualquierproyectoconBootstrap,apartirdelacualsetendránqueirañadiendoelrestodeelementos:

Páginabásica

15

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="utf-8">

<metahttp-equiv="X-UA-Compatible"content="IE=edge">

<metaname="viewport"content="width=device-width,initial-scale=1">

<title>PlantillabásicadeBootstrap</title>

<!--Bootstrap-->

<linkhref="css/bootstrap.min.css"rel="stylesheet">

<!--libreríasopcionalesqueactivanelsoportedeHTML5paraIE8-->

<!--[ifltIE9]>

<scriptsrc="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>

<scriptsrc="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

<![endif]-->

</head>

<body>

<h1>¡HolaMundo!</h1>

<!--LibreríajQueryrequeridaporlospluginsdeJavaScript-->

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></

script>

<!--TodoslospluginsJavaScriptdeBootstrap(tambiénpuedes

incluirarchivosJavaScriptindividualesdelosúnicos

pluginsqueutilices)-->

<scriptsrc="js/bootstrap.min.js"></script>

</body>

</html>

Esposibledeshabilitarelzoomparadispositivosmóvilesañadiendouser-scalable=noalaetiquetametadelviewport(comosepuedeverenelejemploinferior).Deestaformalosusuariosúnicamentepodránusarelscrolldelaaplicación,haciendotuwebmássimilaraunaaplicaciónnativa.Sinembargo,hayqueusarestacaracterísticaconcuidadoyaquenoesrecomendableparatodoslossitios.

<metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,u

ser-scalable=no">

Páginabásica

16

SistemaderejillaElsistemaderejilladeBootstrapsebasaenlacreaciónodisposicióndelcontenidodenuestrawebdentroderejillasflexibles,lascualesseescalaránaltamañoyposiciónadecuadadeformaautomáticadependiendodeltamañodelapantallaenlaqueserendericen.

ElementocontenedorElsistemaderejillatienequeserutilizadodentrodeunodelosdoselementoscontenedoresqueproveeBootstrap:containerócontainer-fluid.Esimportantetenerencuentaqueestoselementosseutilizancomoraízdelarejillaynosepodránanidarunosdentrodeotros.

Siloquequeremosesqueelcontenidodenuestrawebaparezcacentradoyconunanchofijoentoncespodemosutilizarlaetiqueta.container,delaforma:

<divclass="container">

...

</div>

Porelcontrario,siqueremosqueelcontenidodenuestrawebpuedaocupartodoelanchodisponible(hayquetenerenmentetodoslostamañosdepantalla,inclusolasmuygrandes),podemosusarlaetiqueta.container-fluid:

<divclass="container-fluid">

...

</div>

FuncionamientodelsistemaderejillaElsistemaderejillaestápensadoparaayudarnosenladisposicióndeloscontenidosdenuestrawebysuadaptaciónalosdiferentestamañosdepantalladeformaautomática.Paraellotenemosqueponerelcontenidodentrodeceldasocolumnasqueirándentrodefilas.Cadafilasepuededividirhastaen12columnas,peroseremosnosotroslosquedefiniremoselnúmerodecolumnasdeseadoparacadatamañodepantalla.

Acontinuaciónsedetallaelfuncionamientodeestesistema:

SistemadeRejilla

17

Lascolumnasiránagrupadasdentrodefilas(.row).

Lasfilas(.row)sedebencolocardentrodeunaetiquetacontenedora:.container(paraanchofijo)o.container-fluid(parapoderocupartodoelancho),estopermitiráalinearlasceldasyasignarleselespaciadocorrecto.

Elcontenidosedebedisponerdentrodecolumnasoceldas,lascualesdebendeserelúnicohijoposibledelasfilas(.row),lascuales,asuvez,seránelúnicohijoposibledelcontenedor(.containero.container-fluid).

Alseguiresteordenelsistemaderejillafuncionarácorrectamente,creandoelespaciadointeriorylosmárgenesapropiadosdependiendodelasdimensionesdelapantalla.

Cadafilasepuededividirhastaunmáximode12columnas,perosomosnosotroslosquetendremosquedefinirelnúmerodecolumnasenelquequeremosdividircadafilaysuanchoparacadatamañodepantalla.Porejemplo:3columnasdeigualancho.

Sieltamañototaldelascolumnasdeunafilaexcedede12eltamañosobrantesecolocaráenlasiguientefila.

EltamañodelascolumnasseespecificaráconclasescssqueBootstrapdefineparacadatamañodepantalla,porejemplo.col-md-XX,dondeXXeseltamañodelacolumna,quepodrátomarvaloresentre1y12.

EnlasiguientetablasemuestraunresumendelsistemaderejilladeBootstrap,sucomportamientosegúneltamañodeldispositivoylasclasesCSSquenospermitencontrolarlo:

Pantalla Prefijodelaclase Anchodelcontenedor

TamañoextrapequeñoTeléfonos(<768px) .col-xs- Ninguno(automático)

TamañopequeñoTablets(≥768px) .col-sm- 750px

TamañomedioEscritorios(≥992px) .col-md- 970px

TamañograndeEscritorios(≥1200px) .col-lg- 1170px

Esimportantedestacaraldefinirestasclasesnosoloseaplicanparaesetamañodepantallasinoparalossuperiorestambién.Porejemploalindicareltamañodelascolumnasconlasclasesparatablets(.col-sm-),tambiénseaplicaráparalostamañosdepantallamedianosygrandes(sinohubieranotrasclasesparaestostamañosquelossobreescribieran).

SistemadeRejilla

18

EjemplosAcontinuaciónseincluyenalgunosejemplosdeusodelsistemaderejillaquenosayudaránacomprendermejorsufuncionamiento.

Seleccióndetamañodelascolumnassoloparapantallasdeescritorio

Enelsiguienteejemplosehancreado3filas,laprimeradividida2columnasdetamañodesigual,lasegundaen3columnasdeigualtamañoylaterceraen2columnastambiéndeigualtamaño.

<divclass="row">

<divclass="col-md-8">.col-md-8</div>

<divclass="col-md-4">.col-md-4</div>

</div>

<divclass="row">

<divclass="col-md-4">.col-md-4</div>

<divclass="col-md-4">.col-md-4</div>

<divclass="col-md-4">.col-md-4</div>

</div>

<divclass="row">

<divclass="col-md-6">.col-md-6</div>

<divclass="col-md-6">.col-md-6</div>

</div>

Enlasiguienteimagensepuedeverelresultadoparaunapantallamediana(deescritorio):

Dadoquelascolumnassehanespecificadoúnicamentemediantelasclases.col-md-*estocrearáestasdivisionessoloparalaspantallasdeescritoriomedianasygrandes,peronoparalostamañosdepantallapequeños(tabletsymóviles).Enestosdosúltimoscasoslascolumnasseampliaránparaocupartodoelanchoyporlotantosemostraránapiladasdelaforma:

SistemadeRejilla

19

Seleccióndeltamañoparamóvilyescritorio

Sinoqueremosquelascolumnassemuestrenapiladasparatamañosdepantallapequeñospodemosindicartambiénladisposiciónparaesoscasosmediantelasclases.col-xs-*ademásdelasqueyateníamos.col-md-*.Porejemplo:

<!--Enpantallaspequeñasapareceráunacolumnaqueocuparátodoelancho

yotraqueocuparálamitaddelapantalla-->

<divclass="row">

<divclass="col-xs-12col-md-8">.col-xs-12.col-md-8</div>

<divclass="col-xs-6col-md-4">.col-xs-6.col-md-4</div>

</div>

<!--Enpantallaspantallasseindicaqueocupecadacolumnalamitad

delanchodisponible-->

<divclass="row">

<divclass="col-xs-6col-md-4">.col-xs-6.col-md-4</div>

<divclass="col-xs-6col-md-4">.col-xs-6.col-md-4</div>

<divclass="col-xs-6col-md-4">.col-xs-6.col-md-4</div>

</div>

<!--Comonoseindicaeltamañoparapantallasgrandeslascolumnas

siempreocuparánel50%-->

<divclass="row">

<divclass="col-xs-6">.col-xs-6</div>

<divclass="col-xs-6">.col-xs-6</div>

</div>

Enlasiguienteimagensepuedevercomoquedaríaelcódigodeejemploparapantallasmedianas(md)ygrandes(lg):

SistemadeRejilla

20

Enelcasodepantallaspequeñaslascolumnasseveríandelaforma:

Seleccióndeltamañoparamóvil,tabletyescritorio

Siqueremostenerunmayorcontrolpodemosespecificartambiéneltamañodelascolumnasparalaspantallastipotabletconlasclases.col-sm-*.Porejemplo:

<divclass="row">

<divclass="col-xs-12col-sm-6col-md-8">.col-xs-12.col-sm-6.col-md-8</div>

<divclass="col-xs-6col-md-4">.col-xs-6.col-md-4</div>

</div>

<divclass="row">

<divclass="col-xs-6col-sm-4">.col-xs-6.col-sm-4</div>

<divclass="col-xs-6col-sm-4">.col-xs-6.col-sm-4</div>

<divclass="col-xs-6col-sm-4">.col-xs-6.col-sm-4</div>

</div>

Acontinuaciónseincluyeunaprevisualizacióndeestecódigodeejemploparapantallasmedianasygrandes:

Elmismocódigoperoenpantallastipotabletsemostraríacomo:

SistemadeRejilla

21

Yenelcasodepantallaspequeñas(xs)severíadelaforma:

SistemadeRejilla

22

ForzarelcambiodefilaMediantelaclase.clearfixpodemosforzarelcambiodefilacuandonosotrosqueremos.Estaclasenospuedeserútilcuandoporejemplolasfilastenganunaltodistintooparaforzarelcambiodefilasoloparadeterminadostamañosdepantallamediantelacombinaciónconotrasclases(porejemplosiañadimosvisible-xs-blocksoloseproduciráesecambiodefilaparapantallaspequeñas).

<divclass="row">

<divclass="col-xs-6col-sm-3">.col-xs-6.col-sm-3</div>

<divclass="col-xs-6col-sm-3">.col-xs-6.col-sm-3</div>

<!--Addtheextraclearfixforonlytherequiredviewport-->

<divclass="clearfixvisible-xs-block"></div>

<divclass="col-xs-6col-sm-3">.col-xs-6.col-sm-3</div>

<divclass="col-xs-6col-sm-3">.col-xs-6.col-sm-3</div>

</div>

Enlasiguienteimagenpodemosverunejemploenelquenosehautilizadolaclase.clearfixydebidoaquelasdosprimerascolumnastienenunaltodistintolaprimeracolumnadelasiguientefilasecolocaenunaposiciónincorrecta:

Siañadimoslaclase.clearfixcomoenelcódigodeejemplopodemossolucionareseproblema,quedando:

Forzarelcambiodefila

23

AnidamientodecolumnasUnacaracterísticamuypotentedelsistemadecolumnasesquesepuedenanidarunasdentrodeotras,porejemplo,dentrodeunacolumnadetamaño9podemoscrearunanuevafilaysubdividirlacomoqueramos(igualquesifueraunafilanormal,conhasta12columnas).Acontinuaciónseincluyeunejemplo:

<divclass="row">

<divclass="col-sm-9">

Level1:.col-sm-9

<divclass="row">

<divclass="col-xs-8col-sm-6">

Level2:.col-xs-8.col-sm-6

</div>

<divclass="col-xs-4col-sm-6">

Level2:.col-xs-4.col-sm-6

</div>

</div>

</div>

</div>

Anidamientodecolumnas

24

MárgenesoespaciadoentrecolumnasEsposiblecrearunespaciadoentrelascolumnasodichodeotraforma,moverodesplazarunacolumnahacialaderecha,añadiendounoffsetinicialmediantelasclases:.col-*-offset-*.Porejemplocol-md-offset-4crearáunespacioalaizquierdadelacolumnadetamaño4(comosisecrearaunacolumnaocultadetipo.col-md-4).Enelsiguientecódigopodemosverunejemplomáscompleto:

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

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

<divclass="row">

<divclass="col-md-6col-md-offset-3">.col-md-6.col-md-offset-3</div>

</div>

Elcualserenderizaríadelaforma:

Sienalgúncasonecesitamoseliminareloffsetpodemosutilizareltamañocero(0).Porejemplo,siespecificamosunoffsetde2paratamañospequeñosynoqueremosquedichooffsetseapliqueparapantallasgrandesomediastendríamosquehacer:

<divclass="col-sm-5col-sm-offset-2col-md-7col-md-offset-0"></div>

Márgenesoespaciadoentrecolumnas

25

OrdenacióndecolumnasTambiénpodemosmodificarelordendelascolumnasmediantelasclases.col-*-push-*y.col-*-pull-*.Porejemplo,con.col-md-push-3"empujaríamos"lacolumna3espacioshacialaderechaycon.col-md-pull-3laempujaríamos3espacioshacialaizquierda.Acontinuaciónpodemosverunejemplo:

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

Elcualquedaríadelaforma:

Hayquetenercuidadoconestasclasessihayuncambiodefila(debidoaelnúmerodecolumnasocupemásde12),enestoscasosestasclasesnofuncionaráncorrectamente.

Siqueremosrestaurarlaposiciónpodemosutilizareltamañocero(0).Porejemplo,sihabíamosdesplazadolacolumnahacialaderechaparatamañosdepantallapequeñosyqueremosquenoseapliqueentamañosdepantallamedianosygrandespodríamosutilizarlaclasecol-md-push-0.

Ordenacióndecolumnas

26

UtilidadesResponsiveBootstraptambiénincluyeunaseriedeclasesparaayudarnosamostraruocultarcontenidossegúneltamañodeldispositivo.Acontinuaciónseincluyeunatablaresumendetodasestasclases:

ExtrapequeñoTeléfonos(<768px)

TamañopequeñoTablets(≥768px)

TamañomedioEscritorios(≥992px)

TamañograndeEscritorios(≥1200px)

.visible-xs-* Visible Oculto Oculto Oculto

.visible-sm-* Oculto Visible Oculto Oculto

.visible-md-* Oculto Oculto Visible Oculto

.visible-lg-* Oculto Oculto Oculto Visible

.hidden-xs Oculto Visible Visible Visible

.hidden-sm Visible Oculto Visible Visible

.hidden-md Visible Visible Oculto Visible

.hidden-lg Visible Visible Visible Oculto

Enelcasodelaclase.visible-*-*tenemoslaposibilidaddeindicarlaformaenlaquesemostraráelelementosobreelqueseaplique(losposiblesvaloressecorrespondenconlosquepuedeadoptarlapropiedaddisplaydeCSS).Porloquetendríamos:

Groupofclasses CSSdisplay

.visible-*-block display:block;

.visible-*-inline display:inline;

.visible-*-inline-block display:inline-block;

Porloqueparaporejemplolaspantallasextrapequeñas(xs)podríamosutilizarlasclases:.visible-xs-block,.visible-xs-inline,y.visible-xs-inline-block.Siendo.visible-xs-blocklamáscomúnyutilizada,paraporejemplomostrarunacolumnasoloanteun

Utilidadesresponsive

27

determinadotamañodepantalla.

NotasdeUsoHayquetenerencuentaquelasclasesvisible-*-*solosemostraránparaeltipodedispositivoindicado,esdecir,siporejemploindicamosqueuncamposoloesvisibleconlaetiquetavisible-md-blockdichocamponoaparecerápararesolucionesinferioresnitampocoparapantallastipolarge.

Porelcontrario,lasetiquetastipo.hidden-soloseocultaránelelementoparaeltamañoindicado,quedandovisibleparaelrestodetamaños.

Estasetiquetassondemuchautilidadparamejorarunawebresponsivepuesnosvanapermitircrearunmejordiseñoomaquetación.Normalmentenosinteresaráocultardeterminadoscontenidoscuandolapantallaseamuypequeñaomostrarcontenidosadicionalesparapantallasgrandes.

Porejemplo,imaginaosqueennuestrawebtenemosunaseriedeartículosyqueencadaunodeellosincluimosuntítulo,unsubtítulo,unaimagenyuntexto.Siporejemploquisieramosocultarelsubtítuloylaimagenparapantallasextrapequeñas(xs)símplementetendríamosqueañadirlaclase".hidden-xs"aestasetiquetas.Acontinuaciónseincluyeelcódigodeejemplo:

<divclass="article">

<h1>

Títulodelartículo

<smallclass="hidden-xs">Subtítulodelartículo</small>

</h1>

<imgsrc="/article-image.jpg"alt="articleimage"class="hidden-xs"/>

<p>

Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtempor

incididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quis

nostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.

</p>

</div>

Utilidadesresponsive

28

MediaqueriesEnlamayoríadeloscasosgraciasatodaslasclasesqueproveeBootstrapnosserásuficienteparacomponernuestraweb.Sinembargo,enalgunassituacionesesposiblequequeramosmodificardichocomportamiento,porejemploparaaplicardeterminadosestilosCSS(comocolores,alineaciones,etc.)quecambiensegúneltamañodepantalla.Enestoscasosseránecesarioquecreemosnuestrapropiamediaqueryparaaplicarlosestilosdeseados.

Unamediaquerysedefinedelaforma:

@media(min-width:TAMAÑO-EN-PÍXELES){

/*Losestilosaquícontenidossoloseaplicaránapartir

deltamañodepantallaindicado*/

}

Enestecaso,losestilosqueesténdentrodeestamediaqueryseaplicaránsoloapartirdeltamañoenpíxelesindicado.Ademásdeuntamañomínimopodemosindicareltamañomáximooelrangodetamañoenelqueseaplicarán,delaforma:

@media(max-width:TAMAÑO-EN-PÍXELES){

/*Estosestilossoloseaplicaránhastaeltamañoindicado*/

}

@media(min-width:TAMAÑO-EN-PÍXELES)and(max-width:TAMAÑO-EN-PÍXELES){

/*Soloseaplicaránentrelostamañosindicados*/

}

RecordamosquelosrangosquedefineBootstrapson:

Pantallasextrapequeñas(móviles)<768pxPantallaspequeñas(tablets)≥768pxPantallasmedianas(escritorio)≥992pxPantallasgrandes(escritorio)≥1200px

EjemplosdeusoSiporejemploqueremosqueenlaspantallasextrapequeñas(xs)elcolordefondoqueaplicalaclase.miestilosearojoyparaelrestodetamañosseaverde,podríamoshacer:

MediaQueries

29

.miestilo{

background-color:green;

}

@media(max-width:768px){

.miestilo{

background-color:red;

}

}

Osiporejemploqueremosvariarlaalineacióndeltextoqueseaplicaenunaclaseapartirdelaspantallastipoescritorio:

.miestilo{

text-align:center;

}

@media(min-width:992px){

.miestilo{

text-align:left;

}

}

EstossencillosejemplosnosmuestranlaideabásicaquetenemosqueseguirparacomplementarelcódigodeBootstrapparahacerquelawebsecomportecomonosotrosqueramos.Deestaformapodemosllegarahacercosasmuyavanzadasypersonalizarcompletamenteelaspectodeunawebsegúneltamañodeldispositivo.

Otrosejemplosdepersonalizacionesquepodemoshacerusandolasmediaqueriesson:

Cambiareltamañoylaposicióndeunaimagen.Porejemplohacerquelaimagendecabeceraseamuypequeñaparadispositivosmóvilesymuchomayorparapantallasdeescritorio.Cambiarlaposicióndecualquierelemento.Siporejemplotenemosunelementoquenosevebienconunaalineaciónenpantallaspequeñaspodemoscolocarloenotrolugar.Cambiareltamañodeletra,lafuenteosucolor.Podemosreducireltamañodeletradelascabecerasparapantallasxsoaumentarloparapantallasmásgrandes.Aplicarcombinacionesdeestilosavanzados.Porejemplo,podemoscrearunestilo".articulo"quesegúneltamañodepantallareajustetodalaaparienciadeunartículocontodosloselementosquecontenga.Cualquiercosaqueseosocurra!

MediaQueries

30

ComponentesresponsiveAdemásdelsistemaderejillaBootstrapincluyeuncompletoconjuntodecomponentesparafacilitarnosaúnmáseldiseñodeunawebresponsive.EstoscomponentesaplicanestilosaloselementosHTMLexistentesparacrearundiseñomásmodernoyademásadaptableatodoslosdispositivos.

Algunosdeestoscomponentesson:

BarrasdenavegaciónBotonesFormulariosTablasDesplegablesymuchosmás...

Acontinuaciónseexplicaelfuncionamientodeloscomponentesmásutilizados.

ComponentesResponsive

31

BotonesMediantelaclase.btnpodemosaplicarestiloaloselementostipobutton.Estaclaselapodemoscombinarcon.btn-default,.btn-primary,.btn-success,.btn-info,.btn-warning,.btn-danger,.btn-linkparacrearbotonesparadiferentesestadosoaccionesennuestrosformularios:

ElcódigoHTMLquetendríamosqueescribirparaconseguirestosbotoneseselsiguiente:

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

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

<buttontype="button"class="btnbtn-success">Success</button>

<buttontype="button"class="btnbtn-info">Info</button>

<buttontype="button"class="btnbtn-warning">Warning</button>

<buttontype="button"class="btnbtn-danger">Danger</button>

<buttontype="button"class="btnbtn-link">Link</button>

TamañodelosbotonesPodemosvariareltamañodelosbotonessimplementeañadiendolasclases.btn-lg,.btn-sm,o.btn-xs:

<p>

<buttontype="button"class="btnbtn-primarybtn-lg">Largebutton</button>

<buttontype="button"class="btnbtn-defaultbtn-lg">Largebutton</button>

</p>

<p>

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

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

</p>

<p>

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

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

</p>

<p>

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

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

</p>

Losbotonesdelcódigoanteriorsemostraríandelaforma:

Botones

32

ElementostipobotónElestilotipobotónnosololopodemosaplicarsobrelasetiquetasbuttonsinoquefuncionarádelamismaformacon<a>y<input>:

<aclass="btnbtn-default"href="#"role="button">Link</a>

<buttonclass="btnbtn-default"type="submit">Button</button>

<inputclass="btnbtn-default"type="button"value="Input">

<inputclass="btnbtn-default"type="submit"value="Submit">

Todosestoselementosserenderizarándelamismaforma:

Botones

33

DesplegablesBootstrapnosfacilitalacreacióndebotonesconlistasdeopcionesdesplegablesmediantelaclase.dropdown.EsteelementorequierequeelpluginJavaScriptdeBootstrapestéincluidoenlaplantilla.Laestructurabásicaparacrearunelementodeestetipoeslasiguiente:

<divclass="dropdown">

<buttonclass="btnbtn-defaultdropdown-toggle"type="button"id="dropdownMenu1"

data-toggle="dropdown"aria-expanded="true">

Dropdown

<spanclass="caret"></span>

</button>

<ulclass="dropdown-menu"role="menu"aria-labelledby="dropdownMenu1">

<lirole="presentation"><arole="menuitem"tabindex="-1"href="#">Action</a></li>

<lirole="presentation"><arole="menuitem"tabindex="-1"href="#">Anotheraction</a

></li>

<lirole="presentation"><arole="menuitem"tabindex="-1"href="#">Somethingelseh

ere</a></li>

<lirole="presentation"><arole="menuitem"tabindex="-1"href="#">Separatedlink</a

></li>

</ul>

</div>

Paraalinearunmenúaladerechasepuedeutilizarlaclase.dropdown-menu-right,porejemplo:

<ulclass="dropdown-menudropdown-menu-right"role="menu"aria-labelledby="dLabel">

...

</ul>

Encabezadosenundesplegable

Desplegables

34

Paraañadirunencabezadoydividirenseccionesundesplegablepodemosutilizarlaclase.dropdown-headerdelaforma:

<ulclass="dropdown-menu"role="menu"aria-labelledby="dropdownMenu2">

...

<lirole="presentation"class="dropdown-header">Dropdownheader</li>

...

</ul>

SeparadoresenundesplegableTambiénpodemosañadirseparadoresenundesplegablesimplementeutilizandolaclase.dividerdelaforma:

<ulclass="dropdown-menu"role="menu"aria-labelledby="dropdownMenuDivider">

...

<lirole="presentation"class="divider"></li>

...

</ul>

Desplegables

35

GruposdebotonesPodemoscrearungrupodebotonesenunalíneaagrupándolosdentrodeunelementocontenedorconlaetiqueta.btn-group.

<divclass="btn-group"role="group"aria-label="...">

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

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

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

</div>

MediantelalibreríaJavaScriptdeBootstrappodemosañadircomportamientostipocheckboxoradiobuttonaungrupodebotones.

BarradebotonesLabarradebotonesnospermitecombinargruposdebotonesparacrearcomponentesmásavanzados:

<divclass="btn-toolbar"role="toolbar"aria-label="...">

<divclass="btn-group"role="group"aria-label="...">...</div>

<divclass="btn-group"role="group"aria-label="...">...</div>

<divclass="btn-group"role="group"aria-label="...">...</div>

</div>

TamañosdelosgruposdebotonesLosgruposdebotonesnospermitenademásindicareltamañodelosbotonesparatodoelconjuntomediantelasetiquetas.btn-group-*:

<divclass="btn-groupbtn-group-lg"role="group"aria-label="...">...</div>

<divclass="btn-group"role="group"aria-label="...">...</div>

<divclass="btn-groupbtn-group-sm"role="group"aria-label="...">...</div>

<divclass="btn-groupbtn-group-xs"role="group"aria-label="...">...</div>

Gruposdebotones

36

GrupodebotonescondesplegablesTambiénesposibleañadirdesplegablesalosgruposdebotones.Paraestoeldesplegabletendráqueestarcontenidoasuvezdentrodeotrogrupodebotones,delaforma:

<divclass="btn-group"role="group"aria-label="...">

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

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

<divclass="btn-group"role="group">

<buttontype="button"class="btnbtn-defaultdropdown-toggle"data-toggle="dropdow

n"aria-expanded="false">

Dropdown

<spanclass="caret"></span>

</button>

<ulclass="dropdown-menu"role="menu">

<li><ahref="#">Dropdownlink</a></li>

<li><ahref="#">Dropdownlink</a></li>

</ul>

</div>

</div>

Comosepuedeobservarlaúnicadiferenciaconundesplegablenormalesquelaetiquetacontenedoraenvezdeserdetipo.dropdownesun.btn-group.

Gruposdebotones

37

FormulariosBootstrapaplicaestilosaloselementosdetipoformularioparamejorarsuaparienciaypermitirnoscreardiferentesalineaciones.Laestructurabásicadeunformularioeslasiguiente:

<formrole="form">

<divclass="form-group">

<labelfor="exampleInputEmail1">Emailaddress</label>

<inputtype="email"class="form-control"id="exampleInputEmail1"

placeholder="Enteremail">

</div>

</form>

ParapermitirqueBootstrapajustecorrectamenteelespaciado,cadabloqueogrupodeunformulario(normalmenteformadoporunaetiquetalabelyalgúnelementodeentradadedatoscomouninput,textarea,etc.)tendráqueestaragrupadoporunacajacontenedoraconlaclase.form-group.Ademásacadainputseletienequeaplicarlaclase.form-control.

BootstrapsobrecargayaplicaestilosalosprincipaleselementosdeformulariodefinidosenHTML5,comoson:text,password,datetime,datetime-local,date,month,time,week,number,email,url,search,tel,ycolor.

FormularioinlineMediantelautilizacióndelaclase.form-inlinesobrelaetiqueta<form>podemoscrearformulariosquesedispondránenunasolalínea.Acontinuaciónseincluyeunejemplodeestetipodeformularios:

Formularios

38

<formclass="form-inline"role="form">

<divclass="form-group">

<divclass="input-group">

<labelclass="sr-only"for="exampleInputEmail2">Emailaddress</label>

<divclass="input-group-addon">@</div>

<inputtype="email"class="form-control"id="exampleInputEmail2"placeholder="En

teremail">

</div>

</div>

<divclass="form-group">

<labelclass="sr-only"for="exampleInputPassword2">Password</label>

<inputtype="password"class="form-control"id="exampleInputPassword2"placeholder=

"Password">

</div>

<divclass="checkbox">

<label>

<inputtype="checkbox">Rememberme

</label>

</div>

<buttontype="submit"class="btnbtn-default">Signin</button>

</form>

Nota1:aunqueloscamposdelformularionocontenganetiquetas(labels)esnecesarioincluirlasporcuestionesdeaccesibilidad,paradarsoportealoslectoresdepantalla.Porestemotivosehanincluidoenelejemploanteriorconlaclase.sr-only(screenreadersonly).

Nota2:Esteestilonoseaplicaráenpantallaspequeñastipomóvil.

FormulariohorizontalMediantelacombinacióndelaclase.form-horizontalconelsistemaderejilladeBootstrappodemoscrearformularioshorizontalescomoenelejemplosiguiente:

Formularios

39

<formclass="form-horizontal"role="form">

<divclass="form-group">

<labelfor="inputEmail3"class="col-sm-2control-label">Email</label>

<divclass="col-sm-10">

<inputtype="email"class="form-control"id="inputEmail3"placeholder="Email">

</div>

</div>

<divclass="form-group">

<labelfor="inputPassword3"class="col-sm-2control-label">Password</label>

<divclass="col-sm-10">

<inputtype="password"class="form-control"id="inputPassword3"placeholder="Pas

sword">

</div>

</div>

<divclass="form-group">

<divclass="col-sm-offset-2col-sm-10">

<divclass="checkbox">

<label>

<inputtype="checkbox">Rememberme

</label>

</div>

</div>

</div>

<divclass="form-group">

<divclass="col-sm-offset-2col-sm-10">

<buttontype="submit"class="btnbtn-default">Signin</button>

</div>

</div>

</form>

Esimportantequenosfijemosquenoseutilizanlasclases.rowparacrearfilas,yaquesonsustituidaspor.form-groups.Además,podemosaplicarlaclasedelascolumnasparalasetiquetaslabeldirectamentesobredichoelemento,sinnecesidaddecrearunacajacontenedora.

Estadosdevalidacióndeunformulario

Formularios

40

Bootstraptambiénincluyeclasesparaaplicardiferentesestadosdevalidaciónaunformulario.Parautilizarlosimplementetenemosqueañadirlasclases:.has-warning,.has-error,o.has-successalelementocontenedor,enestecasoa.form-group.Deestaforma,elcolordeloselementosdelformulariodedichogrupocambiarán.Acontinuaciónpodemosverunejemplo:

<divclass="form-grouphas-success">

<labelclass="control-label"for="inputSuccess1">Inputwithsuccess</label>

<inputtype="text"class="form-control"id="inputSuccess1">

</div>

<divclass="form-grouphas-warning">

<labelclass="control-label"for="inputWarning1">Inputwithwarning</label>

<inputtype="text"class="form-control"id="inputWarning1">

</div>

<divclass="form-grouphas-error">

<labelclass="control-label"for="inputError1">Inputwitherror</label>

<inputtype="text"class="form-control"id="inputError1">

</div>

AgruparinputsconotroselementosPodemosañadirtextoobotonesalprincipio,finaloaambosladosdecampotipo<input>.Paraestotenemosqueagrupardichoinputdentrodeun.input-groupyañadirdentrodelgrupoelelementoquequeremosagruparconlaetiqueta.input-group-addon.Acontinuaciónseincluyeunejemplo:

Formularios

41

<divclass="input-group">

<spanclass="input-group-addon">@</span>

<inputtype="text"class="form-control"placeholder="Username">

</div>

<divclass="input-group">

<inputtype="text"class="form-control">

<spanclass="input-group-addon">.00</span>

</div>

<divclass="input-group">

<spanclass="input-group-addon">$</span>

<inputtype="text"class="form-control">

<spanclass="input-group-addon">.00</span>

</div>

Formularios

42

NavegaciónLoselementosdenavegacióndeBootstrapcompartenlaetiqueta.navparasumarcadoenlaclasecontenedora.EstoselementosnecesitanlalibreríaJavaScriptparasucorrectofuncionamiento.Algunosdeloselementosdenavegaciónquepodemosutilizarsonlasfichasopestañasylas"píldoras".

FichasopestañasMediantelaclase.nav-tabspodemoscrearungrupodepestañasofichas,paraellotenemosqueseguirlasiguienteestructura:

<divrole="tabpanel">

<ulclass="navnav-tabs">

<lirole="presentation"class="active">

<ahref="#home"aria-controls="home"role="tab"data-toggle="tab">Home</a>

</li>

<lirole="presentation">

<ahref="#profile"aria-controls="profile"role="tab"data-toggle="tab">Pr

ofile</a>

</li>

<lirole="presentation">

<ahref="#messages"aria-controls="messages"role="tab"data-toggle="tab">

Messages</a>

</li>

</ul>

<!--Tabpanes-->

<divclass="tab-content">

<divrole="tabpanel"class="tab-paneactive"id="home">...</div>

<divrole="tabpanel"class="tab-pane"id="profile">...</div>

<divrole="tabpanel"class="tab-pane"id="messages">...</div>

</div>

</div>

Píldoras

Navegación

43

Laclase.nav-pillssedefinedeigualformaquela.nav-tabperosuselementosadoptaránunaaparienciamássimilarabotoneso"píldoras":

<ulclass="navnav-pills">

<lirole="presentation"class="active"><ahref="#">Home</a></li>

<lirole="presentation"><ahref="#">Profile</a></li>

<lirole="presentation"><ahref="#">Messages</a></li>

</ul>

Enestecasotambiénpodemoscrearunmenúverticaloapiladoañadiendolaclase.nav-stackedalaetiquetacontenedora:

<ulclass="navnav-pillsnav-stacked">

...

</ul>

Justificado

Tambiénpodemosindicarqueelanchodelaspestañasodelaspíldorassedistribuyaequitativamentesegúnelanchodisponible.Paraestosimplementetenemosqueaplicarlaclase.nav-justifiedalaetiquetacontenedora,delaforma:

<ulclass="navnav-tabsnav-justified">

...

</ul>

<ulclass="navnav-pillsnav-justified">

...

</ul>

Navegación

44

Nota:Esteestilonofuncionaráparapantallasconunanchomenora768px,quesonlaspantallasdefinidascomoextrapequeñasodesmartphone.

Elementosdenavegacióncondesplegables

Podemosañadirdesplegablesanuestroselementosdenavegacióndelaforma:

<ulclass="navnav-tabs">

...

<lirole="presentation"class="dropdown">

<aclass="dropdown-toggle"data-toggle="dropdown"href="#"role="button"aria-expa

nded="false">

Dropdown<spanclass="caret"></span>

</a>

<ulclass="dropdown-menu"role="menu">

...

</ul>

</li>

...

</ul>

Navegación

45

BarradenavegaciónBootstrapnosfacilitalacreacióndelabarraprincipaldenavegacióndenuestrawebmediantelaclase.navbar.Estabarraseadaptaráaltamañodepantalla,mostrandoloselementoscolapsadosenunbotónenpantallaspequeñasydeformanormalparapantallasmásgrandes.

EsteelementorequierequeelplugindeJavaScriptdeBootstrapestéincluido.Además,paracumplirconlasreglasdeaccesibilidadserecomiendaañadirrole="navigation"anuestrasbarrasdenavegación.

Acontinuaciónseincluyeunejemplocompletodeunabarradenavegación:

<navclass="navbarnavbar-default"role="navigation">

<divclass="container-fluid">

<!--Brandandtogglegetgroupedforbettermobiledisplay-->

<divclass="navbar-header">

<buttontype="button"class="navbar-togglecollapsed"

data-toggle="collapse"data-target="#bs-example-navbar-collapse-1">

<spanclass="sr-only">Togglenavigation</span>

<spanclass="icon-bar"></span>

<spanclass="icon-bar"></span>

<spanclass="icon-bar"></span>

</button>

<aclass="navbar-brand"href="#">Brand</a>

</div>

<!--Collectthenavlinks,forms,andothercontentfortoggling-->

<divclass="collapsenavbar-collapse"id="bs-example-navbar-collapse-1">

<ulclass="navnavbar-nav">

<liclass="active"><ahref="#">Link<spanclass="sr-only">(current)</span></a>

</li>

<li><ahref="#">Link</a></li>

<liclass="dropdown">

<ahref="#"class="dropdown-toggle"data-toggle="dropdown"role="button"

aria-expanded="false">Dropdown<spanclass="caret"></span>

</a>

<ulclass="dropdown-menu"role="menu">

<li><ahref="#">Action</a></li>

<li><ahref="#">Anotheraction</a></li>

<li><ahref="#">Somethingelsehere</a></li>

<liclass="divider"></li>

<li><ahref="#">Separatedlink</a></li>

<liclass="divider"></li>

<li><ahref="#">Onemoreseparatedlink</a></li>

</ul>

</li>

Barradenavegación

46

</ul>

<formclass="navbar-formnavbar-left"role="search">

<divclass="form-group">

<inputtype="text"class="form-control"placeholder="Search">

</div>

<buttontype="submit"class="btnbtn-default">Submit</button>

</form>

<ulclass="navnavbar-navnavbar-right">

<li><ahref="#">Link</a></li>

<liclass="dropdown">

<ahref="#"class="dropdown-toggle"data-toggle="dropdown"role="button"

aria-expanded="false">Dropdown<spanclass="caret"></span>

</a>

<ulclass="dropdown-menu"role="menu">

<li><ahref="#">Action</a></li>

<li><ahref="#">Anotheraction</a></li>

<li><ahref="#">Somethingelsehere</a></li>

<liclass="divider"></li>

<li><ahref="#">Separatedlink</a></li>

</ul>

</li>

</ul>

</div><!--/.navbar-collapse-->

</div><!--/.container-fluid-->

</nav>

Lacualsemostraríacomoenlasiguientefiguraenpantallasmedianasygrandes:

Enlaspantallasdesmartphoneloselementosdenavegaciónsecolapsaríanenunbotón,delaforma:

ImagenenlabarradenavegaciónParaincluirellogotipodenuestrawebenlabarradenavegacióntenemosquemodificarlasecciónnavbar-headerdelejemploanteriorparaincluirlaetiqueta<img>,delaforma:

Barradenavegación

47

<navclass="navbarnavbar-default"role="navigation">

<divclass="container-fluid">

<divclass="navbar-header">

<aclass="navbar-brand"href="#">

<imgalt="Brand"src="...">

</a>

</div>

</div>

</nav>

Nota:Esposiblequeseanecesarioañadiromodificarlosestilosparadisponercorrectamentelaimagenenlabarradenavegación.

AlineacióndeloselementosdelabarraMediantelasclases.navbar-lefty.navbar-rightpodemosindicarlaalineacióndeloselementosenlabarradenavegación,yaseanenlaces,botones,textooformularios.

BarradenavegaciónconformularioPodemosañadirunformularioanuestrabarradenavegaciónañadiendolaclase.navbar-formalaetiquetadelformulario,estoharáquesealineecorrectamenteysecolapseenpantallaspequeñas.Deformaopcionalpodemosutilizarlasclases.navbar-lefto.navbar-rightparaindicarsualineaciónenlabarra.

<formclass="navbar-formnavbar-left"role="search">

<divclass="form-group">

<inputtype="text"class="form-control"placeholder="Search">

</div>

<buttontype="submit"class="btnbtn-default">Submit</button>

</form>

Fijarlabarraalapartesuperior

Barradenavegación

48

Podemosfijarlabarraalapartesuperiordelapantallasimplementeañadiendolaclase.navbar-fixed-topjuntoalasclasesnavbarnavbar-default.Ademáspodemosindicarladisposicióndeloselementosdelabarraañadiendounaclasecontenedoradelostipos.containero.container-fluidparaqueaparezcancentradosoparaqueocupentodoelancho,respectivamente.

<navclass="navbarnavbar-defaultnavbar-fixed-top"role="navigation">

<divclass="container">

...

</div>

</nav>

Dadoquelabarrasecolarádeforma"flotante"sobreelcontenidoesposiblequeoculteunapartedelmismo.Parasolucionarestoesnecesarioañadirunpequeñoespaciadoinicialalaetiqueta<body>.Elaltodelabarraesde50px,porloquesesuelerecomendarunespaciadode70px,delaforma:

body{padding-top:70px;}

BarrafijaenlaparteinferiorTambiénpodemoscrearunabarradenavegaciónquepermanezcafijaenlaparteinferiordelapantalla.Paraestosimplementetenemosqueañadirlaclase.navbar-fixed-bottomanuestrabarra.Ademáspodemosañadiruncontenedordelostipos.containero.container-fluidparaindicarladisposicióndeloselementos.

<navclass="navbarnavbar-defaultnavbar-fixed-bottom"role="navigation">

<divclass="container">

...

</div>

</nav>

Enestecasotambiénseránecesariomodificarelespaciadodelaetiqueta<body>peroporlaparteinferior,paraquelabarranooculteloscontenidos.

body{padding-bottom:70px;}

Barradenavegaciónprincipal

Barradenavegación

49

Paracrearlabarradenavegaciónprincipaldenuestrositioserecomiendaañadirlaclase.navbar-static-topparaqueocupetodoelanchoposible.Estonospermitirádefinirsiqueremosqueelcontenidoaparezcacentradoconunaclasecontenedoratipo.containeroqueporelcontrarioocupetodoelanchoposiblecon.container-fluid.

<navclass="navbarnavbar-defaultnavbar-static-top"role="navigation">

<divclass="container">

...

</div>

</nav>

ColoresinvertidosPodemosinvertirloscoloresdelabarraañadiendolaclase.navbar-inverse:

<navclass="navbarnavbar-inverse"role="navigation">

...

</nav>

Barradenavegación

50

TablasBootstraptambiéndefineunaseriedeclasesparaaplicarestilossobrelastablasdeHTML.Lamásbásicaeslaclase.table:

<tableclass="table">

...

</table>

Coloresalternos

Siademásaplicamoslaclase.table-stripedanuestratablaconseguiremosquelasfilaspresentencoloresalternos:

<tableclass="tabletable-striped">

...

</table>

Tablasconbordes

Tambiénpodemosdibujarunbordealrededordelatablaañadiendolaclase.table-bordered,delaforma:

<tableclass="tabletable-bordered">

...

</table>

Tablas

51

TablasResponsive

Bootstrapproporcionaunaformadecreartablasresponsivequesebasaencrearunscrollhorizontalparaqueseveancorrectamente.Paraqueestofuncionetenemosquecrearunacajacontenedoraanuestratablaconlaclase.table-responsive:

<divclass="table-responsive">

<tableclass="table">

...

</table>

</div>

Nota:esteefectoseaplicaráúnicamentesobredispositivospequeños(<768px)mientrasqueenelrestodedispositivosnosenotaráladiferencia.

Tablas

52

Ejercicios1

Ejercicio1-Diseñoresponsive(1punto)EnesteejerciciovamosapracticarconlalibreríaBootstrapysusistemaderejilla.Partiremosdelaplantillaparaunapáginawebbásicafacilitadaenlateoría,leañadiremosuncontenedordetipocontainereiremosañadiendofilasycolumnasintentandoimitareldiseño(ycolores)delesquemadelasiguientefigura:

Enelesquemadelafigurasepuedenvertresdisposicionesdelamismaweb,ladelaizquierdaserefierealostamañosgrandes(lg)ymedianos(md),ladisposicióncentralaltamañopequeñoodetablets(sm)yladeladerechalacorrespondienteamóviles(xs).

TenéisqueaplicarlasclasesdeBootstrapnecesariasparaquealcambiareltamañodelapantallasecambieladisposicióndelosbloquescomosemuestraenelesquema.Tenedencuentaquelacolumnarojatendráquedesaparecercuandoeltamañoseaextrapequeño(xs).

Ejercicio2-Offsetyordenación(1punto)

Ejercicios1

53

EnesteejerciciovamosapracticarconalgunascaracterísticasmásdeBootstrap:laposibilidaddeañadirunoffset(oespacioinicialalascolumnas),elcambiodeordendeloselementosdeunafilaylavisibilidaddelascolumnassegúneltamañodeldispositivo.

Paraellonoscrearemosunanuevapáginawebpartiendodelaplantillabásica,leañadiremosuncontendordetipocontainereiremosañadiendofilasycolumnasintentandoimitareldiseño,coloresycontenidosdelesquemadelasiguientefigura:

Tenedencuentaque:

Lasegundafila(quecontiene4columnasconlosnúmeros1,2,3y4)essolamenteunafilaalaqueselehanañadidooffsets.Paraforzarelcambiodefilasepuedeañadirunelementoentrela2ªyla3ªcolumnaquesoloseavisiblecuandolapantallaseamedianaogrande(mdolg)yqueapliquelaclaseclearfixdeBootstrap.Elordendelatercerafila(conlasletrasa,b,c,d)sehaalteradoparalasdisposicionesdepantallagrandes(mdolg)usandolasclasesdebootstrapcol-*-push-*ycol-*-pull-*.Enla5ªfilanaranjasehaaplicadouncambiodeordenyunoffsetparalaspantallasgrandesymedianas(mdolg).Además,cuandolapantallaseadetipoxssedeberádeocultarunadesuscolumnas.LafilaazulclaroenlaqueponeDesktop(parapantallaslgomd),Tablet(parasm)yMobile(cuandolapantallaesxs)enrealidadson3filasdistintasconclasesparaquesolosemuestrenendichostamañosdepantalla.Laúltimafilasedeberádeocultarsolamentecuandolapantallaseadeltipoxs.

Ejercicio3-Personalizandomediantemediaquery(1punto)

Ejercicios1

54

EnesteejerciciosepidequecreéisunanuevapáginawebusandolalibreríaBootstrap.Elcontenidoaparecerácentradoenlapantallayconstarádetresfilasconelsiguientecontenidoydisposicióncuandolapantallaseadetamañomedio(md)ygrande(lg):

Unafilaenlapartesuperiorconunaúnicacolumnaconfondoverdequeocuparátodoelancho,endichacolumnaapareceráeltexto"Header"alineadoalaizquierdayengrande.Unasegundafilacontrescolumnasencolorrojoconelmismoanchoyconlosnúmeros1,2y3(respectivamente)centradosyenletrasgrandes.Latercerayúltimafilacontendrádoscolumnasdeigualanchoyencoloramarillo,laprimeracolumnatendráeltexto"footer1"alineadoaladerechaylasegundaeltexto"footer2"alineadoalaizquierda(ambosusandountamañodefuentegrande).

Enlasiguienteimagensepuedeverunesquemadelawebarealizar:

Comosepuedeverenelesquemadelaimagenladisposicióndelascolumnasylaalineacióndelostextosvariarádependiendodeltamañodelapantalla.Tenéisquereproducirestecomportamientoparaquelaaparienciadelawebseasimilaralesquema(númerodecolumnas,alineacionesdelostextosycolores)cuandoeltamañodelapantallasealadeuntablet(sm)oladeunteléfono(xs).

Tenedencuentaque:

SiemprequeseaposibleseutilizaránlasclasesqueproveeBootstrap.Cuandonoseaposible(porejemploparacontrolarlaalineacióndelostextosyelcambiodecolordefondo)tendréisquedefinirunamediaqueryquelohaga.

Ejercicios1

55

Ejercicios2

Ejercicio1-CrearunaWebresponsive(3puntos)ParaponerenprácticalosconceptosteóricosvistossobrediseñoresponsiveseproponecomoejerciciolacreacióndeunpequeñositioWebestáticoqueuselosestilosycomponentesvistosdeBootstrap.

Latemática,contenidosyestilosdelsitiosonlibres,perodeberáteneralmenoslassiguientescaracterísticas:

Elsitioestaráformadoporalmenos3páginasenlazadasentresí(concontenidosestáticos).Sercompletamenteresponsive,deformaqueseadaptetantoapantallasextrapequeñasdesmartphonecomoatabletsypantallasmásgrandesdeportátilesydeescritorio.Tenerunabarradenavegaciónprincipalquesecontraigacuandolapantallaseapequeña.Estabarratendráalmenos:

dosenlaces,unaimagencomologotipo,unbuscador(aunquenoseafuncional).

Contenerlossiguienteselementos(unejemplodecadaunoenalgunadelaspáginasdelsitioweb):

botones,undesplegable,unasecciónconfichasopestañas,unformulariohorizontal,unatablaresponsiveconbordesydetipostriped.

ElestilobaseautilizarseráelquedefineBootstrap,sisedefinenestilosCSSpersonalizadostendránqueestarenunficheroseparado,llamado"custom.css",yqueserácomúnparatodaslaspáginasdelsitio.

Unposibleejemplodeunawebquepodéisrealizarsería,porejemplo,unawebderecetas.Estapodríatenerunapáginaprincipalconlainformaciónmásimportante,unapáginaconunarecetadeejemplo(aquísepodríanutilizarlasfichasopestañasparacambiarentre

Ejercicios2

56

elaboracióneingredientes,loscualespodríanestarenunatabla)yotrapáginaparaelenvíoderecetas(conunformulariohorizontal,botonesparaenvíarycancelar,yundesplegableparaelegirlacategoría).

Deformasimilarsepodríacrearlawebsobrecochesuotrotipodevehículos,mascotas,bicicletas,etc.

Nota:alserunawebestáticatendréisquerepetirpartesdelcódigoentodaslaspáginas,porejemplolabarrademenúprincipaltendráqueserigualentodaslaspáginas.Porestemotivoserecomiendarealizarprimeroestaspartesyunavezprobadascopiarypegarelcodigoenelrestodepáginas.

Ejercicios2

57

Bibliografíahttp://getbootstrap.com/

PáginaoficialdeBootstrapdesdedondedescargarlalibreríayconsultartodaladocumentación.

http://blog.getbootstrap.com/

ElblogoficialdeBootstrapdondesepublicanlasúltimasnovedades.

TemasyplantillasgratuitasparaBootstrap:http://startbootstrap.com/http://bootstrapzero.com/http://bootswatch.com/http://www.bootbundle.com/

http://bootsnipp.com

EjemplosytrozosdecódigoútilesparaBootstrap.Aquípodrásencontrarcientosdeejemplos,desdecomohacerunformulariodeloginhastatodotipodeelementosconanimacionesoestilosavanzados.

http://expo.getbootstrap.com/

EjemplosinspiradoresdeusodeBootstrap.

http://startbootstrap.com/bootstrap-resources/

ListadocompletísimocontodotipoderecursosdisponiblesparaBootstrap.

Bibliografía

58