Table of Contents - catalinatics5.webnode.com.co · las páginas web se visualizan en multitud de...

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

1.4.6

1.4.7

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

TableofContentsContenidos

Introducción

Frameworksresponsive

Funcionamientodeldiseñoadaptable

Probandoelresponsive

Páginabásica

Sistemaderejilla

Columnasdeanchoespecífico

Columnasdeanchoautomático

Forzarelcambiodefila

Anidamientodecolumnas

Márgenesoespaciadoentrecolumnas

Ordenacióndecolumnas

Alineación

UtilidadesResponsive

MediaQueries

ComponentesResponsive

Botones

Desplegables

Gruposdebotones

Formularios

Navegación

Barradenavegación

Tablas

Ejercicios1

Ejercicios2

Bibliografía

1

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

2

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

3

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

4

BostonGlobe

FoodSense

Introducción

5

Derenkeskin

Introducción

6

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


7

http://getbootstrap.com/

http://foundation.zurb.com/

http://getskeleton.com/

http://html5boilerplate.com/

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.


8

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


9

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/


10

http://www.w3.org/TR/css3-mediaqueries/


11

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


12

http://www.responsinator.com

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.


13

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,shrink-to-fit=no">

Lapropiedadwidthcontrolaeltamañodelviewport.Puededefinirseconunnúmeroenpixelescomowidth=600oconunvalorespecialcomodevice-widthqueeselequivalentealanchodelapantallaenpíxelesdeldispositivoquecarguelaweb.Elatributoshrink-to-fit="no"configuraestemismocomportamientoparalosnavegadoresSafarianterioresalaversión9.

Lapropiedadinitial-scaledelviewportcontrolaelniveldezoomcuandolapáginasecargaporprimeravez.Laspropiedadesmaximum-scale,minimum-scale,yuser-scalablecontrolanlaformaencómosepermitealosusuariosaumentarodisminiuirelzoomenlapágina.Siañadimosalaetiquetametadel_viewport_elatributouser-scalable=no(comosepuedeverenelejemploinferior)podemosdeshabilitarelzoomparadispositivosmóviles.Deestaformalosusuariosúnicamentepodránusarelscrolldelaaplicación,haciendotuwebmássimilaraunaaplicaciónnativa.Sinembargo,hayqueusarestacaracterísticaconcuidadoyaquenoesrecomendableparatodoslossitios.

<metaname="viewport"content="width=device-width,initial-scale=1,shrink-to-fit=no",maximum-scale=1,user-scalable=no">

AcontinuaciónseincluyelaplantillaHTMLbaseparacualquierproyectoconBootstrap,apartirdelacualsetendránqueirañadiendoelrestodeelementos:

Páginabásica

14

<!doctypehtml><htmllang="en"><head><title>Hello,world!</title><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1,shrink-to-fit=no">

<linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"crossorigin="anonymous"></head><body><h1>Hello,world!</h1>

<scriptsrc="https://code.jquery.com/jquery-3.2.1.slim.min.js"integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"crossorigin="anonymous"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"crossorigin="anonymous"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"crossorigin="anonymous"></script></body></html>

ComosepuedeverhemosañadidolaetiquetametadecabecerayhemoscargadolahojadeestilodeBootstrapylaslibreríasJavascriptquevamosanecesitar(JQuery,BootstrapyPopper).Tambiénhemosañadidolaetiquetah1con"Helloworld!dentrodelcuerpodelaweb,queserádondepodremosempezaraescribirelcontenidodenuestrositiowebresponsive.

Páginabásica

15

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>

Enlassiguientesimágenesseejemplificaelresultadoobtenidoparaunmismoanchoalaplicarlosdostiposdecontenedores,containerenelprimercasoycontainer-fluidenelsegundo.Elcomportamientodeestoselementosantedistintostamañosdepantallaeselsiguiente:elelemento"container-fluid"siempreseadaptaal100%deltamañodelapantalla,mientrasqueeltipo"container"tieneuntamañomáximo,porloquesielanchodelapantallaessuperioraesteanchoelcontenidoaparecerácentrano,dejandounmargenacadalado,ysielanchodelapantallaesigualoinferioraltamañomáximodelcontenedor,entoncesseadaptaráalanchodisponible.

Sistemaderejilla

16

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

Acontinuaciónsedetallaelfuncionamientodeestesistema:

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.

Sistemaderejilla

17

EnlasiguientetablasemuestraunresumendelsistemaderejilladeBootstrap,sucomportamientosegúneltamañodeldispositivoylasclasesCSSquenospermitencontrolarlo:

Pantalla Dimensiones Prefijodelaclase

Anchodelcontenedor

Tamañoextrapequeño <576px .col- Ninguno(automático)

Tamañopequeño ≥576px .col-sm- 540px

Tamañomedio ≥768px .col-md- 720px

Tamañogrande ≥992px .col-lg- 960px

Tamañoextragrande ≥1200px .col-xl- 1140px

Esimportantedestacarquealdefinirestasclasesnosoloseaplicanparaesetamañodepantallasinoparalossuperiorestambién.Porejemplo,alindicareltamañodelascolumnasconlasclasesparatablets(.col-sm-),tambiénseaplicaráparalostamañosdepantallamedianosygrandes(sinohubieranotrasclasesparaestostamañosquelossobreescribieran).Esdecir,nostenemosquefijarqueenlatablaanterioreltamañoseindicaconelsímbolodemayoroigual(≥)(odemenorparaelcasodexs)auntamañodado,yporlotantoseaplicaráesadisposiciónapartirdeesetamaño,anoserqueseindiqueotracosa.

Bootstrapestádiseñadopensandoenlosdispositivosmóvilesprimero(ocomoellosindican:siguiendolaestrategiamobilefirst).Porlotantotodoslostamañosydimensionesestánpensadasparalosdispositivosmóviles,yparatamañosmásgrandesloquehacenesadaptaroescalarestostamaños.

Sinosfijamosenlatablaanteriorpodremosverqueparaeltamañoextrapequeñoelprefijodelaclasequesedefinees".col-"(adiferenciadelosdemásqueañadenunsufijoparaeltamañodepantalla).Cuandoindiquemoseltamañodelascolumnasusandoestaclaseseaplicaráparatodoslostamaños,anoser,comoyahemosdicho,queseindiqueotraclaseparaotrotamañomayorquedefinaotradisposición.

Acontinuaciónveremosdiferentesformasdeindicarelnúmerodecolumnasqueconformancadafila,usandoelsistemaautomático,especificandoelanchoobienusandounsistemamixto.

Sistemaderejilla

18

ColumnasdeanchoespecíficoAcontinuaciónseincluyenalgunosejemplosdeusodelsistemaderejillaquenosayudaránacomprendermejorsufuncionamiento.

Seleccióndetamañodelascolumnassoloparapantallasmedianas

Enelsiguienteejemplosehancreado3filas,laprimeradivididaen2columnasdetamañ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>

Enlasiguienteimagensepuedeverelresultadoparapantallasdetamañomediano(tamañosdemdenadelante):

ParapodervisualizarlascolumnassehaañadidounaclaseCSSqueestablececolorparaelbordeyelfondodelascajas.Pordefecto,nilaetiquetaDIVnilasetiquetas.col-*establecenapariencia(nicolordebordenidefondo),solamenteestablecenlaanchura,yporlotantoalrenderizarelcódigoanteriortalcuallascajasseverántransparentes.


19

Dadoquelascolumnassehanespecificadoúnicamentemediantelasclases.col-md-*estocrearáestasdivisionessoloparalaspantallasmedianasygrandes,peronoparalostamañosdepantallamáspequeños.Enesteúltimocasolascolumnasseampliaránparaocupartodoelanchoyporlotantosemostraránapiladasdelaforma:

