Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Bootstrap 3 - Como Começar - Web Dev Academy

    Enviado por

    alex_snp
    68 visualizações5 páginas
    Bootstrap 3_ Como Começar - Web Dev Academy

    Título original

    Bootstrap 3_ Como Começar - Web Dev Academy

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento
    Bootstrap 3_ Como Começar - Web Dev Academy

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    68 visualizações5 páginas

    Bootstrap 3 - Como Começar - Web Dev Academy

    Enviado por

    alex_snp
    Bootstrap 3_ Como Começar - Web Dev Academy

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 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.

    Você também pode gostar