Scribd Logo
Carregar

Bem-vindo(a) ao Scribd!

  • 12 visualizações

    Framework 2

    Enviado por

    Ícaro Prado

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PPTX, PDF, TXT ou leia online no Scribd

    Framework 2

    Enviado por

    Ícaro Prado
    12 visualizações46 páginas

    Título original

    framework_2

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    PPTX, PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PPTX, PDF, TXT ou leia online no Scribd
    Fazer download em pptx, pdf ou txt
    12 visualizações46 páginas

    Framework 2

    Enviado por

    Ícaro Prado

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PPTX, PDF, TXT ou leia online no Scribd
    Fazer download em pptx, pdf ou txt
    Você está na página 1de 46

    Frameworks Frontend

    Ícaro Prado
    Bootstrap

    Linkar o CSS

    <head>
    <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/
    TYkiZhlZB6+fzT" crossorigin="anonymous">
    </head>
    Bootstrap

    Linkar o Javascript

    <body>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js"
    integrity="sha384-
    7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz"
    crossorigin="anonymous"></script>
    </body>
    Containers

    a) container - para criar um contêiner responsivo de largura fixa.

    <div class="container">
    <h1>Minha primeira página bootstrap</h1>
    <p>Parágrafo.</p>
    </div>
    Containers

    b) container-fluid - para criar um contêiner de largura total, que sempre


    abrangerá toda a largura da tela (width é 100%)

    <div class="container-fluid">
    <h1>Minha primeira página bootstrap</h1>
    <p>Parágrafo.</p>
    </div>
    Algumas Propriedades

    Container Padding

    <div class="container pt-5"></div>

    "adicionar um preenchimento superior grande "


    Algumas Propriedades

    Borda do container

    <div class="container p-5 my-5 border">


    <h1>Minha primeira página bootstrap</h1>
    <p>Parágrafo.</p>
    </div>
    Algumas Propriedades

    Cor do contêiner

    <div class="container p-5 my-5 bg-dark text-white">


    <h1>Minha primeira página bootstrap</h1>
    <p>Parágrafo<p>
    </div>

    <div class="container p-5 my-5 bg-primary text-white">


    <h1>Minha primeira página bootstrap</h1>
    <p>Parágrafo<p>
    </div>
    Containers Responsivos
    Como Criar Colunas
    Exemplos

    1) Três colunas de largura igual:

    <div class="container-fluid mt-3">


    <div class="row">
    <div class="col p-3 bg-primary text-white">col 1</div>
    <div class="col p-3 bg-dark text-white">col 2</div>
    <div class="col p-3 bg-primary text-white">col 3</div>
    </div>
    </div>
    Exemplos

    2) Quatro colunas de largura igual:

    <div class="container-fluid mt-3">


    <div class="row">
    <div class="col-sm-3 p-3 bg-primary text-white">col 1</div>
    <div class="col-sm-3 p-3 bg-dark text-white">col 2</div>
    <div class="col-sm-3 p-3 bg-primary text-white">col 3</div>
    <div class="col-sm-3 p-3 bg-dark text-white">col 4</div>
    </div>
    Exemplos

    3) Duas colunas de várias larguras

    <div class="container-fluid mt-3">


    <div class="row">
    <div class="col-sm-4 p-3 bg-primary text-white">.col</div>
    <div class="col-sm-8 p-3 bg-dark text-white">.col</div>
    </div>
    </div>
    Texto/Tipografia

    Cabeçalhos <h1> a <h6>

    <div class="container mt-3">


    <p class="h1">Título</p>
    </div>
    Cores do Texto

    Classes: .text-white
    .text-muted .text-dark
    .text-primary .text-body
    .text-success .text-light

    .text-info
    Exemplo:
    .text-warning
    <p class="text-muted">Texto</p>
    .text-danger
    .text-secondary
    Cores de Fundo

    Classes: .bg-danger
    .bg-secondary
    .bg-primary .bg-dark.
    .bg-success .bg-light
    .bg-info
    .bg-warning Exemplo:
    <div class="bg-primary p-3"></div>
    -> p-3: largura
    Cores de Fundo

    Pode-se também utilizar o text-bg-color que manipulará


    automaticamente a cor de texto apropriada para cada cor de fundo.

    Classes: class="text-bg-warning“
    class="text-bg-danger”
    class="text-bg-secondary"
    class="text-bg-primary"
    class="text-bg-dark"
    class="text-bg-success" class="text-bg-light”
    class="text-bg-info"
    Exercício
    Imagens
    Imagens

    a) Canto arredondados

    Classe: .rounded

    <img src="fig.jpg" class="rounded" alt=" " width="304" height="236">


    Imagens

    b) Círculo

    Classe: .rounded-circle

    <img src="fig.jpg" class="rounded-circle" alt=" " width="304"


    height="236">
    Imagens

    c) Miniaturas

    Classe: .img-thumbnail

    <img src="fig.jpg" class="img-thumbnail" alt=" " width="304"


    height="236">
    Imagens

    d) Alinhar imagens

    Classes:
    .float-start
    .float-end

    <img src= "fig1.jpg" class="float-start" alt="" width="304" height="236">


    <img src= "fig2.jpg" class="float-end" alt="" width="304" height="236">
    Imagens

    e) Centralizar imagem

    Classes:
    .mx-auto (margin: auto)
    .d.block (display: block)

    <img src="fig.jpg" alt="" class="mx-auto d-block" style="width:50%">


    Imagens

    e) Centralizar imagem

    Classes:
    .mx-auto (margin: auto)
    .d.block (display: block)

    <img src="fig.jpg" alt="" class="mx-auto d-block" style="width:50%">


    Mensagens de Alerta

    a) .alert – classe que cria os alertas, seguida das classes indicativas.

    <div class="alert alert-primary">


    <strong>Ação Importante!</strong>
    </div>
    Mensagens de alerta

    <div class="alert alert-success">


    Sucesso!
    </div>

    <div class="alert alert-danger">


    <strong>Perigo!</strong>
    </div>
    Mensagens de Alerta

    Classes:

    .alert-success - indica uma ação bem-sucedida ou positiva.

    .alert-info - indica uma mudança ou ação informativa neutra.

    .alert-warning - indica um aviso que pode precisar de atenção.

    .alert-danger - indica uma ação perigosa ou potencialmente negativa.


    Mensagens de Alerta

    .alert-primary - indica uma ação importante.

    .alert-secondary - indica uma ação um pouco menos importante.

    .alert-light - alerta cinza escuro.

    .alert-dark - alerta cinza claro.


    Mensagens de Alerta

    b) .alert-link - links de alerta

    <div class="alert alert-success">


    Sucesso! <a href="#" class="alert-link">Leia mais</a>
    </div>
    Mensagens de Alerta

    c) Alerta de fechamento

    Para fechar a mensagem de alerta, adicione a classe .alert-dismissible


    ao contêiner de alerta.

    <div class="alert alert-success alert-dismissible">


    </div>
    Mensagens de Alerta

    Em seguida, adicione:

    • class=“btn-close”
    • data-bs-dismis=“alert”

    A um link ou botão. Quando clicar nele, a caixa de alerta desaparecerá.


    Mensagens de Alerta

    <div class="alert alert-success alert-dismissible">


    <button type="button" class="btn-close" data-bs-dismiss="alert">
    </button>
    <strong>Sucesso!</strong>
    </div>
    Mensagens de Alerta

    d) Alertas animados

    Classes .fade e .show - efeito ao fechar a mensagem de alerta.

    <div class="alert alert-danger alert-dismissible fade show">


    Botões

    .btn

    a) Estilos: .btn-

    <button type="button" class="btn">Basico</button>


    <button type="button" class="btn btn-primary">Primario</button>
    <button type="button" class="btn btn-secondary">Secundario/button>
    <button type="button" class="btn btn-success">Sucesso</button>
    Botões

    <button type="button" class="btn btn-info">Info</button>

    <button type="button" class="btn btn-warning“<Cuidado</button>

    <button type="button" class="btn btn-danger">Perigo</button>

    <button type="button" class="btn btn-dark">Dark</button>

    <button type="button" class="btn btn-light">Light</button>

    <button type="button" class="btn btn-link">Link</button>


    Botões

    Podem ser usados em elementos <a>, <button> e <input>.

    <a href="#" class="btn btn-success">Link</a>


    <button type="button" class="btn btn-success">Button</button>
    <input type="button" class="btn btn-success" value="Input">
    <input type="submit" class="btn btn-success" value="Submit">
    <input type="reset" class="btn btn-success" value="Reset">
    Botões

    b) btn-outline - botões com contorno/bordas. Efeito adicional de hover.

    <button type="button" class="btn btn-outline-primary">Primario</button>


    <button type="button" class="btn btn-outline-secondary">Secundario
    </button>
    <button type="button" class="btn btn-outline-success">Sucesso</button>
    <button type="button" class="btn btn-outline-info">Info</button>
    Botões

    <button type="button" class="btn btn-outline-warning">Cuidado</button>


    <button type="button" class="btn btn-outline-danger">Perigo</button>
    <button type="button" class="btn btn-outline-dark">Dark</button>
    <button type="button" class="btn btn-outline-light text-dark">Light
    </button>
    Botões

    c) Tamanho dos botões

    .btn-lg
    .btn-sm

    <button type="button" class="btn btn-primary btn-lg">Grande</button>


    <button type="button" class="btn btn-primary">Default</button>
    <button type="button" class="btn btn-primary btn-sm">Pequeno</button>
    Botões

    d) Grupos de botões horizontais

    Usar uma <div> com a classe .btn-group para criar os grupos.


    Botões

    <div class="btn-group">
    <button type="button" class="btn btn-primary">Botão 1</button>
    <button type="button" class="btn btn-primary">Botão 2</button>
    <button type="button" class="btn btn-primary">Botão 3</button>
    </div>
    Botões

    Para aplicar tamanhos a todos os botões de um grupo, use:


    .btn-group-lg
    .btn-group-sm

    <div class="btn-group btn-group-lg">


    <button type="button" class="btn btn-primary">Botão 1</button>
    <button type="button" class="btn btn-primary">Botão 2</button>
    <button type="button" class="btn btn-primary">Botão 3</button>
    </div>
    Botões

    e) Grupos de botões verticais

    Use a classe .btn-group-vertical.

    <div class="btn-group-vertical">
    <button type="button" class="btn btn-primary">Botão 1</button>
    <button type="button" class="btn btn-primary">Botão 2</button>
    <button type="button" class="btn btn-primary">Botão 3</button>
    </div>
    Botões

    f) Grupos de botões lado a lado

    Os grupos de botões são "inline" por padrão, o que os faz aparecer lado a
    lado quando você tem vários grupos.
    Botões

    <div class="btn-group">
    <button type="button" class="btn btn-primary">B1</button>
    <button type="button" class="btn btn-primary">B2</button>
    <button type="button" class="btn btn-primary">B3</button>
    </div>

    <div class="btn-group">
    <button type="button" class="btn btn-primary">B4</button>
    <button type="button" class="btn btn-primary">B5</button>
    <button type="button" class="btn btn-primary">B6</button>
    </div>

    Você também pode gostar