Aula 05_0 - CSS - Conceitos e Estratégias de Arquitetura
Estratégia de Construção e Uso das Classes no Bootstrap CSS
O Bootstrap utiliza uma abordagem estruturada na construção de suas classes CSS. Vamos entender
os princípios fundamentais com exemplos práticos.
Princípios Básicos
1. Sistema de Classes Base + Modificadoras
A maioria dos componentes Bootstrap segue o padrão:
Exemplo - Botões:
A classe btn define a estrutura base, enquanto btn-primary ou btn-danger definem cores e estilos
específicos.
2. Sistema de Grid Responsivo
O Bootstrap usa um sistema de grid baseado em 12 colunas com containers, linhas e colunas.
Exemplo - Layout Básico:
Em dispositivos pequenos, estas colunas empilham verticalmente. Em dispositivos médios (md) ou
maiores, organizam-se horizontalmente.
3. Classes Utilitárias
Classes de propósito único que aplicam uma única propriedade CSS.
Exemplo - Utilitários de Espaçamento e Texto:
Classe base: Define o componente
Classes modificadoras: Alteram aparência ou comportamento
<!-- Botão básico -->
<button class="btn btn-primary">Botão Primário</button>
<button class="btn btn-danger">Botão Perigo</button>
<button class="btn btn-outline-success">Botão Contorno</button>
1
2
3
4
<div class="container">
<div class="row">
<div class="col-md-8">Coluna Principal (8/12)</div>
<div class="col-md-4">Barra Lateral (4/12)</div>
</div>
</div>
1
2
3
4
5
6
