Post on 06-Jul-2020
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