Seleccióndedostamañosdecolumna:pequeñoymediano

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

<divclass="row"><divclass="col-12col-md-8">.col-12.col-md-8</div><divclass="col-6col-md-4">.col-6.col-md-4</div></div>

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

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


20

Enlasiguienteimagensepuedevercomoquedaríaelcódigodeejemploparapantallasmedianasygrandes(tamañosdemdenadelante):

Enelcasodepantallaspequeñaslascolumnasseveríandelaforma:

Seleccióndetrestamaños:extrapequeño,pequeñoymediano

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

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

Acontinuaciónseincluyeunaprevisualizacióndeestecódigodeejemploparapantallasmedianasygrandes(tamañosmd,lgyxl):

Elmismocódigoperoenpantallastiposmall(tamañosm)semostraríacomo:


21

Yenelcasodepantallaspequeñasseveríadelaforma:

Ademásdelostrestamañosindicadosenesteúltimoejemploparalaprimeracolumna(.col-12.col-sm-6.col-md-8)podríamosañadirtambién,silonecesitamos,eltamañoparapantallasgrandesyextragrandesconcol-lgycol-xl-.Porejemplo,podríamoshaberdefinidolasiguientecolumna:

<divclass="col-12col-sm-6col-md-8col-lg-9col-xl-10">...</div>

Enresumen,podemosindicarparacadacolumnatodoslostamañosquequeramosdeentrelosdisponibles(con.col-,.col-sm-,.col-md-,.col-lg-y.col-xl-).Sinembargo,estosololotendremosquehacercuandonecesitemosestablecerunanchodecolumnadistintoparacadatamañodepantalla.Siparatodoslostamañosdepantallanecesitamoselmismoanchoentoncesutilizaremossolamentelaclase.col-.Esdecir,notendríasentidoescribiralgocomo"col-6col-sm-6col-md-6col-lg-6col-xl-6",yaqueseconseguiríaelmismoefectoquesihubieramospuestosolamente"col-6".

Porlotanto,soloañadiremosmásdeunaclasecuandonecesitemosestableceranchosdistintosentreesostamaños,yademássisolovamosadiferenciarentre2tamañossoloseránecesariousar2etiquetas.Porejemplosiqueremosdiferenciarsolamenteentremovilyescritoriosolamentetendríamosqueañadirlaclase.col-ylaclase.col-md-.


22

ColumnasdeanchoautomáticoApartirdelaversión4deBootstrappodemosutilizarlascolumnasdeanchoautomático,esdecir,indicarúnicamenteelnúmerodecolumnasquequeremosyelsistemacalcularáautomáticamentesuanchura.Paraestopodremosusarlaclase".col",sinnúmerodecolumnasnitamañodepantalla,porejemplo:

<divclass="container"><divclass="row"><divclass="col">1of2</div><divclass="col">2of2</div></div><divclass="row"><divclass="col">1of3</div><divclass="col">2of3</div><divclass="col">3of3</div></div></div>

Conestecódigoobtendríamosunresultadosimilaraldelasiguientefigura,dondeenprimerlugarsecreaunafilacondoscolumnadeigualancho,yacontinuaciónseañadeunasegundafilacontrescolumnasdeigualancho.

Elnúmerodecolumnasdelejemploanteriorsemantendráparatodoslostamañosdepantalla,adaptandoelanchodelascolumnasparacadaunodeellos.

Aestaclasepodemosañadirelsufijoparaestablecereltamañodepantalla,porloquedisponemosdelasclases.col,.col-sm,.col-md,.col-lg,.col-xl.Entodosloscasosestaremosindicandoquequeremosunacolumnadeanchoautomáticodesdeeltamañodepantallaindicadoenadelante.Debemosdetenerencuentaquesiindicamosalgocomo<divclass="colcol-smcol-md">elresultadoqueobtendríamosseríaelmismoentodoslostamaños,unacolumnadeanchoautomático,equivalenteahaberindicadoúnicamente<divclass="col">.Porlotanto,elusodeestossufijossolosejusticarácuandoqueramosunacolumnadeanchoautomáticosolamentedeuntamañoenadelante,yqueporlotanto,paralostamañosinferioressecreeunacolumnaqueocupetodoelancho.Porejemplo,veamoselsiguientecódigo:


23

<divclass="row"><divclass="col-sm">col-sm</div><divclass="col-sm">col-sm</div><divclass="col-sm">col-sm</div></div>

Estamosindicandoquequeremosunafilacontrescolumnasdeanchoautomáticoparalostamañosdesdesmenadelante,yporlotanto,paraeltamañoextrapequeñoestastrescolumnaspasaránaocupartodoelancho,transformándoseentresfilascompletas.

ModomixtoEstascolumnasdeanchoautomáticosepuedenmezclarenunamismafilaconlascolumnasdeanchoespecíficoquehemosvistoantes.Laformadecalcularelanchodecadacolumnaseráelsiguiente:Enprimerlugarsecalcularáeltamañodelascolumnasdeanchoespecíficoyacontinuaciónserellenaráelespaciorestanteusandolascolumnasdeanchoautomático.Porejemplo,acontinuaciónvamosadefinirdosfilasmezclandoambostiposdecolumnas:

<divclass="container"><divclass="row"><divclass="col">1of3</div><divclass="col-6">2of3(wider)</div><divclass="col">3of3</div></div><divclass="row"><divclass="col-5">1of3(wider)</div><divclass="col">2of3</div><divclass="col">3of3</div></div></div>

Conloqueobtendríamosunresultadosimilaraldelasiguientefigura:

Comopodemosverenesteejemplo,lossistemasparadedefinirlascolumnassepuedenmezclarcomoqueramos,porejemplousandoeldeanchofijoentredoscolumnasdeanchoautomático,oestablenciendounacolumnadeanchoespecíficoalprincipioydespuésdosdeanchoautomático.


24

AnchodecolumnavariableConBootstrap4tambiénseintrodujeronlascolumnasdeanchovariable,lascualesocuparánelanchojustoquesenecesitesegúnelcontenidodelacolumna.Parautilizarlasdisponemosdelasclases".col-*-auto",donde*puedeserculquieradelossufijosdetamañodepantallaquehemosvistoantessm,md,lg,xl,oningúnsufijo(.col-auto)paraindicartodoslostamaños.

Estasetiquetas,igualquelasdeanchoautomático,sepuedenmezclarconlasdeanchoespecífico,porejemplo:

<divclass="container"><divclass="rowjustify-content-md-center"><divclass="colcol-lg-2">1of3</div><divclass="col-md-auto">Variablewidthcontent</div><divclass="colcol-lg-2">3of3</div></div><divclass="row"><divclass="col">1of3</div><divclass="col-md-auto">Variablewidthcontent</div><divclass="colcol-lg-2">3of3</div></div></div>

Conloqueobtendríamosunresultadosimilaraldelasiguientefigura:

Enelcódigoanteriorsehausadolaclase".justify-content-md-center"paraalinearelcontenidodentrodeunafila,estasetiquetaslasveremosenlasección"Alineación".Acontinuaciónvamosaverotrasutilidadesdelsistemaderejilla,comoelanidamientodecolumnas,ocómoforzarelcambiodefila.


25

ForzarelcambiodefilaMediantelaclase.w-100podemosforzarelcambiodefilacuandonosotrosqueramos:

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

<divclass="w-100"></div>

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

Conloqueobtendríamosdosfilascondoscolumnascadauna:

Estaclasetambiénnospuedeserútilparaforzarelcambiodefilasoloparadeterminadostamañosdepantalla.ParaestotenemosquecombinarlaconotrasclasesdeBootstrapquenospermitenmostraruocultarelementossegúneltamañodepantalla.Acontinuaciónseincluyeunejemplo:

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

