Framework 2

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">
<p>Parágrafo.</p>
</div>
Algumas Propriedades
Container Padding
<div class="container pt-5"></div>
"adicionar um preenchimento superior grande "

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

<p>Parágrafo.</p>
</div>
Cor do contêiner
<div class="container p-5 my-5 bg-dark text-white">

<p>Parágrafo<p>
</div>
<div class="container p-5 my-5 bg-primary text-white">

<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="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="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>
</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">

</div>
Botões
e) Grupos de botões verticais
Use a classe .btn-group-vertical.
<div class="btn-group-vertical">
</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
<button type="button" class="btn btn-primary">B1</button>
</div>
</div>

Framework 2

Enviado por

Direitos autorais:

Formatos disponíveis

Framework 2

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Framework 2

Enviado por

Direitos autorais:

Formatos disponíveis

Frameworks Frontend

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

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

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

"adicionar um preenchimento superior grande "

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

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

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

1) Três colunas de largura igual:

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

2) Quatro colunas de largura igual:

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

3) Duas colunas de várias larguras

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

Cabeçalhos <h1> a <h6>

<div class="container mt-3">

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

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

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

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

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

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

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

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

<div class="alert alert-primary">

<div class="alert alert-success">

<div class="alert alert-danger">

.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.

.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.

b) .alert-link - links de alerta

<div class="alert alert-success">

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

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

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

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

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

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

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

<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>

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

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

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-warning">Cuidado</button>

c) Tamanho dos botões

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

d) Grupos de botões horizontais

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