Вы находитесь на странице: 1из 5

Bootstrap3:ComoComear

EstasrieumavisogeraldoBootstrap,umframeworkdefront
endquetimoparacriarinterfacesparawebappsewebsites.
Neste tutorial, e no vdeo abaixo, eu vou lhe mostrar o bsico do
Bootstrap,depoisvamosfazerodownloaddocdigopara,ento,
comearmosaorganizarosarquivosefazeralgumasexperincias
comoBootstrap.

OQueoBootstrap?
O Bootstrap um framework de Frontend para Web, e para
Mobile tambm, que agiliza o desenvolvimento de sites e
aplicaesweb.
ElefoicriadonasededoTwitterem2010porMarkOtto e Jacob
Thornton. Era para ser, apenas, uma ferramenta interna do
pessoaldoTwitter,eeraconhecidocomoTwitterBlueprint, antes
deserpublicadocomoopensource.
No Bootstrap voc pode utilizar vrios cdigos HTML e CSS
padronizados,

que

definem

tipografia,

osformulrios,botes,tabelas,layouts, navegao, elementos


deinterfacedeusurioeoutrascoisasmais.
Deumaformamaisresumida:
O Bootstrap um framework para criar interfaces de usurio
paraWeb(eMobileWeb)
O Bootstrap define estilos CSS, Componentes reutilizveis e
pluginsparajQuery
um dos frameworks de frontend mais populares do mundo,

atualmente
Para trabalhar com o Bootstrap, voc precisa ter conhecimentos
deHTML&CSS.TambmbomconhecerJavascript.Mas,no
precisa ser mestre na rea. Basta saber escrever divs, colocar
classes e saber como elas funcionam, que voc j sabe o
suficienteparacomearatrabalharcomoBootstrap.

O que
oBootstrap?

Possvel

Fazer

com

OBootstrappossibilitaquevoccrielayoutsetelaspadronizadas
para sites, e tambm web apps. E com design responsivo,
tambm.

Mas, lembrese: o framework funciona para criar a estrutura das


suas telas e layouts. Ou seja, a forma como elas vo estar
organizadasecomooscomponentesestarodispostos.
O Bootstrap atua no frontend, ento no espere fazer cadastros
embancosdedados,ouconstruirumaaplicaocompletausando
sele.(vocpodeusarPHPnobackend,porexemplo)

OBootstrapjpossuiumvisualpadro,masvocpode
personalizlocompletamente,deacordocomoseudesign.
Ento,vamoscomear

Passo1:PegueoFramework
AcesseositedoBootstrap,efaaodownloaddoBootstrap3(que
vaiserusadonestetutorial).
Depoisdefazerodownload,extraiaosarquivosparaumapasta
ondevaificaroseuprojeto.Vocpoderenomearapastaextrada,
sequiser.
Aofinalvocdeveestarcomaseguinteestruturadearquivos:

nomeprojeto/
css/
js/
fonts/

Apartirdaqui,vamoscomearacriarosarquivosHTMLdas
pginas.

Passo2:PegueojQuery
ParaoBootstrapfuncionar,necessrioreferenciarojQuery.
VocpodefazerodownloaddojQueryecoloclonapastajs/do
seuprojeto.
Eucostumorenomeloparajquery.js,apenaspararemovera
versoedeixarmaisfcildefazerolink.

Passo3:CrieoTemplateInicial
Ataqui,pastadoprojetoestconfiguradacorretamente.
Agora,crieumapginaindex.html,coloqueocdigoaseguir:

<!DOCTYPEhtml>
<html>
<head>
<title>SitecomBootstrap</title>
<metaname="viewport"content="width=devicewidth,
initialscale=1.0">
<!Bootstrap>
<linkhref="css/bootstrap.min.css"rel="stylesheet">
<linkhref="css/style.css"rel="stylesheet">
</head>
<body>
<h1>Oi,Bootstrap!</h1>

<!jQuery(necessarioparaospluginsJavascript
Bootstrap)>
<scriptsrc="js/jquery.js"></script>
<scriptsrc="js/bootstrap.min.js"></script>
</body>

</html>

Essecdigosechamaboilerplate,eumtemplateinicialparaa
aplicao.umtipodecdigoqueserepeteemquasetodasas
pginas.
Vocdevecriar,tambm,umarquivostyle.css,ecolocar
napastacss.Estearquivovaidefinirosestilospersonalizadosda
pgina.

/*
*style.css
*/
body{
paddingtop:50px;
}

Perfeito.
ObservequeoBootstrapestreferenciadonapginaindex.html,
bemcomoojQueryeostyle.css.Lembresedecolocarsempreo
.csseo.jsdoBootstrap.