Introdução ao Bootstrap + Mobile First

[Cr4cko 1.149]

Introdução ao Bootstrap + Mobile First

 

Bom, Bootstrap é uma ferramenta que grande parte dos Desenvolvedores Web usam, pois aproveitam seus componentes semi prontos, e um site totalmente responsivo. São conceitos muito requisitados no mercado de TI, pois o objetivo é simplificar o máximo possivel o acesso e a comunicação entre o usuário e o sistema.

Acho que seria bom postar isso, pois vejo hoje em dia diversos sites de jogos sem o conceito mobile first, e as vezes com uma péssima aparência.. Fora o HTML todo estragado, css todo bagunçado e feito na gambiarra.. Enfim, espero que ajude vocês!

 

Bootstrap:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Mobile First

 

A ideia do Mobiles First é que comecemos a desenvolver e planejar projetos web, desde um pequeno site até um grande sistema, primeiramente para dispositivos móveis e somente depois para desktops/notebooks.

 

Eu recomendo você, que nunca usou o bootstrap ou não tem conhecimento dessa ferramenta, que comece com um site do zero, brincando e usando os componentes deles.. Antes de fazer uma modificação em seu site.

 

Vamos começar com o HTML5 simples:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Pronto, você agora tem seu index.html com o bootstrap já rodando. Vamos fazer um teste?

Vamos primeiramente adicionar um Navbar. Vou adicionar um navbar fixo no topo do site, pois eu gosto hehe.

Vá até os componentes do site do bootstrap (

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

) e vá até a aba de Navbar.

Faça suas modificações.

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Beleza, até agora nosso resultado foi este:

 

 

Vamos agora, adicionar um css NOSSO, pois criar um site inteiramente em Bootstrap não tem graça, né?

Crie uma pasta chamada css e crie um arquivo chamado apps.css

Eu vou adicionar um corpo ao site, e deixa-lo afastado do topo, dando um padding-top de 100px.

Nesse corpo, pretendo adicionar 2 grids, tornando o site parecido com blog (2 colunas).

Para isso, precisamos ir até a parte de CSS do Bootstrap (

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

) e dar uma lida nas grids.

 

Gostei do .col-md-8 / .col-md-4, parece que vai ficar legalzinho hehe...

Primeiro vamos adicionar ao apps.css o CORPO do site, para depois adicionar as GRIDS.

Não se esqueça de adicionar o APPS.CSS no HEAD do seu site, se não as classes não vão funcionar hehe..

 

apps.css

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Uma leve observação.. Estou usando porcentagem na largura do site.. Porque?

Simples, como estamos trabalhando com o conceito Mobile First, precisamos desenvolver TUDO

pensando no adaptar do site de acordo com o tamanho do aparelho. Se usarmos pixels, ele terá o mesmo tamanho.

Se usarmos porcentagem, ele sempre irá se adaptar ao layout. Vamos ver um exemplo disso mais para frente.

 

Agora vamos adicionar as GRIDS e ver como fica.

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

E o resultado é este..

 

 

Feio né? Vamos dar uma melhorada nisso? Essa é a hora de você brincar com o Bootstrap.

É simples, apenas copie e cole! Vou adicionar uns painéis (em componentes) para deixar com uma aparência melhor.

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

E vamos ver como está ficando nosso site com Bootstrap...

 

 

Melhor, não é? Bom, a partir dai vocês podem fazer o que quiser!

Lembrando que o inspecionar elemento do Google Chrome ou Firefox é uma ótima

ferramenta! Quer ver? Clique em inspecionar elemento, depois clique na luneta e

clique no titulo do painel que adicionamos, dessa maneira:

 

 

Veja que onde assinalei em vermelho, está a propriedade do css do bootstrap, onde ele determina os atributos

do heading e body do painel. Ou seja, do titulo e da descrição, do painel. Que tal dar uma mudada?

Vamos mudar o titulo, customiza-lo... Vamos copiar o ".panel-default>.panel-heading" e adicionar em nosso css próprio (apps.css)

 

apps.css

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Bom.. vamos ver como ficou?

 

 

Lindo né? hahaha.. Isso não é nem 10% do que o bootstrap oferece.

O Bootstrap tem forms, tables, tem ainda a parte de javascript que nem mencionei,

e diversas outras coisas.. De uma olhada e brinque a vontade, pois é assim que aprendemos!

 

Agora voltando ao conceito do Mobile First, que é desenvolver um site pensando primeiramente em aparelhos móveis,

você acabou de desenvolver um site sem perceber que estava já pensando em aparelhos móveis... quer ver?

Reduz seu navegador do Google Chrome ai.. olha só!

 

 

Gostou? hahaha.. isso é BOOTSTRAP!

 

Vou finalizar o post aqui mesmo, e qualquer dúvida, ou caso queira acrescentar/remover algo

pode comentar que estarei fazendo isso o mais rapido possivel!

Lembrando que não sou e estou longe de ser um professor de Bootstrap/HTML5, apenas estou passando

o que sei, meu conhecimento, adiante.

 

Download do Projeto

 

MediaFire -

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

Mega -

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Creditos: Bootstrap & Cr4cko

[rnxn 2]

