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
- 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>
- 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>
- 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>
- 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>
- O resultado será este:
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.
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.