Scribd Logo
Carregar

Bem-vindo(a) ao Scribd!

  • 4 visualizações

    Bootstrap Ba&#769 Sico

    Enviado por

    KiritoBueno

    Direitos autorais:

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

    Bootstrap Ba&#769 Sico

    Enviado por

    KiritoBueno
    4 visualizações22 páginas

    Título original

    Bootstrap BáSico

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Direitos autorais:

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

    Bootstrap Ba&#769 Sico

    Enviado por

    KiritoBueno

    Direitos autorais:

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

    Introdução

    Bootstrap é um framework para construção de sites

    Possui diversas classes CSS e recursos em javascript

    Maiores informações em getboostrap.com


    Introdução
    Todos os recursos são apresentados no link Docs
    Inserindo bootstrap na sua página html
    Copie as linhas abaixo para a seção <head></head>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
    crossorigin="anonymous">

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
    crossorigin="anonymous"></script>
    Destacando título e parágrafo

    Mais informações em: https://getbootstrap.com/docs/5.3/content/typography/


    Destacando título e parágrafo
    Em: https://getbootstrap.com/docs/5.3/content/typography/

    Experimente outras configurações citadas nesta página

    ● class=”h1”
    ● class=”lead”
    ● <mark>
    ● <abbr class=”initialism”>
    ● …
    Cores
    Text-warning: cor do texto

    bg-success: cor de fundo

    Experimente as cores
    disponíveis em:
    https://getbootstrap.com/docs/5.3/utilities/colors/#c
    olors
    Cores
    Veja as cores de fundo em:
    https://getbootstrap.com/docs/5.3/utilities/background
    /#background-color
    Imagens

    As classes float-start e float-end, permite colocar imagens lado a lado

    Pode-se centralizar uma imagem usando a classe text-center


    Imagens e texto
    A classe img-fluid faz com que a imagem seja responsiva, ou
    seja, adequa-a ao tamanho da tela <img src="..."
    class="img-fluid" alt="...">

    Código disponível em: Figures · Bootstrap v5.3


    Botões - Buttons · Bootstrap v5.3
    Botões
    Usando o evento onClick, podemos fazer o botão emitir uma mensagem

    Mais informações em: https://getbootstrap.com/docs/5.3/components/buttons/


    Usando Cards Cards · Bootstrap v5.3

    A classe card-img-top mantém a imagem no topo do Card

    Poderia ser usado card-img-bottom para posicioná-la na parte de baixo

    text-center centraliza o texto do Card

    <div class="card text-center border-primary" style="width: 200px;" >


    <img src="img/android.png" class="card-img-top" alt="...">
    <div class="card-body" >
    <h5 class="card-title" >Título do Card </h5>
    <p class="card-text" >Lorem ipsum dolor sit amet consectetur
    adipisicing elit.
    qui provident optio aliquam? </p>
    </div>
    </div>
    Usando Cards Cards · Bootstrap v5.3

    O botão exibe ou oculta o texto do Card

    Abaixo são destacadas as mudanças em relação


    ao Card anterior
    Dropdown Dropdowns · Bootstrap v5.3

    Menu dropdown com links

    <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">
    Produtos
    </button>
    <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Automotivo</a></li>
    <li><a class="dropdown-item" href="#">Informática</a></li>
    <li><a class="dropdown-item" href="#">Outros</a></li>
    </ul>
    </div>
    NavBar
    Barras de navegação são muito usadas em sites

    São responsivas de acordo com o tamanho da tela


    <nav class="navbar navbar-expand-lg bg-body-tertiary" >
    <div class="container-fluid" >

    <button class="navbar-toggler" data-bs-toggle ="collapse" data-bs-target ="#navbar">


    <span class="navbar-toggler-icon" ></span>
    </button>
    <div class="collapse navbar-collapse" id="navbar">
    <ul class="navbar-nav me-auto" >
    <li class="nav-item">
    <a class="nav-link active" aria-current ="page" href="#">Produtos</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#">Serviços</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#">Contato</a>
    </li>
    </ul>
    </div>
    </div>
    </nav>
    Tabela
    A classe table-striped varia a cor das
    linhas

    A classe table-responsive torna a


    tabela responsiva em relação ao
    tamanho de tela
    Tabela
    Usando as classes de
    cor, pode-se colorir a
    tabela toda

    Ou apenas algumas
    linhas
    Grids
    Grids permitem colocar vários elementos lado a lado
    Grids
    Para centralizar o texto verticalmente, usamos as classes abaixo
    Grids
    Podemos ter várias linhas, assim como
    uma tabela
    <div class="container">
    <div class="row"> <div class="row">

    <div class="col"> <div class="col">


    <img src="img/exercicios.png" alt="..."> Lorem ipsum dolor sit amet
    </div>
    </div> <div class="col d-flex flex-column
    <div class="col d-flex flex-column justify-content-center">
    justify-content-center"> <img src="img/exercicios.png" alt="...">
    Lorem ipsum dolor sit amet consectetur .
    </div>
    </div> <div class="col">
    <div class="col"> Lorem ipsum dolor sit amet
    <img src="img/exercicios.png" alt="..."> </div>
    </div> </div>
    </div> </div>

    Você também pode gostar