04/09/2015

RailsGirlsTutorialSeusprimeirospassosemRubyonRails
Escolhaumdocumento...

IR

RubyonRailsPrimeirospassos

TwitterBootstrapeRails
Gosto

60

Tweetar

CriadoporDanielKehoe,@danielkehoe
URLdooriginal:http://railsapps.github.com/twitterbootstraprails.html
NessetutorialmostraremoscomoconfigurarumaaplicaoRails3.2parausaroframeworkTwitterBootstrap
comoferramentadedesenvolvimentoCSSparacriarolayoutdeumaaplicaoHTML5eestilizar
mensagensdealertaenotificaesRails.
OusodoTwitterBootstrapproporcionaumaestilizaogileatrativaparasuaaplicao.TwitterBootstrape
outrosframeworksCSS,talcomoZurbFoundation,soferramentasqueproporcionamumaestruturae
princpiosideaisparadesenvolvimentoRailsserverside("backend").TwitterBootstrapomaispopular
entreosdiversosframeworksCSSexistentes.
EssetutorialdestinaseaosdesenvolvedoresRailsutilizandoosexemplosdeaplicaesconstantesdo
repositrioRailsApps,contudotodospoderosebeneficiardele.muitofcilusaraferrametaRails
Composer("algocomousarocamando'railsnew'emsteroids")parainstalarTwitterBootstrapeconfiguraro
layoutdefaultparasuaaplicao.OprogramavailheapresentaraopoparainstalaroTwitterBootstrapou
outroframeworkCSSevaiconfigurarolayoutdefaultparaaaplicao.ORailstutorialforDevisewith
CanCanandTwitterBootstrapexemplificaacriaodeumaaplicaocompletadestinadaaautenticaode
usurioeautorizaoadministrativaestilizadacomusodoTwitterBootstrap.

InstalandooTwitterBootstrap
AinstalaodoTwitterBootstrapemumaaplicaoRailssefazemquatroetapas:
acrescenteumagememGemfile
editeoarquivoapp/assets/javascripts/application.jseadicioneosarquivosJavaScriptdoBootstrap.
acrescenteoarquivoapp/assets/stylesheets/bootstrap_and_overrides.css.scssparaadicionarosarquivos
CSSdoBootstrap.
editeoarquivoapp/views/layouts/application.html.erbparaalterarolayoutdaaplicao.
incluaTwitterBootstrapCSSstylingemRailsflashmessages

Asinstruesparacumprircadaumadasetapassoestudadasaseguir.

TwitterBootstrapGem
ExistemvriasopesparainstalarTwitterBootstrapemumaaplicaoRails.Oframeworkpodeser
instaladousandosualinguagemnativaLESSCSSoualinguagemSASS.VeroartigoTwitterBootstrap,
Less,andSass:UnderstandingYourOptionsforRails3.1.SASSalinguagemCSSpadropara
desenvolvimentoRails,assimrecomendamosinstalaragembootstrapsassdeThomasMcDonald's.
NoarquivoGemfileacrescenteoseguinte:
gem'bootstrapsass'

http://www.maujor.com/railsgirlsguide/bootstrap.php

1/6

04/09/2015

aseguirexecute:

RailsGirlsTutorialSeusprimeirospassosemRubyonRails
$bundleinstall

AdicioneTwitterBootstrapJavascript
IncluaoaarquivosJavascriptdoTwitterBootstrapmodificandooarquivo
app/assets/javascripts/application.js:
//=requirejquery
//=requirejquery_ujs
//=requirebootstrap
//=require_tree.

UsandoSASS
AlinguagempadroparadesenvolvimentoCSSemRailsSASS.
umaboaidiarenomearoarquivoapp/assets/stylesheets/application.csspara
app/assets/stylesheets/application.css.scss.
IssopossibilitaraquevocsebeneficiedalinguagemefuncionalidadesdasintaxeSASSparacriaras
folhasdeestilosdesuaaplicao.ParamaisinformaessobreasvantagensdousodeSASSconsulte
SASSBasicsRailsCastdeRyanBates.