<divclass="w-100d-noned-md-block"></div>

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

Dondelaclase".d-none"significaquenosemuestreeseelemento(paraningúntamaño),ylaclase".d-md-block"indicaquesemuestreapartirdeltamañodepantalla"md"enadelante.Porlotanto,elcampodivmarcadocon"w-100"permaneceráocultoparalostamañosextrapequeñoypequeño,yporlotantonoseactivaráelcambiodefilaparaesosdostamaños,perosíparalostamañosdesde"md"enadelante.


26

Enlasección"UtilidadesResponsive"seexplicaránlasetiquetas".d-*"quenospermiráncontrolarlavisibilidaddecualquierelementoHTMLenfuncióndeltamañodepantalla.


27

AnidamientodecolumnasUnacaracterísticamuypotentedelsistemaderejillaesquesepuedenanidarcolumnasdentrodeotrascolumnas.Paraestosolamentetenemosquecrearunanuevafiladentrodeunacolumna,ydentrodeestanuevafilapodremossubdividirlausandotambiénhasta12columnas.

Porejemplo,enelsiguientecódigosecreaunaprimerafilaconunacolumnadetamaño9,dentrodelacualseañadeunasegundafilacondoscolumnas:

<divclass="row"><divclass="col-sm-9">Level1:.col-sm-9<divclass="row"><divclass="col-8col-sm-6">Level2:.col-8.col-sm-6</div><divclass="col-4col-sm-6">Level2:.col-4.col-sm-6</div></div></div></div>

Alvisualizarestecódigoobtendríamos:

Anidamientodecolumnas

28

EspaciadoentrecolumnasEsposiblecrearunespaciadoentrelascolumnasodichodeotraforma,moverodesplazarunacolumnahacialaderecha,añadiendounoffsetinicialmediantelasclases:.offset-*.Porejemplo.offset-4crearáunespacioalaizquierdadelacolumnadetamaño4(comosisecrearaunacolumnaocultadetipo.col-4).Enelsiguientecódigopodemosverunejemplomáscompleto:

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

Elcualserenderizaríadelaforma:

Comosepuedeverenelejemploanterior,tambiénpodemosespecificareloffsetsegúneltamañodepantalla.Siusamos,porejemplo,laclase"offset-4"estaremosindicandoquesecreeunespaciode4paratodoslostamañosdepantalla;mientrasquecon"offset-md-4"secrearáesteespacioapartirdeltamañodepantalla"md"enadelante.

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

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

Márgenes


29

Ademásdelaclaseoffsettambiéndisponemosdelasclasesparacrearmárgenesdeespaciovariabletantoalladoizquierdo(con".ml-auto")comoalladoderecho(con.mr-auto)deunacolumna.Acontinuaciónseincluyeunejemplo:

<divclass="row"><divclass="col-md-4">.col-md-4</div><divclass="col-md-4ml-auto">.col-md-4.ml-auto</div></div><divclass="row"><divclass="col-md-3ml-md-auto">.col-md-3.ml-md-auto</div><divclass="col-md-3ml-md-auto">.col-md-3.ml-md-auto</div></div><divclass="row"><divclass="col-automr-auto">.col-auto.mr-auto</div><divclass="col-auto">.col-auto</div></div>

Conloqueobtendríamoselsiguienteresultado:

Comosepuedever,enlaprimerafilasecreaunmargeautomáticoporlaizquierda(yparatodoslostamaños)delasegundacolumna,loqueprovocaeldesplazamientodeestahastaalinearlaaladerecha.Enlasegundafilaseañademargenporlaizquierdaalasdoscolumnasparatamañosdepantallade"md"enadelante.Yenlaúltimafilasecreaunmargenautomáticoporladerechadelaprimeracolumna(paratodoslostamaños),estoprovocaunefectosimilaralobtenidoenlaprimerafila.


30

OrdenacióndecolumnasTambiénpodemosmodificarelordenvisualdelascolumnasmediantelaclase.order-.Estaclasepermiteindicarlaposiciónalacualqueremosdesplazarlacolumna(del1al12,porejemplo.order-1,.order-2,etc.).Tambiénpodemosespecificareltamañodepantallaparaelquequeremosqueseaplique(porejemplo.order-md-12).Acontinuaciónseincluyeunejemplo:

<divclass="container"><divclass="row"><divclass="col">First,butunordered</div><divclass="colorder-12">Second,butlast</div><divclass="colorder-1">Third,butfirst</div></div></div>

Obteniendocomoresultado:

Sinosfijamosenelresultadoobtenidopodemosverquenoseobtieneelresultadoesperado,laterceracolumna(encolorrojo)apareceenlasegundaposiciónenlugardeenlaprimeracomosehabíaindicadocon"order-1".Estoesdebidoaunpequeñoerroralcambiarelordendederechaizquierda.Enloscasosenlosquesimplementequeramosmoverunacolumnahacialaderechanoseproduciráesteerror,perosiqueremosmoverhacialaizquierdaseránecesarioqueestablezcamoselorderdetodaslascolumnas.Porlotanto,paraquefuncionecorrectamenteelejemploanteriortendríamosqueescribirelsiguientecódigo:

<divclass="container"><divclass="row"><divclass="colorder-2">First,butunordered</div><divclass="colorder-12">Second,butlast</div><divclass="colorder-1">Third,butfirst</div></div></div>

Obteniendoahorasíelresultadoesperado:


31

Comosepuedevertambiénenesteejemplo,noesnecesarioquelosnúmerosdecolumnaparalaordenaciónseanconsecutivos,simplementeseordenarándemayoramenor.

Hayquetenercuidadoconestasclasessihayunsaltodelíneadentrodeunamismafila(debidoaqueelnúmerodecolumnasocupemásde12),yaqueenestoscasoselordennofuncionaráncorrectamente.

Tambiéndisponemosdelaclase".order-first",lacualnospermitirásituarcualquierelementoenprimerlugar.Además,estaclasesíquefuncionaaunquehayaunsaltodelínea.


32

AlineaciónConlanuevaversióndeBootstraptambiénhanaparecidonuevasclasesquenospermitenespecificarlaalineacióndelascolumnastantoenhorizontalcomoenvertical.

AlineaciónverticalParaindicarlaalineaciónenverticaltenemosdosopciones:indicarlamismaalineaciónparatodosloselementosdeunafilaoindicarlaalineaciónaniveldecolumna,loquenospermitiráestablecerdistintasalineacionesparacadacolumna.

EnelprimercasolaclaseCSSparalaalineaciónlatendremosqueañadiralafilausandolaetiqueta".align-items-*",donde"*"podráser"start"(alprincipioopegadaalapartesuperiordelafila),"center"(alineacióncentradaenvertical)o"end"(alineaciónpegadaalfinaloalaparteinferiordelafila).Acontinuaciónseincluyeunejemplodelostrestiposdealineación:

<divclass="container"><divclass="rowalign-items-start"><divclass="col">Oneofthreecolumns</div><divclass="col">Oneofthreecolumns</div><divclass="col">Oneofthreecolumns</div></div><divclass="rowalign-items-center"><divclass="col">Oneofthreecolumns</div><divclass="col">Oneofthreecolumns</div><divclass="col">Oneofthreecolumns</div></div><divclass="rowalign-items-end"><divclass="col">Oneofthreecolumns</div><divclass="col">Oneofthreecolumns</div><divclass="col">Oneofthreecolumns</div></div></div>

Conloqueobtendríamosunresultadocomoeldelasiguientefigura:

Alineación

33

Enelsegundocaso,siqueremosindicarporseparadolaalineaciónverticaldecadaunadelascolumnasdeunafila,tendremosqueusarlaclaseCSS.align-self-*,donde"*"podráadoptarlosmismosvalores:start,centeroend.Acontinuaciónseincluyeunejemploenelqueseindicanlostrestiposdealineacionesdentrodeunamismafila:

