Vejo muita gente usando a class wrapper na estrutura do corpo da aplicação, gostaria de saber o que significa , como se usa?
Poderiam me explicar melhor?
Vejo muita gente usando a class wrapper na estrutura do corpo da aplicação, gostaria de saber o que significa , como se usa?
Poderiam me explicar melhor?
Bom dia, Ana!
Wrap vem do inglês "embrulhar". Uma wrapper class é uma classe que "embrulha", envolve, outros objetos afim de adicionar algum atributo ao conjunto ou melhor organizar seu código.
É como se você fosse dar de presente várias lembrancinhas para uma pessoa só, e optou por embrulhá-las todas juntas. Por exemplo:
<div class="wrapper">
<h1>Título</h1>
<p>Texto</p>
<a href="/read-more">Leia mais</a>
</div>
Wrappers podem ser usadas em situações como no exemplo acima, onde eu quero dar alguma qualidade, como por exemplo centralizar ou dar algum padding, a um grupo de elementos HTML ou divs.
Com wrapper você também pode blocar conteúdo, separar header e footer do resto do site, posicionar de maneira diferente um grupo de classes, pra facilitar na hora de especificar uma classe no seu CSS ou Javascript, etc.
<style>
.wrapper {
margin: 0 auto;
max-width: 1160px;
padding-left: 40px;
padding-right: 40px;
}
.footer {
padding: 25px 0;
}
.theme {
float: left;
}
.author {
float: right;
}
</style>
<div class="wrapper">
<div class="footer">
<p class="theme">Nome do Tema</p>
<p class="author">Autor © 2019</p>
</div>
</div>
Muitas pessoas usam outras terminologias, como container, main, content. Depende muito de como você prefere organizar o seu código, o que você pretende fazer com ele ou qual o seu tipo de conteúdo.