0% acharam este documento útil (0 voto)

15 visualizações18 páginas

Python Tema4 Parte6 BR v1

Python 6

Enviado por

biblioteamo

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

15 visualizações18 páginas

Python Tema4 Parte6 BR v1

Python 6

Enviado por

biblioteamo

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 18

IBM SkillsBuild | Introducción a Python

Desenvolvimento Web
Bootstrap

1
IBM SkillsBuild | Introducción a Python

Índice
Introdução 3
Características da Bootstrap 5 4
Vantagens 4
Desvantagens 4
Holamundo em Bootstrap 4
Adaptação do conteúdo à tela 5
Viewport virtual 5
Páginas responsive 6
Movile first 6
Contêineres 6
Sistema de grade Bootstrap 7
Alinhamento horizontal das grades 9
Componentes do Boostrap 9
Cores contextuais 10
Botões 10
Imagens 11
Esboço 11
Alinhamento 12
Tabelas 12
Cards 13
Formulários 14
Carousel 16
Os botões 16
Elementos incapacitantes 18
Depuração 18

2
IBM SkillsBuild | Introducción a Python

Introdução

Bootstrap é um framework gratuito para o

desenvolvimento da web.

Desenvolvido inicialmente em 2011 pelos

engenheiros do Twitter.

A versão atual, Bootstrap 5, será lançada em maio de

2021. Ao contrário das versões anteriores, ele usa o
JavaScript de baunilha, não o jQuery.

Ele inclui modelos HTML e CSS com fontes, formas,

botões, caixas, tabelas, barras de navegação,
carrosséis de imagens e muitos outros elementos.

Embora sua preferência seja a mobilidade em

primeiro lugar, permite criar projetos que tenham boa
aparência em múltiplos dispositivos (responsive
design) Orientado para programadores, não para
designers gráficos.

3
IBM SkillsBuild | Introducción a Python

Características da Holamundo em Bootstrap

Bootstrap 5
Para usar o Bootstrap você só precisa fazê-lo:

• Defina o viewport.
Vantagens
• Incluir um elemento link apontando para o
É fácil e rápido escrever páginas que parecem Bootstrap CSS.
ótimas. • Incluir um elemento de script apontando para o
código JavaScript do Bootstrap.
Ela se adapta a diferentes dispositivos (responsive
design).

Ele proporciona um projeto consistente.