<divclass="container"><divclass="row"><divclass="colalign-self-start">Oneofthreecolumns</div><divclass="colalign-self-center">Oneofthreecolumns</div><divclass="colalign-self-end">Oneofthreecolumns</div></div></div>

Conloqueobtendremoselsiguienteresultado:

Esimportantedestacarquealutilizarcualquierdadeestasetiquetasdealineación,laalturadelascolumnasseajustaráalcontenido,mientrasquesinoutilizamosningunaetiquetadealineación,laalturadelaceldaseextenderáhastaocupartodoelespaciodisponibleenlafila.

Alineaciónhorizontal

Alineación

34

Tambiénpodemosespecificarlaalineaciónhorizontaldeloselementosdeunafila.Paraestodisponemosdelaclase".justify-content-*",donde"*"podráser"start"(izquierda),"center"(centrado),"end"(derecha),"around"(añadiráelmismoespacioaambosladosdelacolumna)y"between"(añadeespacioentrelascolumnas).Acontinuaciónseincluyeunejemplodecadaunodeestostiposdealineaciónhorizontal:

<divclass="container"><divclass="rowjustify-content-start"><divclass="col-4">Oneoftwocolumns</div><divclass="col-4">Oneoftwocolumns</div></div><divclass="rowjustify-content-center"><divclass="col-4">Oneoftwocolumns</div><divclass="col-4">Oneoftwocolumns</div></div><divclass="rowjustify-content-end"><divclass="col-4">Oneoftwocolumns</div><divclass="col-4">Oneoftwocolumns</div></div><divclass="rowjustify-content-around"><divclass="col-4">Oneoftwocolumns</div><divclass="col-4">Oneoftwocolumns</div></div><divclass="rowjustify-content-between"><divclass="col-4">Oneoftwocolumns</div><divclass="col-4">Oneoftwocolumns</div></div></div>

Conloqueobtendríamosunresultadosimilaraldelasiguientefigura,conlafilaalineadaalaizquerda,lasegundacentrada,laterceraalineadaaladerecha,lacuartaconelespaciado"alrededor"(oaamboslados)delascolumnas,ylaúltimaconelespaciadoentrelascolumnas.

Alineaciónresponsive

Alineación

35

Encasodequelonecesitemospodremosañadirtambiéneltamañodepantallaalasdistintasclasesdealineaciónquehemosvisto:align-items-*,align-self-*yjustify-content-*.Paraestotendremosqueañadirprimeroeltamañodepantalla(sm,md,lgoxl),acontinuaciónunguión(-),ydespuéseltipodealineacióndeseado(deentrelosquehemosvisto),porejemplo:align-items-md-center,align-self-sm-end,justify-content-lg-end,etc.

Alindicareltamañodepantalladichaalineaciónseaplicarásolamenteapartirdedichotamañoenadelante,aunquetambiénpodemosindicardistintasalineacionesparaunmismocamposegúneltamañodelapantalla,porejemplo:

<divclass="rowjustify-content-centerjustify-content-md-start">...</div>

Enelejemploanteriorelcontenidosealinearíadeformacentradaparalostamañosdepantallaextrapequeñosypequeños,ycambiaráaalineaziónizquierdaapartirdeltamañodepantalla"md".

Alineación

36

UtilidadesResponsiveBootstraptambiénincluyeunaseriedeclasesparaayudarnosamostraruocultarcontenidossegúneltamañodeldispositivo.Enprimerlugarvamosaverlasclasesbasequeutlizaremosparaestasacciones:

.d-none:Ocultaelelementosobreelqueseaplique..d-inline:Muestraelelementodeforma"inline",esdecir,permitiendootroselementosporlosladosyocupandoelanchojusto..d-block:Muestraelelementoenformadebloque,ocupandotodoelanchodisponibleysinpermitirotroselementosporloslados..d-inline-block:Muestraelelementoenformadebloque,peroocupandoelanchojustoypermitiendootroselementosporloslados.

Acontinuaciónpodemosverunejemplodelefectoobtenidoalaplicarlasdistintasetiquetasdelasquedisponemosparamostrarelementos:

Ladiferenciaentrelasetiquetas"d-inline"y"d-inline-block"eselcomportamientodebloquequeadoptaelelemento,elcualrespetarátodoslosmárgenesyalgurasqueleindiquemos.

Alaplicarestasetiquetassobreunelementolomostraremosuocultaremosparatodoslostamaños,sinembargo,siqueremospodemosañadirlesmodificadoresparaindicareltamañoapartirdelcualqueremosquesemuestrenuoculten.Enesteúltimocasotendremosqueañadireltamañodepantallaentreelprefijo"d-"yelsufijonone,inline,blockoinline-block,esdecir,siguiendoelpatrón"d-*-*".Porejemplo,podremosindicard-sm-noneparaqueseoculteapartirdeltamañopequeñodepantalla,d-xl-noneparaqueseoculteparalaspantallasextragranes,od-md-blockparaquesemuestreenformadebloqueapartirdeltamañomd.

Esimportantequenosfijemosqueestasutilidadesresponsiveseaplicaránapartirdeltamañoindicadoenadelante,sinembargo,¿cómopodríamoshacerparaquesolamenteseoculteosemuestreparauntamañodepantalla?Paraestopodemoscombinarvariasclases,porejemplo,paraquesoloseoculteparaeltamañoextrapequeñotendríamosqueponer"d-noned-sm-block",oparaquesolosemuestreparaeltamañopequeñousaríamos"d-noned-sm-blockd-md-none".


37

Acontinuaciónseincluyeunatablaresumendelasetiquetasquetendríamosqueaplicarparamostraruocultarsolamenteparauntamañodepantalla:

Tamañosdepantalla Mostrar Ocultar

Soloparatamañosextrapequeños

d-blockd-sm-none d-noned-sm-block

Soloparatamañospequeños(sm)

d-noned-sm-blockd-md-none

d-sm-noned-md-block

Soloparatamañosmedianos(md)

d-noned-md-blockd-lg-none

d-md-noned-lg-block

Soloparatamañosgrandes(lg) d-noned-lg-blockd-xl-none

d-lg-noned-xl-block

Soloparatamañosextragrandes(xl)

d-noned-xl-block d-xl-none


38

MediaqueriesEnlamayoríadeloscasosgraciasatodaslasclasesqueproveeBootstrapnosserásuficienteparacomponernuestraweb.Sinembargo,enalgunassituacionesesposiblequequeramosmodificardichocomportamiento,porejemploparaaplicardeterminadosestilosCSS(colores,alineacióninterna,etc.)quecambiensegúneltamañodepantalla.Enestoscasosseránecesarioquecreemosnuestrapropiamediaqueryparaaplicarlosestilosdeseados.

Unamediaquerysedefinedelaforma:

@media(min-width:TAMAÑO-EN-PÍXELES){/*Losestilosaquícontenidossoloseaplicaránapartirdeltamañodepantallaindicado*/}

Enestecaso,losestilosqueesténdentrodeestamediaqueryseaplicaránsoloapartirdeltamañoenpíxelesindicado.Ademásdeltamañomínimo,tambiénpodemosindicareltamañomáximooelrangodetamañoenelqueseaplicaránlosestilos,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)<576pxPantallaspequeñas(_sm,tablets_envertical)≥576pxPantallasmedianas(md,paratabletsenhorizontal)≥768pxPantallasgrandes(lg,tamañoescritorio)≥992pxPantallasextragrandes(xl,escritoriogrande)≥1200px

