Entenda como funciona o Bootstrap

 O QUE É UM FRAMEWORK

Bom, este artigo se dedica basicamente à iniciantes em desenvolvimento web utilizando o Bootstrap. Meu objetivo é que você entenda como funciona o Bootstrap e como funciona o início do desenvolvimento de uma aplicação com este framework.

O que é um framework?

Um framework, falando de modo simples, é um conjunto de arquivos que você coloca na pasta raíz do seu projeto, e ele trás com si uma gama de funções e/ou efeitos (dependendo do framework) prontos, onde você só terá o trabalho de “chamar” esta determinada função.

O que é o Bootstrap?

É um framework para desenvolvimento front-end (layout do site). Ele vem com um pacote enorme de classes para efeitos, como: deixar seu site responsivo, criar um carrossel de fotos, etc.

CRIANDO NOSSO WORKFLOW

O que é um Workflow?

O Workflow é o nosso “local de trabalho”. São as nossas ferramentas, atalhos, scripts, tudo o que usamos para agilizar o processo de desenvolvimento de uma aplicação.

Quais ferramentas iremos utilizar?

Neste artigo estarei utilizando o SublimeText, abaixo ensino como instalar. Mas fica a critério de vocês, temos vários outros editores de texto como BlueFish, gedit, Brackets, etc… Indico o Sublime por conta dos atalhos.

Você também pode aprender como instalar o Sublime no Linux, de forma mais detalhada, clicando aqui.

O sistema operacional que estou utilizando é o Ubuntu 15.04, porém, vou postar as fotos que estou fazendo em um ElementaryOS. Este modo de instalação do Sublime serve para qualquer distribuição.

Vamos lá, acessem o site do Sublime e cliquem em 32 bit tarball ou 64 bit, dependendo da sua arquitetura (você pode verificar com o comando uname -a).

Entenda como funciona o Bootstrap
Entenda como funciona o Bootstrap

Ele vai baixar um arquivo .tar.bz2, certo? Agora abram o terminal.

Vamos entrar na pasta que contém o programa:

$ cd Downloads

Extrair:

$ tar xvjf Sublime Text 2.0.2.tar.bz2

Remove o tar.bz2:

$ rm -f Sublime Text 2.0.2.tar.bz2

Renomear a pasta Sublime Text 2 para sublime:

$ mv Sub[tab] sublime

Mover a pasta do programa para /usr/local/lib:

$ sudo mv sublime /usr/local/lib/

Voltar para pasta do usuário:

$ cd

Criar link simbólico:

$ sudo ln -s /usr/local/lib/sublime/sublime_text /usr/local/bin/sublime

Entenda como funciona o Bootstrap
Entenda como funciona o Bootstrap
Entenda como funciona o Bootstrap
Entenda como funciona o Bootstrap

O que exatamente nós fizemos aqui? Extraímos o Sublime, movemos a pasta dele para a pasta das libraries (/usr/local/lib/) e criamos um link simbólico (atalho) para /usr/local/bin/. Agora ele está disponível para chamada direto no terminal. Vamos lá então!

Para que ele volte à pasta do usuário:

$ cd

Vai chamar o link simbólico que criamos no “/usr/local/bin”:

$ sublime

Entenda como funciona o Bootstrap
Entenda como funciona o Bootstrap

BAIXANDO O BOOTSTRAP

Acesse o site do Bootstrap e clique em Download Bootstrap.

Ele vai baixar um arquivo .zip, até aí tudo certo? Ok, vamos extrair ele agora.

Podemos ver que ele nos traz 3 pastas.

A estrutura é bem simples:

  • JS – JavaScript – Pasta onde você coloca seus .js, para controle dos eventos no HTML.
  • CSS – Cascade Style Sheet – Pasta onde ficam seus arquivos de estilo (para colorir o HTML, mudar o tamanho e assim por diante).
  • Fonts – Onde você vai colocar suas fontes.

COLOCANDO EM PRÁTICA