ImporteasCSSdoTwitterBootstrap
AseguirvamosimportarosarquivosCSSdoTwitterBootstrap.Vocpoderiamodificaroarquivo
app/assets/stylesheets/application.css.scssparaimportarBootstrap.Contudo,recomendamoscriarum
arquivonovodenominadoapp/assets/stylesheets/bootstrap_and_overrides.css.scss.Casovocqueira
modificarasregrasCSSdeTwitterBootstrappodereditaroarquivoapplication.css.scssmasalterandoas
regrasCSSnoarquivobootstrap_and_overrides.css.scssproporcionarumamelhororganizaodas
suasCSS.
Oarquivoapp/assets/stylesheets/bootstrap_and_overrides.css.scssincluidoecompilado
automaticamentenoarquivoapplication.csspelocomando
app/assets/stylesheets/application.css.scss.

*=require_tree.

executadonoarquivo

Acrescentenoarquivoapp/assets/stylesheets/bootstrap_and_overrides.css.scss:
@import"bootstrap"
body{paddingtop:60px}
@import"bootstrapresponsive"

OarquivoimportarduasfolhasdeestiloCSSBootstrapumafolhacontendoasregrasCSSbsicaseoutra
comasregrasCSSparadesignresponsivo,destinadaapresentaraaplicaoemdiferentesdispositivose
resolues.
AregraCSS body{paddingtop:60px} destinaseaabrirumespaoparaacomodarabarradenavegao
pretanotopocriadapelaclasse navbarfixedtop noelemento header conformelayoutmostradoaseguir.
Nota:Antesdaverso2.0.2dobootstrapsassumbugrequeriaconfiguraroparmetroiconSpritePath.Isso
foiresolvidoenomaisnecessrio.
ParaexemplificarcomoacrescentarumaregraCSSaseraplicadaemtodasaspginasdaaplicao
mostramosocdigoaseguirquecriaumboxnacorcinzaparabackgrounddocontedodapgina.
Paracriarofundonacorcinzaacrescentenoarquivoapp/assets/stylesheets/application.css.scsso
seguinte:
.content{

http://www.maujor.com/railsgirlsguide/bootstrap.php

2/6

04/09/2015

RailsGirlsTutorialSeusprimeirospassosemRubyonRails

backgroundcolor:#eee
padding:20px
margin:020px/*indentaopaddingnegativoparapreservarogrid*/
webkitborderradius:006px6px
mozborderradius:006px6px
borderradius:006px6px
webkitboxshadow:01px2pxrgba(0,0,0,.15)
mozboxshadow:01px2pxrgba(0,0,0,.15)
boxshadow:01px2pxrgba(0,0,0,.15)
}

Layoutdefaultdaaplicao
GerarumanovaaplicaoRailscomocomando

railsnew

criaolayoutdefaultparaaaplicao.Railsusar

olayoutdefinidonoarquivoapp/views/layouts/application.html.erbcomodefaultparacadapginacriada.
SevocestiverusandoHamloarquivoserapp/views/layouts/application.html.haml.
Vocpodercriareestilizarmecanismosdenavegao,mensagensdeerrosenotificaesemuitomais
usandooframeworkTwitterBootstrap.
VeroartigoHTML5BoilerplateforRailsDevelopersparaumaexplicaosobreoqupoderserincludono
layoutdefaultdaaplicao.

LayoutdefaultcomTwitterBootstrap(ERB)
TwitterBootstrapprevfuncionalidadesparalayoutsmaiscomplexos.
Substituaocontedodoarquivoapp/views/layouts/application.html.erbpeloseguintecdigo:
<!doctypehtml>
<html>
<head>
<metacharset="utf8">
<metaname="viewport"content="width=devicewidth,initialscale=1.0">
<title><%=content_for?(:title)?yield(:title):"Myapp"%></title>
<metaname="description"content="">
<metaname="author"content="">
<%=stylesheet_link_tag"application",:media=>"all"%>
<%=javascript_include_tag"application"%>
<%=csrf_meta_tags%>
<%=yield(:head)%>
</head>
<body>
<headerclass="navbarnavbarfixedtop">
<navclass="navbarinner">
<divclass="container">
<%=render'layouts/navigation'%>
</div>
</nav>
</header>
<divid="main"role="main">
<divclass="container">
<divclass="content">
<divclass="row">
<divclass="span12">
<%=render'layouts/messages'%>
<%=yield%>
</div>
</div>
<footer>
</footer>
</div>
</div><!!endof.container>
</div><!!endof#main>
</body>
</html>

