Quer criar sites bonitos e responsivos sem complicação? Aprenda como usar Bootstrap, uma ferramenta que te permite criar páginas completas com o mínimo de dificuldade e esforço!
Vem com a gente e transforme suas ideias em sites incríveis!
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Para fazer o download do(s) arquivo(s) utilizados na aula, preencha com o seu e-mail:
Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.
O que você vai ver hoje?
O que é o Bootstrap?
É uma biblioteca que facilita a criação de sites modernos e responsivos, ou seja, que se adaptam bem a diferentes tamanhos de tela, seja de celulares, tablets ou computadores.
No próprio site do Bootstrap, você pode adquirir gratuitamente uma variedade de estilos prontos, com sistema de grid para organizar o layout e vários componentes interativos, como botões, menus, formulários e cartões.
Além de não precisar programar tudo do zero, a ferramenta funciona com HTML, CSS e JavaScript!
Como acessar o Bootstrap?
Para começar a usar o Bootstrap, basta acessar o site oficial, onde você encontrará toda a documentação necessária.O material disponível é bem organizado e detalhado, trazendo exemplos práticos e explicações claras sobre como utilizar os recursos do framework.
Uma das formas mais rápidas e fáceis de começar é através dos links CDN, na parte de downloads. Essa opção permite carregar o Bootstrap diretamente da internet, sem precisar baixar nenhum arquivo, garantindo que você sempre utilize a versão mais atualizada.
Basta copiar e colar os links fornecidos na documentação dentro do seu código HTML, e você já poderá aproveitar os estilos e componentes da biblioteca sem complicação.
Pronto ver isso mais de perto? Vamos ao código!
Mãos no código! – Instalando o Boostrap
Para começar a escrever seu primeiro código com Bootstrap, abra o VSCode e crie um arquivo chamado index.html.
Obs.: Se você ainda não tem o VSCode instalado ou não sabe como usá-lo, pode conferir nosso guia completo nesta aula.
Dentro do arquivo index.html, é possível gerar a estrutura básica do HTML rapidamente. Basta digitar um ponto de exclamação (!) e pressionar a tecla Tab, e o editor completará automaticamente o código inicial do documento.
Agora, dentro da seção <head>, adicione o link CDN do CSS do Bootstrap. Esse link permitirá que seu site utilize os estilos da biblioteca sem precisar instalar nada no computador. Depois, no final do <body>, inclua o link CDN do JavaScript, que é necessário para o funcionamento de alguns componentes interativos do Bootstrap.
O código deve ficar assim:
<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Meu primeiro site com Bootstrap</title> <link rel="stylesheet" href="link.cdn.bootstrap.css"> </head> <body> <h1>Iniciando com o Bootstrap</h1> <script src="link.cdn.bootstrap.js"></script> </body> </html>
Agora salve o arquivo e abra ele no navegador.
À primeira vista, pode parecer que não há diferença além do título na página, mas o Bootstrap já está aplicando uma série de configurações padrão. Para conferir, pressione F12 para abrir as ferramentas do desenvolvedor e veja como os estilos do Bootstrap já estão sendo carregados.
Adicionando elementos
Agora que o Bootstrap já está carregado no nosso projeto, podemos começar a adicionar elementos à página. Primeiro, vamos inserir um título e um parágrafo dentro de uma estrutura simples de <div> para organizar o conteúdo.
<div> <h2>Primeiro tópico da minha página</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div>
Com esse código, temos um título e um texto básico na página. Mas o Bootstrap permite melhorar a estrutura e a aparência do nosso site de forma simples. Um dos primeiros recursos que podemos utilizar é a responsividade, garantindo que o layout se adapte automaticamente a diferentes tamanhos de tela, como celulares, tablets e monitores.
Para isso, basta envolver o conteúdo dentro de uma <div> com a classe container, que aplica margens e alinhamentos automáticos para melhorar a visualização. O código atualizado fica assim:
<div class="container"> <h2>Primeiro tópico da minha página</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div>
Depois de salvar as alterações, volte para o navegador, pressione F12 e clique no ícone de responsividade nas ferramentas do desenvolvedor. Isso permitirá visualizar como o layout se ajusta a diferentes tamanhos de tela.
Além disso, o Bootstrap oferece diversas configurações de responsividade que permitem definir o comportamento dos elementos de acordo com a largura da tela. Para aprender mais sobre essas opções, confira a seção específica sobre grids e breakpoints na documentação oficial do Bootstrap.
Como adicionar botões?
Os botões no Bootstrap são fáceis de usar e altamente personalizáveis. Para começar, acesse a seção de botões na documentação oficial e veja como eles funcionam. A classe básica utilizada para estilizar um botão é .btn.
Se adicionarmos um botão simples ao nosso código e atribuirmos essa classe, ele já ganhará um estilo padrão do Bootstrap.
<button class="btn">Clique aqui!</button>
Esse é um botão básico, mas o Bootstrap permite aplicar diferentes estilos de forma muito simples. Na documentação, é possível encontrar diversas opções de personalização, como cores e tamanhos.
Vamos testar alguns exemplos:
<button class="btn btn-primary">Clique aqui!</button> <button class="btn btn-secondary">Clique aqui de novo!</button>
O primeiro botão terá uma cor azul, que é o estilo padrão para ações principais, enquanto o segundo usará um tom de cinza, ideal para ações secundárias. Além disso, há muitas outras opções disponíveis para modificar tamanho, bordas e até efeitos de hover.
Com o Bootstrap, criar botões estilizados e funcionais se torna muito mais rápido e prático, sem precisar escrever linhas complexas de CSS.
Templates prontos
O Bootstrap oferece uma seção com templates prontos no seu site, que inclui desde layouts completos até componentes específicos, como cabeçalhos e rodapés. Essas opções são ótimas para quem quer acelerar o processo de desenvolvimento e criar um site bonito e funcional sem começar do zero.
No site do Bootstrap, você pode acessar a área de Exemplos, onde encontrará diversos templates que você pode usar diretamente em seu projeto.
Basta fazer o download e extrair a pasta para dentro da pasta do seu projeto. Ao abrir o VSCode, você verá uma grande variedade de elementos e classes que podem ser facilmente integrados ao seu código.
Por exemplo, você pode copiar um header de um template e colá-lo diretamente no seu arquivo HTML. Assim que você atualizar a página no navegador, o cabeçalho já estará visível, com o layout e o estilo prontos para usar.
Você pode continuar fazendo isso com outros elementos, Se necessário, pode substituir imagens já existentes por outras externas.
O legal é que você pode usar esses templates completos ou selecionar apenas os elementos que deseja para compor seu projeto, como botões, cards, formulários e imagens. E não precisa configurar quase nada, basta copiar o link da imagem e substituí-lo no código.
Isso torna o desenvolvimento muito mais ágil e simples, mesmo para quem está começando.
Cuidados com o Bootstrap
Embora o Bootstrap facilite muito o desenvolvimento de sites, é importante ter alguns cuidados ao usá-lo. Como ele traz diversas classes prontas, pode acabar carregando estilos e funcionalidades que talvez você não precise, tornando o código mais pesado do que o necessário.
Outro ponto a considerar é que, por ser uma biblioteca muito popular, os sites que usam Bootstrap sem personalização podem acabar ficando com um visual parecido. Para evitar isso, vale a pena modificar algumas classes ou adicionar estilos próprios em um arquivo CSS separado.
Além disso, o uso excessivo de componentes prontos pode limitar a flexibilidade do design, dificultando algumas personalizações mais avançadas. Por isso, antes de adicionar muitos elementos prontos, é bom avaliar se realmente são necessários ou se é melhor criar algo mais leve e customizado.
Conclusão – O que aprendemos sobre Bootstrap?
Neste guia, vimos como o Bootstrap pode facilitar o desenvolvimento de sites, trazendo estilos prontos, componentes reutilizáveis e suporte à responsividade sem precisar escrever CSS do zero.
Aprendemos a acessar a documentação oficial, instalar a biblioteca no projeto e adicionar elementos básicos, como títulos, textos, botões e containers responsivos.
Exploramos também a seção de templates prontos, que permite acelerar o processo de criação ao copiar e personalizar layouts completos. Além disso, destacamos alguns cuidados importantes, como evitar o excesso de classes e elementos desnecessários para manter o site leve e otimizado.
Com esse conhecimento, você já pode começar a construir suas próprias páginas com Bootstrap e experimentar novas possibilidades dentro da biblioteca. Agora é hora de praticar, testar diferentes estilos e criar layouts incríveis!
Continue seus estudos de front-end com nossos conteúdos sobre HTML, CSS e JavaScript.
Hashtag Treinamentos
Para acessar publicações de JavaScript, clique aqui!
Posts mais recentes de HTML e CSS
- Aprenda Tailwind CSS com apenas uma aula!
Descubra como o Tailwind CSS pode revolucionar o seu desenvolvimento web. Aprenda a usar essa ferramenta que vai elevar o nível do seu front-end. - Configure seu VS Code para HTML e CSS, e conheça outras Tecnologias Full Stack! Aprenda como baixar e configurar o VS Code para HTML e CSS e deixe-o pronto para iniciar o seu desenvolvimento web!
- Guia rápido – Aprenda como usar Bootstrap do Zero Quer criar sites bonitos e responsivos sem complicação? Aprenda como usar Bootstrap, uma ferramenta que te permite criar páginas completas com o mínimo de dificuldade e esforço!
Posts mais recentes da Hashtag Treinamentos
- Funções do Copilot no Excel que vão TRANSFORMAR seu Trabalho
Você sabia que o Copilot no Excel faz muito mais do que tirar dúvidas? Essa IA pode criar fórmulas, formatar dados e até gerar gráficos por você. - Automação Whatsapp Web com com Python: Guia Completo para Enviar Mensagens com PyWhatKit Você já imaginou programar o envio de mensagens com uma automação WhatsApp Web com poucas linhas de código?
- 30 Frases de Small Talk em Inglês: Tenha Conversas Naturais em Inglês Domine o Small Talk em Inglês com 30 frases práticas para conversas rápidas. Aprenda a pronúncia, os usos e dicas para falar com mais naturalidade.
Redator de conteúdo na Hashtag Treinamentos. Produzo textos didáticos sobre tecnologia, buscando informar e engajar o público de forma acessível e descomplicada.