Só uma dica: Alguns navegadores possuem ferramentas para testar diferentes resoluções de tela. Eu acho o do Firefox bem melhor (ctrl+shift+m) mas o Chrome também tem, isso evita ter que ficar minimizando/maximizando o navegador pra testar os breakpoints.

[Cr4cko 1.149]

Só uma dica: Alguns navegadores possuem ferramentas para testar diferentes resoluções de tela. Eu acho o do Firefox bem melhor (ctrl+shift+m) mas o Chrome também tem, isso evita ter que ficar minimizando/maximizando o navegador pra testar os breakpoints.

 

Sim cara, também existe outros tipos de sites que podem fazer isso..

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

é um.. Fora que ele também roda sites em localhost, para testes..

Obrigado pela dica, abraços!

['php 9]

Tutorial muito bem explicativo e bem formatado, parabéns.

Vai ajudar bastante pessoas que não manjam muito de bootstrap( eu kk);

[Dotfile 0]

Bem, eu não acho considerar isto como mobile first já que todos os componentes do bootstrap já são responsivos, tanto que nas "print screens" você pôde desenvolver tranquilamente em um tamanho de tela maior que de um dispositivo móvel e ao redimensionar ele simplesmente se adapta, automaticamente.

 

Outro ponto que não gosto no bootstrap é essa nomeação de classes "nojentas" das colunas e linhas. (Ex: col-md-4, col-m-12), gosto de utilizar sistemas de grid que não façam o uso delas e te permitam uma liberdade a mais na hora de criar o seu site responsivo como o

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

(Mas lembre-se de que ele trabalha com pré-processadores como stylus, sass).

 

Bem mas ficou muito bem o tópico e dá pra captar a ideia do conceito muito bem.

 

Uma coisa que gostaria de saber é se da pra aplicar o conceito de design atômico no Bootstrap e se posso alterar a forma como os componentes se comportam? (breakpoints, style, acrescentar transições, etc...)

 

 

 

[Cr4cko 1.149]

Tutorial muito bem explicativo e bem formatado, parabéns.

Vai ajudar bastante pessoas que não manjam muito de bootstrap( eu kk);

 

Obrigado php! xD espero que entenda, qualquer dúvida é só postar ai!

 

Bem, eu não acho considerar isto como mobile first já que todos os componentes do bootstrap já são responsivos, tanto que nas "print screens" você pôde desenvolver tranquilamente em um tamanho de tela maior que de um dispositivo móvel e ao redimensionar ele simplesmente se adapta, automaticamente.

 

Outro ponto que não gosto no bootstrap é essa nomeação de classes "nojentas" das colunas e linhas. (Ex: col-md-4, col-m-12), gosto de utilizar sistemas de grid que não façam o uso delas e te permitam uma liberdade a mais na hora de criar o seu site responsivo como o

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

(Mas lembre-se de que ele trabalha com pré-processadores como stylus, sass).

 

Bem mas ficou muito bem o tópico e dá pra captar a ideia do conceito muito bem.

 

Uma coisa que gostaria de saber é se da pra aplicar o conceito de design atômico no Bootstrap e se posso alterar a forma como os componentes se comportam? (breakpoints, style, acrescentar transições, etc...)

 

 

 

[/color][/size][/font]

 

É, também acho ruim essa questão das grids.. apenas as grids mesmo, porque de resto eu acho tranquilão até..

Porem, respondendo sua pergunta e ja adicionando uma coisa, dá sim para editar estilos e tudo mais.

Ta ai no post, você adiciona a classe presente no bootstrap (através do inspecionar elemento) e faz suas edições..

Sim, o conceito de mobile first é você desenvolver pensando primeiro nos aparelhos móveis, porém o bootstrap com o seu "full responsive"

permite você trabalhar em qualquer tamanho tanto em mobile quanto desktop. Eu acho realmente interessante, pois poupa demais o tempo.

Assim, eu como back-end, vejo isso como uma salvação!

 

Em relação às grids, é só capturar os atributos e criar as suas proprias grids com os nomes que você quiser.. eu mesmo as vezes faço edições nas rows, etc..

Abraços e obrigado pelo feedback <3

[gunzgbl 2]

Belo tutorial.

Só não entendi porque fazer uso do ".corpo", já que no bootstrap existe recipientes para abrigar as grids, container/container-fluid.

[Chimpz 2]

cara, é interessante o uso de ferramentas, mas não indicaria a pessoas que estão iniciando agora, para que não fiquem acomodadas (usar, mas não saber o que está fazendo ao certo), por isso, primeiro aprendam HTML, CSS e JS, simples, depois vejam algumas coisas de responsividade, aprenda as media queries, criar layouts fluidos, adaptáveis e logo após isso, parta para um framework.

Isso com certeza vai dar certo, pois você já vai ter uma boa base.

Eu mesmo uso o Bootstrap apenas para criação de grandes sistemas (como um painel de controle), pois já tem muita coisa pronta e facilita bastante. Mas em caso de sites pequenos, não acho legal utiliza-lo.

 

se quiserem, gosto também do Skeleton e do Foundation. São bons também.

 

em relação ao tópico, ficou muito bom, e gostei da sua iniciativa de trazer tal conteúdo.

obrigado Cr4cko