Bootstrap por onde começar

Bootstrap por onde começar

E aew galerinha, demorei mas tô de volta, pra começar Feliz ano novo, e muita Força e Software Livre na sua vida.

Hoje iniciaremos uma série de artigos sobre o Bootstrap, esse framework front-end bastante utilizado e muito proveitoso, pra começar vamos entender o que é e como funciona esse negócio.

Antes de mais nada bootstrap significa inicialização, e tudo iniciou internamente na equipe do twitter, quando Mark e Jacob construíram uma obra prima e ainda nem sabiam. Em Agosto de 2011 eles resolveram lançar o Bootstrap como Software Livre e de código aberto no GitHub e com isso uma ruma de desenvolvedores do mundo todo começaram a contribuir e rapidamente o Bootstrap se tornou um dos softwares livres mais ativos do mundo. E foi assim que se tornou tão conhecido, tão aclamado, e tão popular.

E como já falei é um framework, sendo assim tem função de auxiliar e agilizar a criação de layouts utilizando estilos CSS já prontos, mas que podem ser tranquilarmente personalizados. Além de estilos, o Bootstrap também possui uma enorme biblioteca de eventos utilizando Javascript/JQuery.

Uma de suas principais características é a responsividade, e é nisso que focaremos nesse primeiro post, mas antes disso vamos logo ver como baixar e aprender a estrutura desse magnífico framework.

Para baixar acesse o site oficial http://getbootstrap.com lá você encontrará a opção para download, você tem 3 opções:

bootstrap - download

A primeira opção é a mais usual, será ela que baixaremos, as outras duas opções é mais voltada pra quem é desenvolvedor front-end, ou quem quer entender como o bootstrap é criado.

Atualmente a versão do Bootstrap é a 3.3.6, sendo que a 4 já está disponível para testes. Após baixar teremos o arquivo bootstrap-3.3.6-dist.zip

vamos descompactar e renomear o diretório para apenas bootstrap, dentro dele encontraremos mais 3 diretórios, observe:

Captura de tela de 2016-01-13 21:18:33

Perceba os 3 diretórios:

  • css: Os arquivos de estilo.
  • fonts: as fontes utilizadas, principalmente a fonte de ícones.
  • js: os arquivos de javascript, precisam do JQuery pra funcionar.

Por enquanto vamos utilizar apenas o arquivo bootstrap.css que se encontra dentro do diretório css, sendo assim criaremos um arquivo index.html dentro de bootstrap, a arvore agora será essa:

Captura de tela de 2016-01-13 21:21:55

Veja o código:

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="utf-8">
        <title> Bootstrap por onde começar </title>
        <link rel="stylesheet" href="css/bootstrap.css">
    </head>
    
    <body>
    </body>
</html>

Perceba que na linha 6 nós definimos o css, que no caso é o do bootstrap. Vamos agora ver se tá funcionando, coloque esse código dentro do body.

<button class="btn btn-primary">
    Teste
</button>

Execute o seu arquivo index.html se aparecer um botão azul parecido com este da imagem é porque deu certo.

Captura de tela de 2016-01-13 21:30:19

Se não tiver dado certo, veja as permissões do arquivo.

Vamos agora entender como o grid do bootstrap funciona, pois bem, o bootstrap utiliza um esquema de 12 colunas, ou seja, ele divide sua tela em exatamente 12 pedaços iguais, sendo que você pode alterar os tamanhos desde que no final somem em 12, por exemplo, 4 pedaços de tamanho 3, 4*3 = 12.

Observe esta imagem:

image011

Viu? Dá pra fazer de várias formas, basta somar 12. Agora lembre-se, as colunas devem ficar dentro de uma linha.

Vamos agora ao teste prático, apague o button e coloque este código dentro do body.

<div class="container"> <!-- Inicio do conteudo do site -->
    <div class="row"><!-- Inicio da linha -->
        <div class="col-lg-4"> <!-- Inicio da coluna de 4 -->
            <div class="alert alert-danger"><br><br></div>
        </div> <!-- Fim da coluna de 4 -->
        <div class="col-lg-8"> <!-- Inicio da coluna de 8 -->
            <div class="alert alert-primary"><br><br></div>    
        </div> <!-- fim da coluna de 8 -->
    </div> <!-- fim da linha -->
</div> <!-- Fim do conteúdo do site -->

