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: 24.301 ]

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

12 0

Denuncie Favoritos Indicar Impressora

Template do Bootstrap

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

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

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

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

Como assim sobrescrever? Pensa assim: chamamos o jQuery ali em cima, certo? Na linha de baixo chamamos o bootstrap.js, e como o bootstrap.js depende do jQuery, sempre temos que chamar o jQuery ANTES dele, pra que ele possa usar o que o jQuery traz e sobrescrever.

Alterando o Bootstrap

Mas cara, eu preciso mudar cor do layout, como eu faço? Seguinte, isso que eu ensinei é o "start" pra tua aplicação, tu começa a trabalhar a partir daquilo, certo?

Então, você cria um OUTRO arquivo .css e chama ele DEPOIS do bootstrap.css, pra que ele SOBRESCREVA o mesmo, assim o que tu escreve no TEU 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:

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 pessoal, o que eu queria passar pra vocês era isso. Logo mais eu trago como fazer menu responsivo e outras coisas bastante úteis. Mas tudo o que eu ensinei aqui, aprendi lendo no site do próprio Bootstrap, o qual recomendo muito a leitura de vocês.

http://getbootstrap.com/css

Se eu errei em algo, por favor comentem para que eu melhore nos próximos artigos. Todo comentário é bem-vindo. Qualquer dúvida podem comentar ou entrar em contato comigo pelo e-mail "mateusmuller2@gmail.com".

Um grande abraço.

Página anterior

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

Fundo pontilhado CSS

Automação de tarefas com Gulp

Dicas simples para dar mais usabilidades aos formulários

Verificando a consistência de CPF e CNPJ em um formulário com JavaScript

Verificando a consistência de um formulário com JavaScript

Comentários

[1] Comentário enviado por removido 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