O Bootstrap é um framework front-end que agiliza a criação de sites responsivos. Sua estrutura baseia-se na aplicação de classes pré-definidas em HTML, um sistema de colunas (Grid) e arquivos de CDN que carregam todo o estilo e interatividade sem precisar criar o CSS do zero.
Estrutura de Arquivos
Para estruturar um projeto, você utiliza o HTML como base e apenas “chama” os arquivos do Bootstrap. Você pode fazer isso de duas formas: via CDN (recomendado para começar) ou baixando os arquivos (Compiled CSS e JS)
Um arquivo de projeto básico tem a seguinte organização:
<!DOCTYPE html>
<html lang=”pt-BR”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Meu Projeto Bootstrap</title>
<!– 1. CSS do Bootstrap (Responsividade e Estilos) –>
<link href=”https://jsdelivr.net” rel=”stylesheet”>
</head>
<body>
<!– Seu conteúdo vai aqui –>
<h1>Olá, Bootstrap!</h1>
<!– 2. JavaScript do Bootstrap (Para modais, carrosséis, etc.) –>
<script src=”https://jsdelivr.net”></script>
</body>
</html>
Os 3 Pilares de Funcionamento
O funcionamento do framework é dividido em três áreas principais: [1]
- Sistema de Grade (Grid System): O Bootstrap divide a largura da tela em uma grade de \(12\) colunas. Você usa classes como
coloucol-md-4para organizar os elementos lado a lado e garantir que eles se ajustem sozinhos do celular ao desktop. - Classes Utilitárias: Em vez de criar um arquivo CSS para mudar a cor de um botão, centralizar um texto ou adicionar margem, basta usar classes prontas. Exemplo:
bg-primary(fundo azul),text-center(texto centralizado) emt-3(margem superior). - Componentes Prontos: Elementos interativos complexos já vêm prontos. Você utiliza blocos de HTML com classes específicas para criar menus de navegação (Navbar), modais (janelas pop-up), carrosséis de imagens, botões e acordeões
Como estruturar o código (Mobile First)
O Bootstrap é pensado para começar a estilização olhando para a tela do celular e expandindo para telas maiores. A estrutura de organização de página geralmente segue esta ordem dentro do
<body>:containeroucontainer-fluid: A classe principal que engloba e alinha o conteúdo da página de forma fluida ou com larguras fixas.row: Cria uma linha dentro do container para agrupar as colunas.col-*: Define o tamanho que o elemento ocupará dentro da linha (ex:col-6ocupa metade da tela)
Para conferir exemplos práticos de montagem de layouts (como cabeçalhos, formulários e landing pages completas), você pode consultar a página oficial de Exemplos do Bootstrap.