http://www.maujor.com/railsgirlsguide/bootstrap.php

3/6

04/09/2015

RailsGirlsTutorialSeusprimeirospassosemRubyonRails

LayoutdefaultcomTwitterBootstrap(Haml)
SevocestiverusandoHaml,removaapp/views/layouts/application.html.erbesubstituapor
app/views/layouts/application.html.hamlcomoseguintecontedo:
!!!
%html
%head
%meta{:charset=>"utf8"}
%meta{:name=>"viewport",:content=>"width=devicewidth,initialscale=1,maximumscale=1"}
%title=content_for?(:title)?yield(:title):"Myapp"
%meta{:content=>"",:name=>"description"}
%meta{:content=>"",:name=>"author"}
=stylesheet_link_tag"application",:media=>"all"
=javascript_include_tag"application"
=csrf_meta_tags
=yield(:head)
%body
%header.navbar.navbarfixedtop
%nav.navbarinner
.container
=render'layouts/navigation'
#main{:role=>"main"}
.container
.content
.row
.span12
=render'layouts/messages'
=yield
%footer

Navegao
Provavelmentevocvaiprecisardeummecanismodenavegaonaspginasdaaplicao.Vaiquerer
incluirumlinkemcadapginaapontandoparaaHome.Sevocimplementouautenticaocomusode
DevisevaiprecisardelinksparaLogin,LogouteCadastramento.Sevocimplementouautenticaocom
usodeOmniAuthvaiprecisardelinksparaLogineLogout.Sevocprojetouumareaadministrativavai
precisardeumlinkparaoAdministrador.
Vocpodercriarlinksdiretamentenolayoutdasuaaplicao,masmuitosdesnvolvedorespreferemcriar
umpartialtemplateum"partial"tendoemvistaumamelhororganizaodolayoutdefaultdaaplicao.

ExamplodenavegaoparaDevise(ERB)
Crieoarquivoapp/views/layouts/_navigation.html.erbparaanavegao.
ParaDeviseuseosseguinteslinks:
<%=link_to"Home",root_path,:class=>'brand'%>
<ulclass="nav">
<%ifuser_signed_in?%>
<li>
<%=link_to('Logout',destroy_user_session_path,:method=>'delete')%>
</li>
<%else%>
<li>
<%=link_to('Login',new_user_session_path)%>
</li>
<%end%>
<%ifuser_signed_in?%>
<li>
<%=link_to('Editaccount',edit_user_registration_path)%>
</li>
<%else%>
<li>
<%=link_to('Signup',new_user_registration_path)%>
</li>

http://www.maujor.com/railsgirlsguide/bootstrap.php

4/6

04/09/2015

RailsGirlsTutorialSeusprimeirospassosemRubyonRails

<%end%>
</ul>

ExamplodenavegaoparaDevise(Haml)
ParaHamlcomDevisecrieoarquivoapp/views/layouts/_navigation.html.haml:
=link_to"Home",root_path,:class=>'brand'
%ul.nav
ifuser_signed_in?
%li
=link_to('Logout',destroy_user_session_path,:method=>'delete')
else
%li
=link_to('Login',new_user_session_path)
ifuser_signed_in?
%li
=link_to('Editaccount',edit_user_registration_path)
else
%li
=link_to('Signup',new_user_registration_path)

MensagenscomTwitterBootstrap
Railsprevummecanismopadroparamostrarmensagensdealertas(inclusivedeerrros)eoutras
notificaesdenominadoRails"flashmessages"(talcomo"flashmemory".Noconfundircomaplataforma
proprietriadedesenvolvimento"AdobeFlash").
Vocpodercriarcdigodiretamentenoarquivodelayoutdasuaaplicaoparagerarmensgensou
opcionalmentecriarum"partial".
Railsusa

:notice

:alert

