Jornada do Dev

Breakpoints pra Criação de Leiautes Responsivos

Entre para ter acesso à essa aula

Bootstrap é uma ferramenta fundamental para criar layouts responsivos, que se adaptam a diferentes tamanhos de tela. Isso é importante porque muitos dispositivos possuem resoluções diferentes e isso afeta a forma como o site é visualizado pelos usuários. Com o Bootstrap, é possível configurar break-points, ou seja, as resoluções em que os estilos devem mudar.

Existem cinco break-points comuns em dispositivos móveis, sendo que o primeiro prioriza dispositivos pequenos. A partir daí, é possível definir classes onde o estilo deve ser alterado, como margens, contornos e tamanhos de fontes. É importante entender que, quando há mais de uma classe aplicada a um elemento, a classe que se refere ao break-point maior é a que prevalece. Durante o desenvolvimento, é recomendável simular diferentes resoluções para verificar como o site se comporta.

Em resumo, o Bootstrap permite criar layouts responsivos e a adaptação aos diferentes tamanhos de tela é realizada por meio de break-points e classes de estilo específicas para cada resolução.