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]
  1. Sistema de Grade (Grid System): O Bootstrap divide a largura da tela em uma grade de \(12\) colunas. Você usa classes como col ou col-md-4 para organizar os elementos lado a lado e garantir que eles se ajustem sozinhos do celular ao desktop.
  2. 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) e mt-3 (margem superior).
  3. 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>:
  • container ou container-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-6 ocupa 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.
 
AnteriorPróximo