Esimportantetenerlosencuentaalahoradedefinirnuestraspropiasmediaqueries,paracrearlospuntosderupturaocambioconlasmismasdimensiones.SinolohicieramosasíestaríamosañadiendotodavíamáscasosaloscincotamañosdepantallaquecontemplaBoostrap,yporlotantocomplicandotantolaprogramacióncomoelmantenimientodelcódigo.

MediaQueries

39

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

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

MediaQueries

40

Cualquiercosaqueseosocurra!

MediaQueries

41

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

Algunosdeestoscomponentesson:

BarrasdenavegaciónBotonesFormulariosTablasDesplegablesymuchosmás...

Acontinuaciónseexplicaelfuncionamientodeloscomponentesmásutilizados.

ComponentesResponsive

42

BotonesMediantelaclase.btnpodemosaplicarestiloaloselementostipobutton.Estaclaselapodemoscombinarcon.btn-primary,.btn-secondary,.btn-success,.btn-danger,.btn-warning,.btn-info,.btn-light,.btn-darko.btn-linkparacrearbotonesparadiferentesestadosoaccionesennuestrosformularios:

<buttontype="button"class="btnbtn-primary">Primary</button><buttontype="button"class="btnbtn-secondary">Secondary</button><buttontype="button"class="btnbtn-success">Success</button><buttontype="button"class="btnbtn-danger">Danger</button><buttontype="button"class="btnbtn-warning">Warning</button><buttontype="button"class="btnbtn-info">Info</button><buttontype="button"class="btnbtn-light">Light</button><buttontype="button"class="btnbtn-dark">Dark</button><buttontype="button"class="btnbtn-link">Link</button>

Conloqueontendríamoselsiguienteresultado:

ElementostipobotónEstasclasesnosonexclusivasparalasetiquetasbuttonsinoquetambiénfuncionarándelamismaformacon<a>y<input>:

<aclass="btnbtn-primary"href="#"role="button">Link</a><buttonclass="btnbtn-primary"type="submit">Button</button><inputclass="btnbtn-primary"type="button"value="Input"><inputclass="btnbtn-primary"type="submit"value="Submit"><inputclass="btnbtn-primary"type="reset"value="Reset">

Obteniendoentodosloscasosbotonesconlamismaapariencia:

Tamañodelosbotones

Botones

43

Podemosvariareltamañodelosbotonessimplementeañadiendolasclases.btn-lg,.btn-smo.btn-block,paraobtenerbotonesconuntamañomásgrande,máspequeño,ounbotónqueocupetodoelancho.Porejemplo,conelsiguientecódigo:

<buttontype="button"class="btnbtn-primarybtn-lg">Largebutton</button><buttontype="button"class="btnbtn-primarybtn-sm">Smallbutton</button><buttontype="button"class="btnbtn-primarybtn-block">Blockbutton</button>

Obtendríamoselsiguienteresultado:

Botones

44

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

<divclass="dropdown"><buttonclass="btnbtn-secondarydropdown-toggle"type="button"id="dropdownMenuButton"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false">Dropdownbutton</button><divclass="dropdown-menu"aria-labelledby="dropdownMenuButton"><aclass="dropdown-item"href="#">Action</a><aclass="dropdown-item"href="#">Anotheraction</a><aclass="dropdown-item"href="#">Somethingelsehere</a></div></div>


Sobreelbotónprincipalpodemosaplicartodosloscoloresdebotonesquehemosvistoenlaseccióntitulada"Botones",porejemplo".btn-success"o".btn-danger".Tambiénpodemosañadirlosmodificadoresdetamaño".btn-lg"y".btn-sm"paraaumentarodisminuireltamañodelbotóndeldesplegable.

Sinosfijamosenelcódigoanterior,paraelbotónprincipalsehausadolaetiqueta"button"yparaloselementosdeldesplegablelaetiqueta"a",sinembargopodríamoshaberusadosolamentelaetiqueta"a"osolamentelaetiqueta"button",esdecir,funcionanexactamenteigualysuaparienciaeslamisma.

Losatributosqueempiezancon"aria"sonparacrearcontenidoaccesible,paraqueloslectoresdepantallapuedenencontrarlasetiquetascorrectasalahoradeinterpretarelcontenido.ParamásinformaciónconsultarladocumentaciónsobreHTML5ARIA.

Desplegables

45

Paraalinearunmenúaladerechasepuedeañadirlaclase.dropdown-menu-rightalalista"dropdown-menu",porejemplo:

<divclass="dropdown-menudropdown-menu-right">

EncabezadosenundesplegableParaañadirunencabezado(ovarios)ydividirenseccionesundesplegablepodemosutilizarlaclase.dropdown-headerdelasiguienteforma:

<divclass="dropdown-menu"><h6class="dropdown-header">Dropdownheader</h6><aclass="dropdown-item"href="#">Action</a><aclass="dropdown-item"href="#">Anotheraction</a></div>

Conloqueobtendremos:

SeparadoresenundesplegableTambiénpodemosañadirseparadoresenundesplegablemediantelaclase.dropdown-dividerdelaforma:

<divclass="dropdown-menu"><aclass="dropdown-item"href="#">Action</a><aclass="dropdown-item"href="#">Anotheraction</a><aclass="dropdown-item"href="#">Somethingelsehere</a><divclass="dropdown-divider"></div><aclass="dropdown-item"href="#">Separatedlink</a></div>

Conloqueobtendríamoselsiguientelistadoconseparador:

Desplegables

46

Desplegables

47

GruposdebotonesPodemoscrearungrupodebotonesenunalíneaagrupándolosdentrodeunelementocontenedorconlaetiqueta.btn-group.

<divclass="btn-group"role="group"aria-label="Basicexample"><buttontype="button"class="btnbtn-secondary">Left</button><buttontype="button"class="btnbtn-secondary">Middle</button><buttontype="button"class="btnbtn-secondary">Right</button></div>


Losatributos"role"queutilizaBootstrapprovienentambiéndeHTML5ARIAysirvenparaindicarelrolofuncióndeunelemento,enestecasoseindicalaagrupacióndelosbotones.

MediantelalibreríaJavaScriptdeBootstrappodemosañadircomportamientostipocheckboxoradiobuttonaungrupodebotones,paraquealpulsarlossequedemarcados.Paramásinformaciónconsultadladocumentaciónoficial.

BarradebotonesLabarradebotonesnospermitecombinargruposdebotonesparacrearcomponentesmásavanzados:

Gruposdebotones

48

<divclass="btn-toolbar"role="toolbar"aria-label="Toolbarwithbuttongroups"><divclass="btn-groupmr-2"role="group"aria-label="Firstgroup"><buttontype="button"class="btnbtn-secondary">1</button><buttontype="button"class="btnbtn-secondary">2</button><buttontype="button"class="btnbtn-secondary">3</button><buttontype="button"class="btnbtn-secondary">4</button></div><divclass="btn-groupmr-2"role="group"aria-label="Secondgroup"><buttontype="button"class="btnbtn-secondary">5</button><buttontype="button"class="btnbtn-secondary">6</button><buttontype="button"class="btnbtn-secondary">7</button></div><divclass="btn-group"role="group"aria-label="Thirdgroup"><buttontype="button"class="btnbtn-secondary">8</button></div></div>


TamañosdelosgruposdebotonesLosgruposdebotonestambiénnospermitenindicareltamañodelosbotonesquecontienenmediantelasetiquetas.btn-group-*,donde"*"puedeser"sm"o"lg",porejemplo:

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

Conloquepodríamosobtenergruposdebotonesdediferentestamaños:

Grupodebotonescondesplegables

Gruposdebotones

49

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

<divclass="btn-group"role="group"aria-label="Buttongroupwithnesteddropdown"><buttontype="button"class="btnbtn-secondary">1</button><buttontype="button"class="btnbtn-secondary">2</button>

