Entenda o Bootstrap

mateusgabriel

Este artigo é dedicado à iniciantes com desenvolvimento web, qualquer comentário e ajuda é bem-vinda. Aqui vamos aprender a montar nosso workflow e entender como funciona o framework.

[ Hits: 23.104 ]

Por: Mateus Gabriel Müller em 27/10/2015 | Blog: http://4fasters.com.br/

12 0

Denuncie Favoritos Indicar Impressora

Baixando o Bootstrap

Acesse o site:

http://getbootstrap.com/getting-started/#download

e clique em "Download Bootstrap".

Ele vai baixar um arquivo .zip, até aí tudo certo né? 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 - O próprio nome já diz, é 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" 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

Mas, o que eu escrevi? Como eu falei acima, o Bootstrap trabalha com classes, a gente simplesmente chama o nome dessas classes e eles 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:

Salvem e abram no browser.

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

Página anterior Próxima página

Páginas do artigo

   1. O que é um framework
   2. Baixando o Bootstrap
   3. Template do Bootstrap

Outros artigos deste autor

Como compilar o Kernel em qualquer distribuição GNU/Linux

Leitura recomendada

DesignCap - Ferramenta de design gráfico para leigos

Diferenças de sites Web Standards

Detonando robots!

CSS - Manual de Estilo (parte 2)

IBM apresenta Maqetta, uma contribuição open source para HTML5

Comentários

[1] Comentário enviado por lopesjv em 28/10/2015 - 10:22h

Para quem quiser se aprofundar também tem esse livro que a Novatec liberou de graça
http://novatec.com.br/download/ebookMaujor.php

1 0

[2] Comentário enviado por mateusgabriel em 28/10/2015 - 10:26h

[1] Comentário enviado por lopesjv em 28/10/2015 - 10:22h

Para quem quiser se aprofundar também tem esse livro que a Novatec liberou de graça
http://novatec.com.br/download/ebookMaujor.php

Boa! Obrigado pelo comentário lopesjv!

0 0

[3] Comentário enviado por hrcerq em 28/10/2015 - 20:52h

Muito bom o artigo, Mateus.

Gosto muito do Bootstrap porque ele é um framework bem completo e bem documentado.

---

Atenciosamente,
Hugo Cerqueira

0 0

[4] Comentário enviado por mateusgabriel em 29/10/2015 - 08:21h

Eae Hugo, muito obrigado pelo feedback cara, fico muito feliz que tu tenha gostado! Realmente, bootstrap é muito bom.

0 0

[5] Comentário enviado por hrome em 18/01/2016 - 19:52h

Muito bom. Obrigado por compartilhar.

1 0

[6] Comentário enviado por mateusgabriel em 22/01/2016 - 12:27h

[5] Comentário enviado por hrome em 18/01/2016 - 19:52h

Muito bom. Obrigado por compartilhar.

Boa tarde hrome, muito obrigado pelo seu comentário. Fico feliz de poder ajudar!

0 0

[7] Comentário enviado por branfer em 12/04/2017 - 14:46h

Como fazer para o terminal não apresentar mais o aviso (sublime:18141): GLib-CRITICAL **: Source ID 4674 was not found when attempting to remove it
??
Obrigado pela ajuda

0 0

[8] Comentário enviado por mateusgabriel em 12/04/2017 - 17:02h

Eae camarada,
Acredito que tu não precisa de preocupar, parece que é um log do sublime que aparece ali.
Tu tem algum problema na aplicação em si?
Da uma googlada sobre este erro e verifica o que aparece.
Tenta também um apt-get update && apt-get upgrade, porque o erro é no "GLib", ou seja, alguma lib que o sublime usa.

0 0

[9] Comentário enviado por decioaraujo em 13/06/2018 - 16:44h

[1] Comentário enviado por lopesjv em 28/10/2015 - 10:22h

Para quem quiser se aprofundar também tem esse livro que a Novatec liberou de graça
http://novatec.com.br/download/ebookMaujor.php

Não consigo baixar o livro. você poderia me disponibilizar através de outro link?

0 0