comochavesparamensagens.TwitterBootstrapprevaclasse

.alert

eas

classesadicionais .alertsuccess e .alerterror (verBootstrapdocumentationonalerts).Parseamento

adicionalrequeridoparaestilizarmensagensRails"notice"comasregrasdeestiloparaaclasse"alert
success"doTwitterBootstrap.QualqueroutramensagemRails"alert"serestilizadacomasregrasdeestilo
paraaclasse"alerterror"doTwitterBootstrap.
TwitterBootstrapprevousodeumpluginjQuerydenominadobootstrapalertquereduzatarefade
apresentarflashmessagesaumsimplesclique.Apropriedadedatadismissapresentaum"x"quepermite
fecharafuncionalidade.NotarqueTwitterBootstrapusaaentidadeHTML"&#215"nolugardaletra"x"do
teclado.
PorpadroTwitterBootstrapaplicaumfundonacorverdeparaaclasse .alertsuccess evermelha
para .alerterror .TwitterBootstrapprevaindaumaclasse .alertinfo comumfundonacorazul.Com
poucaslinhasdecdigopossvelcriarumnome,talcomo :info paraRailsflashmessageaserestilizada
segundoasregrasCSSparaaclasse .alertinfo doBootstrap.Contudoconvenienteficarmoscomas
convenespadrodeRailsusandosomente"alert"e"notice."

FlashMessagescomTwitterBootstrap(ERB)
ParaestilizarflashmessagescomTwitterBootstrapusandoERBcrieum"partial"em
app/views/layouts/_messages.html.erbcomomostradoaseguir:
<%flash.eachdo|name,msg|%>
<%ifmsg.is_a?(String)%>
<divclass="alertalert<%=name==:notice?"success":"error"%>">
<aclass="close"datadismiss="alert">&#215</a>
<%=content_tag:div,msg,:id=>"flash_#{name}"%>
</div>
<%end%>
<%end%>

http://www.maujor.com/railsgirlsguide/bootstrap.php

5/6

04/09/2015

RailsGirlsTutorialSeusprimeirospassosemRubyonRails

FlashMessagescomTwitterBootstrap(Haml)
ParaestilizarflashmessagescomTwitterBootstrapusandoHamlcrieum"partial"em
app/views/layouts/_messages.html.hamlcomomostradoaseguir:
flash.eachdo|name,msg|
ifmsg.is_a?(String)
%div{:class=>"alertalert#{name==:notice?"success":"error"}"}
%a.close{"datadismiss"=>"alert"}
=content_tag:div,msg,:id=>"flash_#{name}"

TwitterBootstrapprevumpluginjQuerydenominadobootstrapalertquereduzatarefadeapresentarflash
messagesaumsimplesclique.Apropriedadedatadismissapresentaum"x"quepermitefechara
funcionalidade.NotarqueTwitterBootstrapusaaentidadeHTML"&#215"nolugardaletra"x"doteclado.

Opesemelhorias
EssetutorialapresentouosfundamentosdousodoTwitterBootstrapcomRailsinclundomensagensde
alerta,notificaeselayoutdaaplicaocomusodeTwitterBootstrap.
HmuitomaiscoisasquevocpodefazercomTwitterBootstrap.Praumexemploavanadoconsulte
RailsApprailsprelaunchsignup.OtutorialrailsprelaunchsignuptutorialmostracomousarTwitterBootstrap
paracriarumajanelamodaletambmousodeAJAXparaumformulriodecadastramentoparauma
aplicao"Web2.0".Quandoousurioenviaoformulrioajanelamodalmostraumamensagemde
"Obrigado"(ouumamensagemdeerro)semrecarregarapgina.
Sugestes?Melhorias?Deixeumcomentrionoartigooriginal.

EssapginaumatraduoeestlicenciadadeacordocomasdiretrizesdoGithub
EssetutorialumadendodocumentaodetraduodoGuiadoRailsGirls,foidisponibilizado,
hospedadoemantidoporMaurcioSamySilvadesenvolvedordositedoMaujor(abreemoutrajanela).

http://www.maujor.com/railsgirlsguide/bootstrap.php

6/6