Aula 30 - Loja Online - Django - Tutorial Bootstrap - Spacing e Margin Padding
Se gostarem do conteúdo dêem um joinha 👍 na página do Código Fluente no
Facebook
Esse é o link do código fluente no Pinterest
Meus links de afiliados:
Melhore seu NETWORKING
Participe de comunidades de desenvolvedores:
Fiquem a vontade para me adicionar ao linkedin.
E também para me seguir no GITHUB.
Ah, se puder, clica na estrela nos meus repositórios pra dá uma força ao meu perfil no GITHUB
Código final da aula:
Se quiséssemos, por exemplo, ajustar o espaçamento entre o
nav e o
search no
CSS, a gente poderia usar
margin-bottom.
Mas, ao invés de mexer no
CSS, é melhor que a gente use o que o
bootstrap nos oferece para esses tipos de coisas.
Ao invés de usar o
margin-bottom clássico, vamos usar o
spacing do
bootstrap, ele serve exatamente para isso que queremos, e mantém a conformidade com o esquema do
bootstrap.
Esses espaçamentos do
bootstrap se aplicam a todos os
breakpoints.
Então bora lá!
Vamos testar o
py, que é o espaçamento do
eixo y, ou seja,
top e
bottom, assim como o
px é o
left e
right, e o
5 é o
tamanho desse
espaçamento, façam testes pra entender melhor, e principalmente, recorram a
documentação oficial.
Vamos usar também o
mx-auto, existe também a versão
ml-auto e
mr-auto, para quando queremos especificar.
/templates/bootstrap/example.html
<!doctype html>
<html lang="en">
<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="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Bootstrap example</title>
</head>
<body>
<div class='container'>
<div class="row">
<div class="col-12">
<div class="alert alert-secondary" role="alert">
Navbar
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-12 col-sm-12 col-md-6 col-lg-4 ml-auto">
<div class="alert alert-primary" role="alert">
<input type="text" class="form-control" placeholder="search">
</div>
</div>
</div>
<div class="row">
<div class="col-11 col-lg-2 order-1">
<div class="alert alert-primary" role="alert"'>
Conteúdo superior
</div>
</div>
<div class="col-11 mx-auto col-lg-8 order-6">
<div class="alert alert-primary" role="alert" style='min-height: 800px;'>
Área do conteúdo principal
<div class="row">
<div class="col-auto">
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
</div>
<div class="col-6">
<div class="alert alert-secondary" role="alert">
A simple secondary alert—check it out!
</div>
</div>
</div>
</div>
</div>
<div class="col-11 mx-auto col-lg-2 order-12">
<div class="alert alert-primary" role="alert"'>
Conteúdo da parte inferior
</div>
</div>
</div>
</div>
<div class='container'>
<div class="row">
<div class="col-1">
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
</div>
<div class="col-1">
<div class="alert alert-secondary" role="alert">
A simple secondary alert—check it out!
</div>
</div>
<div class="col-1">
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
</div>
<div class="col-1">
<div class="alert alert-secondary" role="alert">
A simple secondary alert—check it out!
</div>
</div>
<div class="col-1">
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
</div>
<div class="col-1">
<div class="alert alert-secondary" role="alert">
A simple secondary alert—check it out!
</div>
</div>
<div class="col-1">
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
</div>
<div class="col-1">
<div class="alert alert-secondary" role="alert">
A simple secondary alert—check it out!
</div>
</div>
<div class="col-1">
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
</div>
<div class="col-1">
<div class="alert alert-secondary" role="alert">
A simple secondary alert—check it out!
</div>
</div>
<div class="col-1">
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
</div>
<div class="col-1">
<div class="alert alert-secondary" role="alert">
A simple secondary alert—check it out!
</div>
</div>
</div>
</div>
<div class='container-fluid'>
<div class="row">
<div class="col-1">
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
</div>
<div class="col-1">
<div class="alert alert-secondary" role="alert">
A simple secondary alert—check it out!
</div>
</div>
<div class="col-1">
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
</div>
<div class="col-1">
<div class="alert alert-secondary" role="alert">
A simple secondary alert—check it out!
</div>
</div>
<div class="col-1">
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
</div>
<div class="col-1">
<div class="alert alert-secondary" role="alert">
A simple secondary alert—check it out!
</div>
</div>
<div class="col-1">
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
</div>
<div class="col-1">
<div class="alert alert-secondary" role="alert">
A simple secondary alert—check it out!
</div>
</div>
<div class="col-1">
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
</div>
<div class="col-1">
<div class="alert alert-secondary" role="alert">
A simple secondary alert—check it out!
</div>
</div>
<div class="col-1">
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
</div>
<div class="col-1">
<div class="alert alert-secondary" role="alert">
A simple secondary alert—check it out!
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
Veja o resultado:
É isso pessoal, a gente fica por aqui e nos vemos na próxima!
Para baixar o código como está até agora, acesse o link abaixo:
Se gostarem do conteúdo dêem um joinha 👍 na página do Código Fluente no
Facebook
Link do código fluente no Pinterest
Novamente deixo meus link de afiliados:
Obrigado, até a próxima e bons estudos. ;)