<divclass="btn-group"role="group"><buttonid="btnGroupDrop1"type="button"class="btnbtn-secondarydropdown-toggle"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false">Dropdown</button><divclass="dropdown-menu"aria-labelledby="btnGroupDrop1"><aclass="dropdown-item"href="#">Dropdownlink</a><aclass="dropdown-item"href="#">Dropdownlink</a></div></div></div>

Elresultadovisualobtenidoseríaelsiguiente:

Comosepuedeobservarenelcódigodeejemploanterior,laúnicadiferenciaconundesplegablenormalesquelaetiquetacontenedoraenvezdeserdetipo.dropdownesun.btn-group.

Gruposdebotones

50

FormulariosBootstrapaplicaestilosaloselementosdetipoformularioparaconvertirlosenelementosresponsive,mejorarsuaparienciaypermitirnoscreardiferentesalineaciones.Laestructurabásicadeunformularioeslasiguiente:

<form><divclass="form-group"><labelfor="exampleInputEmail1">Emailaddress</label><inputtype="email"class="form-control"id="exampleInputEmail1"aria-describedby="emailHelp"placeholder="Enteremail"></div></form>

Conloqueobtendríamosunformularioenverticalcomoeldelasiguientefigura,esdecir,loselementosdelformulariosedispondránenvertical,unosdebajosdeotros.

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,telycolor.

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

Formularios

51

<formclass="form-inline"><divclass="form-groupmx-sm-3"><labelfor="inputUser"class="sr-only">User</label><inputtype="password"class="form-control"id="inputUser"placeholder="User"></div><divclass="form-groupmx-sm-3"><labelfor="inputPass"class="sr-only">Password</label><inputtype="password"class="form-control"id="inputPass"placeholder="Pass"></div><buttontype="submit"class="btnbtn-primary">Confirm</button></form>

Obteniendoelsiguienteresultado:

Aunqueloscamposdelformularionocontenganetiquetas(labels)esnecesarioincluirlasporcuestionesdeaccesibilidad,paradarsoportealoslectoresdepantalla.Porestemotivosehanincluidoenelejemploanteriorconlaclase.sr-only(screenreadersonly).

Estaalineacióntipo"inline"soloserávisibleparapantallasgrandes.Enpantallaspequeñasloselementoscambiaránaalineaciónvertical.

Enelejemplosehaañadidolaetiqueta".mx-sm-3"paracrearunpequeñomargenenloslateralesdecadaelementodelformulario.Paramásinformaciónsobreestetipodeetiquetasconsultadladocumentaciónoficial.

FormulariohorizontalMedianteelusodelsistemaderejilladeBootstrappodemoscrearformularioscondisposiciónenhorizontal.Paraestotendremosquecrearunafila(.row)porcadagrupo,ysituarlaetiquetayelinputcadaunoenunacolumna.Acontinuaciónseincluyeunejemplo:

Formularios

52

<form><divclass="form-grouprow"><labelfor="inputEmail3"class="col-sm-2col-form-label">Email</label><divclass="col-sm-10"><inputtype="email"class="form-control"id="inputEmail3"placeholder="Email"></div></div><divclass="form-grouprow"><labelfor="inputPassword3"class="col-sm-2col-form-label">Password</label><divclass="col-sm-10"><inputtype="password"class="form-control"id="inputPassword3"placeholder="Password"></div></div><divclass="form-grouprow"><divclass="col-sm-2">Checkbox</div><divclass="col-sm-10"><divclass="form-check"><labelclass="form-check-label"><inputclass="form-check-input"type="checkbox">Checkmeout</label></div></div></div><divclass="form-grouprow"><divclass="col-sm-10"><buttontype="submit"class="btnbtn-primary">Signin</button></div></div></form>

Conloqueobtendríamos:

Esimportantequenosfijemosquelaetiqueta.rowseañadealdivdecadagrupo,manteniendotambiénlaetiqueta".form-group".Además,podemosaplicarlaclasedelascolumnasparalasetiquetaslabeldirectamentesobredichoelemento,sinnecesidaddecrearunacajacontenedora.

Formularios

53

EstadosdevalidacióndeunformularioBootstraptambiénincluyeclasesparaaplicardiferentesestadosdevalidaciónaunformulario.Parautilizarlosimplementetenemosqueañadirlasclases:.is-valido.is-invalidsobreelpropioinput.Deestaforma,elcolordeloselementosdelformulariocambiará.Acontinuaciónpodemosverunejemplo:

<form><divclass="form-group"><labelfor="validation01">Firstname</label><inputtype="text"class="form-controlis-valid"id="validation01"placeholder="Firstname"value="Mark"required></div><divclass="form-group"><labelfor="validation02">City</label><inputtype="text"class="form-controlis-invalid"id="validation02"placeholder="City"required></div></form>

Quesemostraríadelaforma:

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

Formularios

54

<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

55

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

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

<ulclass="navnav-tabs"><liclass="nav-item"><aclass="nav-linkactive"href="#">Active</a></li><liclass="nav-item"><aclass="nav-link"href="#">Link</a></li><liclass="nav-item"><aclass="nav-link"href="#">Link</a></li><liclass="nav-item"><aclass="nav-linkdisabled"href="#">Disabled</a></li></ul>

EsimportantequenosfijemosencómoseusanlasclasesCSS.nav,.nav-tabs,.nav-itemy.nav-link.Cadaelementodelmenúseráun.nav-item,loscualescontienenunenlacetipo.nav-linkalasecciónamostrar.Paramarcarelelementodelmenúqueestáactivooseleccionadoseutilizalaclase.active.Ademásdisponemosdelaclase.disabledparadeshabilitarelementosdelmenú.

Sivisualizamoselcódigodeejemploanteriorobtendríamosunmenúenformadepestañascomoelsiguiente:

Píldoras

Navegación

56

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

<ulclass="navnav-pills"><liclass="nav-item"><aclass="nav-linkactive"href="#">Active</a></li><liclass="nav-item"><aclass="nav-link"href="#">Link</a></li><liclass="nav-item"><aclass="nav-link"href="#">Link</a></li><liclass="nav-item"><aclass="nav-linkdisabled"href="#">Disabled</a></li></ul>

Enestecasoelaspectodelmenúseríaelsiguiente:

Tambiénpodemoscrearunmenúverticaloapiladoañadiendolaclase.flex-columnalaetiquetacontenedora:

<ulclass="navnav-pillsflex-column"><liclass="nav-item"><aclass="nav-linkactive"href="#">Active</a></li><liclass="nav-item"><aclass="nav-link"href="#">Link</a></li><liclass="nav-item"><aclass="nav-link"href="#">Link</a></li><liclass="nav-item"><aclass="nav-linkdisabled"href="#">Disabled</a></li></ul>

Obteniendo:

Navegación

57

Anchojustificado

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

<ulclass="navnav-pillsnav-fill"><liclass="nav-item"><aclass="nav-linkactive"href="#">Active</a></li><liclass="nav-item"><aclass="nav-link"href="#">Longernavlink</a></li><liclass="nav-item"><aclass="nav-link"href="#">Link</a></li><liclass="nav-item"><aclass="nav-linkdisabled"href="#">Disabled</a></li></ul>

Conloqueobtendríamos:

Esteestilonofuncionaráparapantallasconunanchomenora768px,quesonlaspantallasdefinidascomoextrapequeñasodesmartphone.Paraestostamañoscadaelementodelmenúocuparáelanchojustoquenecesite.

Elementosdenavegacióncondesplegables

