Tempo de leitura: 14 minutos
Seria interessante para você construir Websites completos totalmente responsivos sem ter que passar horas e horas configurando pixels para cada tipo de resolução? Acredito que sim, e melhor do que isso, com o Bootstrap passo a passo você irá parar de quebrar tanta cabeça com css e trabalhar de uma forma mais simples e dinâmica os seus websites.
O Twitter Bootstrap é considerado o Framework Front-End mais popular dos últimos tempos.
Ele é um Framework Front-End totalmente responsivo, atraente, intuitivo e muito poderoso, para quem deseja trabalhar de forma rápida e fácil.
Ele utiliza HTML, CSS e JavaScript, e nesse guia completo você vai aprender tudo que for necessário para manusear com maestria esse Framework incrível para criar seus projetos web.
Esse guia é para quem já tem um conhecimento básico de HTML e CSS, e deseja desenvolver websites.
O que iremos aprender neste artigo sobre Bootstrap?
// Configuração do Ambiente Bootstrap
// Como baixar e configurar o bootstrap
// Entendendo os links e scripts
// Compreendendo os arquivos do Bootstrap
Gostou do que está por vir? Vamos começar então e aprender o Bootstrap passo a passo, como prometido.
O que é o Bootstrap?
Como já falamos, o bootstrap é um framework Front-End, atraente e muito intuitivo, para o desenvolvimento web mais rápido e eficaz.
O Bootstrap foi desenvolvido por Mark Otto e Jacob Thornton no Twitter. Foi lançado como um produto de seu código aberto em agosto de 2011 no GitHub.
Vantagens do Bootstrap
Ele é Mobile Firts Approach: Hoje já estamos na versão 4 do Bootstrap, e a estrutura dele consiste nos primeiros estilos do Mobile em toda a biblioteca, em vez de em arquivos separados.
Além disso tem suporte para todos os navegadores populares.
É muito fácil de começar com ele, pois com apenas o conhecimento de HTML e CSS, qualquer um pode começar com o Bootstrap.
Além disso, no site oficial do Bootstrap tem uma excelente documentação.
Seu Design totalmente responsivo se ajusta a Desktops, Tablets e Mobiles. Vamos falar mais sobre isso em tópicos posteriores.
- Entrega uma solução limpa e uniforme para criar uma interface para os desenvolvedores.
- Ele contém componentes internos funcionais e bonitos que são bem fáceis de customizar.
- Fornece personalização baseada na web.
- E o melhor de tudo é um Framework de código aberto (Open Source).
O pacote Bootstrap inclui:
- Scaffolding – O Bootstrap fornece uma estrutura básica com Sistema de Grid, estilos de link e plano de fundo. Falamos sobre isso com mais detalhes na seção de Estrutura Básica do Bootstrap
- CSS – Bootstrap vem com o recurso de configurações CSS globais, elementos HTML fundamentais estilizados e aprimorados com classes extensíveis e um sistema de grid avançado. Falamos disso com mais detalhes na seção Bootstrap com CSS.
- Componentes – O Bootstrap contém mais de uma dúzia de componentes reutilizáveis criados para fornecer iconografia, menus suspensos, navegação, alertas, pop-overs e muito mais. Isso é abordado em detalhes na seção Componentes de layout .
- Plugins JavaScript – Bootstrap contém mais de uma dúzia de plugins jQuery personalizados. Você pode de forma fácil incluir todos eles, ou um por um. Isto é coberto em detalhes na seção de Plugins do Bootstrap.
- Personalização – Você pode personalizar os componentes do Bootstrap, as variáveis LESS e os plugins do jQuery para obter sua própria versão.
Configuração do Ambiente Bootstrap
A instalação do Bootstrap é bem simples, e se você preferir não precisa nem configurar o seu ambiente próprio para começar a aprender.
Vamos aprender a configurar a versão on-line do Bootstrap.
<!doctype html>
<html lang=”pt-br”>
<head>
<!– Required meta tags –>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”><!– Bootstrap CSS –>
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css” integrity=”sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB” crossorigin=”anonymous”><title>Bootstrap Passo a Passo</title>
</head>
<body>
<h1>O guia absolutamente completo</h1><!– Optional JavaScript –>
<!– jQuery first, then Popper.js, then Bootstrap JS –>
<script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js” integrity=”sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo” crossorigin=”anonymous”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js” integrity=”sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49″ crossorigin=”anonymous”></script>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js” integrity=”sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T” crossorigin=”anonymous”></script>
</body>
</html>
Com esse template da forma como está configurado, você já é capaz de utilizar o Bootstrap de forma completa.
Mas vamos colocar a mão na massa para entender como todo esse universo funciona.
Acredito que você já tenha instalado o Node.js e o NPM, um terminal/linha de comando (como o Bash, Git Bash, PowerShell, etc.) e um editor de código bacana como o (Sublime, VS Code, Atom).
Vamos iniciar rodando o Bootstrap em uma página bem simples. Com o famoso Hello World.
Não vamos baixar nada, por enquanto. Vamos utilizar o Bootstrap via CDN. Então, crie uma pasta para guardar o projeto:
$ mkdir hello-bootstrap
Abra a pasta e utilize o NPM para iniciar um projeto em branco:
$ cd hello-bootstrap
$ npm init -y
O comando do NPM cria um arquivo package.json, com as informações necessárias sobre o nosso projeto. Mas, por enquanto não vamos editar nada. Por isso utilizamos a flag -y.
Agora, vamos criar um arquivo HTML que vai ser o nosso “Hello World” e abrir no editor de texto/código:
$ code hello.html
Nesse arquivo, coloque a marcação abaixo. Não se preocupe se não estiver entendendo tudo agora. Mais a frente, você entenderá para que serve cada uma das linhas utilizadas:
<!DOCTYPE html>
<html lang=”pt-br”>
<head>
<!– meta tags obrigatórias –>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>
<title>Hello World</title>
<!– CSS do Bootstrap –>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.css“>
</head>
<body>
<div class=”container text-center”>
<h1 class=”display-3 m-5″>Hello, Bootstrap!</h1>
<p class=”lead”>
Use este documento como um template para iniciar qualquer projeto novo.<br>
Tudo o que tem aqui é esse texto e um HTML inicial, bem básico.
</p>
</div>
<!– Primeiro o jQuery, depois o Popper.js, e depois o Bootstrap JS –>
<script src=”https://code.jquery.com/jquery-3.2.1.slim.min.js“></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js“></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.js“></script>
</body>
</html>
Abra essa página em um navegador, para ver como fica:
Parabéns! Com esse outro exemplo que fizemos, instalando o bootstrap de outra forma, teremos nosso documento funcionando também.
Você pode falar: “Ah, Mas tem jeitos mais fáceis ou mais simples”.
Mas na verdade tudo é fácil e simples até você aprender e dominar 🙂
E por isso nós prezamos por lhe ensinar as melhores formas e práticas, assim como também é ensinado em nossos cursos, que hoje tem 100% de aprovação dos nossos alunos(as), pois priorizamos um ensino de qualidade para fazer com que todos realmente dominem as melhores ferramentas e saibam o que estão fazendo.
Você pode observar nesse código que não acrescentamos nada de CSS neles. E mesmo assim a página já ficou com um visual bacana, sem CSS.
Além disso essa página também está apta para funcionar em qualquer aparelho, seja um celular ou tablet, já que utilizamos uma meta tag chamada viewport e claro o CSS padrão do Bootstrap.
Falamos bastante sobre a tag viewport em nosso artigo sobre “Como fazer um site responsivo”.
Como o Bootstrap funciona
Na página Hello World que desenvolvemos, colocamos algumas classes nas tags HTML. Não escrevemos código CSS, mas percebemos que o visual da página já está com alguns estilos.
Por exemplo, no código que fizemos tinham:
- a classe .text-center que serve para colocar o texto no centro da div ;
- a classe .display-3 aumenta o tamanho do título e a .m-5 coloca margens nele;
- a classe .lead deixa o parágrafo com mais destaque;
Todas essas classes já vêm embutidas no Bootstrap 4.
E é dessa forma que o Bootstrap funciona: de acordo com as classes que você colocar nos elementos HTML, o Bootstrap vai definir o visual e o comportamento daquele componente.
Na maioria das vezes, é só colocar as classes CSS certas que você vai ter um componente visual.
Alguns componentes irão necessitar de alguns atributos a mais. Ou também, de alguma marcação específica usando algumas div’s em conjunto (como o Modal ou o Carousel).
O que eu quero deixar claro até aqui, é entender que, usando as classes corretas do Bootstrap você vai desenvolver as telas dos seus projetos com muito menos esforço.
Agora vamos passar para outra fase do nosso aprendizado.
Como baixar e configurar o Bootstrap
Vamos baixar o Bootstrap 4 e usar essa instalação em um projeto.
Para o Bootstrap funcionar de forma correta, é necessário utilizar duas libs extras: o jQuery e o Popper.js – se não fizermos isso alguns componentes não irão funcionar, e nem seus efeitos.
Vamos usar o NPM para pegar essas libs:
$ npm install jquery –save
$ npm install popper.js –save
Agora, vamos baixar o Bootstrap 4, também com o NPM:
$ npm install [email protected] –save
Tudo que estamos baixando vai ficar em uma pasta chamada node_modules, que é do NPM. É essa pasta que será o endereço das libs.
Agora, na pasta do nosso projeto, vamos copiar o arquivo hello.html para criar um novo arquivo com o nome de template.html, e vamos abrir no editor:
$ cp hello.html template.html
$ code template.html
Vamos aproveitar a marcação do Hello World, e mudar só as referências do Bootstrap, do jQuery e do Popper.js.
Só que nesse caso vamos utilizar os arquivos locais (que baixamos pelo NPM), ao invés de utilizarmos os links das CDN’s:
<!DOCTYPE html>
<html lang=”pt-br”>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>
<title>Template Bootstrap</title>
<link rel=”stylesheet” href=”./node_modules/bootstrap/dist/css/bootstrap.css”>
</head>
<body>
<h1>Template Bootstrap</h1>
<script src=”./node_modules/jquery/dist/jquery.slim.min.js”></script>
<script src=”./node_modules/popper.js/dist/popper.min.js”></script>
<script src=”./node_modules/bootstrap/dist/js/bootstrap.js”></script>
</body>
</html>
Agora, essa página irá servir como template inicial para as outras páginas.
Assim, não vamos precisar reescrever o HTML básico e os links dos arquivos, quando formos criar uma página nova.
Se desejar, pode mudar os endereços das libs, caso queira colocar em outra pasta.
O importante aqui é que elas sejam carregadas na mesma ordem que estão, e que o endereço esteja correto.
Entendendo os links e Scripts
<link rel=”stylesheet” href=”./node_modules/bootstrap/dist/css/bootstrap.css”>
Essa é a referência ao arquivo CSS do nosso Bootstrap.
Sem esse link, ou se ele estiver com o caminho errado, o Bootstrap não vai funcionar de forma alguma.
<script src=”./node_modules/jquery/dist/jquery.min.js”></script>
<script src=”./node_modules/popper.js/dist/popper.min.js”></script>
<script src=”./node_modules/bootstrap/dist/js/bootstrap.js”></script>
E essas são as referências ao jQuery, ao Popper.js e aos plug-ins do Bootstrap.
O jQuery semper deve vir antes dos outros JS. O Bootstrap depende dele e do Popper.js para funcionar.
O Popper.js é uma biblioteca JavaScript que tem a função de posicionar elementos como menus, tooltips e popovers.
Por fim, observe que eu coloquei as bibliotecas Javascript por último no HTML – isso é uma boa prática para que a página carregue mais rápido.
Compreendendo os arquivos do Bootstrap
Quando você baixa o Bootstrap, tanto pelo NPM (pasta dist), ou de forma manual, você recebe uma estrutura de arquivos bem parecida com essa abaixo:
bootstrap/dist
├── css
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-grid.min.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.css.map
│ ├── bootstrap-reboot.min.css
│ └── bootstrap-reboot.min.css.map
└── js
├── bootstrap.bundle.js
├── bootstrap.bundle.js.map
├── bootstrap.bundle.min.js
├── bootstrap.bundle.min.js.map
├── bootstrap.js
├── bootstrap.js.map
├── bootstrap.min.js
└── bootstrap.min.js.map
Na pasta CSS, estão todos os arquivos dos estilos visuais do Bootstrap e dos componentes.
Para usar tudo que o Bootstrap tem, é só você importar o arquivo bootstrap.css, ou o bootstrap.min.css.
Caso você queira usar só o Grid System, você pode importar só o arquivo bootstrap-grid.css, ou bootstrap-grid.min.css.
Na pasta JS, ficam os arquivos com as funções dos componentes do Bootstrap, como os Menus, por exemplo. Para usar todos os componentes que o Bootstrap tem, é só importar o arquivo bootstrap.js, ou bootstrap.min.js.
Cada pasta possui uma versão padrão (os arquivos *.css e *.js), e uma versão “minificada” (os arquivos *.min.css e *.min.js) de cada script.
Muita atenção aqui:
Você deve usar a versão padrão quando estiver desenvolvendo o seu projeto, dessa forma você vai poder ler, ou ter acesso, ao código-fonte do Bootstrap.
E você deve usar a versão “minificada” (ou minified) quando for colocar seu projeto online, ou seja, em produção.
O arquivo minified como o próprio nome sugere, é bem menor que o padrão, e economiza bastante na utilização de banda.
Conclusão do Bootstrap passo a passo
Tudo pronto para você avançar com o Bootstrap, pois agora você já tem o Bootstrap 4 funcionando perfeitamente.
Aqui você pôde ver a marcação básica com o HTML5, e as referências utilizadas em páginas com Bootstrap.
É muito importante que você compreenda de fato para quê serve cada um desses itens, e assim poder resolver problemas que possam vir a surgir.
Para criar outras páginas, agora só o que você precisa fazer é copiar o template e começar a adicionar itens.
Agora você tem algo muito poderoso em mãos, daqui pra frente, você pode começar a trabalhar com os outros componentes disponíveis do Bootstrap.