Ao executar novamente o index.html se você estiver usando um notebook, monitor, ou TV, com o zoom do navegador em 0, você perceberá que a tela está divida em 2 pedaços, no caso um de cor vermelha ocupa 4 colunas, e o outro de cor azul ocupa 8 colunas, totalizando 12. E a div container é uma classe do bootstrap que dá um espaçamento entre o conteúdo e as margens da tela. Observe:

Captura de tela de 2016-01-15 19:49:41

Alessandro e essas cores? Bem, isso são componentes do bootstrap, explicarei melhor nos próximos posts.

Vamos agora a outro exemplo com 3 blocos, umbora calcular: 3 + 6 + 3 = 12, ok, faremos dessa forma:

<div class="container">
  <div class="row"><!-- Inicio da linha -->
    <div class="col-lg-3"> <!-- Inicio da coluna de 3 -->
      <div class="alert alert-danger"><br><br></div>
    </div> <!-- Fim da coluna de 3 -->
    <div class="col-lg-6"> <!-- Inicio da coluna de 6 -->
      <div class="alert alert-info"><br><br></div>    
    </div> <!-- fim da coluna de 6 -->
    <div class="col-lg-3"> <!-- Inicio da coluna de 3 -->
      <div class="alert alert-success"><br><br></div>    
    </div> <!-- fim da coluna de 3 -->
  </div> <!-- fim da linha -->
</div>

Vejamos como ficou:

Captura de tela de 2016-01-15 19:54:24

Agora irei acessar pelo navegador do smarhphone:

Captura de tela de 2016-01-15 19:54:42

Viu só, responsividade é algo tranquilo com bootstrap, mas Alessandro e se eu quisesse deixar do mesmo jeito quando acessado pelo smarthphone? Certo, vamos primeiro analisar algumas coisas:

<div class="col-lg-3"></div>

Perceba que dentro da div row colocamos nossas colunas, e você deve ter observado que o nome da classe é “col-lg-3”, col de collumns(Colunas), 3 é o tamanho, e esse lg o que é? Bem, esse é o detalhe especial, esse carinha lg define pra qual tela você está preparando o layout, ao todo existem 4:

  • LG: Large(Larga), para telas muito grandes, estilo Full HD.
  • MD: Medium(Média), para telas medianas, netbooks, notebooks, monitores pequenos.
  • SM: Small(Estreita), para telas pequenas, por exemplo, tablet’s.
  • XS: ExtraSmall(Muito Estreita), para telas de smarthphone e celulares.

Vamos então ao exemplo anterior, se quiséssemos que mesmo na tela de smarthphone as colunas ficassem lado-a-lado só precisaríamos adicionar a opção xs às divs, dessa forma ó:

<div class="container">
  <div class="row"><!-- Inicio da linha -->
    <div class="col-lg-3 col-xs-3"> <!-- Inicio da coluna de 3 -->
      <div class="alert alert-danger"><br><br></div>
    </div> <!-- Fim da coluna de 3 -->
    <div class="col-lg-6 col-xs-6"> <!-- Inicio da coluna de 6 -->
      <div class="alert alert-info"><br><br></div>    
    </div> <!-- fim da coluna de 6 -->
    <div class="col-lg-3 col-xs-3"> <!-- Inicio da coluna de 3 -->
      <div class="alert alert-success"><br><br></div>    
    </div> <!-- fim da coluna de 3 -->
  </div> <!-- fim da linha -->
</div>

Veja o resultado:

Captura de tela de 2016-01-15 20:06:01

Lembrando que nesse caso, as telas medianas e pequenas, respectivamente md e sm ficarão com o padrão uma abaixo da outra, pois não definimos col-md e nem col-sm. Mas preste atenção, nem sempre fica legal separar as colunas lado-a-lado para telas muito pequenas. Você também pode misturar, tipo:

<div class="col-lg-4 col-md-5 col-sm-6 col-xs-8"></div>

É isso, o resto vai depender da sua necessidade e criatividade, nos próximos posts falaremos sobre alguns componentes do Bootstrap, essa fodástica ferramenta de apoio aos desenvolvedores.

Aqui encerramos então mais um post, espero ter ajudado, deixem suas críticas, dúvidas, e sugestões nos comentários.

Saudações Livres a todos e até o futuro. 🙂

6 Comentários

  1. Alessandro,
    excelente artigo, também assisti sua oficina sobre bootstrap, e uma fala sua sobre Cultura do software livre no FISL17. Simplicidade com que você transmite conhecimento, torna divertido o aprendizado de coisas complexas. São pessoas como você que engrandecem o a comunidade do Software Livre! Siga firme.

    Responder

Deixe um comentário.