30/01/2017 BootstrapouMaterialize:Conheaasprincipaisdiferenas

Buscar

favorito marcarcomolido dvidas?

Bootstrap ou Materialize: Conhea as principais

diferenas
Esse artigo apresenta uma comparao entre os dois principais frameworks front-end do mercado.

(0) (0) #ShowMeTheCode

Motivao

Ocenriodosframeworksfrontendtemsidofavorvelaosdesenvolvedoresnosltimosanos.Muitosprojetosentraramemcenacomoo

Bootstrap,Materialize,FoundationeSkeletontrazendoelementosquefacilitamaconstruodeinterfacese,consequentemente,

possibilitandoumamelhorexperinciaaousurio.Outragrandevantagemdessastecnologiasseulicenciamento:geralmentesemcustos.

Diantedessecenrio,visandosimplificaroprocessodeescolha,apresentaremosumacomparaoentredoisdosprincipaisframeworks

Frontend:oBootstrap,lderdemercadoeoMaterialize,soluomaisrecente,masquetambmtemsidobastanteutilizada.

Bootstrap ou Materialize: qual a melhor opo?

Afinal,BootstrapouMaterialize?Aprimeiracoisaqueprecisamosteremmentequenoexisteamelhoroupioropo.Ambosso

muitobonse,porisso,adecisoporumououtro,muitasvezes,acabasendoumameraescolhaprofissional.Aindaassim,existem

alguns(bons)argumentosparaembasaraescolhadeumdeles.Parasabermoscomoqueestamoslidando,vejamosasFiguras1e

2.ElastrazemumexemplodewebsitedesenvolvidocomoBootstrapecomoMaterialize,respectivamenteambasretiradasdos

websitesdosframeworks.

Guia Bootstrap +

http://www.devmedia.com.br/bootstrapoumaterializeconhecaasprincipaisdiferencas/37830 1/6
30/01/2017 BootstrapouMaterialize:Conheaasprincipaisdiferenas

Figura1.SpotifyTheDrop(desenvolvidocomoBootstrap)

Figura2.Mako(desenvolvidocomoMaterialize)

Poressasimagens,podemosobservarqueaspossibilidades,tantovisuaisquantoemtermosdeUX(UserExperience),parao

desenvolvimentodewebsitessomuitaseque,inclusive,osframeworkslevamaumaaparnciasemelhante.Issoaconteceporque

Guia Bootstrap +

http://www.devmedia.com.br/bootstrapoumaterializeconhecaasprincipaisdiferencas/37830 2/6
30/01/2017 BootstrapouMaterialize:Conheaasprincipaisdiferenas

osestilosemsinopossuemmuitasdiferenas,emboraoMaterializeutilizeSass(CSSprcompilado),focandonaresponsividade.

Essacaractersticafazcomquenohaja,defato,umamelhoropoentreumeoutro.

Valeressaltar,ainda,quetantooBootstrapquantooMaterializepermitemcustomizao.Dessaforma,muitoswebsiteseaplicaes

estendemospadresecriamseusprprioselementos.

Bootstrap: vantagens e desvantagens

OBootstrapumframeworkconsolidadonomercadoe,porisso,utilizadopormuitosdesignersedesenvolvedores.Suafacilidade

deusoumdosseusdiferenciais,almdeumaricaesimplesdocumentao.Outropontoimportanteaseufavorofocoem

mobilefirst,ou"primeiromobile",oque,naprtica,significaqueoframeworkfocanodesenvolvimentoresponsivoenaexperincia

queosusuriosteroemdispositivosmveis.

Algumasdassuasvantagensso:

Grandecomunidade:Porestarnomercadodesde2010,oBootstrappossuiumacomunidademuitograndeeativa,sempre

evoluindooframework.Omesmoestchegandosuaverso4(emfasealphaduranteaescritadesseartigo)epromete

novidadesinteressantes

Conjuntodeconesecomponentesbastanteextenso

Funcionamento:Afacilidadedeadiodecomportamentoaumaview,como,porexemplo,ummenuresponsivo(queabree

fechaemdispositivosmenores),outrodiferencial.IssoreforaumadaspreocupaesdoBootstrap:aexperinciadousurio

Sistemabaseadoemgrid:OsistemadegriddoBootstrapbastantecompletoepossuiquatrointervalosdelargura(<768px,

>=768px,>=992pxe>=1200px),cadaumcomumaclasse(colxsx,colsmx,colmdxecollgx,onde"x"onmerode

espaosqueoelementodeveocupar).Essesintervalosforamdefinidosvisandoaresponsividade.Paraisso,alargura

divididaemespaosmenores.NocasodoBootstrap,existem12espaosporlinha.Assim,umcdigocomoodaListagem1

tertrscolunas,sendoumacomcincoespaos,outracomtrsealtimacomquatro(3+5+4=12).

01<divclass="row">
02<divclass="colsm5">
03COLUNACOM5ESPAOS
04</div>
05<divclass="colsm3">
06COLUNACOM3ESPAOS
07</div>
08<divclass="colsm4">
09COLUNACOM4ESPAOS
10</div>
11</div>

Listagem1.SistemadegriddoBootstrap

OutropontodignodenotadoBootstrapsuacapacidadedeutilizarclassesparaesconderemostrarelementoscomfacilidade.Alm

disso,tambmpossibilitaautilizaodeclassesparaacessibilidade,paraelementoscomoleitoresdetelaenavegaoatravsdo

teclado.

Comodesvantagem,valecitarqueofocodoBootstrapnoterumwebsitevisualmentediferenciado.Apropostaprincipalquea

