EstasrieumavisogeraldoBootstrap,umframeworkdefrontendquetimoparacriarinterfacesparawebappsewebsites.

Neste tutorial,enovdeoabaixo,euvou lhemostrarobsicodoBootstrap,depoisvamosfazerodownloaddocdigopara,ento,comearmosaorganizarosarquivosefazeralgumasexperinciascomoBootstrap.

OQueoBootstrap?OBootstrap um framework de Frontend paraWeb, e paraMobile tambm, que agiliza o desenvolvimento de sites eaplicaesweb.

ElefoicriadonasededoTwitterem2010porMarkOttoeJacobThornton. Era para ser, apenas, uma ferramenta interna dopessoaldoTwitter,eeraconhecidocomoTwitterBlueprint,antesdeserpublicadocomoopensource.

No Bootstrap voc pode utilizar vrios cdigos HTML e CSSpadronizados, que definem a tipografia,osformulrios,botes,tabelas,layouts,navegao,elementosdeinterfacedeusurioeoutrascoisasmais.

Deumaformamaisresumida:

O Bootstrap um framework para criar interfaces de usurioparaWeb(eMobileWeb)O Bootstrap define estilos CSS, Componentes reutilizveis e

pluginsparajQuery um dos frameworks de frontend mais populares do mundo,

Bootstrap3:ComoComear

atualmente

Para trabalhar com oBootstrap, voc precisa ter conhecimentosdeHTML&CSS.TambmbomconhecerJavascript.Mas,noprecisa ser mestre na rea. Basta saber escrever divs, colocarclasses e saber como elas funcionam, que voc j sabe osuficienteparacomearatrabalharcomoBootstrap.

O que Possvel Fazer comoBootstrap?OBootstrappossibilitaquevoccrielayoutsetelaspadronizadaspara sites, e tambm web apps. E com design responsivo,tambm.

Mas, lembrese: o framework funciona para criar a estrutura dassuas telas e layouts. Ou seja, a forma como elas vo estarorganizadasecomooscomponentesestarodispostos.

OBootstrap atua no frontend, ento no espere fazer cadastrosembancosdedados,ouconstruirumaaplicaocompletausandosele.(vocpodeusarPHPnobackend,porexemplo)

OBootstrapjpossuiumvisualpadro,masvocpodepersonalizlocompletamente,deacordocomoseudesign.

Ento,vamoscomear

Passo1:PegueoFrameworkAcesseositedoBootstrap,efaaodownloaddoBootstrap3(quevaiserusadonestetutorial).

Depoisdefazerodownload,extraiaosarquivosparaumapastaondevaificaroseuprojeto.Vocpoderenomearapastaextrada,sequiser.

Aofinalvocdeveestarcomaseguinteestruturadearquivos:

nomeprojeto/

css/

js/

fonts/

Apartirdaqui,vamoscomearacriarosarquivosHTMLdaspginas.

Passo2:PegueojQueryParaoBootstrapfuncionar,necessrioreferenciarojQuery.

VocpodefazerodownloaddojQueryecoloclonapastajs/doseuprojeto.

Eucostumorenomeloparajquery.js,apenaspararemoveraversoedeixarmaisfcildefazerolink.

Passo3:CrieoTemplateInicialAtaqui,pastadoprojetoestconfiguradacorretamente.Agora,crieumapginaindex.html,coloqueocdigoaseguir:

SitecomBootstrap

Oi,Bootstrap!

Bootstrap)>

Essecdigosechamaboilerplate,eumtemplateinicialparaaaplicao.umtipodecdigoqueserepeteemquasetodasaspginas.

Vocdevecriar,tambm,umarquivostyle.css,ecolocarnapastacss.Estearquivovaidefinirosestilospersonalizadosdapgina.

/*

*style.css

*/

body{

paddingtop:50px;

}

Perfeito.

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