1. O que é
Bootstrap é um framework de CSS: um arquivo
cheio de estilos prontos que você aplica escrevendo o nome de
uma classe no HTML. Em vez de escrever o CSS de um botão
(cor, borda, espaço, cantos), você escreve
class="btn btn-dark" e ele já aparece estilizado.
| Sem Bootstrap | Com Bootstrap |
|---|---|
| você escreve o CSS de cada elemento | você escolhe classes que já existem |
| cada página fica com um jeito | fontes, cores e tamanhos padronizados |
| celular exige CSS à parte | layout responsivo já incluso |
Foi criado no Twitter (por Mark Otto e Jacob Thornton) e hoje é um dos projetos de código aberto mais usados do mundo.
2. Como ligar na página
Dois passos: um <link> para o CSS no
<head> e um <script> para o JS no
fim do <body>. Os endereços vêm de um
CDN (Content Delivery Network): uma rede de
servidores que guarda cópias do arquivo e entrega pelo mais próximo de
quem abre a página. Não precisa baixar nada.
<head>
<!-- CSS do Bootstrap -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" />
<!-- O nosso CSS vem DEPOIS, para poder sobrescrever o Bootstrap -->
<link rel="stylesheet" href="carrinho.css" />
</head>
<body>
...
<!-- JS do Bootstrap: só para botões, janelas e alertas -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
| Arquivo | Para quê | Tag |
|---|---|---|
bootstrap.min.css | as classes de estilo (obrigatório) | <link> |
bootstrap.bundle.min.js | componentes que precisam de JS (menu que abre, janela modal, alerta) | <script> |
Onde pegar os links:
- Site oficial: getbootstrap.com, seção Download/Quick start, que traz o trecho pronto para copiar.
-
Template de página: sites de modelos (como o
bbbootstrap) têm uma aba Resources com os links do CDN que
o modelo usa. Dá para copiar de lá e colar no seu
<head>. -
Versão: o número no endereço (
@5.3.3) é a versão. Modelos mais antigos usam a 4 (e o jQuery junto); a 5 não precisa de jQuery. Misturar versões quebra o visual: use CSS e JS da mesma.
3. O que tem dentro do link
O endereço do CSS é um arquivo comum: cole no navegador e ele mostra o conteúdo. É lá que estão todas as classes.
-
bootstrap.css(sem.min): o código legível, com mais de 10 mil linhas de regras como.btn { ... }e.p-3 { padding: 1rem }. -
bootstrap.min.css: o mesmo conteúdo sem espaços nem quebras de linha (minificado), para carregar mais rápido. É o que se liga nas páginas.
Dica: para descobrir o que uma classe faz, abra o bootstrap.css
e procure (Ctrl+F) pelo nome. Ou use a
documentação, que tem exemplo de cada uma.
https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.css (legível) https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css (o que se liga)
4. Como usar
Depois de ligado, é só escrever as classes no atributo
class, separadas por espaço. Cada uma faz uma coisa; juntas,
se somam.
<!-- Botão: btn = formato de botão; btn-dark = cor; btn-sm = tamanho pequeno --> <button class="btn btn-dark btn-sm">Continuar</button> <!-- Tabela: table = estilo; align-middle = centraliza na vertical --> <table class="table align-middle"> ... </table> <!-- Caixa central com largura máxima: container --> <main class="container"> ... </main>
Grade (row e col): a página
é dividida em 12 colunas. Você diz quantas cada bloco ocupa, e ele se
ajusta ao tamanho da tela.
<div class="container">
<div class="row"> <!-- uma linha de colunas -->
<div class="col-md-8">...</div> <!-- 8 de 12 no computador; empilha no celular -->
<div class="col-md-4">...</div> <!-- 4 de 12 -->
</div>
</div>
md é o tamanho de tela a partir do qual as colunas ficam
lado a lado (sm, md, lg,
xl). Abaixo dele, empilham.
5. Ler as classes de espaçamento
Seguem sempre a forma propriedade + lado + tamanho.
São as mais usadas e as que mais confundem no começo.
| Parte | Valores |
|---|---|
| Propriedade | m = margin (espaço de fora) | p = padding (espaço de dentro) |
| Lado | t topo | b baixo | s início | e fim | x esquerda e direita | y cima e baixo | (nada) = todos |
| Tamanho | 0 a 5 (de nada a bem grande) | auto |
| Classe | Significa |
|---|---|
p-3 | padding de 3 em todos os lados |
py-3 | padding em cima e embaixo |
mx-2 | margem na esquerda e na direita |
mt-4 | margem só no topo |
Em CSS puro, são as propriedades margin e padding.
6. Classes usadas no carrinho
Todas estão em uso na página do Carrinho.
| Classe | O que faz |
|---|---|
container | centraliza o conteúdo e limita a largura |
table | estilo de tabela (linhas, espaçamento) |
table-hover | destaca a linha sob o mouse (precisa de table junto) |
table-responsive | no celular, a tabela rola de lado em vez de estourar |
align-middle | alinha o conteúdo das células ao meio, na vertical |
img-thumbnail | borda arredondada e margem interna na imagem |
btn | transforma em botão (precisa de uma cor junto) |
btn-outline-secondary | botão só com contorno, cinza |
btn-dark / btn-outline-dark | botão preto cheio / só contorno |
btn-sm | botão pequeno |
btn-close | botão de fechar (o X) |
d-flex | coloca os filhos lado a lado |
justify-content-between | espalha: um em cada ponta e o resto no meio |
align-items-center | centraliza os filhos na vertical |
text-muted | texto cinza, secundário |
text-uppercase e small | tudo em maiúsculas / texto menor |
bg-light | fundo cinza claro |
7. Quando usar (visão de mercado)
- Vantagens: rápido, padronizado, responsivo e com documentação e exemplos para quase tudo. Bom para protótipos, painéis internos e páginas simples.
- Desvantagens: muitas classes e
<div>deixam o HTML grande; sites com visual muito próprio acabam brigando com o estilo padrão. Por isso o CSS próprio vem depois dele. - Alternativas: Tailwind CSS (classes ainda mais granulares) e bibliotecas de componentes ligadas a React, Vue ou Angular. Cada uma tem vantagens e desvantagens; é questão de projeto e de gosto.
- Documentação oficial: getbootstrap.com/docs/5.3.
Exemplo completo: carrinho/index.html.