Bootstrap

De Aulas
Revisão de 20h47min de 25 de março de 2024 por Admin (discussão | contribs) (→‎Desafio 2)
(dif) ← Edição anterior | Revisão atual (dif) | Versão posterior → (dif)


Afluentes: Desenvolvimento Front-end I, Usabilidade, desenvolvimento web, mobile e jogos

Introdução

Antes de vermos o que é o Bootstrap e como usar, vou deixar indicado aqui dois locais muito bons para aprender Bootstrap e consultar como utilizar seus componentes:


Tplnote Bulbgraph.png

O conteúdo aqui só mostra alguns elementos e é um resumo. Para um conteúdo mais completo, veja nos links acima.

O Bootstrap é um framework para construir páginas web responsívas e focadas em dispositivos móveis.

Para usar o Bootstrap, é necessário colocar algumas tags na nossa página. Colocamos dentro da tag head um link para um CSS e para um javascript. Podemos ver essas tags no exemplo hello world com bootstrap abaixo: 

<!doctype html>
<html lang="pt-br">

<head>
    <!-- Metatag da lingua-->
    <meta charset="utf-8">
    <!-- Metatag para página responsiva -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

    <!-- Bootstrap Bundle with Popper JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
        crossorigin="anonymous"></script>

    <title>Hello world</title>
</head>

<body>
    <h1>Olá Mundo</h1>

    <p>Este é minha primeira página usando Bootstrap.</p>
</body>

</html>

Layout

Containers

Os containers são os elementos mais básicos do Bootstrap. Eles são utilizados para trabalhar com o sistema de grids. Temos as seguintes classes de conteiners:

  • container: container default.
  • container-fluid;
  • container-{breakpoint}: em que especifíca-se o breakpoint do container (ver link)

Para utilizar um container, basta colocar o conteúdo entre as tags div: 

<div class="container">
    <!-- Coloque o conteúdo do container aqui -->
</div>

Grids

As grids são uma forma bastante flexível de construção de layout, principalmente quando trabalhamos com aplicações para dispositivos móveis. Ele separa o nosso ambiente em linhas e colunas. 

    <div class="container">
        <div class="row">
            <div class="col">
                Coluna UM de três
            </div>
            <div class="col">
                Coluna DOIS de três
            </div>
            <div class="col">
                Coluna TRÊS de três
            </div>
        </div>
    </div>

Observem que nesse exemplo criamos uma linha (row) com três colunas (col). Mas as colunas não precisam ser sempre as mesmas se tivermos mais linhas. 

    <div class="container">
        <div class="row">
            <div class="col">
                1 of 2
            </div>
            <div class="col">
                2 of 2
            </div>
        </div>
        <div class="row">
            <div class="col">
                1 of 3
            </div>
            <div class="col">
                2 of 3
            </div>
            <div class="col">
                3 of 3
            </div>
        </div>
    </div>

No Bootstrap temos até 12 células para usar em cada linha e podemos também definir quantas colunas vamos usar para uma célula. 

    <div class="container">
        <div class="row">
            <div class="col">
                1 of 3
            </div>
            <div class="col-6">
                2 of 3
            </div>
            <div class="col">
                3 of 3
            </div>
        </div>
        <div class="row">
            <div class="col">
                1 of 3
            </div>
            <div class="col-5">
                2 of 3
            </div>
            <div class="col">
                3 of 3
            </div>
        </div>
    </div>

Uma observação é que podemos colocar uma linha dentro de uma célula e essa linha também pode conter várias células. Em suma, as grids podem ser aninhadas para organizar o conteúdo da sua página web ou aplicação.

Componentes

Accordion

Um accordion é um componente que colapsa em si. A seguir vemos a estrutura báśica de um accordion. 

    <div class="accordion" id="accordionExample">
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingOne">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
                    aria-expanded="true" aria-controls="collapseOne">
                    Ítem do accordion.
                </button>
            </h2>
            <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne"
                data-bs-parent="#accordionExample">
                <div class="accordion-body">
                    Conteúdo do accordion... Se quiser que o accordion inicie colapsado, use a classe show na div id
                    <code>collapsOne</code>.
                </div>
            </div>
        </div>
    </div>

Agora observe no seguinte exemplo o comportamento de um accordion com vários ítens. Veja que os ítens fazem parte de um conjunto e quanto você seleciona um accordion, o outro que está aberto se fecha. 

<div class="accordion" id="accordionExample">
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingOne">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
                    aria-expanded="true" aria-controls="collapseOne">
                    Accordion Item #1
                </button>
            </h2>
            <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
                data-bs-parent="#accordionExample">
                <div class="accordion-body">
                    <strong>This is the first item's accordion body.</strong> It is hidden by default, until the
                    collapse plugin adds the appropriate classes that we use to style each element. These classes
                    control the overall appearance, as well as the showing and hiding via CSS transitions. You can
                    modify any of this with custom CSS or overriding our default variables. It's also worth noting that
                    just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit
                    overflow.
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingTwo">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                    data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                    Accordion Item #2
                </button>
            </h2>
            <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
                data-bs-parent="#accordionExample">
                <div class="accordion-body">
                    <strong>This is the second item's accordion body.</strong> It is hidden by default, until the
                    collapse plugin adds the appropriate classes that we use to style each element. These classes
                    control the overall appearance, as well as the showing and hiding via CSS transitions. You can
                    modify any of this with custom CSS or overriding our default variables. It's also worth noting that
                    just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit
                    overflow.
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingThree">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                    data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                    Accordion Item #3
                </button>
            </h2>
            <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
                data-bs-parent="#accordionExample">
                <div class="accordion-body">
                    <strong>This is the third item's accordion body.</strong> It is hidden by default, until the
                    collapse plugin adds the appropriate classes that we use to style each element. These classes
                    control the overall appearance, as well as the showing and hiding via CSS transitions. You can
                    modify any of this with custom CSS or overriding our default variables. It's also worth noting that
                    just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit
                    overflow.
                </div>
            </div>
        </div>
    </div>

