Mobile First - Desenvolvimento web responsivo com bootstrap e Angular

 

Tutorial Completo: Responsividade com Bootstrap + Angular (Mobile First)

Conceito: Mobile First

Comece projetando para telas pequenas (mobile) e expanda o layout para telas maiores usando breakpoints.

Por quê?

• Bootstrap é mobile first por padrão.

• Menos retrabalho e código mais limpo.

• Melhor performance.

---

 Preparando o Ambiente

✔ Instale o Bootstrap no Angular

npm install bootstrap

Adicione no angular.json:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
]

---

Estrutura Base Responsiva (Mobile First)

Comece pensando em colunas únicas (100% largura), depois expanda.

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">
      <p>Conteúdo Responsivo</p>
    </div>
  </div>
</div>

🔍 Explicação:

• col-12 → Mobile (100%)

• col-md-6 → Tablet (50%)

• col-lg-4 → Desktop (33%)

---

Breakpoints do Bootstrap

Tamanho	Breakpoint	Exemplo
Mobile	col-	col-12
Tablet	col-sm- / col-md-	col-md-6
Desktop	col-lg-	col-lg-4
Extra	col-xl- / col-xxl-	col-xl-3

Use essas variações para ajustar o layout conforme aumenta a tela.

---

Utilitários Responsivos

Use classes do Bootstrap para visibilidade e espaçamentos:

Visibilidade

<p class="d-block d-md-none">Aparece só no Mobile</p>
<p class="d-none d-md-block">Aparece só no Desktop</p>

Espaçamento

<div class="p-2 p-md-4">Padding ajustável</div>

---

Usando Angular com Responsividade

Use ngClass para alterar visual via lógica:

<div [ngClass]="{'text-center': isMobile, 'text-start': !isMobile}">
  Texto Dinâmico
</div>

Detecte o tamanho da tela (opcional):

isMobile = window.innerWidth < 768;

---

CSS Personalizado com Media Queries

/* styles.css */
@media (min-width: 768px) {
  .banner {
    height: 300px;
  }
}

@media (max-width: 767px) {
  .banner {
    height: 150px;
  }
}

---

Testando Responsividade

Use ferramentas do navegador (F12 → Toggle Device Toolbar).
Teste em múltiplas telas: mobile, tablet, desktop.

---

 Classes Úteis para Mobile (Bootstrap)

Classe	Uso	Exemplo
d-none d-sm-block	Esconde no mobile, mostra em telas maiores	Esconder sidebar no mobile
d-block d-sm-none	Mostra só no mobile	Menu hambúrguer
w-100	Largura total (mobile)	Botões ou inputs
text-center	Centraliza texto (comum em mobile)	Títulos
p-2 / p-sm-4	Espaçamentos diferentes por tamanho	Padding no container
m-0 / m-md-3	Margens responsivas	Componentes encostados no mobile
flex-column flex-md-row	Layout vertical no mobile, horizontal no desktop	Navegação ou cards

 Exemplo prático

<div class="d-block d-md-none">Menu Mobile</div>
<div class="d-none d-md-block">Menu Desktop</div>

<button class="btn btn-primary w-100 w-md-auto">
  Botão Responsivo
</button>