Desenvolvimento Web

Tutorial básico de BootStrap, aprenda a usar.

por |Publicado

BootStrap é um popular framework CSS utilizado para estilização de sites e aplicativos móveis. Foi 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, tutorial básico

  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/
    <html>
<head>
	<meta charset="UTF-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1"/>
 
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
	<!-- Optional theme -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
	<!-- Latest compiled and minified JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
 
	<title> Hero Shop </title>	
 
</head>
<body>
 
</body>
  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.
    <body>
<div class="container">
 
</div>
</body>
  3. A DIV Container pode ser dividas em linhas usando a classe ROW
    <body>
<div class="container">
	<div class="row">
		Oi, eu sou uma linha dentro de um container.
	</div>
</div>
</body>
  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.
    <body>
<div class="container">
	<div class="row">
		<p>Oi, eu sou uma linha dentro de um container.</p>
		<div class="col-md-4"> Eu sou a coluna 1 </div>
		<div class="col-md-4"> Eu sou a coluna 2</div>
		<div class="col-md-4"> Eu sou a coluna 3, note que o total dos col-md deu 12</div>
	</div>
</div>
</body>
  5. O resultado será este:tutorial aprenda bootstrap basico

 

Exemplo de uma página de e-commerce usando BootStrap

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

<html>
<head>
	<meta charset="UTF-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1"/>
 
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
 
	<!-- Optional theme -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
 
	<!-- Latest compiled and minified JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
 
	<title> Hero Shop </title>	
 
</head>
 
<body>
<div class="container">
	<div class="row">
		<h1> Hello World Shop</h1>
		<hr>
		<div class="col-md-4" align="center">
			<img src="http://imagens.americanas.com.br/produtos/01/00/item/121944/8/121944892G1.jpg" width="200">
			<br>
			Boneco do Homem Aranha
			<br>
			<h3><strong>R$ 25,00</strong></h3>
		</div>
		<div class="col-md-4" align="center">
			<img src="http://ishop.s8.com.br/produtos/01/00/item/111067/2/111067216_1GG.jpg" width="200">
			<br>
			Boneco do Batman
			<br>			
			<h3><strong>R$ 25,00</strong></h3>
		</div>
		<div class="col-md-4" align="center">
			<img src="http://images.americanas.io/produtos/01/00/item/117340/5/117340535G1.jpg" width="200">
			<br>
			Boneco do Homem de Ferro
			<br>	
			<h3><strong>R$ 25,00</strong></h3>
		</div>
	</div>
</div>
 
</body>
</html>

O código acima apresenta o seguinte resultado.

tutorial ecommerce bootstrap

Como usar os ícones do BootStrap

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á:

 

Bordas nas Imagens com BootStrap.

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:

<img src=“http://imagens.americanas.com.br/produtos/01/00/item/121944/8/121944892G1.jpg” width=“200” class=“img-thumbnail”>

 

Adicionando 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

You may also like