experinciadousuriooseja.Assim,tornaseumpoucomaisdifcilcriarinterfacesmaisdistantesdostemplatesfornecidos.

Entretanto,acustomizaobastantesimplesediversostemplatessooferecidosdeformagratuita.

Guia Bootstrap +

http://www.devmedia.com.br/bootstrapoumaterializeconhecaasprincipaisdiferencas/37830 3/6
30/01/2017 BootstrapouMaterialize:Conheaasprincipaisdiferenas

Materialize: vantagens e desvantagens

Emborapossuatodasasferramentasepotencialparaevoluir,oMaterializeaindanoestnomesmonveldoBootstrap.Porestar

hanosnomercado,oBootstrapjpossuiessereconhecimentoeatraiumuitosdesenvolvedoresparaajudaremtesteseatornlo

oque.OMaterialize,porsuavez,estdandoosprimeirospassoseseguindoporumcaminhoumpoucodiferente,paratambm

conquistarseuespao.

OgrandefocodoMaterializeovisual.Paraisso,eleutilizaasfilosofiasdedesigndoMaterialDesigndoGoogle,tecnologiaque

focanasimplicidadeparaaindicaodecomocriarinterfacesdeusuriomodernas.Apreocupaoestemcomooselementos

interagemumcomooutroecomousurio.Seanalisarmosmaisafundo,veremosqueaespecificaodesseframeworkmuito

maiscompletadoqueisso,envolvendomuitasoutrascoisas,comocomportamentofsico(movimentosemduasetrsdimenses),

luz,espao,etc.,paraqueseobtenhaumauniformidadedereaesdoselementosentreasplataformas,ouseja,umboto,por

exemplo,tenhaomesmocomportamentoemdiferentesnavegadoresemesmoemdiferentessistemasoperacionais,comoWindows

eGoogleAndroid.

OutrodiferencialqueoMaterializefoiprojetadoemcimadeumespaotridimensionaleutilizamuitoomovimento.Ento,os

elementosdowebsitepodemterprofundidadeesemoverdeumaformaespecfica.

AlgumasdasprincipaisvantagensdoMaterializeso:

Ovisual,quepermiteacriao,compoucoesforo,dewebsitesextremamenteinteressantes

Poucosbugsencontradosatomomento,oquereforaaqualidadedoprojeto

GridmuitosimilaraodoBootstrap,comopodemosobservarpelaListagem2.Entretanto,temapenastrsintervalos(<=600px,

<=992pxe>992px),representadospelasclassescolsx,colmxecollx.

01<divclass="row">
02<divclass="cols5">
03COLUNACOM5ESPAOS
04</div>
05<divclass="cols3">
06COLUNACOM3ESPAOS
07</div>
08<divclass="cols4">
09COLUNACOM4ESPAOS
10</div>
11</div>

Listagem2.SistemadegriddoMaterialize

OMaterializetraz,porpadro,algunselementosqueoBootstrapnopossui,comoToasts(mensagenssimilaressque

observamosnoAndroid),modaisfixasaorodapdapginaeoefeitoParallax.Esseltimoumefeitomuitoutilizadoem

websitesmodernos,especialmenteparatextosquecontmmuitasilustraes,comomostraaFigura3.

Guia Bootstrap +

http://www.devmedia.com.br/bootstrapoumaterializeconhecaasprincipaisdiferencas/37830 4/6
30/01/2017 BootstrapouMaterialize:Conheaasprincipaisdiferenas

Figura3.EfeitoParallax

Emrelaosdesvantagens,importantesaberqueoMaterializechegaparacompetir,masaindaprecisademaismaturidadepara

alcanaroBootstrap.Issoporqueeleumprojetomaisrecente,commenospessoasutilizandoemenordocumentao.Lembrese

queumsoftwaresconsideradorobustodepoisdealgumtempodetestesextensivos.

Emresumo,possvelrecomendarmososframeworksdaseguinteforma:paraumaaplicaovisualmenteinteressante(emtermos

deUI)ecompoucoesforo,optepeloMaterialize.Paraumprojetomaisrobusto,ondeofocoaexperinciadousurio,optepelo

Bootstrap.

PublicadonoCanalFrontendweb

porHenriqueMachado
Frontendexpert

Ajudenosaevoluir:vocgostoudopost? (0) (0)

Compartilhe:

Ficoucomalgumadvida?

Posteaquisuadvidaoucomentrioquenossaequiperesponderomaisrpidopossvel.

Maisposts
Aplicativo com fontes

Cdigo fonte - Lazy Load: Carregue pginas

Guiarapidamente
Bootstrap +
http://www.devmedia.com.br/bootstrapoumaterializeconhecaasprincipaisdiferencas/37830 5/6
30/01/2017 BootstrapouMaterialize:Conheaasprincipaisdiferenas

Vdeo aula Microcurso

Suavizando a transio com CSS3 - Lazy Load: Carregue pginas rapidamente - Vdeo 6
Vdeo aula Microcurso

Adicionando Lazy Load a uma pgina - Lazy Load: Carregue pginas rapidamente - Vdeo 5
Vdeo aula Microcurso

Determinando se uma imagem est visvel - Lazy Load: Carregue pginas rapidamente - Vdeo 4
Vdeo aula Microcurso

Usando data e src para carregar imagens - Lazy Load: Carregue pginas rapidamente - Vdeo 3

Listar mais contedo

Publique | Assine | Faleconosco

HospedagemwebporPorta80WebHosting

Guia Bootstrap +

http://www.devmedia.com.br/bootstrapoumaterializeconhecaasprincipaisdiferencas/37830 6/6