Alerts

Um alert pode ser utilizado para vários propósitos. Ele deixa o texto como uma formatação de destaque. 

    <div class="alert alert-primary" role="alert">
        Um simples alerta!
    </div>

Nesse exemplo usamos a classe alert-primary, mas temos outras que podem ser usadas. As classes são:

  • alert-primary
  • alert-secondary
  • alert-success
  • alert-danger
  • alert-warning
  • alert-info
  • alert-light
  • alert-dark

Se você usar um link dentro de um alert, use a classe alert-link no link.

Do mesmo jeito, caso queira colocar um título dentro do alert adicione a classe alert-heading

Podemos colocar um botão para fechar o alert. Para isso, use a classe alert-dismissible e pode acrescentar as classes fade show para aparecer uma animação. Além disso, é necessário adicionar um elemento para poder ativar a ação, observe a tag button no exemplo a seguir: 

<div class="alert alert-warning alert-dismissible fade show" role="alert">
    <h4 class="alert-heading">Material da Disciplina</h4>
    Os conteúdos estão na <a href="https://saulo.arisa.com.br" class="alert-link">wiki do professor</a>.
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>


Botões

Você pode usar classes para deixar os botões com aparência diferentes. No exemplo abaixo usamos a classe btn-primary, mas podemos usar as mesmas formas que vimos nos alert, mas ao invez de usar alert-primary, usamos button-primary. 

<button class="btn btn-primary" type="submit">Button</button>

Se preferir, pode apenas trabalhar com as bordas com uso da classe btn-outline-warning por exemplo. 

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

Caso queira mostrar um botão como ativo, use a classe active.

Cards

Cards são estruturas visuais com Títulos, textos, links, botões. 

<div class="card" style="width: 18rem;">
    <div class="card-body">
        <h5 class="card-title">Título</h5>
        <h6 class="card-subtitle mb-2 text-muted">Subtítulo</h6>
        <p class="card-text">Um texto pode ser incluído aqui para passar alguma informação.</p>
        <a href="#" class="card-link">link do card</a>
        <a href="#" class="card-link">OUtroo link</a>
        <a href="#" class="btn btn-primary">Um botão</a>
    </div>
</div>

Também podemos usar o cabeçalho e o rodapé de um card. 

<div class="card text-center">
    <div class="card-header">
        Featured
    </div>
    <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
    <div class="card-footer text-muted">
        2 days ago
    </div>
</div>

Observem que no exemplo acima o card se extendeu para a página toda. Se quiserem limitar o tamanho, basta adicionar um css, por exemplo style="width: 18rem;" no div principal do card.

Também podemos adicionar tags para mudar a cor do card, como bg-primary ou border-primary. Lembrando que podemos tambem usar secondary, warning, success, etc.

Dropdowns

São elementos, por exemplo botões, que clicamos e mostra mais opções de escolha. 

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1"
        data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown button
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
</div>

Pode-se usar classes como btn-secondary, dropdown-menu-dark, etc... 

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
    <li><a class="dropdown-item active" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

Modal

Modal são caixas de conteúdo que abrem na nossa tela. O Botstrap só permite uma modal aberta. 

<!-- Button que abre a modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Abrir a modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Titulo da Modal</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Conteúdo de texto da modal.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
                <button type="button" class="btn btn-primary">Salvar</button>
            </div>
        </div>
    </div>
</div>

Vejam que temos um botão ou elemento que vai abrir a modal quando ocorrer uma ação. Na modal temos um botao X para fechar. Ela é fechada também quando clicarmos no botão Fechar no rodapé por causa do atributo data-bs-dismiss-="modal".

Navs, Tabs e Navbar

As Navs ou navigations são itens para navegar em ítens no site. no HTML são organizados como listas. 

<ul class="nav">
    <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </li>
</ul>

As Tabs mostram conteúdos de cada ítem da tab. É como páginas com marcadores. 

<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button"
            role="tab" aria-controls="home" aria-selected="true">Início</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button"
            role="tab" aria-controls="profile" aria-selected="false">Perfil</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button"
            role="tab" aria-controls="contact" aria-selected="false">Contato</button>
    </li>
</ul>
<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Conteúdo da tab Início  .</div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Conteúdo da tab Perfil.</div>
    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Conoteúdo da tab Contato.</div>
</div>

Uma Navbar é como uma estrutura de navegação um pouco diferente das navs. Quado a tela é menor que a nav, ela pode colapsar. 

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
            aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Features</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Pricing</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
                        data-bs-toggle="dropdown" aria-expanded="false">
                        Dropdown link
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

Atividades

Desafio 1

RELEMBRANDO: Apenas revendo o que fizemos até agora como atividades, na estação de simulação da aula de HTML e CSS, vocês criaram um site usando apenas os recursos do HTML e do CSS. Na estação de simulação da aula de JavaScript, vocês criaram um formulário com validação de campos.

O QUE FAZER?: Agora pegue o site que vocês fizeram e use Bootstrap. Já que sabemos agora usar os recursos do javascript, coloque o formulário que vocês criaram com validação nesse site, e use também o bootstrap para deixar o formulário mais bonito e responsívo.

Desafio 2

Mude o tema do seu site em bootstrap apenas selecionando o tema em um elemento do tipo select. Já existem temas prontas que vocês podem usar.

Exemplo: https://bootswatch.com

Disponível em “https://saulo.arisa.com.br/wiki/index.php?title=Bootstrap&oldid=9075”