Tambiénpodemosañadirelementosdesplegablesanuestrosmenúsdenavegación,tantoaldetipotabscomoaldepíldoras.Paraestosimplementeañadiremoseldropdowncomounelementodelmenúmás,usandolanotaciónquevimosenlasección"Desplegables",perollevancuidadodequeparalaetiquetaincicial(queeneldropdownnormalera"<div

Navegación

58

class="dropdown">")seutiliceelpropioelemento".nav-item"delmenú,añadiendolaclase".dropdown"delaforma:"<liclass="nav-itemdropdown">".Acontinuaciónseincluyeunejemplocompleto:

<ulclass="navnav-tabs"><liclass="nav-item"><aclass="nav-linkactive"href="#">Active</a></li><liclass="nav-itemdropdown"><aclass="nav-linkdropdown-toggle"data-toggle="dropdown"href="#"role="button"aria-haspopup="true"aria-expanded="false">Dropdown</a><divclass="dropdown-menu"><aclass="dropdown-item"href="#">Action</a><aclass="dropdown-item"href="#">Anotheraction</a><aclass="dropdown-item"href="#">Somethingelsehere</a><divclass="dropdown-divider"></div><aclass="dropdown-item"href="#">Separatedlink</a></div></li><liclass="nav-item"><aclass="nav-link"href="#">Link</a></li><liclass="nav-item"><aclass="nav-linkdisabled"href="#">Disabled</a></li></ul>

Conloqueobtendríamosunresultadocomoeldelasiguientefigura:

Navegación

59

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

Paraañadirestabarraanuestrositiowebutilizaremoslaetiqueta"<nav>",queeslaetiquetadeHTML5queidentificaunelementodenavegación.Encasodenousarestaetiquetatambiénpodemoscrearlabarradenavegaciónusandoun"<div>",peroenestecasotendremosqueañadirelatributorole="navigation"porcuestionesdeaccesibilidad.Además,enestaetiquetatambiénañadiremosdosetiquetasparaindicarelestiloyloscoloresaaplicarcon".navbar-light.bg-light"(másadelanteveremosquéotroscolorespodemosusar),ylaetiqueta.navbar-expand-lgparaindicareltamañoapartirdelcuallabarrasemostrarádeformaexpandida.Laetiqueta.navbar-expand-lgindicaquelabarrasemostraráensutamañocompletoapartirdeltamañodepantallagrande(lg),colapsándoseparatamañosmáspequeños.Esteseríaelcomportamientopordefecto,perosiqueremoslopodemosmodificarcambiandoeltamaño"lg"porotrodelosposiblestamañosdefinidosporBootstrap:"sm","md","lg"o"xl".

Dentrodelaetiqueta"<nav>"elcontenidodelabarraestarádivididoentressecciones:

Nombreologotipodelaweb,marcadoconlaetiqueta".navbar-brand".Botóntogglermarcadocon".navbar-toggler",quesemostraráúnicamentecuandoelmenúsecolapseyseocultarácuandoelmenúaparezcaexpandido.Cuandoseavisiblepodremospulsarsobreélparamostraruocultarelmenú.Lasopcionesdemenú,lascualeslasañadiremosdentrodeunalistatipo"<lu>"conlaclase".navbar-nav".Además,estalistalatendremosquemeterdentrodeunacaja"<div>"conlasclases".collapse.navbar-collapse",quedefinirálazonaquesecolapsará(uocultará)parapantallaspequeñas.

Cadaelementodelalistademenú<lu>sedefinirámedianteunaetiqueta"<li>"sobrelaqueaplicaremoslaclase".nav-item".Además,comoyaveremosmásadelante,podremosañadirotroselementosdentrodelasopcionesdemenú,comoporejemplounformulario.

Acontinuaciónseincluyeunejemplocompletodeunabarradenavegación:

Barradenavegación

60

<navclass="navbarnavbar-expand-lgnavbar-lightbg-light"><aclass="navbar-brand"href="#">Navbar</a><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-target="#navbarSupportedContent"aria-controls="navbarSupportedContent"aria-expanded="false"aria-label="Togglenavigation"><spanclass="navbar-toggler-icon"></span></button>

<divclass="collapsenavbar-collapse"id="navbarSupportedContent"><ulclass="navbar-navmr-auto"><liclass="nav-itemactive"><aclass="nav-link"href="#">Home<spanclass="sr-only">(current)</span></a></li><liclass="nav-item"><aclass="nav-link"href="#">Link</a></li><liclass="nav-itemdropdown"><aclass="nav-linkdropdown-toggle"href="#"id="navbarDropdown"role="button"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false">Dropdown</a><divclass="dropdown-menu"aria-labelledby="navbarDropdown"><aclass="dropdown-item"href="#">Action</a><aclass="dropdown-item"href="#">Anotheraction</a><divclass="dropdown-divider"></div><aclass="dropdown-item"href="#">Somethingelsehere</a></div></li><liclass="nav-item"><aclass="nav-linkdisabled"href="#">Disabled</a></li></ul><formclass="form-inlinemy-2my-lg-0"><inputclass="form-controlmr-sm-2"type="search"placeholder="Search"aria-label="Search"><buttonclass="btnbtn-outline-successmy-2my-sm-0"type="submit">Search</button></form></div></nav>

SiañadimosestecódigoanuestrositioWebylovisualizamosconunnavegador,obtendremoselsiguienteresultadocuandolovisualicemosenpantallasmedianasygrandes:

Barradenavegación

61

Enlaspantallaspequeñasloselementosdenavegaciónsecolapsaríanenunbotón(toggler),delaforma:

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

<navclass="navbarnavbar-lightbg-light"><aclass="navbar-brand"href="#"><imgsrc="/assets/brand/bootstrap-solid.svg"width="30"height="30"alt=""></a>...</nav>

<navclass="navbarnavbar-lightbg-light"><aclass="navbar-brand"href="#"><imgsrc="/assets/brand/bootstrap-solid.svg"width="30"height="30"class="d-inline-blockalign-top"alt="">Bootstrap</a></nav>

Conloqueobtendríamoslossiguienteresultados,enelprimercasosemostraríaellogotipo

Esposiblequeseanecesarioañadiromodificarlosestilosparadisponercorrectamentelaimagenenlabarradenavegación.

BarradenavegaciónconformularioPodemosañadirformulariosanuestrabarradenavegaciónutilizandoeltipodeformularioinline,definidocon".form-inline"comovimosenlasección"Formularios",porejemplo:

Barradenavegación

62

<navclass="navbarnavbar-lightbg-light"><formclass="form-inline"><inputclass="form-controlmr-sm-2"type="search"placeholder="Search"aria-label="Search"><buttonclass="btnbtn-outline-successmy-2my-sm-0"type="submit">Search</button></form></nav>

Obteniendo:

Alineación

Paramodificarlaalineacióndelformulariopodemosutilizarlasclasesquevimosenlasección"Alineaciónhorizontal"dentrodel"Sistemaderejilla",comoporejemplo".justify-content-between":

<navclass="navbarnavbar-lightbg-lightjustify-content-between"><aclass="navbar-brand">Navbar</a><formclass="form-inline"><inputclass="form-controlmr-sm-2"type="search"placeholder="Search"aria-label="Search"><buttonclass="btnbtn-outline-successmy-2my-sm-0"type="submit">Search</button></form></nav>

Queproduciríaqueelformulariosealeneealaderecha:

AnclajesdelabarradenavegaciónBootstrapnospermiteanclarofijarlaposicióndelabarradetresformasdistintas:fijarlaalapartesuperiorañadiendolaclase.fixed-topalaetiquetanav,fijarlaalaparteinferiorcon.fixed-bottom,ousarelmodosticky(opegajoso)conlaetiqueta.sticky-top,elcualanclarálabarraalapartesuperiormientrasserealizascrollycuandosealcanzaeltopepermaneceráfija.Acontinuaciónseincluyeunejemplodecadaunodeestosmodos:

Barradenavegación

63

<navclass="navbarfixed-topnavbar-lightbg-light"><aclass="navbar-brand"href="#">Fixedtop</a></nav>

<navclass="navbarfixed-bottomnavbar-lightbg-light"><aclass="navbar-brand"href="#">Fixedbottom</a></nav>

<navclass="navbarsticky-topnavbar-lightbg-light"><aclass="navbar-brand"href="#">Stickytop</a></nav>

Enlosmodos".fixed-top"y".fixed-bottom",dadoquelabarrasecolocarádeforma"flotante"sobreelcontenido,esposiblequeoculteunapartedelmismo.Parasolucionarestoesnecesarioañadirunpequeñoespaciadosuperioroinferioralaetiqueta<body>.Elaltodelabarraesde50px,porloquesesuelerecomendarunespaciadode70px,delaforma:

body{padding-top:70px;}/*Enelcasode.fixed-top*/body{padding-bottom:70px;}/*Enelcasode.fixed-bottom*/

ContenedoresAunquenoescompletamentenecesario,síqueserecomiendaañadirunelementocontenedoralabarra.Elcualpodráañadirsededosformas:uncontenedorexternoqueincluyatodalabarra,ouncontenedorinternoqueincluyasololoselementosdelabarra.Acontinuaciónseincluyenambosejemplos:

<divclass="container"><navclass="navbarnavbar-expand-lgnavbar-lightbg-light"><aclass="navbar-brand"href="#">Navbar</a></nav></div>

<navclass="navbarnavbar-expand-lgnavbar-lightbg-light"><divclass="container"><aclass="navbar-brand"href="#">Navbar</a></div></nav>

Barradenavegación

64

Elresultadoobtenidosolodifiereparalostamañosdepantallagrandes,enloscuales,enelprimercasolabarraaparecerácentrada(yelcolordelabarrasoloseaplicaráenelespaciocentral),yenelsegundocasolabarraocuparátodoelanchoposible(porloqueelcolordeaplicaráentodoelancho)peroloselementosdelabarraapareceráncentrados.Acontinuaciónseincluyeunejemplodelosdoscasos:

ColoresdelabarradenavegaciónPodemospersonalizarelcolordelabarrayloselementosquelacomponendeunaformamuysencilla.Enprimerlugartendremosqueelegirentreeltemaclaro(.navbar-light)oeltemaoscuro(.navbar-dark),yademásasignaruncolordefondoconlasclases.bg-*parapersonalizarelcolor(acontinuaciónseincluyelalistadecoloresposibles).Porejemplopodríamosmodificarlabarradenavegacióndelassiguientesformas:

<navclass="navbarnavbar-darkbg-dark"></nav>

<navclass="navbarnavbar-darkbg-primary"></nav>

<navclass="navbarnavbar-light"style="background-color:#e3f2fd;"></nav>

Conloqueobtendríamoslossiguientesresultados:

Losposiblescoloresquepodemoselegircomofondoparalabarradenavegaciónsonlossiguientes:.bg-primary,.bg-secondary,.bg-success,.bg-danger,.bg-warning,.bg-info,.bg-light,.bg-darky.bg-white.Ademásdepoderaplicarlosobrelabarrade

Barradenavegación

65

navegacióntambiénsepuedenutilizarparadefinirelcolordefondodecualquierotroelemento.Acontinuaciónseincluyeunaimagendeestoscolores:

Barradenavegación

66

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

<tableclass="table">...</table>

LacualconfiguralosestilosdelastablasbásicasdeHTMLparaqueadoptenelsiguienteaspecto:

Enlatablaanteriorlasceldasdelaprimerafilaestaríanmarcadascon"th"yelrestodeceldascon"td".

TablaspequeñasSiqueremoscompactareltamañodelatablaparaquedejeunpadding(oespaciadointerior)inferior,podemosaplicarlaclase.table-smdelaforma:

<tableclass="tabletable-sm">...</table>

Obteniendo:

Tablas

67

ColoresalternosSiademásaplicamoslaclase.table-stripedanuestratablaconseguiremosquelasfilaspresentencoloresalternos:

<tableclass="tabletable-striped">...</table>

Conloqueobtendríamosunatablaconelsiguienteaspecto:

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

<tableclass="tabletable-bordered">...</table>

Obteniendoelsiguienteresultado:

Tablas

68

TablasResponsiveBootstrapproporcionaunaformadecreartablasresponsivequesebasaencrearunscrollhorizontalparaqueseveancorrectamente.Paraqueestofuncionesimplementetenemosqueañadirlaetiqueta.table-responsivealapropiatabla:

<tableclass="tabletable-responsive">...</table>

Obteniendo:

Esteefectoseaplicaráúnicamentesobredispositivospequeños(<576px)mientrasqueenelrestodedispositivosnosenotaráladiferencia.Siqueremosqueelpuntoderupturaapartirdelcualseapliqueelresponsivesobrelatablaseauntamañomayorpodemosindicar

Tablas

69

unsufijodetamañosobreestaetiqueta,delaforma.table-responsive-*,donde"*"podrásersm,md,lgoxl.

Tablas

70

Ejercicios1

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

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

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

Ejercicio2-Offsetyordenación(1punto)

Ejercicios1

71

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(md,lgoxl)yqueapliquelaclase.w-100deBootstrap.Elordendelatercerafila(conlasletrasa,b,c,d)sehaalteradoparalasdisposicionesdepantallagrandes(md,lgyxl)usandolasclasesdebootstraporder-*.Enla5ªfilanaranjasehaaplicadouncambiodeordenyunoffsetparalaspantallasgrandesymedianas(md,lgyxl).Además,cuandolapantallaseadetipoxssedeberádeocultarunadesuscolumnas.LafilaazulclaroenlaqueponeDesktop(parapantallasmd,lgyxl),Tablet(parasm)yMobile(cuandolapantallaesxs)enrealidadson3filasdistintasconclasesparaquesolosemuestrenendichostamañosdepantalla.Laúltimafila(Footer)sedeberádeocultarsolamentecuandolapantallaseadeltipoxs.

Ejercicio3-Personalizandomediantemediaquery(1punto)

Ejercicios1

72

EnesteejerciciosepidequecreéisunanuevapáginawebusandolalibreríaBootstrap.Elcontenidoaparecerácentradoenlapantallayconstarádetresfilasconelsiguientecontenidoydisposición,cuandolapantallaseadetamañomedio(md)ygrande(lgyxl):

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

Enlasiguienteimagensepuedeverunesquemadelawebarealizar:

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

Tenedencuentaque:

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

Ejercicios1

73

Ejercicios2

Ejercicio1-CrearunaWebresponsive(3puntos)Paraponerenprácticalosconceptosteóricossobrediseñoresponsive,seproponecomoejerciciolacreacióndeunpequeñositioWebestáticoqueuselosestilosycomponentesdeBootstrap.

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

74

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

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

Alserunawebestáticatendréisquerepetirpartesdelcódigoentodaslaspáginas,porejemplolabarrademenúprincipaltendráqueserigualentodaslaspáginas.Porestemotivoserecomiendarealizarprimeroestaspartes,yunavezprobadas,copiarypegarelcódigoenelrestodepáginas.

Ejercicios2

75

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

76

http://getbootstrap.com/

http://blog.getbootstrap.com/

http://startbootstrap.com/

http://bootstrapzero.com/

http://bootswatch.com/

http://www.bootbundle.com/

http://bootsnipp.com

http://expo.getbootstrap.com/

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

Table of Contents - catalinatics5.webnode.com.co · las páginas web se visualizan en multitud de...

Documents

Transcript of Table of Contents - catalinatics5.webnode.com.co · las páginas web se visualizan en multitud de...