O que é Bootstrap?

Quando vamos criar um site, um ponto muito importante é conseguir deixar nossas páginas com um visual atraente, customizando cores, fontes, margens e assim por diante. Para isso, precisamos estilizá-las por meio de inúmeras classes do CSS, o que não é uma tarefa simples para todos que desenvolvem. É aí que entra o Bootstrap! Com o Bootstrap, as classes do CSS já vêm todas prontas, só basta inseri-las no seu código.

Bootstrap é um framework front-end que fornece estruturas de CSS para a criação de sites e aplicações responsivas de forma rápida e simples. Além disso, pode lidar com sites de desktop e páginas de dispositivos móveis da mesma forma.

O framework front-end e de código-aberto chamado Bootstrap foi inicialmente criado por Mark Otto e Jacob Thornton para um desenvolvimento web mais rápido e prático. Ele foi desenvolvido para o Twitter e logo se tornou uma das ferramentas mais populares do mundo.

Como um framework, o Bootstrap inclui os fundamentos para desenvolvimento web responsivo, então os desenvolvedores só precisam inserir o código em um sistema de grade pré-definido.

Ainda que os Bootstraps realmente poupem o tempo que os desenvolvedores gastam para gerenciar seus templates, o objetivo principal dele é criar sites responsivos, ermitindo que a interface do usuário de um site seja otimizado para qualquer tamanho de tela, desde os dispositivos móveis até as telas mais robustas de computadores potentes.

O framework Bootstrap é construído em Hypertext Markup Language ( HTML ) , folhas de estilo em cascata ( CSS ) e JavaScript . Desenvolvedores web usando Bootstrap podem construir sites muito mais rápido sem gastar tempo se preocupando com comandos e funções básicas.

Como instalar o Bootstrap?

Na página de download oficial você encontra com detalhes todas as formas de instalar o Bootstrap. Uma delas é fazer o download da versão compilada dos código CSS e JavaScript por meio da página do Bootstrap. Há também a opção de baixar o código-fonte do framework, já que ele é uma ferramenta de código aberto.

Quem não quiser baixar os arquivos pode ter acesso ao framework sem a necessidade de instalá-los no servidor. Para isso, é só utilizar os links para acessar o BootstrapCDN e, dessa forma, adicionar as referências para os arquivos necessários para a sua utilização. Aqui nós vamos aprender a instalá-lo via CDN.

Para alcançar o mesmo resultado deste artigo na sua instalação, crie uma pasta e um arquivo chamado index.html.

No arquivo, inclua o código abaixo. A IDE utilizada neste tutorial é o Visual Studio Code:

Ao abrir a página com navegador, teremos o seguinte resultado:

Para incluir o Bootstrap, vamos acessar este link e incluir o seguinte código na tag head da página:

Confira o código na IDE:

No navegador, teremos o seguinte resultado:

Observe que embora tenhamos feito muito pouco, o Boostrap já está funcionando. Você pode perceber através do tipo da fonte e também do alinhamento do texto que já foi alterado na página. Apesar das alterações ocorridas, você não precisou criar nenhum estilo CSS.

Conheça alguns componentes do Bootstrap

Agora que a brincadeira começou não vamos parar por aí não é mesmo? Vamos adicionar mais alguns recursos na página utilizando Bootstrap, e estes recursos nós chamamos de componentes.

Na documentação, você encontra uma série de componentes como referência para suas próprias criações, como alertas, botões, menu, formulários, entre muitos outros.

No Bootstrap, por exemplo, existe uma ampla gama de classes para alinhar margem responsiva e o espaçamento. Observe o exemplo abaixo utilizando a classe mt-5 para alterar a margem superior do título da página:

No navegador, teremos o seguinte resultado:

Observe que um simples class de uma div já foi capaz de alterar a margem superior do texto. Isto porque "mt" representa uma classe pré-definida e note que a expressão quer simplesmente dizer "margin-top".

Observe a lista de classes que podemos usar.

m -> define a margem

p -> define o padding

t -> define margem superior ou padding superior

b -> define a margem inferior ou padding inferior

l -> define a margem esquerda ou padding esquerdo

r -> define a margem direita ou padding direito

x -> define tanto padding esquerdo como padding direito ou margem esquerda e margem direita

y -> define tanto padding superior e padding inferior ou margem superior e margem inferior.

Aqui você pode encontrar mais detalhes sobre espaçamento.

Graças ao Boostrap podemos facilmente incluir uma navbar (barra de navegação) na nossa página. Adicione o seguinte código antes de "<div class="mt-5">".

<nav class="navbar navbar-expand-lg navbar-light bg-light navbar-dark bg-dark">

<a class="navbar-brand mx-4" href="#">Alleart</a>

</nav>

Confira o código na IDE:

No navegador, teremos o seguinte resultado:

Ainda dentro da navbar podemos incluir um menu com links para que você possa ter acesso a outras páginas do site. Utilize o código abaixo para construir um menu simples:

<div class="collapse navbar-collapse " id="navbarSupportedContent">

<ul class="navbar-nav mr-auto">

<li class="nav-item">

<a class="nav-link" href="#">Home</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Quem somos?</a>

</li>

</ul>

</div>

Confira o código na IDE:

No navegador, teremos o seguinte resultado:

A seguir, faremos alguns ajustes no título envolvendo-o dentro de uma "div container" e também alterando o "mt-5" para "mt-3". Depois iremos criar um formulário utilizando algumas class do Bootstrap. Para criar o formulário com as class, adicione o código abaixo:

<div class="mb-3">

<label for="exampleFormControlInput1" class="form-label">Email</label>

<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">

</div>

<div class="mb-3">

<label for="exampleFormControlTextarea1" class="form-label">O que mais gostou no Bootstrap?</label>

<textarea class="form-control" id="exampleFormControlTextarea1" rows="4"></textarea>

</div>

<div class="mb-3">

<button type="button" class="btn btn-primary">Enviar</button>

<button type="button" class="btn btn-danger">Voltar</button>

</div>

Confira o código na IDE:

No navegador, teremos o seguinte resultado:

Conclusão

Neste tutorial, vimos que o Bootstrap é uma estrutura de código aberto HTML, CSS e JavaScript (inicialmente criada pelo Twitter) que atualmente podemos utilizar como base para criar sites ou aplicativos da web.

Alleart