Pontos Flutuantes
Por: questao 105 • 26/11/2020 • Trabalho acadêmico • 1.106 Palavras (5 Páginas) • 212 Visualizações
<!doctype html>
<html lang="pt-br">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Bootstrap - Elementos flutuantes</title>
</head>
<body style="margin-bottom: 200px;padding: 16px;">
<!-- Elementos flutuantes -->
<div style="border: 1px solid red;" class="clearfix">
<div class="bg-success float-left">Float Left</div>
<div class="bg-warning float-right">Float Right</div>
</div>
<!-- Posicionamento fixo - top e bottom -->
<h1 class="bg-success fixed-bottom">Título do conteúdo fixo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum elementum quam, a viverra ligula fringilla tempus. Ut tempor, dui eu semper aliquet, sem nisi pellentesque libero, suscipit porttitor risus magna vel lorem.</p>
<!--
Float responsivo - float-<tela>-<direcao>
tela: sm, md, lg, xl
alinhamento: left, right
-->
<div class="float-sm-right">tela >= 576px * </div><!--Small-->
<div class="float-md-right">tela >= 768px * </div><!--Medium-->
<div class="float-lg-right">tela >= 992px * </div><!--Large-->
<div class="float-xl-right">tela >= 1200px * </div><!--Extra Large-->
<br>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum elementum quam, a viverra ligula fringilla tempus. Ut tempor, dui eu semper aliquet, sem nisi pellentesque libero, suscipit porttitor risus magna vel lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum elementum quam, a viverra ligula fringilla tempus. Ut tempor, dui eu semper aliquet, sem nisi pellentesque libero, suscipit porttitor risus magna vel lorem.</p>
<!-- Colar no topo (sticky) -->
<ul class="list-inline bg-warning sticky-top">
<li class="list-inline-item">Item 1</li>
<li class="list-inline-item">Item 2</li>
<li class="list-inline-item">Item 3</li>
</ul>
<h1>Título do conteúdo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum elementum quam, a viverra ligula fringilla tempus. Ut tempor, dui eu semper aliquet, sem nisi pellentesque libero, suscipit porttitor risus magna vel lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum elementum quam, a viverra ligula fringilla tempus. Ut tempor, dui eu semper aliquet, sem nisi pellentesque libero, suscipit porttitor risus magna vel lorem.</p>
<h1>Título do conteúdo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum elementum quam, a viverra ligula fringilla tempus. Ut tempor, dui eu semper aliquet, sem nisi pellentesque libero, suscipit porttitor risus magna vel lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum elementum quam, a viverra ligula fringilla tempus. Ut tempor, dui eu semper aliquet, sem nisi pellentesque libero, suscipit porttitor risus magna vel lorem.</p>
<h1>Título do conteúdo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum elementum quam, a viverra ligula fringilla tempus. Ut tempor, dui eu semper aliquet, sem nisi pellentesque libero, suscipit porttitor risus magna vel lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum elementum quam, a viverra ligula fringilla tempus. Ut tempor, dui eu semper aliquet, sem nisi pellentesque libero, suscipit porttitor risus magna vel lorem.</p>
<h1>Título do conteúdo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum elementum quam, a viverra ligula fringilla tempus. Ut tempor, dui eu semper aliquet, sem nisi pellentesque libero, suscipit porttitor risus magna vel lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing
...