Vamos lá! Primeiramente vamos abrir o Sublime…

Agora, no menu superior, clicamos em:

View -> Syntax -> HTML

Obs.: No Sublime, quando selecionamos a sintaxe, ele já traz uma gama de atalhos que podem agilizar nosso desenvolvimento.

Exemplo (com a sintaxe HTML selecionada):

Digitem html e apertem a tecla tab. Ele vai criar uma estrutura html básica pronta, certo?

Assim temos vários atalhos como: div, h1, h2, link, script (digitem essas palavras e apertem “tab”).

Ok, agora vamos criar um arquivo chamado “index.html” com o seguinte conteúdo, e salvar dentro da pasta da nossa aplicação:

<html>
<head>
   <title></title>
</head>
<body>
  <div class=”container”>
    <div class=”jumbotron”>
      <button class=”btn btn-primary”>Salvar</button>
    </div>
  </div>
</body>
</html>

Nossa estrutura de pastas vai ficar assim:

/nomedoprojeto
         /css
         /js
         /fonts
         index.html

Entenda como funciona o Bootstrap
Entenda como funciona o Bootstrap

Mas, o que eu escrevi neste index.html? Entenda que o Bootstrap trabalha com classes, nós simplesmente chamamos o nome dessas classes e elas aplicam algum efeito. Vamos abrir esse index.html no browser então. Podemos ver que não acontece nada, porque nos não chamamos o arquivo de efeitos do Bootstrap. Vamos dentro da tag <head> e digitar:

<link rel=”stylesheet” type=”text/css” href=”css/bootstrap.css”>

Salvem e abram no browser.

Agora ficou bom, né? Então, essa é a estrutura. Nada de mais. Se vocês perceberem, ele já ficou responsivo também, diminuam o browser pra testar.

TEMPLATE DO BOOTSTRAP

Bootstrap recomenda um template básico e padrão, você podem conseguir aqui:

Pra você fazer o controle dos componentes, efeitos para descer a tela e outros, você precisa do JavaScript, então você coloca dentro do <head> isso aqui também:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script> 
<script src=”js/bootstrap.min.js”></script>

Assim você chama o jQuery e sobrescreve o jQuery com o bootstrap.js.

Como assim, sobrescrever? Veja bem, chamamos o jQuery ali em cima, certo? Na linha de baixo chamamos o bootstrap.js, e como o bootstrap.js depende do jQuery para funcionar, sempre temos que chamar o jQuery ANTES dele, pra que ele possa usar as funções que o jQuery traz e sobrescrever.

ALTERANDO O BOOTSTRAP

Mas, cara, eu preciso mudar a cor do layout, como eu faço? Seguinte, isso que eu ensinei é o start pra sua aplicação, você começa a trabalhar a partir daquilo.

Então, você cria um OUTRO arquivo .css e chama ele DEPOIS do bootstrap.css, para que ele SOBRESCREVA o mesmo, assim o que você escreve no SEU arquivo vai valer MAIS do que o do bootstrap.

Exemplo: crie um arquivo chamado meucss.css e coloque dentro da pasta css. Dentro do arquivo vai ter o seguinte código:

.btn {
   background-color: red;
   border-color: red;
}

Agora vamos editar o index.html para chamar o “meucss.css”, ficando assim:

<head>
<link rel=”stylesheet” type=”text/css” href=”css/bootstrap.css”>
<link rel=”stylesheet” type=”text/css” href=”css/meucss.css”>
<title></title>
</head>

     

Obs: Lembre-se que estamos chamando o “meucss.css” DEPOIS do nosso “bootstrap.css”.

Abra o arquivo index.html no browser agora, você vai ver que mudou a cor do botão.

CONCLUSÃO

Bom, espero que com este artigo você entenda como usar o Bootstrap. Mas tudo o que eu ensinei aqui, aprendi lendo no site do próprio Bootstrap.

 

Se tiver alguma dúvida ou sugestão de conteúdo, por favor, entre em contato aqui ou comente abaixo!