Bootstrap: Ame-o ou odeie-o (até ler este artigo)
Uma ferramenta poderosa e incompreendida que pode te ajudar com design, responsividade, tempo, ou até mesmo com aquele frufru diferenciado
O Bootstrap é comumente conhecido como um framework gratuito para ajudar no desenvolvimento front-end de aplicações web, sites e landing-pages. Possui todos os recursos necessários para construção de HTML, CSS e o senhor JavaScript.
Em sua estrutura, o Bootstrap tem uma ampla biblioteca de “componentes” prontos, como botões, cards, barras de navegação e modais. É necessário APENAS ter ele instalado ou disponível em seu projeto, para usar suas classes pré-definidas exatamente como você usaria classes para seu próprio CSS, ou seja, diretamente no seu arquivo HTML.
Como instalar
Primeiro de tudo e de todos, você precisará dizer para o seu projeto “Oi, lindão, vou usar o Bootstrap aqui”. Tá, mas como?
Existem maneiras diferentes de usar o Bootstrap. Temos a chamada por CDN, que seria um link inserido no head do HTML, referenciando o arquivo CSS do framework:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">Porém, para um aproveitamento maior deste arquivo, é necessário que você importe também os respectivos links do JavaScript, Popper.js e do próprio jQuery. Eles garantem as interações e, principalmente, a responsividade quase automática do seu site.
<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.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>Outra maneira de incorporar o Bootstrap em seu projeto é com a instalação direta por Gerenciador de Pacotes, utilizando os comandos:
- para NPM:
npm install bootstrap
- para Ruby:
gem install bootstrap -v 4.1.3
Também é possível usar o framework com os arquivos CSS e JS compilados, fazendo download de um arquivo .RAR diretamente no site do Bootstrap.
Você ainda pode encontrar outras formas de chamada aqui! (Aliás, o Bootstrap é uma das poucas ferramentas que tem uma documentação completíssima em português. Ou seja, não precisa ser multilíngue para começar. Se joga, migx).
Como usar
Agora que deixamos claro que vamos, sim, trabalhar com Bootstrap, é só correr para o abraço.
Como disse anteriormente, para usar o framework você precisa apenas utilizar as classes de sua biblioteca diretamente no seu HTML. Claro que, para saber exatamente qual classe você precisa aplicar, o ideal é buscar na documentação o objeto que deseja utilizar, conhecendo as opções disponíveis.
Por exemplo, digamos que eu queira um botão na minha página. Na documentação, posso pesquisar por “button” (como escrito na tag HTML).
Dessa maneira, ó:
Percebam que já temos alguns botões pré-definidos com tamanhos, estilos e cores diferentes.
Para botões azuis, utilizamos a classe btn btn-primary:
<button type="button" class="btn btn-primary">Primary</button>Resultado:
Além das cores primárias e secundárias, temos as classes próprias do Bootstrap, que seriam: danger, success, info, warning, entre outras.
Classes responsivas
Todos os componentes do Bootstrap possuem uma configuração responsiva, para se ajustarem ao tamanho de tela do usuário. Inclusive, uma forma de obter maior aproveitamento da responsividade do Bootstrap é utilizar a classe container. Com certeza ela te ajudará a não ver seus componentes voando no espaço sideral em telas menores.
Padronização
Um ponto ao mesmo tempo positivo e negativo do Bootstrap é a sua padronização extrema. Seus componentes deixam bastante óbvio que você está usando a ferramenta, por conta de suas cores e formatos. Porém, você pode usar um arquivo CSS próprio atrelado ao seu documento HTML.
Para usar um segundo arquivo CSS em seu projeto sem ter complicações, basta linkar seu arquivo CSS por baixo do arquivo do Bootstrap. Dessa maneira, você garante que seu arquivo sobrescreverá o que você desejar do Bootstrap. Desta forma:
Tá, mas e aí?
Agora que você sacou mais ou menos qual é a do Bootstrap, se dedique à documentação, faça testes com as linhas de código sugeridas, ou em suas próprias linhas.
Seguindo o passo a passo, você conseguirá desenvolver sites do zero em pouquíssimo tempo. Podem ser usados até mesmo como mockups funcionais para apresentação de projetos em hackathons ou no seu trabalho. Também podem complementar e modernizar aquele projeto que você criou há muito tempo e nem lembrava mais.
