preloder

Introdução ao BootStrap

BootStrap é um framework CSS muito popular para estilização de sites e aplicativos móveis. Criado pela equipe do Twitter como uma forma de padronizar a forma com que seus desenvolvedores programassem.

Seu site e sua documentação oficial está disponíveis em http://getbootstrap.com/

A primeira página usando BS

  1. Adicione os arquivos CDN dentro da tag head do seu documento HTML. Os links dos arquivos CND estão disponíveis na página http://getbootstrap.com/getting-started/
    
    
    	
    	
    	
    	
    	
    	
    	
    	   Hero Shop 	
    	
    
    
    
    
    
  2. Todo conteúdo de uma página estilizada com BS deve conter uma DIV com uma classe container. Essa DIV container passará a ser a DIV principal da sua página e nela que irei acrescentar todo o conteúdo do site.
    
    
  3. A DIV Container pode ser dividas em linhas usando a classe ROW
    
    
    Oi, eu sou uma linha dentro de um container.
  4. As linhas (rows) também podem ser dividas em colunas usando a classe COL-MD, mas, deve-se observar que o máximo de colunas que consigo trabalhar são 12.
    
    

    Oi, eu sou uma linha dentro de um container.

    Eu sou a coluna 1
    Eu sou a coluna 2
    Eu sou a coluna 3, note que o total dos col-md deu 12

    O resultado será este;HeroShop1

Todo o sistema de estruturação e organização de conteúdos usando linhas e colunas podem ser consultados na documentação do GRID SYSTEM do BS na página http://getbootstrap.com/css/#grid

Exemplo de um e-commerce

Seguindo os 4 passos mostrados acima, vamos criar uma página simples de e-commerce usando a estrutura de DIVs.



	
	
	
	
	

	
	

	   Hero Shop 	
	



Hello World Shop



Boneco do Homem Aranha

R$ 25,00


Boneco do Batman

R$ 25,00


Boneco do Homem de Ferro

R$ 25,00

O código acima apresenta o seguinte resultado.
HeroShop2

Botão de compra

Os botões do BS seguem a seguinte estrutura:

<button class="btn btn-default" type="button"> Clique </button>

É possível trabalhar com cores de IHC (Interação Humano-Computador) onde o verde chama-se success, o azul primary, o vermelho danger e o amarelo warning conforme mostrado nesta página: http://getbootstrap.com/css/#buttons-options 

O e-commerce com o botão de compra na cor vermelha ficará desta forma (vide linha 30);


Boneco do Homem Aranha

R$ 25,00

Ícones

BS apresenta uma boa coleção de ícones, também chamados de Glyphicons. toda a coleção de Glyphicons podem ser consultada aqui; http://getbootstrap.com/components/#glyphicons

Para acrescentar um ícone de um carrinho de compras no botão usamos o exemplo mostrado na página, através de uma tag SPAN

<button class="btn btn-default" type="button"<span class="glyphicon glyphicon glyphicon-shopping-cart"></span> Comprar </button>

O resultado será:HeroShop3

O resultado será este;

Bordas nas Imagens.

Pequenos detalhes realmente fazem a diferença. O BS oferece algumas classes de estilização conforme exemplos mostrados aqui, http://getbootstrap.com/css/#images

Neste exemplo, vou usar a classe img-thumbnail para criar uma borda envolta da imagem, o código ficará da seguinte forma:


Mais produtos.

Com a estrutura da primeira linha pronta, basca copiar e colar o código para adicionar mais produtos.

Veja o exemplo completo:Exemplo.

download

Deixe seu comentário