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