O Twitter Bootstrap é um framework para criação de Html front-end. Ele foi criado em Css. Ou seja a maneira antiga de usar o css foi deixada de lado, em nome da agilização do trabalho de desenvolvimento. Usar uma imagem nomeando cada item, como width, height, left, right, etc, ficou mais fácil com o bootstrap.
Ao desenvolver um projeto web, tornou-se imprescindível pensar em navegação, desenvolver padrões e estar preparado para novos tipos de telas e todo tipo de mudanças. Criando um "tema" para a interface, (formulários, botões, etc) e usá-los quando necessário. Com isso o trabalho fica mais produtivo e novas telas passam a serem criadas facilmente. O Twitter Bootstrap veio para ajudar na produtividade, retirando uma parte do trabalho, assim a atenção poderá voltar-se para o que está sendo desenvolvido. O Twitter Bootstrap foi projetado para auxiliar desenvolvedores client-side ou back-end. Ele foi feito para navegadores modernos, mas, funciona do Internet Explorer 7 pra frente.
Para trabalhar com o bootstrap faça o download em Globocom Bootstrap. Ele é em português e não difere em nada do padrão. Proceda da seguinte forma: Crie um projeto com um arquivo chamado index com a extensão html e uma pasta css. Obs: Essa pasta deve ficar separada dos arquivos de download, pois isso facilitará o trabalho de substituição, ao ser lançada uma nova versão.
Todos os plugins JavaScript do Bootstrap requerem a Biblioteca jQuery para funcionar, por isso deverá ser incluida nos projetos.
Depois de feito o download conserve os arquivos com a versão min; exemplo bootstrap.min.css e delete os outros arquivos, que são a mesma coisa, só que bem maiores. Faça isso com os arquivos css e com os arquivos js.
Sempre que for criado um conteúdo dentro de body, cria-se uma div com uma classe container. (Essa classe é responsável pelo alinhamento do layout). Dentro a marcação será de 960 grids de largura. Nesse container cria-se uma div com uma class chamada "row" (linha em português) sendo essa regra obrigatória. Note que existe um espaçamento de 30px entre as colunas. Sistema de Grid. Veja os exemplos abaixo:
Para trabalhar com 12 colunas se elas fossem iguais seria feita uma divisão por 12. Teríamos então uma linha com 12 colunas. O exemplo a seguir será a título de esclarecimento. Na prática não se faz um site com 12 colunas iguais.
No Html: <div class="container-fluid"> <div class="row-fluid"> <div class="span1 bloco1">1</div> <div class="span1 bloco2">2</div> <div class="span1 bloco1">3</div> <div class="span1 bloco2">4</div> <div class="span1 bloco1">5</div> <div class="span1 bloco2">6</div> <div class="span1 bloco1">7</div> <div class="span1 bloco2">8</div> <div class="span1 bloco1">9</div> <div class="span1 bloco2">10</div> <div class="span1 bloco1">11</div> <div class="span1 bloco2">12</div> </div> </div>
Na folha de estilo: .bloco1{ background-color:#B4CD82;} .bloco2{ background-color:#F4F8ED;} .bloco3{ background-color:#778899;} .bloco4{ background-color:#FFFF66;}
Para trabalhar com 3 colunas se elas fossem iguais seria feita uma divisão por 12. Teríamos então uma linha com 3 colunas. Veja:
No Html: <div class="row-fluid"> <div class="span4 bloco1">1</div> <div class="span4 bloco2 ">2</div> <div class="span4 bloco1">3</div> </div>
Na folha de estilo: .bloco1{ background-color:#B4CD82;} .bloco2{ background-color:#F4F8ED;}
Para deixar espaço vazio entre as colunas proceder da seguinte forma:
No Html:
<div class="row-fluid">
<div class="span4 bloco3">1</div>
<!--aqui fica um espaço-->
<div class="span4 offset4 bloco4">3</div>
</div>
Na folha de estilo:
.bloco3{ background-color:#B4CD82;}
.bloco4{ background-color:#F4F8ED;}