<!doctype html>
É compatível com os navegadores modernos. <html lang="es-ES">
É um software livre.
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-
Desvantagens scale=1">
<link
Como uma ferramenta muito popular, as páginas web href="https://cdn.jsdelivr.net/npm/bootst
que não são personalizadas permanecem as mesmas [email protected]/dist/css/bootstrap.min.css"
que as de todos os outros. integrity="sha384-
1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjD
Não é particularmente fácil personalizar os estilos. brCEXSU1oBoqyl2QvZ6jIW3" rel="stylesheet"
crossorigin="anonymous">
<script
src="https://cdn.jsdelivr.net/npm/bootstr
[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-
ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH
9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous">
</script>
<title>Holamundo en Bootstrap 5</title>
</head>

<body>
<div class="container">
<h1>Holamundo en Bootstrap 5</h1>
</div>
</body>

</html>

4
IBM SkillsBuild | Introducción a Python

Adaptação do conteúdo à Viewport virtual

tela
Com o advento dos navegadores nos telefones
celulares, as mudanças no tamanho da tela são muito
Desde seu projeto original, um requisito importante mais drásticas. As técnicas tradicionais ainda
para a web é que as páginas possam ser funcionam, mas proporcionam uma experiência de
renderizadas em telas de qualquer tamanho. Com o usuário muito insatisfatória.
advento dos smartphones, isto se tornou ainda mais
necessário e mais complicado. Várias técnicas têm A área visível de um telefone celular é muito
sido utilizadas ao longo dos anos para alcançar isto, pequena, compondo uma página da web tradicional
cada vez melhor e melhor: nesse viewport é geralmente pouco atraente.

• Técnica inicial: Viewport. Barras de rolagem Além disso, em um navegador móvel não há barras
horizontais e verticais, recomposição de de rolagem, elas ocupariam um espaço muito valioso.
elementos no viewport. Nem janelas, elas seriam muito pequenas.
• Primeiros smartphones Viewport virtual.
Para resolver este problema, surgiu o conceito de
• Telefones celulares atuais Design responsivo
viewport virtual, maior do que o viewport comum (a
baseado em grid.
tela).

Inicialmente introduzido pela Apple em seu

Para projetar websites para dispositivos móveis, é navegador Safari no iOS, mais tarde tornou-se
importante ser claro sobre o que é o viewport e como padrão.
ele se comporta.
A largura do viewport virtual é razoavelmente grande,
O Viewport é a área visível de uma página da web. Em por exemplo 980 pixels no navegador Safari para
navegadores de mesa tradicionais, ele coincide com iPhone.
a janela do navegador.
O navegador compõe a página nesta janela de
Vamos assumir uma página web grande e complexa, viewport virtual, as barras de rolagem horizontais não
tal como a primeira página de um jornal. A página não são mais necessárias.
caberia na janela do navegador, o usuário usará as
O usuário arrasta o viewport (a tela menor) sobre o
barras de scroll para mover o viewport sobre o
viewport virtual para exibir uma área do documento
documento. O redimensionamento da janela mudará
ou outra. Ele também pode ser autorizado a
o tamanho do viewport.
aumentar e diminuir o zoom. O redimensionamento
Redimensionamento do viewport reposiciona o texto deste viewport já não faz com que a página seja
e todos os elementos: as linhas são truncadas, as recomposta.
imagens são reposicionadas...etc.

Viewport é um retângulo que compõe um fragmento

(talvez um completo) da página web para apresentá-
lo ao usuário.

5
IBM SkillsBuild | Introducción a Python

Páginas responsive
Em outras palavras: nenhum viewport virtual.

Um viewport virtual não é mais necessário nestas

Os mesmos 12 quadrados são apresentados de

forma diferente em:

Um computador XXXXXXXXXXXX
Em uma Tablet XXXXXX Contêineres
XXXXXX
Em um telefone XXXX
Para ser responsivo, todos os elementos do
celular XXXX
Bootstrap devem estar dentro de um elemento de
XXXX
contêiner.

Os contêineres não podem ser aninhados.

Devemos nos certificar de fechar cada contêiner

Movile first corretamente. Se alguma fila for deixada de fora,
suas colunas serão desalinhadas. E este erro não é
detectado pelo W3C validator.
Com uma propriedade meta tag, podemos especificar
a escala inicial do viewport.

Como as páginas de bootstrap são responsive,

especificamos que o viewport virtual deve
corresponder à largura da tela, ou seja, o viewport
comum.

6
IBM SkillsBuild | Introducción a Python

Para um recipiente de tamanho fixo, usamos <div class="col-xl-6 bg-primary

“container”: text-white">.col</div>
<div class="col-xl-6 bg-dark text-
white">.col</div>
<div class="container"> </div>
... </div>
</div>
</body>

</html>
<!doctype html>
<html lang="es-ES">

<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial- Se você quiser um container com a largura total (do
scale=1"> viewport), você tem que usar a expressão container-
fluid:
<link
href="https://cdn.jsdelivr.net/npm/bootst
[email protected]/dist/css/bootstrap.min.css" <div class="container-fluid">
rel="stylesheet" ...
integrity="sha384- </div>
1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjD
brCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">

7
IBM SkillsBuild | Introducción a Python

Quando a resolução diminui, as células que estavam • Columnas .col-xl-N:Layout normal em telas muito
originalmente na mesma fila são exibidas umas em grandes ou extra grandes. Empilhados em telas
cima das outras (layout empilhado). grandes, médias, pequenas ou muito pequenas.

Cada linha é um elemento HTML div com clase row.

• Columnas .col-lg-N: Layout normal em displays
Note que usando a notação seletora CSS (onde o
grandes, muito grandes ou extra grandes.
ponto significa clase), podemos chamá-lo de .row
Empilhamento em tamanhos médios, pequenos ou
Dentro da fila há elementos que neste assunto
muito pequenos.
chamamos de células, que podem ser dos tipos .col-
N, .col-sm-N, .col-md-N, .col-lg-N, .col-xl-N o .col- • Columnas .col-md-N: Layout normal em displays
xxl-N médios, grandes, muito grandes ou extra
grandes.

<div class="row"> Empilhamento: pequeno ou muito pequeno.

<div class="col-md-4">
</div> • Columnas .col-sm-N: Layout normal em displays
</div> pequenos, médios, grandes, muito grandes ou
extra-grandes.

Empilhado em muito pequenos.

Estes 6 tipos de células dependem da largura do
viewport (tela) no qual queremos que as células • Columnas .col-N: Arranjo normal em qualquer
sejam exibidas em um arranjo normal, não tela: muito pequena, pequena, média, média,
empilhadas. grande, muito grande ou extra grande. Nunca
empilhados.
• .col-N: Telas muito pequenas, menos do que
576px.
• .col-sm-N: Pequenas telas de pelo menos 576px.
Em outras palavras, cada tipo de coluna é exibido em
• .col-md-N: Telas médias de pelo menos 768px.
sua disposição normal, ou seja, horizontalmente, se a
• .col-lg-N: Telas grandes de pelo menos 992px.
exibição for do seu tipo ou de um tipo melhor. Caso
• .col-xl-N: Telas muito grandes de pelo menos
contrário, as células são empilhadas verticalmente.
1200px.
• .col-xxl-N: Telas extra grandes de pelo menos Isto parece um pouco complicado, mas com o
1400px. seguinte exemplo, veremos que não é:

Onde N é um número entre 1 e 12, indicando a

largura de cada coluna. O total das colunas em cada
linha pode somar até um máximo de 12. A borda
entre cada um desses tamanhos é designada como
breakpoint.

Columnas .col-xxl-N: Layout normal em telas extra

grandes.

Empilhados em telas muito grandes, grandes,

médias, pequenas ou muito pequenas. Se reduzirmos gradualmente a largura, isto equivale
a ter uma tela menor. Você verá que ao reduzir a

8
IBM SkillsBuild | Introducción a Python

largura, as grades que estavam originalmente em um • O resultado da utilização das diferentes classes
layout normal (horizontal) se empilharão de alinhamento horizontal. Neste caso, com duas
(verticalmente): colunas de 3 células cada.
• O uso da classe de borda com a cor de border-
primary.

Componentes do Boostrap

Bootstrap vem com um conjunto de estilos

(geralmente em formato de classe CSS) e
componentes JavaScript.:

• btn
• table
• card
Alinhamento horizontal • carousel

das grades e outros responsive utilities.

As células (que formarão colunas quando houver

várias células à mesma distância do eixo vertical)
podem ser alinhadas horizontalmente de várias
maneiras, acrescentando à linha (a clase row div) as
classes:

• justify-content-start
• justify-content-center
• justify-content-end
• justify-content-around
• justify-content-between
• justify-content-evenly

No código fonte deste exemplo, podemos ver:

9
IBM SkillsBuild | Introducción a Python

Cores contextuais

A gama de cores do concreto será decidida no CSS.

Aqui colocaremos classes com valor semântico.

Com algumas exceções, como light ou white, já que,

ao escolher a cor do fundo, também pode ser
necessário indicar a cor do texto (neste exemplo, o
texto branco sobre fundo branco não é visível):

<h2>Colores del texto</h2>

<p class="text-muted">Muted
(silenciado, apagado).</p>
<p class="text-primary">Primary.</p>
<p class="text-success">Success
(´exito).</p>
Botões
<p class="text-info">Info.</p>
<p class="text-warning">Warning.</p> A classe btn do Bootstrap pode ser adicionada aos
<p class="text-danger">Danger.</p>
elementos HTML:
<p class="text-
secondary">Secondary.</p> <button>, <input> e <a>
<p class="text-body">Body (típicamente
negro).</p>
<p class="text-light">Light grey .</p>
<p class="text-white">White.</p>
<h2>Colores del fondo</h2>
<p class="bg-primary text-
white">Primary.</p>
<p class="bg-success text-white">Sucess
(´exito)</p>
<p class="bg-info text-white">Info.</p>
<p class="bg-warning text-
white">Warning.</p>
<p class="bg-danger text-
white">Danger.</p>
<p class="bg-secondary text-
white">Secondary.</p>
<p class="bg-dark text-white">Dark
(grey).</p>
<p class="bg-light text-dark">Light
(grey).</p>

10
IBM SkillsBuild | Introducción a Python

Eles têm um efeito hover: eles destacam um botão Com o atributo disabled (atributo, não classe), o
quando o mouse está pairando sobre ele. botão é desativado.

<button type="button" <button type="button" class="btn btn-

class="btn">Basic</button> primary" disabled> disabled Primary
<button type="button" class="btn btn- </button>
primary">primary</button>
<button type="button" class="btn btn-
secondary">secondary</button>
<button type="button" class="btn btn-
success">success</button>
<button type="button" class="btn btn-
info">info</button>
<button type="button" class="btn btn-
warning">warning</button>
<button type="button" class="btn btn-
danger">danger</button>
<button type="button" class="btn btn-
Imagens
dark">dark</button>
<button type="button" class="btn btn-
Para modificar a aparência de uma imagem,
light">light</button>
Bootstrap nos permite acrescentar classes ao
<button type="button" class="btn btn-
link">link</button> elemento <img>
<button type="button" class="btn btn-outline-
primary">btn-outline-primary</button>
Esboço
<button type="button" class="btn btn-outline-
secondary">btn-outline-secondary</button> rounded: Cantos arredondados
<button type="button" class="btn btn-outline-
success">btn-outline-success</button> rounded-circle: Circular
<button type="button" class="btn btn-outline-
info">btn-outline-info</button> img-thumbnail: Miniatura (flange branca)
<button type="button" class="btn btn-outline-
warning">btn-outline-warning</button>
<button type="button" class="btn btn-outline-
danger">btn-outline-danger</button>
<button type="button" class="btn btn-outline-
dark">btn-outline-dark</button>
<button type="button" class="btn btn-outline-light
text-dark">btn-outline-light</button>

11
IBM SkillsBuild | Introducción a Python

Alinhamento Tabelas
float-start: Esquerda

float-end: Direita Para formatar um elemento <table>, o Bootstrap 5

nos oferece as classes:
mx-auto d-block: centrada
.table, .table-bordered, .table-hover, .table-dark y
fluid: Todo o espaço disponível .table-striped

<div class="row"> rounded <table class="table table-striped">

<div class="col-xl-12"> <thead>
<img src="images/plaza_espana.jpg" <tr>
alt="Plaza de Espa˜na, Madrid" <th>Baraja española</th>
width="400" class="rounded"> <th>Baraja francesa</th>
</div> </tr>
</div> </thead>
<tbody>
<tr>
<td>Caballo</td>
<td>Reina</td>
</tr>
<tr>
<td>Rey</td>
<td>Rey</td>
</tr>
</tbody>
</table>

12
IBM SkillsBuild | Introducción a Python

Eles podem receber uma cor de fundo contextual,

acrescentando as classes que já conhecemos:

.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-

danger, .bg-secondary, .bg-dark y .bg-light

<div class="card" style="width:400px">

<div class="card-header">
<h4 class="card-title">Gato
Panchi</h4>
</div>
<div class="card-body">
<img src="images/gato.jpg"
alt="Fotograf´ıa de un gato llamado
Panchi" width="300" class="mx-auto d-
block">
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary
float-end">M´as informaci´on</a>
</div>
</div>

Cards

Um cartão (card) é uma caixa redonda dividida em

cabeçalho, corpo e rodapé.

É útil para agrupar outros elementos, como botões,

formulários, imagens... etc.

Sucessor dos panels antigos nas versões anteriores

do Bootstrap.

13
IBM SkillsBuild | Introducción a Python

Formulários <title>Formularios en Bootstrap

5.</title>
</head>
O bootstrap inclui aulas para melhorar a aparência e
a usabilidade dos formulários: <body>
<div class="container">
• O uso de <label> é necessário, não é válido para
escrever texto HTML para identificar os
<h1>Formularios en Bootstrap 5</h1>
elementos do formulário.
• Os diferentes elementos de uma forma aparecem <form action="/action_page.html">
um abaixo do outro. Se os quisermos um ao lado <div class="form-group">
do outro, usaremos as linhas e colunas da grade. <label for="usuario" class="form-
• Ao <label> adicionamos class="form-label" label"> Nombre de usuario:</label>
• Para os elementos da entrada de texto, <input> e <input type="text" id="usuario"
<textarea> adicionamos class="form-control" class="form-control" name="usuario">
• Para os <checkbox> os colocamos em um <div> </div>
ao qual acrescentamos class="form-check"
<div class="form-group">
• Para osos <input type="radio"> <input
<label for="contrasenya"
type="checkbox"> adicionamos class="form-
class="form-label"> Contraseña:</label>
check-input" <input type="password"
name="contrasenya" id="contrasenya"
class="form-control">
</div>
<!doctype html>
<html lang="es-ES">

<div class="form-group">
<head>
<label for="pais" class="form-
<meta charset="utf-8">
label">País</label>
<meta name="viewport"
<input type="text" name="pais"
content="width=device-width, initial-
id="pais" value="España" class="form-
scale=1">
control"><br><br>
</div>
<link
href="https://cdn.jsdelivr.net/npm/bootst
<input type="submit">
[email protected]/dist/css/bootstrap.min.css"
</form>
rel="stylesheet"
integrity="sha384-
<hr>
1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjD
brCEXSU1oBoqyl2QvZ6jIW3"
<form>
crossorigin="anonymous">
<input type="radio" name="os"
<script
value="Linux" class="form-check-input"
src="https://cdn.jsdelivr.net/npm/bootstr
checked>Linux<br>
[email protected]/dist/js/bootstrap.bundle.min.js"
<input type="radio" name="os"
integrity="sha384-
value="MacOS" class="form-check-
ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH
input">MacOS<br>
9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>

14
IBM SkillsBuild | Introducción a Python

<input type="radio" name="os" <label for="nacimiento-hora"

value="Windows" class="form-check- class="form-label">Fecha y hora de
input">Windows<br> nacimiento:</label>
<input type="radio" name="os" <input type="datetime-local"
value="other" class="form-check- name="nacimiento-hora" id="nacimiento-
input">Otro<br> hora">
<br> </div>
<div class="form-check">
<input type="checkbox" <div class="form-group">
name="terminos" value="si" class="form- <label for="email" class="form-
check-input">He leido los términos y label"> E-mail:</label>
condiciones<br> <input type="email"
<input type="checkbox" name="email" id="email" class="form-
name="publicidad" value="si" class="form- control">
check-input">Deseo recibir comunicaciones </div>
comerciales<br>
</div> <div class="form-group">
<br> <label for="numero"
<input type="submit"> class="form-label"> Indica un número del
</form> 1 al 10:</label>
<input type="number"
<hr> name="numero" min="1" max="10"
id="numero" class="form-control">
<form class="form"> </div>
<fieldset>
<legend> <br>
Datos personales <input type="submit">
</legend> </fieldset>
</form>
<div class="form-group">
<label for="favcolor" <br>
class="form-label">Elija un <hr>
color:</label>
<br> <form class="form">
<input type="color" <div class="form-group">
name="favcolor" id="favcolor"> <label for="departamento"
class="form-label">Indique el
</div> departamento:</label>
<select name="departamento"
<div class="form-group"> id="departamento">
<label for="nacimiento" <option
class="form-label"> Fecha de value="Comercial">Comercial</option>
nacimiento:</label> <option
<input type="date" value="Técnico">Técnico</option>
name="nacimiento" id="nacimiento"> <option
</div> value="Webmaster">Webmaster</option>
</select>
<div class="form-group"> </div>

15
IBM SkillsBuild | Introducción a Python

<div class="form-group">
<label for="mensaje" class="form- Carousel
label">Mensaje:</label>
<textarea name="mensaje"
O componente carousel exibe fotografias que rolam
id="mensaje" rows="10" cols="30"
class="form-control">Escriba horizontalmente, como um slideshow. Você pode
aquí su mensaje.</textarea> adicionar legendas ou qualquer outro texto a eles.
</div>
O elemento de nível superior do carousel é um div
<input type="submit">
com as classes carousel e slide. Ele tem um atributo
</form>
</div> de id cujo valor será referenciado pelos botões que
</body> ele contém:

</html>
<div id="carrusel01" class="carousel
slide" data-bs-ride="carousel">

O .slide .carousel conterá três divs:

.carousel-indicators: Os pontos ou pequenas linhas

representando cada uma das fotos. Um div de classe
carousel-indicators

.carousel-inner: Um div de classe carousel-inner

com as imagens.

Cada imagem é um carousel-item, que contém a

imagem e um carousel-caption. É recomendado que
todas as imagens tenham a mesma relação
altura/largura.

Os botões
<!doctype html>
<html lang="es-ES">

16
IBM SkillsBuild | Introducción a Python

[email protected]/dist/css/bootstrap.min.css" </div>
rel="stylesheet"
integrity="sha384- <div class="carousel-item">
1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjD <img
brCEXSU1oBoqyl2QvZ6jIW3" src="images/esparragos_manzana.jpg"
crossorigin="anonymous"> alt="Esparragos con manzana" class="d-
<script block w-100">
src="https://cdn.jsdelivr.net/npm/bootstr <div class="carousel-caption">
[email protected]/dist/js/bootstrap.bundle.min.js" <h3>Espárragos con
integrity="sha384- manzana</h3>
ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH </div>
9sENBO0LRn5q+8nbTov4+1p" </div>
crossorigin="anonymous"></script> <div class="carousel-item">
<img
<title>Carrusel en Bootstrap5 .</title> src="images/ensalada_centollo.jpg"
</head> alt="Ensala de centollo" class="d-block
w-100">
<body> <div class="carousel-caption">
<div class="container"> <h3>Ensalada de centollo</h3>
<div id="carrusel01" class="carousel </div>
slide" data-bs-ride="carousel"> </div>
<div class="carousel-item">
 <img
<div class="carousel-indicators"> src="images/sushi_suelto.jpg" alt="Sushi
<button type="button" data-bs- suelto" class="d-block w-100">
target="#carrusel01" data-bs-slide-to="0" <div class="carousel-caption">
class="active"></button> <h3>Sushi suelto</h3>
<button type="button" data-bs- </div>
target="#carrusel01" data-bs-slide- </div>
to="1"></button> </div>
<button type="button" data-bs-
target="#carrusel01" data-bs-slide-  prev-icon"></span>
<div class="carousel-inner"> </button>
<div class="carousel-item <button class="carousel-control-
active"> next" type="button" data-bs-
<img target="#carrusel01" data-bs-
src="images/ensalada_reloj.jpg" slide="next">
alt="Ensalada reloj" class="d-block w- <span class="carousel-control-
100"> next-icon"></span>
<div class="carousel-caption"> </button>
<h3>Ensalada reloj</h3> </div>
</div>
17
IBM SkillsBuild | Introducción a Python

</div>
</body> Depuração
</html>
Se a página não se parece com a que estamos
procurando:

• Devemos nos certificar de que todos os

elementos estejam dentro de um contêiner.
Normalmente devemos usar apenas um para a
página.
• Use o W3C validator. Ele detectará elementos
não fechados (mas não elementos fechados no
lugar errado).
• Verifique se a estrutura de div está correta, se
não fechamos muito cedo ou muito tarde. Um
bom editor nos ajudará com isso, mostrando o
código em níveis.
• Se utilizarmos o Bootstrap, não acrescente
regras de CSS diretamente. A menos que